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


今回から 3 回にわけて Windows 8 の新しい UI 上で動作する Windows ストア アプリの開発について書いています。

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

 

前回の記事で紹介しましたように、Windows ストア アプリは JavaScript + HTML + CSS でも作成することができます。

アプリをホストするプロセスが Internet Explorer 10 のスーパーセットであり、マークアップを解釈し、描画を行うエンジンも Internet Explorer 10 と共通であるため、Internet Explorer 10 で動作する Web コンテンツはであれば、若干の仕様上の制限こそあれ Windows ストア アプリのプロセスでホストすることができます。

Windows 8 OS が提供する機能や、Windows ストア アプリが提供する機能を使用しないのであれば、Web の標準技術だけでアプリケーションを作成することも可能です。

それでは Web コンテンツと Windows ストア アプリの違いはなんでしょう?

Web コンテンツと Windoows ストア アプリにはわずかながら仕様上の制約や、拡張された機能があります。

その違いを理解することで、Webアプリの Windows ストア アプリへの移行や、いままでの Web 制作のスキルを活かした開発を行うことができるようになります。

 

Windows ストア アプリと Web コンテンツの違い

Windows ストア アプリと今までの Web コンテンツとの違いを大きく分けると以下の 3 つを挙げることができます。

  • 新しい Windows 8 環境での動作
  • UI (View) がローカルに保存
  • ライフタイムを OS が管理

ここからは上記 3 点について詳細に説明していきます。

 

新しい Windows 8 環境での動作

これは Windows ストア アプリだけでなく Internet Explorer 10 にも言えることなのですが、従来からのアプリケーションの実行環境であるデスクトップと、Windows 8 から導入された新しい (かつて 「Metro」 と呼ばれた) 環境ではアプリケーションの動作が異なります。

たとえば、デスクトップ環境での Internet Explorer 10 と、新しい Windows 8 環境で動作する Internet Explorer 10 および Windows ストア アプリでは以下のような違いがあります。

  1. 全画面表示
  2. 複数の画面レイアウトに対応
  3. プラグインが動作しない
  4. タッチ操作が前提

ここから上記の点について説明していきます。

 

1. 全画面表示

Windows 8 の新しい環境では、コンテンツが全画面で表示され、そのサイズを変更することはできません。

また、アプリケーション ウィンドウのタイトルバー、操作を行うためのメニューバー、ツールバー、タブ、状態を表示すためのステータスバーは表示されず、ポップアップウィンドウも全画面表示となります。

 

image(Internet Explorer 10 のデスクトップ版 (左) と新しい Windows 8 Internet Explorer 10 (右) の比較)

 

これは Windows 8 の新しい環境で動作するアプリに共通したデザインの思想があるためです。

Windows 8 の新しい環境用のアプリのデザインを語るうえで良く登場する言葉で 「immersive」 と 「Content Before Chrome」というのがあります。

「immersive」とは、「熱中する」とか「集中する」等の意味があり、しばしば「没入」というふうに訳されます。

Windows 8 の新しい環境のアプリでは、ユーザーがコンピューターを使用していることを意識しなくなるくらいコンテンツに集中できることを目標にデザインします。

それを実現するためのキーワードが 「Content Before Chrome」 です。

「Chrome (クロム)」 は 「めっき」、暗喩としてデスクトップ時代のアプリケーションの持っているウィンドウ枠や、タイトルバー、メニューバー、ボタンなどの各種アプリケーションを操作するためのコントロールのことを指しています。

Windows 8 の新しい環境では、こういったアプリケーションのコントロールは使用する際に、”アプリバー” や “チャーム” といった決められたコントロールを使用して動的に表示することが推奨されています。

 

image(Windows 8 の Internet Explorer 10 で上下のアプリバーを表示させたところ)

 

これは Windows 8 の新しい環境で動作するアプリに共通して 「コンテンツが主役」という思想があるためです。

たとえば本のページを思い浮かべてみてください。(雑誌ではなくて、ハードカバーや、文庫本のほうです。)

それらの本のページに書かれている文章 (コンテンツ) 以外のものというのは、ページを示す数字やタイトルくらいなものでしょう。

このようにコンテンツを閲覧するのに不要なものを極力排除したものが Windows 8 の新しい環境のアプリ = Windows ストア アプリの UI となります。

 

2. 複数のレイアウトに対応

Windows 8 では、ハードウェア (モニタ) の解像度が固定であっても、複数の表示領域で表示されることを意識したレイアウトを考えておく必要があります。

それは、ハード的に固定された画面解像度にあっても、スナップやフィル、ポートレイトといった複数の表示され方があるからです。

 

