JSONPでクロスドメインなお知らせリスト
- Category：JavaScript・JQuery
- Date：2014年02月08日
- 0コメント
どうもJETBABY管理人です。
今回はちょっとクリエイター気取りで少し前に使ったテクニックを紹介しましす。
クライアントさんによっては複数のサイト所有していて、でも簡単なお知らせはどのサイトでも同じものをだしたいなんてことがありますよね。
そんなときにつかったテクニック。
案件内容はこんな感じでした。
- 複数のサイトのお知らせを一括更新したい
- サーバーやドメインは別々の複数サイト
- データベースは使わない
さて、どうしよう。
とりあえずCSVとかをjQueryで読み込んで書き出せばいいかなと、思ったのですがそういえばJSONってちゃんと使ったことないなと思ってJSONで作ろうと思ったわけです。
JSONは簡単に言うとJavaScriptベースのデータを扱うためのフォーマットです。
詳しいことはググってください。
で、JSONを呼び出して表示させる、これは大して問題もなくできたわけです。
さて、今回の案件においてJSONはどこかに一つだけおいて、それをいくつものサイトから呼び出すわけですが、これがうまくいかない。
基本的にJavaScriptを使って異なるドメイン間でデータの通信はできない。
さらに調べてみると解決法としてJSONPなるものが。
JSONP、基本はJSONですがクロスドメインでのデータの取得を可能にした形式。
関数にして呼び出すみたいな。
JSONがただのテキストなのに対して、JSONPはJavaScript。
JavaScriptは異なるドメイン間でも呼び出せますね。jQueryなんかをCDNで呼び出しているのと同じことです。
まぁこれは大雑把な説明なんで、その辺は詳しいエンジニアなんか聞いてみると吉ですね。
どんな構成で動作させたか例を挙げると
[サイトA]
├「フォルダ」
│├JSONPを取得して書き出すJavaScript
│└書き出す部分用のCSS
└JSONPの内容を実際に表示させるHTML
[サイトB]
├「フォルダ」
│├JSONPを取得して書き出すJavaScript
│└書き出す部分用のCSS
└JSONPの内容を実際に表示させるHTML
[サイトC]
└JSONPファイル
大体こんな感じで。
サイトCのJSONPファイルの中身を書き換えれば、サイトA、Bともにお知らせがかわると。
さらに利便性あげるのにはサイトCにJSONPファイルを編集する管理画面をPHPかなんかでで作ってあげればいいのですが、今回は割愛。
いちおう今回の動作サンプルも作ってみました。
https://www.jetbaby.net/jsonp/jsonp.html
さて各ファイルで何をやっているか。
先ずはJSONP。
サンプルではnews.jsonという名前で保存しています。
[javascript]
jsonpcall([
{
"date": "1月1日",
"contents": "これは私のブログです。<a href=’https://www.jetbaby.net’ target=’new’ rel=’nofollow’>JETBABY</a>"
},
{
"date": "1月2日",
"contents": "今回はJSONPについて書いています"
},
{
"date": "1月3日",
"contents": "とりあえず動いているがスマートとはいえないかもしれない"
}
]);
[/javascript]
単純に日付と内容をもったデータファイル。
項目は好きに増やせば他の使い方も可能でしょうが今回はこれで。
※データはこの記事用に適当書いたものです。
通常のJSONを関数でくくったような記述です。
jsonpcallの部分が関数名になるわけですが、ここは好きに変えて問題ないです。
※callbackとか書くことがが多いみたい。
次にJSONPを読み込んでHTMLにその内容を書き出すためのjQuery。
サンプルではload_news.jsという名前で保存しています。
[javascript]
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://JSONPファイルを置いた場所/ファイル名.json?callback=?",
dataType: ‘jsonp’,
jsonpCallback: "jsonpcall",
scriptCharset: "utf-8",
error: function() {
$("#newsWrap").append("<p>エラー</p>");
},
success: function(jsondata, datatype) {
$("#newsWrap").prepend("<strong>ニュース</strong>");
$("#newsWrap strong").after(‘<ul id="newsList">’);
for(var i in jsondata){
$("#newsList").append("<li><span>[" + jsondata[i].date + "]</span><p>" + jsondata[i].contents + "</p></li>");
}
}
});
});
[/javascript]
ajax関数でJSONPを取得しています。
他にも呼び出し方はあるんですが、試した中でうまく動いたのがajax関数だったのでこれで。
urlの部分でJSONPファイルの置いてあるパスを記述します。
最後についている?callback=?は必須です。
※ちなみにJSONPはサーバーが対応していない動かないようです。また?callback=?のcallbackの記述もサーバーによって違うことがあるようです。callback関数を指定するクエリなので、そのあたりのことを使うサーバーのマニュアルなんかで調べるといいと思います。
jsonpCallbackの部分ではJSONP内に書いてあった関数名を記述。
後はsuccess以降で取得したデータを好きなように表示してやります。
successの部分がJSONPをきちんと取得できたときにうごく部分ですね。
最後にHTML。
特に何かしているということもないです。
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="NOINDEX,NOFOLLOW" />
<meta name="viewport" content="width=device-width;">
<title>JSONPテスト</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="loading_data/load_news.js"></script>
<link rel="stylesheet" type="text/css" href="loading_data/load_news.css" />
</head>
<body>
<div id="newsWrap">
</div>
</body>
</html>
[/html]
GoogleのCDNからjQueryを読み込んで、その後でさっきのjsを読み込ます。
jsなんかの保存場所は適当に。
あとは、jsと一緒にCSSを用意してJSONPを読み込んだ部分はどのサイトでも同じような見た目になるようにしていますが、これはなくても問題ないです、はい。
ということで複数のサイトで同じお知らせを表示する仕組みができました。
今後はJSONPだけ変更していけばいいので、更新が楽になりますね。
最後に注意しないといけないこと。
JSONPは基本的ただのテキストファイルなので、そのURLに直接アクセスすれば誰でも中身が見えます。
ということで重要な情報などは書かないほうが無難です。
この仕組み自体はセキュリティがしっかりしている訳でもないので、その辺を理解して適材適所で使わないといけないと思います。
Ajax通信は便利ですがセキュリティには気をつけないといけないですね。
そして、このサンプルを使って何か起こっても例によって責任は取れません。
もし使いたいなんて人がいたら、くれぐれも自己責任でお願いします。
※このプログラムを作成するに当たっていろいろなサイトを参考にしたのですが、作ったときはブログも再開していなく記事にする気もなかったので、覚えていません。すいません。
参考にさせていただいたサイトの皆様、ありがとうございました。
では今回はこのへんで。
コメントを残す