ブログパーツから動的にパーツデータを取得する

投稿日: 2010/11/15 作成者: masuda

美女Linuxブログパーツ作成企画

ブログパーツをjavascriptだけで作る場合の懸念点 | Moonmile Solutions Blog

http://www.moonmile.net/blog/archives/1530

のところで、クロスサイトスクリプトの問題がなぁ、う～ん、と思っていたのですが、なんじゃ JSONP を使えば簡単にクリア。

これでできる！ クロスブラウザJavaScript入門：第11回　JSONP入門｜gihyo.jp … 技術評論社

http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011

20101115_02.jpg

要するに、JSON でデータを拾えればいいので、callback 関数を用意してやれば良い、という抜け道ですね。最近の javascript の定番です。これを使うと、XMLHttpRequest を使わなくて良いし、結構便利。

詳しい手順なんかは、技術評論社のページを参考にして欲しいのですが、簡単にメモしておくと、

  1. コールバックされる関数を書いておく。
  2. document.write 等で、コールバック呼出しを書き出す PHP をコール。
  3. PHPが、コールバック関数を書き出す。
  4. コールバック関数が呼び出される。
  5. コールバック関数内の処理が行われる。

ってな感じで処理が流れます。

callback.php に

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
callback(
[
 { name: "su",
   desc: "管理者モードになる",
   url: "photo000.png"
 },
 { name: "arp",
   desc: "proxy apr テーブルを表示する",
   url: "photo001.png"
 },
 { name: "route",
   desc: "ルーティングテーブルを表示する",
   url: "photo002.png"
 },
 { name: "shutdown",
   desc: "システムをシャットダウンする",
   url: "photo003.png"
 },
 { name: "sudo",
   desc: "管理者モードで実行する",
   url: "photo004.png"
 },
 { name: "unzip",
   desc: "zipファイルを解凍する",
   url: "photo005.png"
 },
]
);

なるデータを用意しておく。

# このあたりは、実際は、MySQLからデータを引っ張って来て構成ですね。

これを呼出し側の javascriptで

1
document.write("<script src='callback.php'></script>);

 

と書いておいて、

1
2
3
4
5
6
function callback ( items )
{
 for ( var i in items ) {
  items[i] で、それぞれの要素を処理する
 }
}

という訳です。なるほど、こうすると非同期的に動くので後処理なんかは callback 関数内に書けばよいので便利。

これを実装したのが下の例です。

＜サンプル＞

試しに右上に該当するコマンド名を表示させています。

カテゴリー: 開発, ブログパーツ パーマリンク