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

メモデータの保存

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メモ個別詳細画面にて、ユーザーによって編集された内容を保存する方法について解説致します。
講師:
05:46

字幕

このレッスンではメモの個別詳細画面にて ユーザーによって編集された内容を 保存する方法について解説致します まずはダウンロードしてきたこちらのセーブデータ と言うフォルダの中にある こちらのindex.htmlファイルと そしてこちらのJSフォルダの中に入っている UP.JSファイルを エディタで開いて下さい そしてこれがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めていきたいと思います それでは早速レッスンを始めていきましょう さて現在こちらの画面で表示されている メモの個別詳細画面ですが この様にインプットボックスと そしてテキストエリアで構成されている為 この様にユーザーが変更できるようになっています 今回はこの様にユーザーによって変更された内容を データとして保存しておく方法について見ていきたいと思います 保存をするタイミングは こちらの一覧画面に戻るボタンを クリックした時に発動させるものとします それではこちらのJAVA SCRIPTのファイルで 実際の処理を見ていきたいと思います こちらのJAVA SCRIPTのファイルで 注目して頂きたい部分は こちらの部分となります これは丁度前回のレッスンで作成した こちらの一覧に戻るボタン のクリックイベントの中の処理となります それでは順を追って確認していきたいと思います まずはこちらの始めの3行の部分です まずこちらの部分では現在表示されている こちらのメモの内容ですね これらを変数に格納するところから始めています まず変数ショーンインデックスには このページディテールの データIDX属性の値を代入するようにしています これはどう言う事かと言うと こちらのindex htmlファイル の中のこちらの部分ですね これまでのレッスンで 詳細画面の中で表示されているメモデータのインデックス 要するに番号をセットしていた属性となります ここの属性にアクセスしてセットされていた内容を 習得する事によって 現在何番目のデータが 表示されているかを番号としてこちらの ショーンインデックスの変数に格納する事が出来る訳です そして続くこちらの2行 に関しては 現在表示されているメモのデータ をそれぞれ変数に格納しています 1つはこちらのタイトルですね こちらのインプットの値を取得して そしてこのドルマークトリム で文頭文末の余計な空白を取り除いた上で こちらの変数タイトルに代入しています 同じ要領でこちらの変数ボディには こちらのテキストエリアの中の値ですね この値を取得してそして そしてドルマークトリムで 文頭文末の無駄なスペースを取り除いた上で こちらを変数ボディに代入しています ここまで現在表示されているタイトルと本文 のデータをそれぞれの変数に格納するところまで出来ました 次にこれらの変数を使って実際にデータを保存します データを保存するためには この様に書いていきます では順番に見ていきます まず全てのデータを管理している配列メモデータですね こちらの後にショーンインデックス と書くことによって 現在表示されているメモのデータを引き出す事が出来ます そしてそのタイトルキーに対して 先ほど設定したこちらの変数タイトル の値を代入してあります 同じように次の行では それを本文に対しても行っています こうする事によって元々保存されていたデータに 現在表示されている内容のタイトルや 本文を 上書きして代入する事によって データが保存される仕組みとなっています そして最後に 一覧画面の内容も更新してあげないといけません それを更新するには こちらのショーリスト と言う関数を実行してあげれば大丈夫です このショーリストは前回までのレッスンで作成した こちらの関数ですね メモデータの配列をひとつずつ読み取って そのタイトルを 一覧として表示してくる関数となっています それではこの状態で 一度戻るボタンを押して ちゃんとデータが保存されているか 確認して見たいと思います ではクリックします するとこの様に一覧画面に戻って サンプル2のところが編集された状態になっていますね それでは念の為こちらのサンプル2の方を 再度クリックして見たいと思います するとこの様に編集された後の状態で しっかり表示されてきていますね この様に動作すればOKです 以上でレッスンは終了です 今回はメモの個別詳細画面にて ユーザーによって編集された内容を 保存する方法について解説致しました 以降のレッスンでは メモの個別詳細画面にて 表示中のメモデータを 削除する方法について解説致しますので そちらも合わせてご覧下さい

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

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

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

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

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

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