HTML5 API入門

ページの中身を実装する

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

ぜひご覧ください。

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

字幕

このレッスンでは jQuery Mobileを使って モバイルWebアプリケーションの ユーザーインターフェイスを作成する上で 実際のページの中身を 実装する方法について学びます ブラウザーではサンプルアプリケーションを 表示しています このサンプルアプリケーションは プログラミング言語のトレーニングコースの 一覧を提供するアプリケーションです これらのコースのそれぞれについて 詳細を確認するには リンクをクリックします HTML5のリンクをクリックすると それについての詳細が 別ページで表示されます 新しいコースを作成する事も出来ます メインページから "新しいコースを作成"ボタンをクリックして コースを作成します ここでは新しく "Visual Basic" のコースを 作成するとしましょう 期間は5日間のコースにして 認定フラグをオンにして 保存ボタンをクリックします こちらにコースが追加されています サンプルアプリケーションは この様に動作します それではそれぞれのページの中身を 実装する方法を説明する為 行動を見てみましょう 既にエディターでHTMLを開いています メインページは26行目から45行目の "div" 要素で定義されています こちらの "div" 要素です 中身を見てみると ヘッダー メインコンテンツ フッターを 持っている事が分かります ブラウザーで再度確認してみましょう ヘッダー メインコンテンツ フッターです それではこれらを1つ1つ見ていきましょう ページの中で パーツの役割を指定する為に "data-role" 属性を使っています その為最初の "div" では "header" を指定しています "header" には見出しや新しいコースを 作成する為の ハイパーリンクが含まれています ハイパーリンクをクリックすると "#newcoursepanel" という新しいコースを 作るぺージが表示されます 又このハイパーリンクには 様々なクラスが設定されており これはjQuery Mobileが提供する 機能を利用する為のものです jQuery Mobileでは ボタンを表現する為に様々な機能を "a" 要素の "class"として指定するだけで 簡単にボタンを実装する事が出来ます 例えば "ui-btn" こちらの "ui-btn" ボタンは ボタンとしての扱い 次の "ui-btn-left" こちらはボタンをヘッダーの中で どの位置に表示するか "ui-icon-plus" は プラス記号のアイコンを表示 "ui-btn-icon-left" は アイコンをボタンの左側に表示する と言った具合です アイコンはデフォルトで 様々なものが用意されています ボタンと見出しが合わさって このページのヘッダーを構成しています 次にページのコンテンツ部分の "div" 要素を見てみましょう コンテンツ部分を実装する時は "data-role" 属性ではなく "class" に "ui-content" そして "role" 属性に "main" という値を設定します コンテンツ部分はプログラムによって 一連のアイテムが表示される 仕組みになっている為 ページの表示時にそのコードが 実行されます プログラムではローカルストレージから 全てのコースの内容を取得し "li" 要素を作成しリストに追加します jQuery Mobileで出来る事の一つとして 要素の表示方法を 制御する事が挙げられます 例えばリストです ここで使っているリストを設定する為には "data-role" 属性に "listview"という値を設定します これだけでブラウザーで見た時に 非常にモダンな見栄えを 表現する事が出来ます エディターに戻りましょう ここまで幾つかの "data-role"属性を 使ってきました "page" "header" "listview" 等です これがjQuery Mobileの キーポイントとも言えます 非常にシンプルで少ないコードで リッチな機能を実現出来ます 最後にページ下部に表示される フッターの為の "div" 要素です 同じ様に "data-role" 属性を使って "footer" を指定しています これはシンプルに著作権を 表示しているだけです 続いて2つ目のページを見てみましょう 少し下にスクロールします 2つ目の "div" 要素は "itemPanel" という "id" を指定しています このページではリストの中から選択した コースの詳細が表示されます この "div" 要素は 51行目から70行目にかけて 定義されています この "div" 要素は 51行目から70行目にかけて 定義されています ブラウザーでもう一度 実際の表示を確認してみましょう HTML5のコースを選択します アドレスバーに "itemPanel" という "id" が見えますね つまりここで表示されているページは "itemPanel" という "id" が指定された "div" 要素になります コードに戻りましょう ヘッダーには メインページに戻る為のボタンがあります "戻る" ボタンを作成するには "data-role" に "header" を指定した要素に対して "data-add-back-btn" という属性に "true" という値を "data-back-btn-text" という属性に その "戻る" ボタンに 表示したいラベルを設定します これで自動的に前のページに 移動するボタンが表示されます 前のページはどのページであるか という事を指定する必要はありません jQuery Mobileが自動的に どのページから来たかを判定し そのページに戻ります "コース名" とある部分には ウェブページが実際に読み込まれた時 "Java Script"によってメインページ上で 選択したコースの名前に置き換えられます ブラウザーで見ると この部分はHTML5と表示されていますよね この部分はプログラムで書き換えている という事になります エディターに戻ります ヘッダーの右側には コースを削除するボタンがあります 先程の "新しいコースを作成" ボタンと同じ様に ボタンの機能を実装する為 様々なクラスが適用されています この中では "ui-icon-delete" こちらを指定する事によって アイコンは削除を示す "×" アイコンになっています 次に "id" "期間" "認定の可否"を含む ページのメインコンテンツです こちらも "Java Script" によって 動的に内容を書き換えています その為HTMLには含まれていませんが ブラウザーで表示すると 実際のコースの詳細が表示されます 最後にあるフッターについては メインページと同様です 最後に新しくコースを 作成する為のページです このページは ダイアログとして実装される為 "data-dialog" 属性を "true" に設定しています メインコンテンツにはフォームがあり このフォームの中には部品として "div" 要素を幾つか定義しています それぞれの "div" 要素を見てみましょう フォームの中にある "div" 要素のクラスには "ui-field-contain" という "class" が設定されています この "class" を設定すると jQuery Mobileの機能で その中に入っている ラベルとフォームのコントロールの 表示がラッピングされます つまりこの同じ "div" 要素の中に 含めた要素は一緒に表示されます このテキストボックスには "コース名" という "placeholder" が 設定されています 更にその上にラベル要素も存在しています この時ラベル要素は非表示にする為 "class" に "ui-hidden-accessible" というクラスが設定されています その為このラベルについては DOMツリーには存在しますが ブラウザー上では表示されません 確認してみましょう ブラウザー上ではラベルは表示されておらず "placeholder" だけが表示されています 実際の表示はこの様な感じです 何故わざわざこの様な事を しているのでしょうか? これはアクセシビリティの為です 例えば視覚障害者が使うスクリーンリーダーは このラベル要素がDOMツリー上にあることで このテキストボックスが 何の入力ボックスなのかを 把握出来るかも知れません エディターに戻りましょう 続いて期間を入力する事が出来る "div" 要素です 期間の入力にはHTML5で追加された "type" が "range" の "input" 要素を使っています これにより "1" から "5" という指定した範囲の中で 値を入力する事が出来ます ブラウザーで表示すると この様な形になります エディターに戻ります 3つ目はこのコースが 認定証を得られるかどうか というフラグを入力する "div" 要素です ここでは認定をするかどうかの "Yes" or "No" を入力させたい所なので jQuery Mobileによって 提供されている フリップスイッチという "UI" が便利です フリップスイッチを使うには "select" 要素の "data-role" 属性に "slider" という値を設定し "option" として 選ばせたい値を入力します この時小さく表示したい場合は "data-mini" という属性を "true" に設定します 最後に2つのボタンがあります "保存" ボタンはこのデータを 保存する為のボタンです もう1つはメインページに戻る為のボタンです 戻るボタンには "data-icon" 属性を使って "back" つまり戻る事が分かる様な アイコンを表示しています 通常ハイパーリンクの "a" 要素等でボタンを表現する時には アイコンを表示する為にクラスを使いますが ここでは "input" 要素を使っていますので この時にはアイコンを表示する為には "class" ではなく "data-icon" 属性を使います このレッスンではjQuery Mobileを使って モバイルWebアプリケーションの ユーザーインターフェイスを作成する上で 実際のページの中身を実装する 方法について学びました "メインページ" "詳細ページ" "新しいコースを作成するページ" の それぞれについて実装の 詳しい内容を見てきました

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宛までご連絡ください。