HTML5 API入門

XMLHttpRequest Level 2を使ったサーバーの実装

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

ぜひご覧ください。

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

字幕

Html5は、ウェブページが最初に うみ込まれたサーバーとは 別のサーバーにリクエストを実行することができる、 Communication APIを持っています。 これは、CrossOriginRequestsと呼ばれ このレッスンではサーバーサイドが どのように実装されているかを学びます。 まずブラウザーで、クライアント側の ウェブページを開きます。 パースでパイソンで実装された、 ウェブサーバーを用意しています。 ウェブサーバーを起動するには、 該当のパイソンスクリプトがあるところで、 ウィンドウズであれば、コマンドプロンプト マックであれば、ターミナルを開き、 このようにコマンドを実行します。 ここではすでに、PCにパイソンをインストールしていますが、 必要に応じて、パイソンをインストールしてください。 マックでは、デフォルトでインストールされています。 エンターキーを押すと、 CORSServer.pyで実装されたウェブサーバーが ポート9999を使って実行されます。 そして、すでにブラウザで開いている、 クライアント側のウェブページを開きます。 このレッスンで重要になるのはドメインです。 このサンプルでは、localhostのポート 63342で実行しています。 そして「ファイルを選択」ボタンをクリックし、 アップロードしたいファイル、 JPEG画像を選択し、 アップロードボタンをクリックします。 これで、データをアップロードするために、 非同期でエージャックリクエストが開始され、 さらに、データのアップロード中に、 何が起こっているかが通知されます。 サーバー上では、何が起こっているかを示すために 様々なメッセージが表示されています。 サーバーにリクエストが発生したとき、 最初のHttpリクエストは、 OPTIONS requestというリクエストになっています。 OPTIONS requestは、ウェブサーバーに クライアントからのリクエストを 受け付けているかどうかを 判断してもらうためのリクエストです。 実際にどのように実装されているかについては、 パイソンをウェブサーバーの実装を見ることで 理解できます。 すでにCORSServer.pyをEditorで開いていますので、 切り替えてみましょう。 これは、パイソンで書かれたアプリケーションですが、 実際にパイソンのプログラミングを 行っていない方でも、あまり心配する必要はありません。 よくあるオブジェクト指向の言語で、 クラスで実装されており、 ここがクラスの名前になっています。 また、基本クラスを継承しています。 この基本クラス、 SimpleHTTPRequestHandlerは、 ほとんどのサーバーサイドアプリケーションで 使われるクラスです。 このクラスの中で、 二つのメソッドを実装しています。 一つは、OPTIONSヘッダーを処理するメソッドです。 そしてもう一つは、ポストされたデータを 読み込むためのメソッドです。 ウェブサーバーが実行されている時、 ブラウザから送られたあらゆる OPTIONS requestは、サーバーに対して、 「あなたは、私と通信できますか?」と訊きます。 このdoOPTIONSメソッドの一行目では、 どのようなリクエストであっても、 そのリクエストがOPTIONS requestである ということをコンソールに出力します。 先ほど、コマンドプロンプトでも、 同じメッセージが表示されていましたよね。 そして、サーバーは、 リクエストに対してOKを出すために ステータスコード200をレスポンスし、 そしてその後、これらのヘッダー情報が クライアントに送られます。 これはサーバーが、クライアントとの通信を 許可するかどうかを示しています。 言いかえれば、サーバーは、「クライアントが、 私の知っているオリジンであれば通信ができますよ。」 と言っているのです。 オリジンは、スキーマ、ドメイン、そして ポート番号で構成されています。 クライアントのオリジンが、ここで指定した 以外のものであれば、 サーバーはクライアントと通信を 拒否します。 また、サーバーはクライアントに、 「ポストを許可しますよ。」 というヘッダーも送り返しています。 これによりクライアントは、 サーバーにファイルをポストできるのです。 そうして、クライアントから送られたポストの 内容が、doPOSTメソッドに到着します。 ここに書かれているのは、パイソンでポストの処理を 実装する方法です。 詳しい内容は、ここでは重要ではありません。 まず一行目で、ポストリクエストを受信した旨の メッセージを出力します。 コマンドプロンプトを開くと、 ここで出力されていることがわかりますね。 その後、クライアントから送信された、 全てのデータを読み込むために、 ループ処理を行っています。 このサンプルでは、JPEGファイルの 全ての内容を、読み込むことになります。 最後に読み込みが完了した、 というメッセージを表示し、 次のデータを送信することができる様に、 クライアントにレスポンスを返します。 ここでいう、xmlhttpリクエストレベル2での 重要な点は、 様々な異なるクライアントからのリクエストを サポートするために、 OPTIONS requestを処理できる、 ということです。 OPTIONS requestはサーバーが どのクライアントと通信できるかを判断します。 このサンプルでは、ポート63342の、 localhostとのみ、許可されていましたね。 それでは、別のドメインからリクエストをしてみると どうなるでしょうか? 実際に、ceroan.jpというドメインに 同じファイルをアップロードしていますので、 こちらからリクエストを実行してみましょう。 別のタブで既に開いている、ceroan.jpのHtmlから、 先ほどと同様に、JPEG画像を選択し、 アップロードボタンをクリックします。 何が起きるかに注目してください。 エラーが発生していますね。 これは、サーバーにOPTIONS requestが送られたとき 許可されているオリジン、つまり先ほど指定していた、 ポート63342の localhost以外からのリクエストであったため、 リクエストが破棄されたのです。 コマンドプロンプトを見ると、やはり 二つ目のOPTIONS requestが送られていますが、 ポストされたメッセージは 受け取っていません。 このように非常に堅郎なメカニズムに なっています。 柔軟性を保ちつつも、セキュリティについても 配慮されています。 サーバー側では、クライアントが特定のオリジンから 来ているかどうかをチェックし、 リクエストを処理することができます。 このレッスンでは、異なるクライアントから、 リクエストが来たときに、 それを処理するためのウェブサーバーを、 パイソンで実装する方法を学びました。

HTML5 API入門

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

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

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

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

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