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

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