ナレッジボックス

Pocket


ブラウザDBを使ったWebサイトのオフラインモバイル対応

プラットフォーム: iPad / iPhone / PC(Chrome / Safari )

ブラウザDBを使ってWebシステムをオフラインでも利用できるサイトにリニューアルします。
iPadやiPhone、Androidに最適なアプリケーションを簡単に構築できます。
ブラウザ上で動作するアプリケーションなのでモバイルOSの種類に関わらず構築できます。

特徴

・オフラインで使えるモバイルサイトを構築します

・モバイルOS(iPad/iPhone、Android)に依存しません

・AppStoreなどに公開する手間がなく、ブラウザだけで利用できます

・モバイル端末の画面サイズや操作法に最適な画面レイアウトに組み換えます

開発経緯や開発者による苦労話

オフラインで利用できるシステムを作るための技術としてHTML5を採用しました。
HTML5が策定する機能の内、特に次の2つの機能がこの仕組みの肝に当たります。

 

・HTMLファイルや画像ファイルなどのリソースファイルをブラウザに保存しておく機能
・ブラウザにデータベースを持たせてデータを管理する機能

 

ところがHTML5の仕様群はまだ完全ではなく、ブラウザのバージョンが更新されたときに動かなくなる可能性があります。特に、ブラウザにデータベースを持たせる機能は動かなくなる可能性が高く、この仕組みの実現性が危ぶまれました。

 

そこで我々は今後実現が堅いだろうと言われている機能(IndexedDB)と現時点で一番実現が進んでいる機能(WebSQLDatabase)の両方を切り替えて対応できる共通部品を作成しました。

サービスへの活用例

・AndroidとiOSでプログラムを別々に開発したくない場合に!

・外に出ることが多い営業さん向けのシステムに!

・AppStoreやGooglePlayに公開したくないモバイルアプリケーションに!

・頻繁に更新するコンテンツアプリケーションに!

デモ or 利用イメージの画像

HTML5でオフラインWeb

技術詳細

・HTML5 Application Cach

・HTML5 WebSQLDatabase/IndexedDB

・jQuery / jQuery Mobile

 

HTML5のAPIでブラウザにデータベースを作成する方法は、2013年2月時点で2通りあります。
一つがWebSQLDatabaseであり、もう一つはIndexed Databaseです。
WebSQLDatabaseは、いくつかのブラウザで最も実現が進んでいるにもかかわらず、仕様として凍結が決まってしまっています。他方でIndexed Databaseは標準となるだろうと言われていますが、まだきちんと実装されたブラウザが少ないので現時点で使い物になりません。

 

Indexed Databaseは、KeyValueStore形式のデータベースであり、.put()や.get()といったメソッドでJavaScriptObject表記法(JSON)のデータを保持します。

 

後々に、Indexed Databaseを利用するとして現段階ではWebSQLDatabaseでKeyValueStore形式のデータベースラッパーを作成して、利用法を制限しておけば、後にIndexedDatabaseの実装が普及した時にも乗り換える事が出来るようになります。

 

下記に、そのデータベースラッパーのコードを記載します。
※ ChromeまたはSafariのみ対応です。

 

■ローカルデータベースを利用するための前処理部分

上記のコードにより、db.open()メソッドをコールしたタイミングで、WebSQLDatabase上にKEYとVALUEとTIMESTAMPというそれぞれのカラムを持ったテーブルが作成されます。(既に存在すれば作成しません)

 

■get()メソッド

 

get()メソッドは、取得したいkeyとonsuccessというコールバック関数を引数にとるメソッドです。
WebSQLDatabaseにしろ、IndexedDatabaseにしろ、このような非同期型のAPIの方が、同期型API(var returndata = db.get(key);のような)よりも実装が進んでいる傾向にあります。

 

同期型のAPIの方がコードぱっと見たときには理解がしやすいのですが、使ってみると非同期APIの方がパフォーマンスも良く、モダンなJavaScriptコーディングには向いてると感じられます。

 

■put()メソッド

 

put()メソッドもコールバック関数を受け付ける非同期型のAPIとしています。
データ存在時のコールバックなど、いくつも引数がありますが多くは省略可能です。

まとめ

今までのWebシステムをiPhoneやiPadでも快適につかえるようにオフライン対応できます。
またAppStoreやGoogle Playに公開する手間がなく、頻繁に更新するようなアプリケーションや社内だけで利用するようなアプリケーションには最適です。


Pocket

お問合せ

開発に関するご相談/各種お問合せは下記まで。

TEL.06-4806-3470 月曜~金曜(祝日を除く)10:00~18:00
contact-dev@kronos-jp.net

技術情報

  • ナレッジボックス
グリーンハンド
STA-LOG
クロノスラボ
採用

株式会社クロノス > 技術情報 > ナレッジボックス > 06.モバイル関連 > ブラウザDBを使ったWebサイトのオフラインモバイル対応