HTML5手習い

XMLHttpRequest

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
XMLHttpRequestを使用して、Java ScriptからHTTP通信を行う方法について説明します。XMLHttpRequestで取得したJPEGデータをCanvasに描画します。
講師:
11:14

字幕

このレッスンでは JavaScript から HTTP で通信を行う為の方法であるー XMLHttpRequest の使い方について 説明します それではアセットから canvas_.html と gomoku.jpg という画像ファイルを ホームディレクトリにコピーして下さい ホームディレクトリの中身はこのような形で canvas_basic.html と gomoku.jpg という ファイルが配置されています 今回は HTTP による通信を行いますので HTTP サーバーが必要になります Node の HTTP サーバーを 起動しておきましょう http-server. . (ドット)はカレントディレクトリを意味します 起動してから localhost:8080 それから canvas basic.html を開くと このようなタイトルが表示されるかと思います それでは実際にテキストを編集して XMLHttpRequest を使ってみましょう まずは XMLHttpRequest のインスタンスを 格納する為の変数を定義します それからついでに Canvas と Canvas の Context オブジェクトも取得しておきましょう これで Canvas と Canvas の Context オブジェクトの取得ができました それから XMLHttpRequest の インスタンスを生成する為には XMLHttpRequest という関数を有します これでインスタンスの生成はできました XMLHttpRequest の responseType という プロパティを使えば XMLHttpRequest から 返ってくるデータのデータ型を 指定することができます ここには例えば ArrayBuffer や Text JSON といったものを指定することができます responseType を指定しましょう 今回は画像データを取得して 使用するつもりですので responseType = 'arrayBuffer' で 取得してみます addEventListener で レスポンスが返って来た時のー コールバック関数を指定します 閉じてしまいましたね 再度開きます これでコールバックの指定ができました XMLHttpRequest の open という メソッドを使えば XMLHttpRequest で取得する対象の リソースを指定できます メソッドには HTTP のメソッド get や post put といった値 それから URL には対象の URL を指定します 相対パスであればただ単にファイル名や パスを指定するだけでも OK です それから3番目の async という パラメータがあるのですが これは必ず true を 指定するようにして下さい false を指定してしまうと レスポンスが返ってくるまで アプリケーションが停止してしまいます それでは open で今回は get です そして gomoku.jpg 画像データを取得してみます 3番目は true open の指定ができました そして最後に send メソッドを 使うことによって HTTP でのデータ通信が開始されます send のパラメータには HTTP の body データを指定することもできますが get の場合には通常不要です post や put などの場合にはデータを 送信する必要があるかもしれません そして http の send 省略した場合には null が渡されます そしてここで一旦 レスポンスが返ってくるかどうか 実際に確認してみましょう レスポンスが返ってきた場合には このオブジェクトの status という プロパティに HTTP の status が 入っております 成功の場合は 200 が返ってくるでしょう では Console を開いて実行をしてみます getContext canvasですね canvas の getContext でした 再度ミスを修正して実行 またミスがありました 再度タイプミスを修正して実行すると このように HTTP load の 200 という 値が返ってきました 取得自体は成功しているようです では実際にこの取得したデータを使って 画像を Canvas に描画してみたいと思います まず取得したデータは bytes という 変数に入れます それから生成する画像は cat という変数に 格納することにしましょう そして大切なのはレスポンスが成功したのか どうかを確認することです status が 200 であれば成功です 成功した場合には― typedArray― Uint8 型のtypedArray を生成します typedArray のコンストラクターに ArrayBuffer を渡してやれば その ArrayBuffer をデータの中身として もったデータビュー typedArray が 生成されます そして cat には image 型のデータを生成します image 型のデータ これは img 要素の dom と同じものですね ですので source プロパティに BASE64 化 されたデータを指定することができます BASE64 で指定する場合にはこのように data:image/ イメージのタイプ jpg でしたら jpg そして ; (セミコロン)で区切って エンコードのタイプ この場合は base64 を指定します そして再度 , (カンマ)を付与します この後に実際に BASE64 で エンコードされたデータを入れます エンコードする為には btoa それから btoa に渡すデータは 文字列である必要がありますので String の fromCharCode を apply これでいいですね それから canvas の Context に対して Image データを描画してやります 画像サイズは 300 掛ける 300 ですので 原点を基点にして 300 300 で 描画してみます 実行してみましょう エラーが出ました +(プラス)記号がありませんね またタイプミスですね string をタイプミスしていましたね このように成功すれば この画像が表示されます 因みに こちらの String.fromCharCode の apply という関数が何なのか 分からない方もいるかも しれませんので 説明します この apply というのは JavaScript で 関数を呼び出す為の別の方法です 通常は関数名に丸括弧をつけて そこにパラメータを渡して トジの括弧を書いてやれば 関数を呼び出すことができるのですが このように apply を使うことによって そのパラメータを配列として渡して それをパラメータの引数に 展開することができます どういうことかと言いますと 例えば function f が a b c という数字をとって そして a と b と c を足すような 関数だったとします 通常これは 1 2 3 と 丸括弧をつけてやれば 呼び出すことができるんですが このように f apply を使ってやって 1番目は this object になるものなので 今回の場合 null でいいです 2番目に実際に関数に渡したいパラメータを 配列としてこのように 1 2 3 と書いてやって 呼び出すと このように先程の呼び出しと 同様の効果を得られました このように apply を使えば配列で 関数にパラメータを渡すことができます このレッスンでは XMLHttpRequest を 使ってデータをロードする方法について 説明しました

HTML5手習い

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

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

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

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

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