JavascriptでJSONPにクロスドメインアクセスし配列からランダムに文章を取り出して表示するサンプル

posted in 01:05 2009年12月10日 by 涼微
Comments(0) TrackBack(0)   WEB・インターネット  プログラミング このBlogのトップへ 前の記事 次の記事
クロスドメインで非同期に任意の場所にあるデータを呼び出すことが可能になると、様々なページで汎用的にデータを取り出して使用することができます。

ことブログに関してはそういった操作を行いたい場合に、プログラミング言語の選択肢として大抵の場合においてJavascriptを使うしかありません。

ということで、自分のブログにもクロスドメインデータを取り出す仕組みを利用するために、Javascriptの関数として呼び出すことでクロスドメインにデータを扱えるJSONPを使って、JSONPデータの配列からランダムに任意の文章を取り出すプログラムを書きました。

まずは、下記のような配列形式のJSONPファイルをつくります。

callback({"word" :
["ラッセルは、熱心な反戦反核の運動家で、九十代になっても街頭に出て、デモ、集会、座り込みの先頭に立ち、警察に逮捕投獄されることを辞しませんでした(八十代で一週間投獄されていたこともある。)http://www.amazon.co.jp/exec/obidos/ASIN/4163686800/isbn1-22/'>ぼくの血となり肉となった五〇〇冊 そして血にも肉にもならなかった一〇〇冊 p100",
"「迷ったときほど、先を見よ」私から見れば、二十年先、三十年先の未来を予測することよりも。二年先、三年先の短期的なビジョンを見通すことのほうが、ぶれ幅が大きく、難しい。 http://www.amazon.co.jp/exec/obidos/ASIN/4584131511/isbn1-22/'>孫正義 世界20億人覇権の野望 p7",
"生まれよりも育ちが大切だという説明を好む傾向は、古くからの偏見を正すのに役立つため社会的にも有益だった。しかし残念ながら、今日ではそれが少し行過ぎてしまっている。政治的公正さが大流行している昨今、差異の遺伝的基礎について考えることすらやりにくい状況が生まれいる http://www.amazon.co.jp/exec/obidos/ASIN/4062121727/isbn1-22/'>DNA p458",
"無矛盾性=どの定理も(ある想像可能な世界で)正しいと解釈できる場合。完全性=(ある想像可能な世界で)正しく、しかもそのシステム内で「よい列」として表現できる文がすべて定理である場合。 http://www.amazon.co.jp/exec/obidos/ASIN/4826901259/isbn1-22/'>ゲーデル,エッシャー,バッハ―あるいは不思議の環 p116"
]
});


一番始めの、「callback」と記述してある部分は関数の名前として使えるものなら何でも使用でき、「word」や「""」で囲まれた文書の部分はそれぞれ使用する際に適したように書き換えてください。

そして、このJSONPファイルを適当に呼び出し可能な場所におきます。私はXREAにレンタルサーバーを借りているので、http://www.ryoubi.com/jsonData.jsonpに置きました。

次に、上記のJSONPファイルを呼び出すためのJavascriptをブログの呼び出したい場所に下記のように記述します。

<script type="text/javascript">
<!--
function callback(json){
n = Math.floor(Math.random()*json.word.length);//配列の長さを元に乱数を生成し、変数に代入する
document.write(json.word[n]);
}
//-->
</script>
<script type="text/javascript" src="http://www.ryoubi.com/jsonData.jsonp"></script>


「callback」「word」の部分には、先程JSONPファイルに書いた各々の対応する文字を記述し、「json」の部分には新たに自分の好きな文字を入力します。最後に、最終行にJSONPファイルを置いたurl先を入力したら完成です。

そして、上記の通りに作ったプログラムの動作サンプルがこのブログの題名の下にある文章です。ページを更新すると、ランダムで文章が変わる様子を観察することができます。




スポンサーリンク


雑書文評記 TOPへ

トラックバックURL

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
サイト内検索
トラックワード
あわせて読みたい


フィギュア動画
ブログパーツ