こんにちは
エンジニアのくぼっちです。
前回の記事の自己紹介で、「モダンWEBアプリケーションの開発に興味がある」といった事を書きましたので、今回はそのことについて書きたいと思います。
※一口に「モダンWEBアプリケーション」といっても、定義は色々あるとは思いますが、ここでは「HTML5で新たに追加された機能をふんだんに使ったブラウザアプリ」くらいの軽い認識の定義とします。
ここ1~2年で主要ブラウザのHTML5実装が大きく進み、現在多くの新機能が利用可能です。
仕様を策定しているW3Cとしては、ブラウザ上で一通り何でもできるようにするといった思惑があるらしく、既に機能面ではネイティブアプリケーションを置き換えることができるところまでリッチになっています。
スマートフォンの界隈は今でこそネイティブアプリが隆盛していますが、PCのソフトウェアがそうなったのと同じように近い将来、WEBアプリケーションが主流となる事でしょう。
そこで、スマホネイティブアプリと比べて遜色の無いWEBアプリケーションを作成することを目標として、新機能を順次実装したサンプルアプリを作成して本ブログに掲載していきたいと思います。
今回の記事では下記の機能を盛り込んだWEBアプリケーションを作成しました。
- オフライン状態での実行
- 全画面表示
下記URLからデモアプリとして簡易チャットアプリを実行できます。
※Google Chrome47 （Windows版、Android版）のみで動作確認しています。他のブラウザでは動きません。
※チャットに送信したメッセージは全閲覧者に見える状態になるので注意してください。
●機能の紹介
裏側の作りがどうなっているかは置いておいて、まず今までのWEBアプリケーションから新たにできるようになったことの解説を行いたいと思います。
・全画面表示
![Screenshot_2015-12-21-11-48-08[1]](https://xxxaz.jp/blog/wp-content/uploads/2015/12/Screenshot_2015-12-21-11-48-081-169x300.jpg)
→ ![Screenshot_2015-12-21-11-47-26[1]](https://xxxaz.jp/blog/wp-content/uploads/2015/12/Screenshot_2015-12-21-11-47-261-169x300.jpg)
全画面表示にすると途端にネイティブっぽい雰囲気になります。
セキュリティ上の問題からか、ユーザ操作を挟まないと全画面化できないため、スタートページは必須になりそうです。
・オフライン状態での実行
一度ページ読み込めば、その後はネットワークを切断していても実行可能です。
![Screenshot_2015-12-21-15-40-20[1]](https://xxxaz.jp/blog/wp-content/uploads/2015/12/Screenshot_2015-12-21-15-40-201.jpg)
→ ![Screenshot_2015-12-21-15-40-51[1]](https://xxxaz.jp/blog/wp-content/uploads/2015/12/Screenshot_2015-12-21-15-40-511.jpg)
サーバに接続できないため、新規のメッセージをやり取りすることはできませんが、最後に読み込んだメッセージは表示されます。
このデモではチャットアプリのためあまり有用ではありませんが、特に通信を必要としない処理の場合、WEBアプリでもオフラインで動くアドバンテージは大きいでしょう。
●javascriptの実装
・全画面表示
Fullscreen APIを利用しています。
javascriptエンジン毎に呼び出し関数が異なるため、分岐処理を入れないと他のブラウザで動作しないので注意してください。
デモアプリではGoogle Chrome用に下記の関数を使用しています。
element.webkitRequestFullScreen() ⇒ 呼び出し元の要素を全画面表示
document.webkitExitFullscreen() ⇒ 全画面表示の解除
document.webkitIsFullScreen ⇒ 現在全画面表示であるかの判定
Webページ外からのブラウザのアクションで全画面表示が解除されるパターンが結構あるようなので、そういった場合のフォローも今後の課題です。
・オフライン実行
Application CacheとLocal Storageを利用しています。
Local Storageについては非常に単純です。
localStorage[“key”] = output; ⇒ 値の保存（文字列に変換される）
var input = localStorage[“key”]; ⇒ 値の読み出し（文字列形式）
同一オリジン（プロトコル + ホスト名 +ポート が同一）のWebページに対して同じ値を保持します。あまり深いこと考えずに手軽に値の保持が効くので非常に使い勝手がいいです。
そのセッション中だけ保持したい場合にはsessionStorageを利用するといいでしょう。
Applecation Cacheではキャッシュするファイルを指定するマニフェストファイル用にContent-typeが”text/cache-manifest”となるファイルを用意しなければなりません。
apacheの設定ファイルに下記の行を追加して拡張子.appcacheのファイルを用意するやり方がよく紹介されています。
今回のデモでもそのように実装していますが、ある程度複雑になってきたらスクリプトから動的に吐き出せるようにするのが良さそうです。
AddType text/cache-manifest .appcache
マニフェストファイルの指定はキャッシュさせたいページのHTMLタグに設定します。
<html manifest=”demo.appcache”>
マニフェストファイルの内容は下記の通り。
CACHE MANIFEST
# 2015-12-21:v0CACHE:
index.html
demo.jsNETWORK:
*
マニフェストファイルの内容を何かしら変更すれば次回以降のアクセス時にキャッシュされたファイルの再読み込みが行われます。言い換えると、変更されない限りキャッシュされたファイルはクライアント側では更新されませんので注意が必要です。
CACHE:以下にはキャッシュしたいファイルを書き出します。
NETWORK:以下にはキャッシュを行わないファイルを指定します。*はワイルドカードになります。
他に、ネットワークアクセスできない場合に振替を行うFALLBACK:があります。
今後も引き続き本ブログにて、このデモアプリを更に更新して機能やビジュアルをリッチにしていきたいと思います。
Webアプリケーションの将来性についてエンジニアと話すと大概の人はわかってくれるのですが、非エンジニアだと実物も無いところで話してもいまいちピンとこないような感じを受けることがしばしばあったため、Web WorkerやWeb RTC等、触ってみたい機能は多くある中、視覚的にもわかりやすい機能を始めに紹介しました。
ソース自体大分荒い書き方をしてしまっていますが、今後継続してメンテナンスしていくつもりですので多めに見ていただけると幸いです。