PhoneGap Buildで作るスマートフォン用メモ帳アプリ

詳細画面への画面遷移

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Clickイベントを登録したメモ一覧画面のそれぞれの項目をクリック(タップ)した際に、メモ詳細画面に画面遷移させる方法について解説致します。
講師:
03:20

字幕

このレッスンでは Clickイベントを 登録した メモ一覧画面のそれぞれの項目を クリックした際に メモ詳細画面に画面を 遷移させる方法について 解説いたします まずは ダウンロードしてきた こちらのー transition_to_detail というフォルダの中に入っている jsフォルダの中の app.jsファイルを エディタで開いてください そしてこれが そのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう それではまず 前回のレッスンのおさらいです 前回のレッスンでは こちらの部分でー こちらの リストに表示されているー メモをクリックした時の Click- イベントを登録する所まで行いました 今回は 実際に こちらの項目をクリックした際に メモの個別詳細画面に画面を遷移させる方法に ついて見ていきたいと思います そのプログラムを書いているのがー こちらのJavaScriptファイルの中の こちらの部分となります それでは実際に どのように実装を しているか確認していきたいと思います まずは 関数を定義していきます function と書いて 今回の関数の名前をー showPageDetail としています そして丸括弧 丸括弧閉じるの 波括弧 波括弧閉じる そして この波括弧の中に 実際にページを 切り替えるための処理を 書いていきます まず こちらの pageList の変数ですが この変数は こちらの一覧画面を 定義している変数ですね こちらを hide 「隠す」 という命令をしています そして次に 変数 pageDetail これは個別詳細画面を定義している変数ですね こちらを show という風に書いて 「表示させろ」という命令を書いています これで それぞれのページの表示が 切り替わるといった形になります ここまで完了したら ここで作成した showPageDetail の関数を 前回のレッスンで定義した こちらの Clickイベントの中で呼び出してあげます こちらの blur ( ); と return false ; の ちょうど 間に 記述していきます こうすることによって クリックした際にー このページの 切り替えが発動して 一覧画面から 詳細画面に 画面が切り替わるといった形になります それでは 実際に こちらで試してみましょう こちらに表示されている 三つのデータ どれでもいいので一つクリックしてみましょう するとこのように 詳細画面に替わりましたね このように動作すれば きちんとプログラムが 書けているといった状態になります 以上で レッスンは終了です 今回はClickイベントを登録したメモ一覧 画面の それぞれの項目をクリックした際に メモの詳細画面に 画面を遷移させる方法に ついて解説いたしました 以降のレッスンからは メモ帳アプリ内の メモの個別詳細画面の中のさまざまな機能を JavaScript を使って 実装する 方法について 解説していきますのでー そちらも併せて ご覧ください

PhoneGap Buildで作るスマートフォン用メモ帳アプリ

PhoneGap Buildを使えば、HTMLやCSS、JavaScriptを使って作成したコンテンツを簡単にモバイル用アプリに変換することができます。このコースではPhoneGap Buildを使ってiOSやAndroid端末に対応したメモ帳アプリを作る方法を学びます。アプリのビルドや実機端末へのインストール、各種機能の実装などについても説明します。

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

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

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

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