HTML5 API入門

サンプルアプリケーションの紹介

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サンプルのHTMLアプリケーションを使って、このコースでカバーするトピックを紹介します。
講師:
09:37

字幕

こんにちは ようこそこのコ―スへ 講師のおきよしえです このコースでは 非常に強力なHTML5の 様々な機能を使って 高度なウェブアプリケーションを 作成できるようになります 具体的に何ができるかを わかりやすくするために このレッスンでは いくつかのサンプルを ご覧いただきます 実際のコードについて 説明することは 後のレッスンでおこないます また すべての機能を 包括的に理解するための 説明についても 後のレッスンでおこないます さて具体的に このコースで何ができるのかを ご紹介しましょう 位置情報の サンプルがあります これはあなたがどこにいるのかを 見つけるものです モバイル開発もあります WebSocketは ブラウザとサーバーの間の 通信をおこなうためのものです Web Workersは マルチスレッドを実現します これらのサンプルの いくつかは ウェブサーバーを通して アプリケーションを 実行する必要があります そのため 私のPCでは これらのサンプルを ローカルで ウェブサーバーを起動した状態で実行します このフォルダの中では ローカルホストを通して サンプルが実行されるように なっています つまりウェブサーバーを通して 実行するのと 同じ状態です このレッスンでは 手軽に実行するために ローカルホストを 使っていますが 皆さんがサンプルを試すときも 同じように ローカルホストを使うか あるいはローカルに ウェブサーバーを起動することが 難しい人は これらのファイルを 通常のウェブサーバーに FTPなどでアップロードして 実行しても構いません すでにChromeを使って ファイルを開いており ほかのブラウザでも 同様に動作します このレッスンでは これらのサンプルを使っていきます 最初に HTMLによって 現在の位置を取得するための サンプルを見てみましょう HTML5の Geolocation API つまり 位置情報を取得するAPIは あなたが どの緯度 あるいは 経度にいるのかを 見つけることができます 一度のリクエストでも 継続的なリクエストでも どの場所にいるのかが わかります このシンプルなサンプルでは ボタンをクリックしたときに 位置情報の リクエストをおこない 私の緯度  つまり赤道から北に何度か そして経度 旧グリニッジ天文台から 東に何度あるか これらの値を 取得します それでは実際に ボタンをクリックしてみましょう ボタンをクリックすると Chromeでは このように パソコンの位置情報を 取得するための 許可ダイアログが 表示されます ここでは 許可をクリックしましょう すると画面右側に 緯度 経度が 表示されていることがわかります さて私はいったい 今どこにいるでしょうか 私は今 オーストリアの グラーツという都市にいます またタイムスタンプも 表示されています 現在は11月10日で 冬が近づいています これが位置情報の サンプルです 次のサンプルは Web Workersです これはマルチスレッドを 実現するもので HTMLファイルは JavaScriptファイルを参照し 別スレッドでコードを 実行することができます この [ワーカーを開始ボタン]を クリックすると ワーカーを起動します これにより メッセージを送信する ワーカーが作成されます コードはバックグラウンドの スレッドで実行され 実行が終了した時に そのレスポンスを返します このサンプルでは ワーカーが送信した テキストが 大文字になって 返信されています ここでは好きな数だけの Web Workersを 開始することができます もし [ワーカーを開始]ボタンを 複数回クリックしたら 並列に実行される 複数のワーカーが 作成されます これにより マルチスレッドを実現し ワーカーがバックグラウンドで 何かをしている間に ウェブページ上で レスポンスの高い ユーザインターフェースを 維持することができます たとえばユーザーが ワーカーの処理を 完了させたくない場合は キャンセルすることもできます さて次のサンプルは WebSocketです WebSocketは ブラウザとサーバーの間の 双方向通信を サポ―トします たとえば ブラウザが サーバーに接続し メッセージを 送信することができます そしてサーバーは 好きなタイミングで いつでも レスポンスを 返すことができるのです ブラウザとサーバーの間で 任意のタイミングで 双方向に通信できる これがWebSocketです 当然この実行には ウェブサーバーが必要になります 後のレッスンの中では セットアップの方法について 詳しく説明します ここでは簡単に説明すると ウェブサーバーとして nodeJSという 技術を使っています そしてこれが nodeJSを使って サンプル用のサーバーアプリケーションを 実行する方法です これを実行すると サーバーは ポート8888で クライアントからの接続を 待機し始めます ブラウザに戻り キーボードの F5キーを押して ページを 再読み込みしてみましょう すぐにサーバーへの WebSocket接続がおこなわれます F5キーを押して 再読み込みをおこないます サーバーは接続されたクライアントの 数を知っていますので 現時点で接続されたクライアントの数は ひとつ となっています クライアントは いつでもサーバーに メッセージを 送信することができます このサンプルでは この[テキストを入力] というインプットボックスに Hello from Graz と入力してみます そして[サーバーに送信]ボタンをクリックし 少し下にスクロールすると サーバーが クライアントに向けて まったく同じメッセージを 戻していることがわかります このような感じです また同じサーバーに対して 複数のクライアントを 持つことができます そこで現在のURLをコピーし 新しいタブを開き URLを貼り付け Enterキーを押します すると同じサーバーに接続された 2つのクライアントが 確認できます このタブを閉じた場合 2つ目のクライアントが 接続されます また少し下に スクロールすると いったん2つになった クライアントが 1つに戻っていることが わかります サーバーには2つのクライアントが 接続していましたが 今は1つだけです これがWebSocketです 次のサンプルは モバイルアプリケーションの 開発です 便利に使うことができる いくつかの モバイルHTMLライブラリがあります レッスンの中では モバイルデバイスで 美しく見られるようデザインされた ウェブアプリケーションを 作るために jQueryモバイルの 詳しい使い方について紹介していきます それでは仮想のトレーニングコースの 一覧を見てみましょう リンクをクリックすると 新しいページを開けます これはモバイルデバイスで 見やすそうですよね ページを戻ることもできます 新しいコースを 作成してみましょう 誰もがかけるようになってみたい C++のコースを作るとしましょう これは5日間くらいのコースで そのあとに コースを終了すると 証明書も取得できる というコースです そして保存ボタンを クリックします すると先ほどにはなかった C++という 新しいコースの項目が 追加されました jQueryモバイル 素晴らしいですよね 後ほどのレッスンで ご紹介します さて簡単にコースの 全容をご覧いただきました このコースでは HTML5の機能をご紹介します より詳細を解説し みなさんに 開発のアイデアを提供します このレッスンでは 位置情報 Web Workers WebSocket そしてモバイル開発の サンプルをご紹介しました

HTML5 API入門

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

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

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

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

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