HTML5 API入門

データを管理する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webアプリケーションでデータを管理する方法について学びます。
講師:
11:10

字幕

このレッスンでは、Webアプリケーションで データを管理する方法について学びます 現在開いているサンプルは index.htmlというHTMLです ここには、3つのページが含まれています メインページはコースの一覧を表示しており いづれかのリンクをクリックした場合 その詳細ページに遷移します それぞれのコースは、コース名と ユニークなIDを持っています また合わせて、期間を示す長さ コースが認定につながるかどうかを示す トゥルーオアフォルスのフラグを持っています これが、アプリケーションが持つデータです これらのデータはローカルストレージに 格納されています これは、モバイルアプリケーションにおいて 非常に便利な技術で ローカルストレージにデータを追加し アプリケーションを終了してから 再度起動すると ローカルストレージから 保存しておいたデータを デバイスに読み込むことができます 例えば、新しいコースを追加してみましょう メインページに戻って 新しいコースを作成します ここでは、Cプラプラのコースを作ってみます 期間は5日間で 認定はトゥルーに設定して 保存ボタンをクリックします この時、内部では アプリケーションの中にある配列に 新しいコースの情報が格納されます また、その情報はローカル ストレージにも格納されます Webページを閉じて 再度開いてみましょう 新しいタブを作って先ほど開いていた アプリケーションを閉じます そして同じURLでもう一度 アプリケーションを開くと 追加したCプラプラのコースは 再度表示されています また、追加した情報の詳細も きちんと確認することができます それでは、実際にどのように 実装されているのかを見てみましょう エクスプローラを開きます サンプルファイルは 3つのファイルで構成されています ユーザーインターフェースは index.htmlの中に定義されています Webページの機能は uibehavior.jsに書かれています データを保存したり 読み込んだりするコードについては data.jsに書かれています このレッスンでは、data.jsの コードを見てみましょう エディタに切り替えます はじめにアプリケーションが起動したとき コードの中に埋め込まれた いくつかのコースが定義されています これは、グローバルな配列で その中身は一つ一つのオブジェクトです 各オブジェクトは一つのコースを表し 各コースは一つのID 正数のIDを持っています また、コース名を表す文字列 期間を表す数字 そして認定を得られるか どうかのフラグを持っています Webページが読み込まれた時 何が起こるのかを見ていきましょう 少し下にスクロールすると このようなコードが現れます これは、jQueryのためのコードであり Webページの読み込みが完了した時に この中にあるコードが 呼び出されることを示しています この中で最初に行っているのは Webページを表示しているブラウザが ローカルストレージをサポート しているかどうかの確認です これは、ウィンドウオブジェクトを取得し その中にあるローカルストレージ プロパティを調べることで可能です そして、ローカルストレージ プロパティが存在している場合 そのブラウザはローカルストレージ機能を サポートしていることになります 次に、ローカルストレージに保存している コース情報を取得します これは、Webアプリケーションに 2回目以降にアクセスした場合 保存している情報が 存在していることになります 初めてアプリケーションを実行した時は ローカルストレージに何も保存されていません ローカルストレージに情報が保存されていれば ここで取得します コースの情報は文字列で格納されています JavaScriptでは、データの 解析機能を持つ ジェイソンオブジェクトというものが使えます パラメータとして所定の書式に 従った文字列を与えると このジェイソンパース関数は オブジェクトを返します そのため、ここでは文字列から コースオブジェクトの入った このようなオブジェクトへ と変換が行われます ローカルストレージに コースの情報がなかった場合は ストアコースという ヘルパー関数を呼び出します ストアコース関数は コース情報を受け取って ローカルストレージにそれを 保存するだけのシンプルな関数です この時、保存する前に 受け取ったコース情報を ジェイソンストリングファイ関数を使って ジェイソンに変換します そしてそれを、コースズという名前で ローカルストレージに格納しています これが、ストアコース関数の中で やっている処理です さて、アプリケーションでは 新しいコースを追加することもできました 新しいコースを追加する時は アドコース関数が呼び出されます アドコース関数はこちらに定義されています この関数では、ユーザーインターフェースから コース名、コースの期間、認定を 受けられるかどうかの情報を受け取ります そして最初に、新しいコースのIDを 何番にすべきかどうかを取得するため ゲットニュースコースIDという ヘルパー関数を使います これは、各コースが固有のIDを持つように 自動的に正数をインクリメントした 数を取得するためのものです 詳しい内容はこのレッスンの 後ほどでご紹介します 続いて、新しいコースのための コースオブジェクトを作ります 新しいコースオブジェクトは 46行目で作ったIDと アドコース関数で受け取った引数 つまり、コースの名前や長さ 認定を受けられるかどうかのフラグ といったパラメーターを使って コースオブジェクトを作るのです そして、これをグローバル変数の 配列に追加します この配列は冒頭で紹介した コース情報が入っている配列です そして、ストアコース関数を呼び出します これは、コース情報をローカル ストレージに格納する関数でした そのため、ローカルストレージには 新しく追加されたコースの情報を含む 新しい配列が格納されたことになります ユーザインターフェイスでは コースを削除することもでき その機能は、この下にある リムーブコース関数に定義しています コースを削除するには、削除したい コースがどれかを知る必要があり そのためには、コースIDを 使うことができます コース情報が入った配列から 削除したいコースを探し出すため IDを使って該当のコースを 探すヘルパー関数 ゲットインデックスフォーID を定義しています この関数では配列をループして 削除したいコースが見つからなかった場合は マイナス1を返すようになっています 0以上の値が返った場合には 配列からそのコースを削除してから 再びコース情報を ローカルストレージに格納します ここまで、データを ローカルストレージに保存したり 取り出したり、削除したりする 方法を見てきました 最後にこのサンプルで使っている いくつかのヘルパー関数 について説明しましょう 新しいコースの為のIDを 取得できるのがゲットニューコースIDです この部分に定義されていますね この関数を実装するには 様々な方法があるのですが ここでは、全てのコースをチェックして いずれよりも大きいIDを返す という実装になっています もし、現在あるコースのコースIDの 最大値が11であれば それよりも一つ大きい値 つまり12を返すことになります その下の90行目には ゲットインデックスフォーID という関数が定義されています これは、コースIDを渡して そのコースが配列の中でどこに 存在するのかを取得するためのものです ここでは、配列内の全てのコースをループし 探しているIDと一致した場合は 配列内のインデックス、順番を返します IDが見つからなかった場合は マイナス1を返します 104行目には、ゲットコースバイID 関数が定義されています これは、コースIDを渡すと そのコースのコースオブジェクト を返す関数です 探しているIDのコースが なかった場合はヌル あった場合は、そのコースの コースオブジェクトを返します これら3つの関数は あくまで、このアプリケーションを 実装するためのヘルパー関数です このレッスンにおいて重要なのは ローカルストレージにコースを保存したり 取り出したりするためのコードです Webアプリケーションにおいて データを保存する方法は バックエンドのWebサービスを利用する などの方法もありますが ローカルストレージを使うと非常に 手軽にデータを保存、読み込むことができます このレッスンでは、Webアプリケーションで データを管理する方法について学びました

HTML5 API入門

HTML5は今やインタラクティブコンテンツを作るうえでかかせないものです。このコースでは膨大なHTML5の仕様の中からWebアプリケーションを作成するうえで便利な機能を紹介していきます。コミュニケーション系APIの使い方のほか、Web WorkersやWebSocket、モバイル用アプリの制作で使うjQuery Mobileなどについても解説します。

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

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

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

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