スナップとフィル

Windows 8 の新しい環境ではウィンドウのサイズを任意でリサイズさせることはできませんが、決められたレイアウトで、一画面にアプリケーションを最大 2 つ表示させることができます。

スナップ 表示と フィル 表示です。

image(Windows ストア アプリを右側にスナップ表示させたところ)

 

Windows ストア アプリを画面の両端いずれかにドラッグしていくと、320px の幅で画面の端に表示されます。これをスナップ表示と言います。

スナップは、株価やメール、動画再生等アプリなど、メインの作業中に情報を提供するアプリを表示しておくと便利です。

ちなみにこのスナップ表示の機能は、画面の横幅の解像度が 1366px 以上ないと動作しませんので、タブレット マシンを購入される際はご注意ください。

また PC のモニタ上で 1366px 出ていても、プロジェクターの解像度で 1366px 以上の解像度が出ないと、同様にスナップ表示は使用できませんので、プロジェクターを使ったプレゼンをする際にはこちらもご注意ください。

 

ポートレイトとランドスケープ

デスクトップ PC やノート PC の場合、ディスプレイの縦横が入れ替わるというのはあまりないでしょう。

しかし、タブレット型 PC の場合は、画面の縦横を固定する制限となりうる装置がないため横長 (ランドスケープ) の状態で使用されたり、縦長 (ポートレイト) の状態で使用されたりといった状況が発生します。

Windows ストア アプリではこの画面の二つの向きに対してデザインを考慮する必要があります。

image(Windows ストア アプリのポートレイト表示)

 

3. プラグインが動作しない

Windows 8 の新しい UI の Internet Explorer 10、および Windows ストア アプリではプラグインは基本的には動作しません。

ActiveX はもちろん、Silverlight も動作しません。

しかし、Internet Explorer 10 では RTM の段階になって Flash コンテンツがサポートされるようになりました。

ただし、それも Flash コンテンツであればなんでも動作するというのではなく、Flash コンテンツを提供するドメインに対し、インターネット上にある CVList という XML に Flash コンテンツ再生の許可が設定されている必要があります。

このリストに登録を行うには以下のドキュメントに従ってテストを行い、テスト結果を提出するというプロセスが必要になります。

 

Windows 8 の Adobe Flash Player 用のコンテンツを含む Web サイトに関する開発者向けガイダンス
http://msdn.microsoft.com/ja-jp/library/ie/jj193557.aspx

 

ただし、それでも Flash のすべての機能がサポートされるわけではないので、Windows 8 の新しい UI の Internet Explorer 10、および Windows ストア アプリ内で <iframe> で表示する Web コンテンツには Flash も使用しないほうが良いでしょう。

また、Windows ストア アプリ のホストプロセスである WWAHOST.exe は、Flash Player をホストしないため Windows ストア アプリで Flash はサポートされません (動作しません) のでご注意ください。

 

4. タッチ操作が前提

Windows 8 の新しい UI はタッチデバイスで使用されることを前提にデザインされています。

たとえば、ハイパーリンクを考えた場合、小さい文字にリンクを設定した場合、それを指先でタッチするのは困難となります。

Internet Explorer 10 の場合は、デスクトップ版も Windows 8 の新しい UI のものでも、画面をピンチして広げることでコンテンツを拡大することができます。

一方、Windows ストア アプリでは既定でそういった機能は実装されていないので、また、ズーム機能を実装してしまうと使い方によってはレイアウトを崩す原因となってしまうので、あらかじめタッチデバイス上で人間の指がタッチできる大きさにデザインしておく必要があります。

また、タッチデバイスは人間側の誤動作を招きやすいきらいがありますので、なにかを削除するような不可逆的な作業を行う操作については確認メッセージを表示したり、可能であれば、更新系の作業には 元に戻す 機能を実装したいところです。

 

-----・-----・-----・-----・-----・-----・-----・-----・-----・-----・-----・-----・-----

今回の記事では、Web コンテンツと Windows ストア アプリが異なる 3 点から、新しい Windows 8 環境での動作 について紹介しました。

次回は、コンピューターのローカル部分と、インターネット上にコンテンツが別れることによって発生する Web コンテンツと Windows ストアアプリの違いについて紹介します。

 

Real Time Analytics

Clicky

<!--

Web コンテンツと Windows ストア アプリの大きな違いはやはり、Web コンテンツが使用されるたびに Web サーバーからコンテンツが送られてくるのに対し、Windows ストア アプリはコンピューターのローカルにインストールされるということでしょう。

これはつまり、Web コンテンツのように、画面を表示するたびに情報を更新できないことです。

-->

Comments (0)

Skip to main content