作品紹介 食事日記デモ

概要

　この作品は、1食分ごとの食事の記録を残すアプリケーションです。
HTML5と一部の関連APIの個人的な学習を目的とした実験的なWebクライアントアプリケーションです。
この作品では、以下の要素技術を使用しています。

　＜JavaScriptフレームワーク＞
  • jQuery
  • jQuery Mobile
  • jQuery Mobile DateBox
　＜HTML5と関連API＞
  • HTML Media Capture
  • input要素のx-webkit-speech属性(日本語 音声入力)
  • File API
  • Geolocation API
  • Indexed Database API
　＜Web API＞
  • Google Maps JavaScript API V3

稼働環境

【ブラウザ要件】

＜Andorid OSの場合＞

  • Mozilla Firefox 最新バージョン(推奨)
  • Google Chrome 最新バージョン
  • ※動作検証バージョンは以下の通りです。
  • 　Mozilla Firefoxバージョン：16.0.2
  • 　Google Chromeバージョン：18.0.1025464

＜Windows OSの場合＞

  • Mozilla Firefox 最新バージョン(推奨)
  • Google Chrome 最新バージョン
  • ※動作検証バージョンは以下の通りです。
  • 　Mozilla Firefoxバージョン：16.0.2
  • 　Google Chromeバージョン：23.0.1271.64

※本アプリケーションでは、仕様が頻繁に変更されるHTML5関連のAPIを使用しています。指定の最新バージョンのブラウザを使用しても、本アプリケーションが正常に稼動しなくなる可能性があります。

【その他要件】
  • インターネット通信環境、及び、位置情報を取得可能な端末
  • Android端末の場合、カメラ機能が使用可能な端末
  • ※本Webアプリケーションは、インターネットへの通信が発生致します。
  • 　3G、LTE、Wi-Fi等の利用による通信料は、利用者様ご自身の負担となります。
【ライセンス】

操作手順

【インストール】

Webアプリケーションである為、別途、インストールは不要です。当ページ下部のコンテンツリンクから参照してください。

【画面操作】

２つの画面で構成されたWebアプリケーションです。各画面上にて可能な操作は以下の通りです。

＜メイン画面＞

  • 左スワイプ(左フリック)
    対象年月日が１日戻ります。
  • 右スワイプ(右フリック)
    対象年月日が１日進みます。
  • 年月日ボタンタップ(タッチ)
    年月日変更ダイアログが表示されます。
  • リストをタップ(タッチ)
    対象リストの登録画面へ遷移されます。
  • リストをロングタップ(ロングタッチ)
    対象リストの削除ダイアログが表示されます。

＜登録画面＞

  • ファイルを選択ボタンをタップ(タッチ)

    ＜Andorid版　Mozilla Firefox, Google Chromeの場合＞

    　「ファイル選択」ダイアログにて「カメラ」を選択の上、被写体の食事を撮影し、「OK」ボタンをタッチする。
    或いは、ファイルマネージャーアプリを使用して、すでに撮影済みの画像ファイルを選択する。
    画像選択後、位置情報の利用確認ダイアログが表示される為、問題が無ければ許可する。
    上記の処理が正常に処理されると「No Image」画像ファイルが撮影、或いは、選択した画像ファイルに変更され、地図表示欄に現在地の地図が表示される。

    • ※カメラを使用する際には、画像ファイルのデータサイズが大きくなりすぎないよう設定して撮影してください。
    • ※ファイルマネージャーアプリとは、Windowsの「エクスプローラー」のように、フォルダやファイルの一覧を表示したり、管理・操作したりすることができるアプリのことです。これで、SDカードの中身を閲覧できるようになります。

    ＜Windows版　Mozilla Firefox, Google Chromeの場合＞

    　すでに撮影済みの画像ファイルを選択する。
    画像選択後、位置情報の利用確認ダイアログが表示される為、問題が無ければ許可する。
    上記の処理が正常に処理されると「No Image」画像ファイルが撮影、或いは、
    選択した画像ファイルに変更され、地図表示欄に現在地の地図が表示される。

  • 「食事の種類」ボタンをタップ(タッチ)
    入力欄の表示構成が変更されます。
  • 「保存」ボタンをタップ(タッチ)
    入力内容が登録され、画面が再読み込みされます。
  • 「キャンセル」ボタンをタップ(タッチ)
    メイン画面に遷移します。

