コース: JavaScript 実践講座：jQueryでGoogle APIを使ってみよう

APIの基本 - jQueryのチュートリアル

コース: JavaScript 実践講座：jQueryでGoogle APIを使ってみよう

1ヶ月の無料トライアルを開始 法人向けサービス

APIの基本

“

このレッスンでは API の基本について学びます。 それではまず API フォルダーを開いて 中にある index.html を Google Chrome で開きます。 開いたらまずページの内容を 見ていきましょう。 まず API とは Application Programming Interface の略です。 元々ウェブの用語ではなく、 システムなどの機能を連携させるために 作られた 入口という概念で用いられてきました。 現在ではウェブ上にある 様々なサービスなどの機能を 自分のサービスでも取り入れるようにできる という仕組みを指していることが多いです。 では１つ例を見てみましょう。 こちらに Practice という 欄がありますが Google Charts API というものを 使っています。 こちらのリンクをクリックしてみると、 このような Google の開発者向けの コンテンツに飛びます。 こういったグラフがありますが マウスをホバーさせると、このように 項目名やパーセンテージなどが 表示されるようになっていますが これは自前で HTML などを 用意しているのではなくて Google の API を使って アンケートを表示しています。 なのでこのデザインなどは Google のサーバー側で処理していて こちら側ではこういった項目名や 数字だけを入力すれば 自動的にグラフが生成できるといったような サービスです。 まずはソースを見てみましょう。 フォルダーに切り替えて、 API というフォルダーの中にある index.html を Sublime Text でも開いてみましょう。 本来グラフを生成するということは 非常に大変な仕組みですが Google が提供している ３８行目にある、 Google の jsapi という所が あります。 これを外部から読み込んでおけば グラフの生成はそちらに任せて 後は設定だけを JavaScript で 書いてあげることで グラフが自動的に生成されるという仕組みに なっています。 一見複雑そうに見えますが、例えば 読めるところに着目して 例えば大好きとか 20 とか書いてありますが ここの数字を例えば 50 と打ち変えて 上書き保存をして Google Chrome に戻って 更新を押してみましょう。 そうするとこのように大好きの項目が 50 という風になって パーセントも自動的に計算がされています。 このように、サーバーの仕組みを API によって使わせてもらって そしてこちら側では その設定だけをいじるということで 様々なサービスを連携させることができます。 こういうったサービスを連携させて 色々な仕組みを作っていくことを マッシュアップと言ったりします。 例えば Google マップの API を使えば 位置情報や地図の情報を取得できるので そこにオリジナルのマーカーなどを設置して おいしいものマップみたいなサービスを 作り出すことも可能です。 API は様々なものが公開されています。 Google だけではなくて ソーシャルサービスなども公開されているので 是非調べてみてください。 このレッスンでは API の基本について学びました。

目次