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

一覧画面での初期データの表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
作成した初期データを、実際にメモ一覧画面にリスト形式で表示する方法について解説致します。
講師:
06:05

字幕

このレッスンでは 前回のレッスンで 作成したメモの初期データを 実際に メモ一覧画面にリスト形式で 表示する方法について 解説いたします まずはダウンロードしてきたこちらの show_list という フォルダの中に入っている こちらのjsフォルダの中のapp.js ファイルをエディタで開いてください そしてこれが そのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう それでは まず初めに 前回のレッスンのおさらいです 前回は 初期のメモデータの作成を 行いました こちらの部分ですね このように 配列のmemoData という変数を作って その中に このように オブジェクトで値を格納しています 3件のメモデータを所持している状態ですね 今回は こちらの変数memoDataを 使って実際に メモ一覧画面に これらのデータを表示させる 方法について 見ていきます そして こちらの右画面に 表示されているものですが 実際にそのデータをメモ一覧画面に 表示している状態となっています それでは実際にどのようにこちらの一覧画面に そのデータを表示させていくか 見ていきたいと思います そのプログラムを書いているのが こちらのJavaScriptファイルの中の この部分となります では 順番に見ていきましょう まずは 関数を定義します function と書いて今回の関数の 名前をShowList としています そして 括弧 括弧 閉じるの 波括弧 波括弧 閉じると書いて この波括弧の間に 実際の処理を書いていきます まず 変数 pageList 要するに この一覧画面を定義している変数ですね その中にある ulクラスmemoList 要するに こちらのリストを 囲っているulですね その htmlの中身を空っぽにする という命令を書いています こうすることによって もともと htmlファイルの中に 直接書き込まれていた仮置きのデータ それを 全て削除して初期化しています その状態で次 こちらの if文ですね この中身を見ていきます まず ifと書いて この括弧の中に memoData.length と書いて 0 より多ければ と書いていますね 要するに こちらの変数 memoDataの 中に入っている値が 一つでもあれば という意味になります 一つでもあれば こちらの処理が実行されます そして こちらの内容ですが まずは $.each と書いて 丸括弧 そして こちらで 丸括弧閉じる と 閉じて そしてその中の引数に まずは配列のmemoDataを入れています そして , と書いて その後に function そして さらに 丸括弧の まずは i そして , val と書いて 丸括弧閉じています その後に この functionに 対応する波括弧 そして こちらで波括弧閉じる そして処理を閉じています この $.each ですが これは JQueryの関数で こちらの引数に与えた配列の中身を順番に 全て処理をしていくための関数となります その順番に取得して処理を行うための 記述が こちらの部分となります まず その前に見ていきたいのが こちらの functionの中の引数ですね まず一つ目の i はこちらの配列の中に ある このインデックスを指します 要するに 1つ目が0番 そして2つ目が1番 そして 3つ目が2番 といったようなインデックスですね そして その次の val というのは 実際の この値のことを指します そして この中においては まず変数を作っていますね 名前は li という変数です そして = と書いて liタグ そして aタグを 書いていますね そして その中に 先ほどの配列の中の データのインデックスを表すー i と 実際の値 val ですね そして その中の title の値 それを取得して こちらの htmlタグを 生成しています それを代入しているのが こちらの変数 li ですね そして最後に 変数 pageListの中にある クラスmemoListを 持った ulタグの中に 変数 li の中に含まれた htmlタグを 上から順番に追加していきます そうすることによって このような形で サンプル1 サンプル2 サンプル3 という形で 順番に一覧として 表示されてくるわけですね 最後にこちらで定義した関数ShowList を 実行してあげないといけないので このように ShowList ( ); という風に書いてあげています これで アプリが起動された時に このShowListという関数が実行されて 自動的に ここにそのデータが 反映されてくるわけです 以上で レッスンは終了です 今回は 前回のレッスンで 作成した初期データを 実際に メモ一覧画面にリスト形式で 表示する方法について解説いたしました 以降のレッスンでは メモ一覧画面にリスト表示したー これらの項目に対してClickイベントを 登録する方法について解説いたしますので そちらも併せて ご覧ください

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

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

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

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

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

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