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

一覧画面へ戻る遷移

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メモ個別詳細画面から、メモ一覧画面に戻る為の実装方法について解説致します。
講師:
03:24

字幕

このレッスンではメモの個別詳細画面から メモ一覧画面に戻る為の実装方法について解説致します まずはダウンロードしてきた こちらのトランジョンツーリスト と言うフォルダの中に入っている このJSフォルダの中の UP.JSファイルをエディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使いながら 今回のレッスンの解説を進めていきたいと思います それでは早速レッスンを始めていきましょう 今回はこちらの詳細画面の このボタンですね このボタンをクリックした時に メモの一覧画面 に戻るように実装していきたいと思います それではこちらのJAVA SCRIPTのファイルに戻って 実際にどの様に実装していくかを確認していきたいと思います まず注目して頂きたいのが こちらの部分ですね こちらの部分です ここでは詳細画面を隠して そして一覧画面を表示する といった処理を書いた関数 ショーページリストと言うものを作っています これまでのレッスンで作った こちらのショーページディテイル 要するに詳細ページを共有するための関数 の全く逆のパターンですね 詳細ページを非表示にしてそして一覧ページを表示にする と言った形で画面の遷移を実現していきます そしてこの関数を作り終えたら 実際にこちらのボタンに クリックイベントを登録して この関数を呼び出してあげましょう このJAVA SCRIPTのファイルですと 丁度こちらの部分となります それでは実際に見ていきましょう まずは こちらのメモの 個別詳細画面が格納された 変数ページディテイル の中にある バックボタンと言うクラスの付いた Pタグの中にあるAタグ要するにこの部分ですね この部分に対してONクリック クリックイベントを登録します そしてファンクションと書いて 並かっこの中に 実際のページ遷移の処理を書いていきます まずはドルディスブラーと言う事で Aタグをクリックした時に当ったフォーカスを外します そしてこちらのリターンフォース で本来 Aタグをクリックした時に発動される機能を無効化しています そしてこちらの ブラーとリターンフォース の間に先ほど作成した関数 ショーページリストを呼び出して上げます この様に書くことで こちらのボタンをクリックした時に 詳細画面から一覧画面の方に 画面を遷移させることが出来る訳ですね それではこの状態で 実際にこちらのボタンをクリックして見たいと思います この様に一覧画面の方に戻りましたね この様に動作すればOKです 以上でレッスンは終了です 今回はメモの個別詳細画面から メモの一覧画面に戻る為の 実装方法について解説致しました 以降のレッスンではメモの個別詳細画面で ユーザーによって編集された内容を 保存する方法について解説していきますので そちらも合わせてご覧ください

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

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

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

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

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

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