HTML5手習い

JSONとWeb API

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Web APIサーバーからJSONを取得して、それをアプリケーションから利用する具体例について学びます。
講師:
12:48

字幕

このレッスンでは JSON を レスポンスとして返す Web API を想定して アプリケーションから Web API を どのように利用するのかを説明します それではアセットから webapi.html と response.json と mugi.jpg mee.jpg gomoku.jpg をコピーしておいて下さい 初めに response.json を テキストエディタで開いてみましょう こちらではターミナルから Vim を使って response.json を開いてみます 勿論お好みのテキストエディタで 開いて構いません 中身を開くと このような テキストファイルが記述されています JSON とは JavaScript の オブジェクトの記法を そのままファイルフォーマットとして 使用したものです JSON によって記述された ファイルや文字列は JavaScript から非常に容易に 扱うことができます それでは コンソールから試してみましょう Chrome を開いて Mac の方は Command + Option + I Windows の方は Ctrl + Shift + I これで Console のタブを開きます JSON とオブジェクトの変換は 大文字の JSON というオブジェクトの parse もしくは― stringify というメソッドを使います 例えば JSON stringify に JavaScript の オブジェクトを渡してみると a b c という3つのキーを持つ JavaScript オブジェクトです これを渡してそのまま実行すると このように記述したオブジェクトが そのまま文字列として 変換されました この文字列は JSON フォーマットに なっています 逆に― 今作成されたこの文字列を コピーして 変数に格納します 中に二重引用符があるので 文字列化する為には 単一引用符で囲まなければ だめでしたね これで文字列になりました これを今度は JavaScript の オブジェクトに戻してみましょう その場合には JSON を JSON の parse で 解析してやれば このように 元々記述したオブジェクト― こちらのオブジェクトですね これと全く同じオブジェクトを 復元することができました 実際にこれは JavaScript の オブジェクトとして使用することができます それでは先程の response.json に戻りましょう 最近の Web API ではレスポンスとして JSON フォーマットで文字列を 返してくるサービスが多いです 例えば今回のレッスンでは あるペットと そして そのペット― 猫の所有者に関する情報を 返してくれるサービスがあると 仮定してみましょう その情報はこのように JSON で記述されていて owner というプロパティに owner の名前 name owner の使用している言語 language owner の住んでいる国 country が記述されていて また別のプロパティ― cats というプロパティに その owner が所有している猫が 配列で記述されています それぞれに対して猫の名前と猫の写真の URL が記述されているとしましょう この API が返してくれる レスポンスの情報を利用して HTML を構築してみます それでは一旦このファイルは閉じて 今度は webapi.html を開いてみます 中身はこのようになっています body タグの中を見ると その中に div タグが配置されており その中に owner の情報を記述する為の タグがいくつか用意されています ul リストの要素が記述されていますが その具体的な中身は リストアイテムの中には 具体的な文字列が まだ何も記述されていません またその下にも div 要素があり id が cats と振られていますが この div 要素も空です これらの空の要素の中に API から取得した 情報を流し込んでみましょう XMLHttpRequest を使用しますので まずは HTTP サーバーの起動からです ターミナルを起動して ls で中身を確認してみます 先程の HTML ファイルや json ファイルが 配置されているディレクトリで http-server. これでサーバーが起動しました アクセスしてみましょう localhost: 8080 の webapi.html 現在のところ このように空ですので 何も表示されません それでは具体的に JavaScript の コードを書いていきましょう まずは XMLHttpRequest の オブジェクトの作成です そして今回はレスポンスのタイプを json に設定しておきましょう このように responseType json と 設定しておくことで レスポンスが自動的に parse 解析されて 最初から JavaScript オブジェクトの形に なって利用できます そして EventListener の設定です load 中身はとりあえず空のままにしておきます そして open で get メソッドで response json を 取得しましょう 最後に send メソッドで送信開始です 送信取得ができたかどうか 確認する為に ログを出力します 実行してみましょう json の取得はできているようです では実際に この json を使って HTML に様々な情報を入れ込んでいきます まず HTTP で何かしら情報を 取得したときというのは エラーの確認をすることが大事です status を見て レスポンスが成功しているかどうかを 確認します 成功している場合のみ 処理を続行するようにします 成功している場合には まず 所有者の名前を入れ込んでみましょう こちらに定義されているリストアイテムの owner name owner country owner language という要素に json から取得した 値を入れてみます getElementById で dom を取得して それから innerHTML で 中身を置き換えましょう json からのレスポンスは XMLHttpRequest オブジェクトの response というプロパティで取得できます 今回は json をタイプとして 指定していますので これはそのまま JavaScript の オブジェクトになっています response の owner の name これは先程の JavaScript の レスポンスの構造に従っています また owner の country は response の owner の country それから owner の language は response の owner の language もう一度 response json を 確認してみましょう このように 今取得して 入れ込んでいる情報は owner の name や owner の language owner の country といった情報です それでは この状態で 1度実行してみましょう 成功していれば この辺りに 情報が付与される筈です 成功しました では 今度は画像を表示してみましょう レスポンスの猫に関する情報は response cats これは配列になっていますので forEach で回します function 各要素は cat という 変数名にしておきます そして dom の img 要素を作ります img 要素の作成は document の createElement メソッドでできます そして img の alt 属性は 猫の名前にしておきます それから src 属性は 猫の写真の URL を設定します そして document の getElement― ById で cats こちらですね こちらの div 要素を取得します div 要素を取得した上で appendChild で img 要素を追加します これで画像の表示ができる筈です できました 要素の検証で確認してみましょう div 要素 の中の ul の リストアイテムに 確かに JavaScript から 読み込んだ文字列が設定されています そして cats div 要素の中には 先程追加したイメージ要素が 追加されています alt 属性もちゃんと 猫の名前になっています このレッスンではアプリケーションから Web API を利用する方法や JSON の使い方について説明しました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。