Windows ストア アプリと Web コンテンツの違い (2/3)


HTML + JavaScript を使用した WSindows ストア アプリの開発方法についてしばらく書いていく予定です。

 

過去の記事は以下をご覧ください。

 

前回から 3 回にわけて Web コンテンツと JavaScript + HTML で作成する Windows ストア アプリの違いについて紹介しています。

今回は 前回の続きで、Windows ストア アプリと Web コンテンツの違い (2/3) についてです。

 

UI (View) がローカルに保存される

 

Web コンテンツと Windows ストア アプリの大きな違いの 2 つめは、Web コンテンツが、リクエストのたびに Web サーバーからページが送信されてくるのに対し、Windows ストア アプリはコンテンツの一部、あるいは全部が、あらかじめコンピューターのローカルインストールされているということでしょう。

これについて考慮すべき点を大別するとするならば、以下の 3 点が挙げられます。

  1. オフラインでの使用の有無
  2. UI 部分とデータ部分の分割
  3. セキュリティコンテキストの違い

ここからは上記三点について、詳しく紹介していきます。

 

1. オフラインでの使用の有無

 

Windows ストア アプリケーションは、アプリケーションとしてローカルにインストールされるので、オフラインの状態でもユーザーから呼び出されます。

つまりは、オフライン時にどのような処理をするか考えて機能を実装しておく必要があります。オフラインでも使用可能にするのか、もしくは使用できない旨を表示するのか、それとも単純にエラーを表示するだけなのか、その結果
と影響を考えて実装します。

具体的な考慮点を以下の示します。

 

オンライン/オフラインの判断

オフラインでの使用を可能に する/しない にかかわらず、実装しなければならない機能があります。それはオンライン/オフラインの判断処理です。

JavaScript からは HTML5 の API が使用できるので navigator オブジェクトの onLine プロパティを調べることで簡単に判断することができます。

//navigator オブジェクトの onLine プロパティを使用した記述例
var msg = (navigator.onLine) ? "オンラインです" : "オフラインです";

 

ちなみに Windows API を使用してもオフライン/オンラインの判断ができます。

//Windows API Windows.Networking.Connectivity を使用した記述例
function isConnected() {
        var networkConnectivity = Windows.Networking.Connectivity;
        var profile = networkConnectivity.NetworkInformation.getInternetConnectionProfile();
        if (profile) {
            return (profile.getNetworkConnectivityLevel() != networkConnectivity.NetworkConnectivityLevel.none);
        }
        else {
            return false;
        }
    }

 

データの保持

Windows ストア アプリをオフラインで使用可能とする場合、考えなければならないことはいいろいろありますが、もっとも大前提として考えなければならないことはオフライン時のデータの保持をどうするかということです。

JavaScript から明示的にデータを保持させる方法として、Web 標準に準拠した機能では cookie(※) と LocalStrage、Indexed DB が使用できます。

cookie が保持できるのはテキスト データのみ 4KB(RFC 2109) しかないので、LocalStorage が使用できる Windows ストア アプリで使用に値するかは微妙なところです。

LocalStorage は cookie ライクな使い方で 10MB までのテキスト データを保持することができます。

<参考>
DOM ストレージの概要
http://msdn.microsoft.com/ja-jp/library/cc197062(VS.85).aspx

さらに、Internet Explorer 10 からサポートされた IndexedDB ではユーザー側での指定が必要になりますが、さらに大きなサイズの領域と、構造化したデータを保存することができます。
ただし、IndexedDB は LocalStorage などの比べて使い方は複雑になります。

<参考>
IndexedDB オブジェクトの作成とオープン
http://msdn.microsoft.com/ja-jp/library/jj154905(VS.85).aspx

また、Windows API には Windows.Storage ネームスペースの下にファイルアクセスのための様々なクラスが用意されているので、これらを使用するのも良いでしょう。

Windows.Storage
http://msdn.microsoft.com/ja-JP/library/windows/apps/windows.storage

 

その他、HTML5 の技術を使った オフライン Web アプリケーションの作成について、以下のようなドキュメントも用意されているので参考にすると良いでしょう。

W3C – Offline Web Applications
http://www.w3.org/TR/2008/NOTE-offline-webapps-20080530/

 

2. UI 部分とデータ部分の分割

 

繰り返しになってしまいますが、Windows ストア アプリケーションはローカルにインストールされるので、アプリがサーバー側で更新されるデータを使用する場合は、アプリケーションとしてローカルにインストールする部分と、サーバーにおいておく部分を別けて設計しておく必要があります。

 

View とデータモデル

ASP.NET や PHP といった Web ページを Web サーバー上で生成するものについては、データ部分と UI 部分をサーバー上とクライアントのローカルに分けて配置することでどのような影響を受けるのか考える必要があります。

例えば、アプリケーションの画面遷移の状態をなにで把握するのか、セッションの管理をどうするのか、などです。

このクライアント サイドとサーバー サイドでのアプリケーションの分割については、サーバーサイドのアプリケーションの開発に使用される MVC パターンで考えると整理しやすくなりますので、MVC の Model と Controller をサーバーサイドに配置し、View を Windows ストア アプリしてクライアントに配置していると考えてみてください。

 

ネットワーク環境を考慮

ローカルとネットワーク上という、物理的に違う場所にコンテンツを分割することで発生する影響も考慮する必要もあります。

