HTML5 API入門

全体の構造を実装する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQuery Mobileを使ってモバイルWebアプリケーションのユーザーインターフェイスを作成する上で、全体の構造を実装する方法について学びます。
講師:
08:24

字幕

このレッスンでは jQuery Mobile を使って モバイルウェブ アプリケーションの ユーザー インターフェースを作成する上で 全体の構造を実装する方法について 学びます 現在はサンプルを Chrome で 開いているところです このアプリケーションを構成しているのは 3 つのファイルです エクスプローラで確認してみましょう 一つ目はユーザー インターフェースを 実装している index.html です 次にユーザー インターフェースの バックエンドを実装している uibehavior.js です そして最後がローカルストレージを管理する data.js です ローカルストレージには すべてのコース情報を格納します このレッスンでは index.html での実装について 学んでいきます ブラウザに戻りましょう この HTML には ウェブアプリケーションで使われる 3 つの別々のページが 含まれています 現在はメインページにいます ここでは すべてのコースの一覧を表示します コースのいずれかを選択 クリックした場合 コースの詳細ページに遷移します つまり index.html は メインページや ここで見ている詳細ページを 内部的に持っている ということになります メインページに戻って [新しいコースを作成] ボタンを クリックして 現れるこのダイアログも また index.html の一部です ここには新しいコースを作成することができる ダイアログが表示されています 新しく Visual Basic の コースを作成する としましょう 期間は 5 日間のコースにして 認定フラグを On にして 保存ボタンをクリックします コースが追加されています サンプルアプリケーションは このように動作します 実際にどのような実装になっているのか コードを見てみましょう すでにエディタで HTML を開いています 始めに jQuery Mobile を 使う上で重要な点を確認するため head 要素を見てみましょう まず meta 要素を定義し ここではウェブページを表示している デバイスの幅に応じて ウェブページ自体の幅を制御するために viewport を設定しています 次にウェブページが モバイルプラットフォーム上で 美しく表示されるように jQuery Mobile が提供する 標準のスタイルシートを読み込んでいます ご覧いただくとわかるように jQuery Mobile の ウェブサイトにある CSS ファイルを直接読み込んでいます 場合によっては自分のウェブサーバに CSSファイルを置きたいこともあるでしょう その場合 この CSS ファイルを ダウンロードし 自分のウェブサーバにアップロードします 実際には jQuery Mobile の ウェブサイト上にある CSS は CDN が使われていますので 直接利用しても問題ありません 次に 2 つのスクリプトを読み込んでいます 一つ目はデスクトップアプリケーションでも 動作する 通常の jQuery スクリプトです 二つ目はモバイル開発のために提供されている jQuery Mobile です jQuery Mobile を使う時は このように jQuery と jQuery Mobile の 両方を読み込む必要があります ここでもスクリプトを jQuery の ウェブサイトから読み込んでいますが 必要な場合は自分のウェブサーバ上で 置くこともできます 続いて読み込んでいるスクリプトは オリジナルで用意した2つのスクリプトです data.js uibehavior.js という名前を付けています これらはサンプルファイルに 含まれています さて jQuery Mobile では body 要素の中に 複数のページを持つことができます つまり 1 つの HTML の中に 複数のウェブページを含めることが できるわけです これを行うためには まずページごとに div 要素などのページを定義する要素を 作成します 各ページがプログラム的に参照できるように それぞれに ID も設定しましょう さらにこの div 要素がページである ということを指定するために data-role 属性 という属性に page という値を設定します 「data-」 で始まる任意の名前の属性は 任意の値を属性として定義することができる HTML5 の機能です jQuery Mobile では これを利用して 様々な機能を提供しています このサンプルでは 3 つのページが含まれています まずメインページです 全体を見渡せるように いったんコードを折りたたみます その後にある第二のページは 51 行目にある div で定義しています これは詳細ページで この中に含まれる内容は メインページで表示されるコース一覧から いずれかをクリックした時に表示される 詳細ページを表しています ブラウザで確認してみましょう 詳細ページに遷移した時 URL を確認すると index.html のままであることが わかります 現在表示されているのは div 要素の中身であり ID で言うと ItemPanel です また どのコースの詳細を表示しているのかも 表示されます 現在は HTML5 のコースを表示しており このコースの番号は 1 です エディタに戻りましょう 詳細ページは ItemPanel が ID に指定されている div 要素で 構成されています 最後に新しいコースを作成するための 三つ目のページですが ここでは他のページと違って data-dialog 属性があり ここでは true という値が 設定されています これはどういうことでしょうか もう一度ブラウザで見てみましょう メインページに戻って [新しいコースを作成] ボタンを クリックした時に 何が起こるかに注目してください ボタンをクリックすると ダイアログが表示されました これが他のページと異なる点です data-dialog 属性に true を設定すると 通常のページではなく このようにダイアログとして 扱うことができます エディタに戻りましょう もう一点 ここには data-theme 属性 という属性があることに気付くでしょう 値は a になっていますが その他のページでは data-theme 属性に b という値が設定されています この data-theme 属性を使うと ページ内に表示されている ユーザー インターフェースに対して カラーテーマを適用することができます デフォルトでは a と b の 二種類が用意されており a は明るいテーマ b は暗いテーマが適用されます このレッスンでは jQuery Mobile を使って モバイルウェブ アプリケーションの ユーザー インターフェースを作成する上で 全体の構造を実装する方法について 学びました

HTML5 API入門

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

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

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

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

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