JETBABYHOMEABOUTWPの使い方JSONPでクロスドメインなお知らせリストCategory:JavaScript・JQueryDate:2014年02月08日0コメントどうもJETBABY管理人です。今回はちょっとクリエイター気取りで少し前に使ったテクニックを紹介しましす。クライアントさんによっては複数のサイト所有していて、でも簡単なお知らせはどのサイトでも同じものをだしたいなんてことがありますよね。そんなときにつかったテクニック。案件内容はこんな感じでした。複数のサイトのお知らせを一括更新したいサーバーやドメインは別々の複数サイトデータベースは使わないさて、どうしよう。CSVとかをjQueryで読み込んで書き出せばいいかなと、思ったのですがそういえばJSONってちゃんと使ったことないなと思ってJSONで作ろうと思ったわけです。JSONは簡単に言うとJavaScriptベースのデータを扱うためのフォーマットです。詳しいことはググってください。JSONを呼び出して表示させる、これは大して問題もなくできたわけです。今回の案件においてJSONはどこかに一つだけおいて、それをいくつものサイトから呼び出すわけですが、これがうまくいかない。基本的にJavaScriptを使って異なるドメイン間でデータの通信はできない。調べてみると解決法としてJSONPなるものが。JSONP、基本はJSONですがクロスドメインでのデータの取得を可能にした形式。関数にして呼び出すみたいな。JSONがただのテキストなのに対して、JSONPはJavaScript。JavaScriptは異なるドメイン間でも呼び出せますね。jQueryなんかをCDNで呼び出しているのと同じことです。これは大雑把な説明なんで、その辺は詳しいエンジニアなんか聞いてみると吉ですね。│├JSONPを取得して書き出すJavaScript│└書き出す部分用のCSS└JSONPの内容を実際に表示させるHTML[サイトC]└JSONPファイル大体こんな感じで。サイトCのJSONPファイルの中身を書き換えれば、サイトA、Bともにお知らせがかわると。利便性あげるのにはサイトCにJSONPファイルを編集する管理画面をPHPかなんかでで作ってあげればいいのですが、今回は割愛。いちおう今回の動作サンプルも作ってみました。https://www.jetbaby.net/jsonp/jsonp.htmlさて各ファイルで何をやっているか。サンプルではnews.jsonという名前で保存しています。"これは私のブログです。"とりあえず動いているがスマートとはいえないかもしれない"}]);[/javascript]単純に日付と内容をもったデータファイル。項目は好きに増やせば他の使い方も可能でしょうが今回はこれで。※データはこの記事用に適当書いたものです。通常のJSONを関数でくくったような記述です。jsonpcallの部分が関数名になるわけですが、ここは好きに変えて問題ないです。※callbackとか書くことがが多いみたい。次にJSONPを読み込んでHTMLにその内容を書き出すためのjQuery。サンプルではload_news.jsという名前で保存しています。"</p></li>");}}});});[/javascript]ajax関数でJSONPを取得しています。他にも呼び出し方はあるんですが、試した中でうまく動いたのがajax関数だったのでこれで。urlの部分でJSONPファイルの置いてあるパスを記述します。最後についている?callback=?は必須です。※ちなみにJSONPはサーバーが対応していない動かないようです。?callback=?のcallbackの記述もサーバーによって違うことがあるようです。callback関数を指定するクエリなので、そのあたりのことを使うサーバーのマニュアルなんかで調べるといいと思います。jsonpCallbackの部分ではJSONP内に書いてあった関数名を記述。後はsuccess以降で取得したデータを好きなように表示してやります。successの部分がJSONPをきちんと取得できたときにうごく部分ですね。何かしているということもないです。id="newsWrap"></div></body></html>[/html]GoogleのCDNからjQueryを読み込んで、その後でさっきのjsを読み込ます。jsなんかの保存場所は適当に。あとは、jsと一緒にCSSを用意してJSONPを読み込んだ部分はどのサイトでも同じような見た目になるようにしていますが、これはなくても問題ないです、はい。いうことで複数のサイトで同じお知らせを表示する仕組みができました。今後はJSONPだけ変更していけばいいので、更新が楽になりますね。最後に注意しないといけないこと。JSONPは基本的ただのテキストファイルなので、そのURLに直接アクセスすれば誰でも中身が見えます。いうことで重要な情報などは書かないほうが無難です。この仕組み自体はセキュリティがしっかりしている訳でもないので、その辺を理解して適材適所で使わないといけないと思います。Ajax通信は便利ですがセキュリティには気をつけないといけないですね。このサンプルを使って何か起こっても例によって責任は取れません。使いたいなんて人がいたら、くれぐれも自己責任でお願いします。※このプログラムを作成するに当たっていろいろなサイトを参考にしたのですが、作ったときはブログも再開していなく記事にする気もなかったので、覚えていません。参考にさせていただいたサイトの皆様、ありがとうございました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(C)JETBABY。