このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第51回

iOS 4.2×localStorageで作るGPSレコーダー

2011年03月02日 13時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 iOS 4.2が出て3か月ほど経過しました。iOS 4.2ではJavaScriptで加速度センサーを扱えるなど便利になった反面、以前に比べて不便になった面もあります。1つが、内蔵データベースであるSQLiteです。HTML5の仕様からWeb SQL Databaseが廃止されたためでしょうか、iOS 4.2ではJavaScriptからSQLiteへのアクセスができなくなりました。そのため、本連載の第2回で作成した、SQLiteを使ったGPSレコーダーは動作しなくなっています。

JavaScriptラボ 第2回「iPhoneがJavaScript+SQLiteでGPSレコーダーに!」
http://ascii.jp/elem/000/000/434/434928/

 今回のJavaScriptラボでは、GPSレコーダーの実装をSQLiteからlocalStorage (ローカルストレージ)に変更し、iOS 4.2でも動作させる方法を解説します。localStorageの扱いに関しては以下の記事を参照してください。

JavaScriptラボ 第40回「サーバー不要で保存できる「Web Storage」の使い方」
http://ascii.jp/elem/000/000/557/557064/

 なお、iPhone (iOS 4.2)のlocalStorageはオリジン*1あたり最大2621391文字まで保存できます。オリジン単位での共有ですので、同一オリジンの他のページでlocalStorageを使用していると、実際に保存できるデータサイズは少なくなります。

localStorageへデータを記録する

 プログラムを作る前に、どのような形でlocalStorageへ記録するかを決めましょう。localStorage はKey Value方式でデータを保存しますので、まず保存するキー名を決めます。データを一括して保存する方法もありますが、操作を誤って消去しても個別のデータが残るように、今回はGPSデータを記録した総数を「jp.ascii.gpsDataCount」、個別のGPS記録データを「jp.ascii.gpsData番号」というキー名にしました。「jp.ascii.gpsData番号」は実際にはjp.ascii.gpsData1、jp.ascii.gpsData98のようなキー名になります。

GPSデータ総数jp.ascii.gpsDataCount数値で保存
GPSデータ(個別)jp.ascii.gpsData番号カンマ区切りデータで緯度、経度、時間を保存

 記録するデータが決まったのでプログラムの作成に入りましょう。Webページが読み込まれたら、記録されているGPSデータの総数を読み出します。

var count = window.localStorage.getItem("jp.ascii.gpsDataCount") || 0;

 このとき、GPSデータがまったく記録されていないと、window.localStorage.getItem("jp.ascii.gpsDataCount")はnullとなり、変数countの値もnullになってしまいます。そこで、|| 0 を追加して、nullの場合は変数countに0が入るようにします。

 ||は条件式での論理和であり、||の左右どちらかが真であれば条件を満たしたことになります。この場合、必ず左側の式から真偽がチェックされていき、偽以外の値であればそこでチェックが終了します。たとえば以下の場合、変数aには12が入ります。

a = null || undefined || 12;

 以下はどうでしょうか。この場合も変数aには12が入ります。12の部分で条件を満たした(真である)ことになるので、以後に続く部分はチェックされないのです。

a = null || 12 || 34;

 ちなみに、

var count = window.localStorage.getItem("jp.ascii.gpsDataCount") || 0;

は以下のように書いても同じ結果になります。

var count = window.localStorage.getItem("jp.ascii.gpsDataCount");
if (!count){ count = 0; }

 localStorageから読み出したGPSデータの総数をアラートダイアログに表示すると以下のようになります。

var count = window.localStorage.getItem("jp.ascii.gpsDataCount") || 0;  
alert("データは"+count+"個記録されています");
【図】fig01.png

*1 オリジン=プロトコル+ドメイン+ポート番号

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング