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

LocalStorageへの読み出し

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
LocalStorageに保存したデータを読み出す方法について解説致します。
講師:
05:40

字幕

このレッスンでは前回のレッスンで localStorageに保存した メモのデータを 読み出す方法について解説致します まずはダウンロードして来たこちらの read_from_localstrage と言うフォルダの中に入っている こちらのjsフォルダの中の app.jsファイルと index.jsファイルを エディタで開いてください そしてこれが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの 解説を進めて行きたいと思います それでは早速レッスンを始めて行きましょう まずは前回のレッスンのおさらいです 前回のレッスンでは こちらのjavaスクリプトの こちらの部分で memo という名前の localStorageに memoData 要するに すべてのmemoDataが 格納されている配列の変数ですね こちらをJSON形式に保存して localStorageに 保存する所までを行いました 今回はこの保存した データを読み出す方法について 実際にどのように実装するかを 見て行きたいと思います それでは このjavaスクリプトのファイルの中で その実装を行っている箇所はと言うと こちらの部分 となります それでは順番に見て行きましょう まず初めに こちらの部分 をコメントアウトしている事に 注目してください これまでのレッスンでは ここに仮のデータ を 作成して そしてこの 変数memoDataに配列 として格納していましたが 今回は この仮のデータ を無くしてしまって 実際にメモ帳アプリの中で登録された データを扱うようにして行きます そしてまずはこちらの部分 ですね こちらの部分で 変数の memoData に こちら localStorage.getItem 括弧 括弧閉じる そしてその括弧の中には memo と書いて localStorage の memo と言う名前のついたデータを 取得してくるように設定しています ただ こちらのデータは 文字列として保存されている物を 引き出してきただけですので それを こちらの JSON.parse と書いてあげる事によって 本来の配列とオブジェクトの 構造に戻してあげます そしてその構造に戻した物を この 変数memoData に格納してあげる訳ですね そして 次のこちらの3行 この部分では もしこの変数memoDataの 中身が空っぽだった場合 そのmemoDataには 初期値として空っぽの配列 を設定しておく と言った命令を行っています こうする事によって新しく追加されて来る データを 受け取る為の 準備 を行っている訳ですね 以上でlocalStorageからの データの読み出し実装は完了 となります それではこの状態で このプロジェクトファイルを PhoneGap Buildに アップロードして 実際に実機端末で確認して行きたいと思います その前に こちらのindex.jsファイル こちらを開いて頂きまして そしてこちらの部分 ですね もともとPC上で 動作確認をして行くための この記述でしたが 実機端末では不要となりますので こちらをコメントアウトしておきましょう そうしたら プロジェクトファイル の このWWWフォルダ を zipファイルに 圧縮します そして圧縮したファイルを PhoneGap Buildの方に アップロードします ファイルを更新アップロードする際は こちらの コードを更新ボタンから アップロードして行く形でしたね そしてアップロードと ビルドが完了したら ハイドレーション機能をオンにしている方は 実機端末でアプリを起動して 更新をインストールしてください そして ハイドレーション機能を オンにしてない方はこちらの QRコードを読み取って アプリを新たにインストールしてください そうして実機端末にアップロードした画面が こちらの形となります それでは実際に実機端末で確認してみましょう まずは こちらのプラスボタンを押して 新規のmemoDataを追加します そして 適当に ここに 入力して行きます ここでは テストです と 入れておきましょう そして ここの 戻るボタンを押して保存しましょう すると この様に新規ノートが保存されましたね そして 一度この状態で このアプリを 落とします そして 完全にアプリを 終了させてから もう一度こちらのアプリを 起動します すると この様に 先ほど保存した データがそのまま引き継がれて 表示されていますね この様に動作すれば きちんと localStorage の設定が完了している と言った形になります 以上でレッスンは終了です 今回は  localStorageに保存したデータを 読み出す方法について解説致しました このレッスンをもちまして PhoneGap Buildを使った メモ帳アプリの作り方 の 解説は終了となります この様に PhoneGap Build を使えば htmlとcss そしてjavaスクリプトを使って とても簡単にスマートフォンアプリを 作ることができるようになりますので ぜひともマスターして  ご自身のアイディアを形にしてみてください

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

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

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

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

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

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