※＜Windows版　Google Chromeの場合＞
　テキスト入力欄の右側のマイクボタンを押下すると音声入力が有効となります。

Indexed Database APIを使用した所感について

　当アプリケーションにて Indexed Database API を使用した際に考えたことを個人的な備忘録として記載します。

【パフォーマンス】

　リレーショナル・データベースの「レコード」に相当する「オブジェクト」のサイズが大きい場合には、データの読み書きに数秒の処理時間が必要となった。厳密なベンチマークは掲示しないが、2012年に発売された手持ちのAndroid端末では、1つのオブジェクトサイズが約5MBのデータを読み書きする場合に、それぞれ3～5秒程度の待ち時間が発生した。又、Android端末にて動作させた場合、「オブジェクト」サイズが大きいとブラウザアプリの異常終了が頻発した。
　Indexed Database の使用用途にもよるが、今回のアプリケーションのように画像ファイル等のデータを格納する場合は、１つの「オブジェクト」の登録データサイズに明確なサイズ制限を設けることが必須であると思う。(今回は検証の為、未実施。)

【脆弱性】

　Indexed Database のデータのセキュリティ面について、オリジン単位でデータを管理している為、他のアプリケーションにデータが漏えいすることは、無いものと考えがちだが、脆弱性が発現するケースを発見した。
　調査時点のGoogle Chromeブラウザでは、Webサーバを経由しないオフラインアプリケーション環境でも Indexed Database APIが正常に動作することがわかった。さらに、オフラインアプリケーションとして Indexed Database API を動作させた場合、オリジン単位での管理が有効とならずに異なるアプリケーションのデータが１つのフォルダ内に混合された状態となった。上記の環境では、異なるアプリケーション間でデータの参照・変更が可能となった。
　上記の結果から、オフラインアプリケーションとして動作させるアプリケーションでの、 Indexed Database API の使用は、極力避けるべきだと思う。

【データのライフサイクル】

　Indexed Database のデータファイルは、Mozilla Firefoxでは、SQLite形式のファイルで管理されているが、APIを経由して削除処理を実行しても、SQLite形式のファイルサイズが縮小することは無かった。又、Google Chromeでは、独自のバイナリファイル形式で管理されているが、こちらもAPIを経由して削除処理を実行してもファイルサイズが縮小することは無かった。その為、永続的なデータストアとして、或いは、データの更新頻度が多いアプリケーションにて Indexed Database API を使用するとデータファイルが肥大化し続けることになる。
　上記の仕様について、クライアント端末の利用者が理解していないと、ブラウザのデータの消去操作により、データが消失したり、データの蓄積により端末の記憶領域が圧迫される問題が発生する。何れにせよ、データファイルについては、何らかのメンテナンスが必要となり、運用条件が難しいAPIであると感じた。

【実装手法】

　Indexed Database API は、非同期処理にてデータベースを作成・展開し、その処理の結果ごとにイベントハンドラが発火する。展開されたデータベース内のデータを操作する際には、特定のイベントハンドラが発火したタイミングにて、新たな非同期処理を実行する必要がある。同じタイミングで複数件のデータを取得する場合や各非同期処理ごとにエラーをハンドリングしたい場合には、実行速度面で若干の遅延が発生するが、以下のようなパターンにて実装することが望ましいと考える。

　　　＜パターン＞

　メインスレッドにて一つのオブジェクトを発行し、そのオブジェクト内で Indexed Database を操作する非同期処理を実行する。非同期処理として別のスレッドで処理した成果をメインスレッドから定期監視しながら、次の非同期処理を要求するといった協調動作が行われるように実装する。

【実装効率】

　Google ChromeとMozilla Firefoxでは、Indexed Database APIの構文が異なる為、両方のブラウザに対応させる場合、それぞれのブラウザでのホワイトボックステストが必要となるが、実装効率を比較した場合、データファイル形式がSQLiteであるMozilla Firefoxの方が、SQLiteとして内容を参照することが可能である為、テストしやすいと感じた。但し、Android端末を使用したデバックに限っては、USBウェブデバック機能が用意されているGoogle Chromeにて実施した方が作業効率が高かった。

ダウンロード