HTML5 API入門

XMLHttpRequest Level 2を使ったクライアントの実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
XMLHttpRequest Level 2を使ってファイルをアップロードするアプリケーションにおける、クライアント側の実装について学びます。
講師:
14:49

字幕

このレッスンでは、Xmlhttpリクエストレベル2の、 クライアント側の実装について学びます。 Html5では、Ajaxの動作について、 いくつかの大きな改善が行われました。 Ajaxを使うと、ウェブページからサーバーに、 非同期で通信することができます。 現代のウェブアプリケーションでは、 広く使われている技術です。 Ajaxの基幹技術である、 Xmlhttpリクエストレベル2には、 二つの新機能があり、第一の特徴は、 イベントモデルです。 Xmlhttpリクエストレベル1では、 Readystatechangeという、 一つのイベントだけがありました。 Xmlhttpリクエストレベル2では、 よりきめ細やかな方法で、 進行情報を監視するために追加された、 いくつかのイベントがあります。 そして第二の大きな変化は、 Html5でAjaxを使って、 サーバーにファイルをアップロードできる ということです。 アップロード先は、ウェブページが 読み込まれたサーバーだけではなく、 別のドメインにもできます。 これはCrossOriginRequestsと呼ばれる Html5の新機能です。 このサンプルでは、二つのファイルがあり、 一つはブラウザで開くウェブページです。 そして二つ目は、Xmlhttpリクエストレベル2をウェブページサポートする、 ウェブサーバーとして、パイソンで書かれた、 ウェブサーバーです。 このレッスンでは、クライアント側について 説明しますが、 その実行のためには、ウェブサーバーを実行 しておく必要があります。 まずサーバーの実行について紹介します。 これが実行する必要のあるコマンドです。 私のPCでは、すでにパイソンを インストールしています。 もし、マックをお使いの場合は、パイソンは デフォルトでインストールされています。 もしウィンドウズをお使いで、パイソンを まだインストールしていない場合は、 python.orgというウェブサイトから、 インストーラをダウンロードすることができます。 インストーラを使えば簡単に パイソンをインストールすることができます。 この時ダウンロードするパイソンの、 メジャーバージョンは2を選びましょう。 現在のパイソンの最新メジャーバージョンは 3ですので、 この点に注意してください。 パイソンがインストールできたら、 ウィンドウズであればコマンドプロンプト、 マックであればターミナルを開き、 サンプルファイルが置かれた ディレクトリに移動します。 実行するコマンドの最初は、pythonで始まり、 半角スペースを挟んで、 実行するウェブサーバーである、 CORSServer.py、このファイル名、 このファイル名を指定します。 そして半角スペースを挟んで、 このサーバーを実行するための、 ポート番号9999を指定します。 なお、ウィンドウズでインストーラを使って パイソンをインストールした時、 パイソンの実行環境へのパスが、 ウィンドウズのシステム環境変数に 登録されていない場合があります。 その時、このpythonというコマンドが、 実行されないことがありますので、 その場合は、パイソンをインストールしたパスを 頭につけてあげましょう。 例えば、多くの場合、ウィンドウズで パイソンをインストールすると、 デフォルトでは、Cドライブのpython27 というディレクトリにインストールされますので、 このようにコマンドを書き換えて実行すると、 システム環境関数ににパイソンの 実行パスがない場合でも、 パイソンを実行することができます。 ここでは特にこの指定は必要ありませんので、 削除して、もとのままのコマンドで、 実行します。 これで、パイソンのサーバーが ポート9999で動作するようになります。 さて、すでに開いているブラウザに 切り替えて、 クライアント側のウェブページを 見てみましょう。 URLを見ると、localhostの ポート番号63342で 実行されていることがわかります。 ローカルにウェブサーバーを起動し、 そこを通じて実行されている状態です。 先ほど起動したパイソンのウェブサーバーは、 localhostのポート9999で 実行されていますので、Htmlが置かれている ウェブサーバーと、 パイソンが実行されているウェブサーバーは、 別々のものとお考えください。 このウェブページでは、ファイルを選択して、 サーバーに非同期で アップロードができる、Xmlhttpリクエストレベル2の イベントモデルを持っています。 アップロードの前に、アップするファイルを 選択する必要がありますが、 このファイルを選択する仕組みも、 Htmlファイルで提供される、 新しいファイル制御機能です。 ここでは、予め用意しておいたHahnenkamm.jpg という画像を選択します。 「開く」をクリックします。 続いて、アップロードボタンを クリックすると、 アップロードの進捗が表示されている ことがわかります。 これが冒頭でご説明した、 Xmlhttpリクエストレベル2の新機能です。 対して、レベル1では、アップロード中の 進捗を取得することはできません。 ダウンロード中にreadstatechangeイベントが 発生するだけです。 しかしレベル2では、 このように進捗情報をチェックすることができます。 それでは、実際にどのようにコードが 動いているのか確認をしてみましょう。 このHtmlをeditorで開いてあります。 始めにHtmlがブラウザ上で、 どのように見えるかをお見せするために、 コードの一番下まで、スクロールします。 インプット要素があり、タイプ属性に ファイルが指定されています。 これがHtml5で、ファイルをコントロールするための 新機能です。 アップロードしたいファイルを選択し、 このボタンをクリックした時、 アップロードが開始されます。 そして、アップロードの進捗情報を表示するために、 二つの要素があります。 まずこちらも、Htmlで新しく追加された、 プログレス要素は、 範囲を指定して、進捗状況を 表示できます。 ここでは0から100の間です。 そしてスパン要素は、進捗状況を テキストで表示します。 もう一度アプリケーションを実行してみましょう。 ブラウザに戻ります。 ファイルを選択し、Hahnenkamm.jpg そしてアップロードボタンをクリックして、 進捗状況を示すプログレスバーが 表示されます。 ここがスパン要素です。 editorに戻りましょう。 これら、二つの要素は、今何が 起こっているかについて、 視覚的に表示を行います。 ウェブページが読み込まれると、 こちらの最初に実行されるコードは onload関数です。 ここでは、アップロードボタンの、ボタンの クリック処理について 処理を行っています。 そして先ほどの、進捗状況を示す 二つの表示要素を取得し、 グローバル変数に格納します。 アップロードボタンをクリックすると、 こちらの上にある、doStartUpload関数が 実行されます。 この関数の中では、繰り返しアップロードが 実行されても 問題がないように、初めに、 進捗状況を示す表示要素をクリアします。 続いて、インプット要素による、 ファイル制御を取得し、 ユーザーがアップロードする任意のファイルを 選択していない場合は、 エラーメッセージを表示しています。 もし選択していれば、ファイルを メモリに読み込んでいることを示すために、 メッセージを表示します。 そして、Html5で提供されている、 新しい、ファイルリーダーオブジェクトを使って、 実際にファイルをメモリに読み込みます。 この処理では、ファイルがメモリに 読み込まれたことが、 完了したことを知るために、 イベントハンドラーを設定する必要があります。 メモリへの読み込みが完了すると、 doUpload関数を読んでいます。 実際のコードで解説すると、 これがファイルを読み込むための ファイルリーダーオブジェクトです。 そしてこの関数は、指定されたファイルを 読み込みます。 ファイルはメモリの中に、 ArrayBufferというバイナリデータを 文字列にしたものとして 読み込まれます。 そして、メモリへの読み込みが 完了すると、 このdoupload関数が実行されます。 この関数の中ででは、Ajaxが 動いています。 まずファイルをサーバーにに アップロードしようとしている旨の メッセージを表示します。 少し下にスクロールします。 そしてここで、Xmlhttpリクエストオブジェクトを 作成しています。 これは、Ajaxのために必要な オブジェクトです。 このレッスンの冒頭で、Html5では、 Xmlhttpリクエストオブジェクトに対する、 イベントが追加になった、 と説明しました。 下のほうからコードを見てみましょう。 まずエラーイベントです。 アップロード時に何かがうまくいかない場合は、 エラーメッセージを表示します。 例えば、アップロード先のサーバーが、 一時的に利用できない時が あるかもしれません。 そんな時に、 エラーメッセージが表示されます。 アップロード、またはダウンロードが 終了したときに呼び出されるのは、 onLoadイベントです。 その上の二つのイベントは、 データをアップロード またはダウンロード時に、進捗を 取得するためのイベントです。 クライアントからサーバーにアップロード するときは、 こちらが進捗イベントを処理する方法です。 Xmlhttpリクエストオブジェクトによって、 onPogressイベントが発生しつつ、 アップロードが行われます。 このイベントは、進捗をチェックするために、 アップロードの進行中に、 連続的に呼び出されます。 イベントオブジェクトは、 二つのプロパティを持っています。 すでにサーバーにアップロードされた バイト数と、 ファイル全体のバイト数です。 そのため、アップロード済みのデータが、 どの程度のパーセンテージなのかを 把握するために、 計算処理を行っています。 そして、プログレスバーの表示を 更新するために、 そのパーセンテージを使っています。 さらに、メッセージも更新します。 もし、アップロードではなく、 ダウンロード中のデータについて 進捗を取得したい場合、 uploadOnProgressイベントではなく、 単にonProgressイベントを 使います。 そして同じように、イベントオブジェクトから、 アップロード済みのバイト数や、 全体のファイルサイズの バイト数などを取得します。 ここまで、Xmlhttpリクエストレベル2によって、 新しいイベントを処理してきました。 これらを使って、アップロードの 状況を取得しています。 続いて、サーバーへの、 アップロードのリクエストを作ります。 リクエスト先は、すでにグローバル変数に、 定義していますので、 ここではその変数、ターゲットロケーションを 指定します。 アップロード先であるターゲットロケーションは 上の定義を確認すると、 http://localhost:9999/uploadが http://localhost:9999/uploadが 指定されています。 これは冒頭にセットアップした、 パイソンサーバーを示しています。 そして第一引数には、 データのポストを行うために、post, 第三引数には、非同期としての リクエストを示す、trueを、示します。 ここでポストされるのは、先ほど選択した ファイルのデータです。 このレッスンでは、Xmlhttpリクエストレベル2の、 クライアント側の機能についてみてきました。 まず、クライアントから、サーバーに データをアップロードする方法について 学びました。 また、アップロードやダウンロードの 進捗状況などの、 イベントを処理する方法についても 学びました。

HTML5 API入門

HTML5は今やインタラクティブコンテンツを作るうえでかかせないものです。このコースでは膨大なHTML5の仕様の中からWebアプリケーションを作成するうえで便利な機能を紹介していきます。コミュニケーション系APIの使い方のほか、Web WorkersやWebSocket、モバイル用アプリの制作で使うjQuery Mobileなどについても解説します。

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

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

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

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