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

選択されたメモの詳細データの表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メモ一覧画面でクリック(タップ)した項目の内容を、実際に個別詳細画面に表示させる方法について解説致します。
講師:
05:45

字幕

このレッスンでは メモ一覧画面でクリックした項目の内容をー 実際に個別詳細画面に表示させる 方法について 解説していきます まずは ダウンロードしてきた こちらのー show_detail の フォルダの中に入っているー こちらの index.html ファイル そして この js フォルダの 中に入っているー app.js ファイルを エディタで開いてください そして これが それらの ファイルを開いた状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう 今回 注目して頂きたいのは こちらの app.js ファイルの中の こちらの部分となります この メモ一覧画面からのそれぞれのメモを クリックした際の Clickイベントの中に 実際に 個別詳細画面で選択されたメモの データを表示する仕組みを 実装していきます それでは順番に どのように実装していくかを 確認していきたいと思います まず こちらの部分ー こちらの部分では 変数を作って その中にクリックされた aタグ要素のー href 属性の中に 設定されている値を この clickedIdx という変数に 代入する処理を 行っています この href 属性の中にセットされている 値は これまでのレッスンで行ったように メモデータの インデックスの 値が設定されていましたね それを こちらの変数に代入するわけです そして 次のこちらの 2行で 実際のメモデータの内容を 変数に入れていきます まずは 変数 title と定義して その中に memoData これは メモデータが 格納されている 配列でしたね そして その後に このようにー clickedIdx 先ほどの変数ですね それを 指定してあげます そうすることによって クリックされた内容の データを配列から取り出すことができます そして その中にある title の情報をー こちらの「変数 title に 代入しろ」 という形の命令ですね 同様に メモデータの本文も 変数に代入しておきます 変数 body というものを作成してー 同じように 配列のデータ memoData から選択されたー clickedIdx の値を 引き出して その中の body の値を こちらの 変数 body に代入しているわけです ここまでで こちらのリストの中から選択した メモのデータを 変数に格納する所 まで 完了しました それでは これらの変数を使って 実際に 個別詳細画面に反映する 方法について 見ていきます それが こちらの 3行となっています まず こちらの 1行目 こちらの 1行目で pageDetail のー データ属性の idx という項目に 先ほどの clickedIdx 要するに データの番号ですね それを 設定するようにしています これは 実際 どういうことなのかというと こちらの index.html の中の こちらの部分となります こちらの部分に 選択した メモデータのインデックス 要するに 番号をセットしておく形になります こうすることで 今表示されている メモデータが 何番のデータなのかをー 保持しておくことが 可能です それでは JavaScript ファイルに 戻ります そして 続きまして こちらの行ではー pageDetail 要するに 詳細画面の中の memoTitle という クラスのついた pタグの中にある input 要するに title 部分ですね その値を先ほどの「変数 title の値に 設定する」 という命令を書いています こうすることによって選択されたメモデータの タイトルが 詳細画面のタイトル部分にー 表示された形になります そして 最後の こちらの 1文 これは 同じようにメモデータの本文を メモの詳細画面の テキストエリアに 表示させるという プログラムとなります 仕組みは 先ほどと一緒ですね pageDetail その中の memoBody のクラスがついたー p タグの中の textarea その値に 先ほどの変数 body を 表示させるといった形になります そして その後にこれまでのレッスンで行った ページの切り替え処理を実行してー 実際に メモデータが反映された メモの 個別詳細画面を表示するという流れになります それでは この状態で こちらのメモの一覧画面から 好きなメモをクリックしてみましょう 例えば サンプル2 をクリックしてみます すると このように 画面が 詳細画面に切り替わって タイトルが サンプル2 となっていてー 「これは サンプル2 の本文です。」 という形になっていますね このように動作すれば きちんとプログラムの 記述ができているといった形になります 以上で レッスンは終了です 今回は メモ一覧画面で クリックした項目の内容をー 実際に 個別詳細画面に 表示させる方法について 解説いたしました 以降のレッスンでは メモの個別詳細画面から メモ一覧画面に戻るための実装方法についてー 解説いたしますので そちらも併せてご覧ください

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

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

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

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

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

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