HTML5 API入門

ページ遷移とデータ表示を実装する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQuery Mobileを使って、モバイルWebアプリケーションのページ遷移と、それに伴うデータ表示を実装する方法について学びます。
講師:
10:44

字幕

このレッスンでは、jQuery Mobileを使って、 モバイルウェブアプリケーションのページ遷移と それに伴うデータ表示を実装する方法について学びます。 現在開いているサンプルはIndex.htmlというhtmlです。 ここはメインページで、コースの一覧が表示されています。 各項目をクリックすると、 先ほどとは別のdiv要素を取得し、表示されます。 現在表示されているdivのidは、 index.htmlのハッシュとして表示されています。 このdivはitemPanelと言う名前で、 選択したコースの詳細を示しています。 このページでは「コースid」が「1」であるコースの詳細を示しています。 詳細とは、コース名、id、そしてコースの期間、 認定を受け入れられるかどうかのフラグです。 ここでは、表示しているコースを削除することもできます。 右上の削除ボタンを使います。 メインページに戻り、左上の「新しいコースを作成」ボタンをクリックすることで、 新しいコースを作成できます。 例えば、COBOLのコースを作ってみましょう。 期間は1日で認定は無し。保存します。 一覧にCOBOLのコースが追加されました。 このレッスンでは、 この一連の動きの背後で動いているコードについて解説して行きます。 htmlをエディタで開いてみると、 2つのJavaScriptファイルがリンクされていることが分かります。 1つ目はdata.jsです。 これは、ローカルストレージにデータを読み書きするためのスクリプトです。 このレッスンで解説するのは、2つ目のuibehavior.jsです。 これはすべてのイベント処理、 ユーザーインターフェイス上のイベントを管理するためのものです。 実際のコードを見ていきましょう。 uibehavior.jsを開きます。 まず第一に、 現在表示しているコースのidを格納するためのグローバル変数を作成します。 次に、少し下にスクロールし、 初期化時に実行されるコードを見てみましょう。 $(document).readyで始まるこのコードは、 jQueryにおいて、ウェブページの読み込みが完了した後に この中身にあるコードが実行されるためのイベントです。 ここではloadCourseFromDataという関数を実行しています。 この関数は、メインページの一覧に表示するためのコースオブジェクト、 データを読み込み、表示します。 合わせて、ボタンをクリックした時のイベントハンドラも様々設定しています。 ユーザーが新しいコースを作成すると、 createNewCourse関数が呼び出されます。 ユーザーが削除ボタンをクリックすると、 removeSelectedCourse関数を呼び出します。 そしてユーザーが新しく作成したコースを保存せず、 ダイアログをそのまま閉じた場合、closeDialog関数を呼び出します。 ここではまず、 loadCourseFromData関数について、説明して行きます。 23行目から43行目にかけて、この関数は定義されています。 こちらの部分です。 そして、ここではメインページに、コースの一覧を表示しています。 そのため、まずhtmlから一覧、リストを定義している要素、ul要素を取得し、 その中身を空にしています。 次に、このリスト内の各項目を生成します。 各項目とは、 li要素を使って、且つ、ハイパーリンクを含むものになります。 ハイパーリンクをクリックすると、 詳細ページに遷移する仕組みにします。 詳細ページでは、選択したコースの詳細が表示されます。 まず、各項目のテンプレートを作ります。 これをもとに、コースの数だけループ処理を行います。 coursesという変数には、 data.jsで配列のグローバル変数として定義されており、 全コースの情報を含むオブジェクトが入っています。 そのため、このグループ処理の中で正規表現を使って、 各コースの情報を抜き出し、テンプレートに適用します。 具体的には、コースの名前とコースのidを抜き出し、 それぞれcoursename、または、idという文字列の部分を 置き換えるように処理しています。 この処理を、全てのコースの数だけ行います。 これらのリスト項目は、listItemsという変数に格納され、 最終的にリストを定義しているul要素に対して追加されます。 これでリストの中の項目、 全コースの一覧を生成することができました。 ブラウザで確認すると、 このリスト上の一つ一つのコースが、リスト項目li要素です。 それぞれの項目はハイパーリンクを含んでいます。 エディターに戻り、 ハイパーリンクの構造を確認します。 ハイパーリンクはこのような構造になっています。 itemPanel、 つまり詳細ページに遷移し、パラメーターを渡します。 このハイパーリンクをクリックすると、ページ遷移が発生します。 この時重要になるのが、5行目にあるpagebeforechange、 このイベントを処理するためのコードです。 このイベントは、jQuery Mobileにおいて、 あるページから次のページに移動する直前に発生します。 つまり、先ほどのハイパーリンクをクリックしたときに、 ページ遷移の前に、このイベントが発生し、 コードが実行されるのです。 これによって、ユーザーが詳細ページを目にする前に、 コースの詳細情報をローカルストレージから読み込んで、 htmlに表示するための機会を得ることができます。 具体的に見ていきましょう。 jQuery Mobileは、 $.mobileと言うオブジェクトを持っています。 このオブジェクトには、多数のプロパティが含まれており、 pathプロパティはどのurlに遷移するかを示しています。 これに対して、parseUrl関数を実行すると、 urlを分解してハッシュなどを取得しやすくしてくれます。 ここでは、hashプロパティを参照していますが、 ここには、urlに含まれるhash部分の文字列のみが入っています。 そして、ハッシュに itemPanelという文字列が含まれているかどうかのチェックをします。 含まれていれば、 「詳細ページに移動しようとしている」ということになるので、 ページが表示される前に、 コースの詳細情報を読み込み、表示する必要があることを意味しています。 そして、そのための関数がshowCourse関数です。 この関数の実装を見ていきましょう。 showCourse関数は、 少し下のこの47行目からこの部分に定義されています。 この関数で受けているurlObjパラメータには、 遷移先のurlが含まれています。 urlには、先ほどリスト項目のために生成したように、 コースidが含まれています。 そこで正規表現を使って、urlからコースidを抽出します。 このidは、その詳細を表示するために使います。 一旦これをグローバル変数に格納します。 もう一つのJavaScriptファイルdata.jsには、 コースidから、そのコースのコースオブジェクトを返す ヘルパー関数getCourseByIdが定義されていますので、 ここではそれを使います。 これによって表示したいコースのidをもとに、 その詳細情報を取得し、画面に表示しています。 次に、再度、正規表現を使っています。 今度はurlから、表示すべきページのセレクターを取得します。 ここでは、itemPanelというセレクタが取得できるはずです。 これはhtmlで、詳細ページのidとして定義されていますので、 これをもとにjQuery Mobileでページ遷移を行えばよいことになります。 遷移する前にページ関数を使って、 jQuery Mobileにhtmlを最適化します。 これにより、スタイルやテーマが正常に適用されます。 最後にpagecontainerのチェンジメソッドを使って、 ページ遷移を実行します。 これは、jQuery Mobileにおけるページ遷移時の書き方で、 ページを含むコンテナ、つまりここでは、 bodyに含まれるページコンテナに対して、チェンジメソッドを実行します。 2つ目の引数には、遷移先のページを指定します。 これによりページ遷移が実行されます。 ここで重要なのは、pagebeforechangeイベントを使うことで、 1つのページに対して、動的に様々なデータを表示することができるという点です。 このレッスンではjQuery Mobileを使って、 Mobileウェブアプリケーションのページ遷移と、 それに伴う、データ表示を実装する方法について学びました。

HTML5 API入門

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

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

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

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

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