具体的には、前述のオフラインの状態、もう一つはネットワーク速度による遅延です。

ネットワークからの情報の取得は、ローカルリソースへのアクセスよりもリクエストとレスポンスの間ははるかに長く、ネットワーク環境の影響を強くうけます。

ネットワークからの情報取得を同期的に行ってしまうと、アプリケーケーションの UI は、その処理が完了するまでロックされ、操作できない状態となってしまうのでUX としては非常に問題です。

そういった問題を避けるためには、ネットワークからの情報取得に関しては、非同期で行うよう実装する必要があります。

JavaScript にはもともと SetTimeOut や SetInterval、イベントハンドラーといった非同期モデルが導入されているので、それらを使用することもできますが、WinJS ライブラリには Promises パターンを採用した非同期モデルが提供されており、開発者は、同じ基礎的なテンプレートを常に使用して、FileReader、WebSocket、Geolocation、IndexedDB、などなどアプリケーションに組み込むことが可能になっています。

Windows ストア アプリにおける JavaScript での非同期プログラミングについては以下のドキュメントをご参照ください。

 

JavaScript での非同期プログラミング
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh700330.aspx

 

ネットワーク上のデータのキャッシュ

それほど頻繁に更新しなくても良いデータについては、取得したデータをローカルにキャッシュするなどの工夫をしましょう。

たとえば、カタログに使用されている製品の画像などは、更新頻度が高くないたのでキャッシュすることをお勧めします。

キャッシュの方法については HTML5 の Application Cache が使いやすく個人的におすすめです。

Application Cache については、過去にこのブログに記事を投稿しているのでご参照ください。

 

[実用HTML5API]マニフェストファイルを使用したキャッシュ(Application Cache)
http://blogs.msdn.com/b/osamum/archive/2012/03/06/html5api-application-cache.aspx

 

また MSDN にも解説のドキュメントがありますので、こちらも合わせてご参照ください。

Application Cache API ("AppCache")
http://msdn.microsoft.com/ja-jp/library/ie/hh673545(v=vs.85).aspx

 

ここまで紹介したように、Web サーバー上で更新される情報を利用する Windows ストア アプリのコンテンツは、コンピューターのローカルにインストールされる部分と、サーバーから取得したデータを使用する部分とで分ける必要があります。それにより、オフライン時の処理、情報の取得方法や描画のタイミングなど、考慮しなければならない点が出てきますので、ここで紹介した内容を参考にローカルのリソースと、ネットワーク上のリソースのシームレスな連携を心がけてください。

 

3. セキュリティコンテキストの違い

 

Windows ストア アプリはコンピューターのローカルにインストールされ、それ自体がアプリケーションとして動作します。

Web ブラウザー上で動作するコンテンツ (アプリケーション) よりも強い権限を持っており、フォルダやファイル、センサーなどにアクセスすることが可能であり、ソフトウェアとしての利便性が高まっています。

強い権限は、アプリの利便性を高めますが、その反面、セキュリティリスクにもつながります。

たとえば、以下のように Script タグの scr 属性にインターネット上の js ファイルが指定されていたとして、インターネット上のこの js ファイルが悪意を持って書き換えたらどうなるでしょう?

//インターネット上の js ファイルを参照
<script type="text/javascript" src=”http://example.com/oreore/oredattebayo.js”></script>

その場合、Windows ストア アプリは、ローカルのリソースを操作できるため非常に大きな被害を被る可能性があります。

そのようなリスクを回避するため Windows ストア アプリでは、上記のような外部に配置された js ファイルを参照できないようになっています。

また同様に innerHTML に <script> タグを出力することもできません。よって、innerHTML に <script> に動的にコードを吐き出すような js ライブラリは Windows ストア アプリに使用することはできません。

またタグの属性に JavaScript:コード のような指定もできません。

この制限についての情報については、以下のドキュメントを参照してください。

 

各コンテキストの機能と制限 (JavaScript と HTML を使った Metro スタイル アプリ)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465373.aspx

 

JavaScript 以外では iframe などもコンテキストの違いによる影響を受けます。

Windows ストア アプリは <iframe> タグを使用して、インターネット上の Web コンテンツをアプリ内で表示させることができます。

Windows ストア アプリは、強い権限を持ったローカル コンテキストで動作しますが、その内部で使用される iframe 内のコンテンツは弱い権限しかない Web コンテキストで動作します。

そのため iframe 内からのシステムへのアクセスなどは制限されています。

image

 

以下は参考として挙げますが、非常に重要な内容を含んでいますので、ぜひご覧ください。

 

HTML、CSS、JavaScript の機能と違い (Metro スタイル アプリ)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465380.aspx

 

HTML と DOM API の変更点の一覧
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh700404.aspx

 

 

—–・—–・—–・—–・—–・—–・—–・—–・—–・—–・—–・—–・—–

今回は、アプリのコンテンツがコンピューターのローカルにインストールされる部分と、インターネット上から取得する部分に別れることによって発生する、Web コンテンツと Windows ストア アプリの違いと、Windows ストア アプリを作成する際の注意点について紹介しました。

次回は、Web アプリではまったく意識する必要のなかった、OS から管理される Windows ストア アプリのライフタイムと、その対応方法について紹介します。

 

 

Real Time Analytics

Clicky

Comments (0)

Skip to main content