スクリプトを書く
今回は前回の続きでWikipedia検索のガジェットの実装です。前回はガジェット本体の見た目の部分を作ったので,今度は実際に検索ボタンを押して検索,結果の表示の動作をするJavaScriptを説明していきます。
SimpleAPIのWikipedia検索を使ってみる
SimpleAPIとWikipediaAPIの説明
Wikipediaを検索するガジェットであるため,どうにかしてWikipediaを検索させるのですが,実のところWikipedia自体は検索するためのAPIを提供してはいません。
そのため「APIを使って検索できない(=一筋縄ではいかない)のでは?」となりそうですが,Wikipediaのページ名を検索できるAPIがSimpleAPIサービスでWikipediaAPIとして提供されています。
SimpleAPIとは,WikipediaAPI以外にもウェブサイトのスクリーンショットサムネイルや最寄り駅検索のためのAPIを無償で公開しているWebサービスです。SimpleAPIで公開されているAPIの説明の特徴は,無償で提供されていること,呼び出す方法が簡単であること,レスポンスの形式としてXMLやJSON,PHPシリアライズなど柔軟に選択できることがあります。
今回はこのサービスをありがたく利用させていただき,ガジェットから検索することにします。
- 注意)
- SimpleAPIのサービスはAPIの説明にあるとおり無保証であり,予告なく終了する可能性があります。
検索結果を取得する関数を作る
まずは,検索して検索結果を取得する関数を作成します。search("検索文字列");とすると,検索結果が戻るような関数です。
具体的な処理内容は検索文字列を受け取って,XMLHttpRequestを利用してWikipediaAPIを呼び出し,検索結果のレスポンスを返す,となります。
関数が返す値はSimpleAPIはレスポンス形式にJSONを選択できるので,手間を省く意味でもそれを評価してそのまま返すということにします。
- XMLHttpRequestって何?
Ajaxがどうと話題だった昨今,XMLHttpRequestを知らないという人はあまりいないのではないかと思いますが,JavaScriptからHTTPのリクエストを行うための仕組みのことです。なお,Webブラウザから利用する場合には同ドメイン内のみへリクエストできるという制限がありますが,ガジェットから利用する場合にはその制限は受けません。
- JSONって何?
JSONとはJavaScript Object Notationの略称で「JavaScriptの文法を使ったデータ構造表現方法」です。実際にはJavaScriptそのものではなくサブセットなのですが,JavaScriptの形をとるデータを返せばJavaScriptで簡単に読み込むことができるようになるのが特徴です。
例えば,JSONのデータは以下のような形になります。
{ "foo": "hogehoge", "bar": { "gaogao": "hauhau" }, "baz": [ 1, 2, 3 ] }このようなテキストをJavaScriptで受け取って,
var o; eval("o = " + json); // json変数には上記の文字列が入っているなどという形でevalを利用して文字列を評価すると,スクリプトから
o.foo // "hogehoge" o.baz[1] // 1という形で簡単に利用できるようになります。
JavaScript以外の言語からJSONを読み書きするためのライブラリはすでに多く実装されているため,JavaScript以外からも扱いやすくなっています。
実装
ではXMLHttpRequestとJSONの簡単な説明が済んだところで,受け取った引数でWikipediaのページを検索する関数を実装します。
なお今回も,CSSと同じようにHTMLの中に直接書いてしまいます。前回書いたHTMLのstyle要素の下にscript要素を追加して,その中に書いてください。
(略)
</style>
<script type="text/javascript">
</script>
<body>
(略)
まず,関数の外側を書いておきます。引数には検索文字列が来るのでをkeyword変数としておきます。
function search(keyword) {
}
はじめにXMLHttpRequestクラスを使うのでインスタンスを作ります。
var xhr = new XMLHttpRequest();

