第 1 章: Hilo の概要

Hilo の最初のサンプル アプリケーション、Hilo Browser は、写真や画像を参照したり選択するためのタッチ対応ユーザー インターフェイスを実装しています。Hilo Browser アプリケーションのコードは、MSDN コード ギャラリー (英語) からダウンロードできます。この記事では、Hilo Browser アプリケーションと Windows 7 アプリケーションの開発について、開発者が使用できるツールと API の説明を交えながらご紹介します。Hilo Browser アプリケーションの詳細については、この後の各記事で詳しく検証していきます。

Hilo の使い方

Hilo アプリケーションを使用すると、複数の写真の選択、コメントの追加、共有を自然な方法で実行することができます。これを可能にするために、Hilo では、ライブラリ、タッチ、Windows リボン、Direct2D、Windows アニメーションといった Windows 7 のさまざまな重要機能を使用しています。

タブレット コンピューターを使用する場合、スクリーンをタッチしてアプリケーションと対話したり、スタイラスを使ってデータを入力することができます。Hilo はタッチ機能とペン機能を利用できるように設計されていますが、マウスしか装備されていないコンピューターでも十分に活用できます。Hilo では Windows 7 のアニメーション機能が効果的に使われており、ファイルの参照やナビゲーションのパラダイムがより自然なものになっています。このような設計が選ばれた理由は、多くの Windows アプリケーションで使われているテーブル ベースのパラダイム (たとえば、ツリー ビューやリスト ビュー コントロールなど) から脱却し、タッチ インターフェイスの利用に適したデータ表示形式にすることで、より簡単で自然なデータ アクセスを提供できるようにするためです。

Hilo アプリケーションの中心は、図 1 に示す Hilo Browser です。ブラウザー ウィンドウの上半分は、カルーセルになっています。図 1 を見ると、[Pictures] フォルダーに 6 つのサブフォルダーがあることがわかります。これらのサブフォルダーは、1 つのカルーセルの軌道上に表示されています。タッチを使ってこれらのフォルダーを軌道に沿って回転させ、目的のフォルダーを正面に持ってくることができます。この表示では、回転できる完全なカルーセルの軌道は 1 つだけですが、親フォルダーを示すカルーセルの軌道の一部も表示されます。たとえば、図 1 では 1 つの完全な軌道の上方に、[Pictures] フォルダーの軌道の一部が表示されています。

図 1 Hilo Browser でのカルーセルとメディア ペインの表示

Hilo Browser ウィンドウの下半分には、選択したフォルダー内の画像を表示するメディア ペインがあります。メディア ペインには、先頭のいくつかの画像が表示されます。メディア ペインの矢印をタッチ (マウスを使う場合はクリック) すれば、その他の画像を表示できます。

メディア ペインは、"タッチ対応スクリーン" という別のパラダイムで設計されています。画面上の目的の場所を指で正確にタッチするのは難しいので、Hilo Browser ではメディア ペインに小さなスクロール バーを配置するのではなく、メディア ペイン自体がスクロール バーの役割を果たすようにしています。また、アイテムをタッチでドラッグできれば、スクロール バーは不要になります。

したがって Hilo Browser では、表示されていないアイテムを表示するための方法が 2 通りあります。1 つはペインの左右にあるスクロール矢印をタッチする方法で、もう 1 つは画像の一覧を移動したい方向に向かって、メディア ペインのどこかをフリックする方法です。これは非常に自然なジェスチャであり、このタッチ インターフェイスの存在は、ユーザー インターフェイス (UI) アイテムとの対話方法を変化させる必要があることをアプリケーション設計者に投げかけています。タッチで UI を利用する場合、ジェスチャは非常に自然な操作ですが、マウスを使う場合には当てはまらないので、スクロール矢印またはマウスのスクロール ホイールを使用することになります。Hilo Browser では、Page Up キーと Page Down キーを使って画像をスクロールすることもできます。マウスとキーボードを使うユーザーにもタッチ ユーザーにも入力機能を提供できることが、優秀なアプリケーションの条件となります。

同様に、カルーセルの回転は、タッチ スクリーンで指を使って実行する自然な操作です。私たちがカードや写真をテーブル一杯に並べて目的のものを探すことと同じように、カルーセル表示によって目的のフォルダーへのアクセスが提供されます。マウス ユーザーもカルーセルを完全に活用できるので、軌道に沿ってフォルダーを回転させる操作を楽しむことができます。

フォルダー構造をナビゲートするとき、選択中のフォルダーが左上のスタックに表示されます。図 1 では、初期的に [Pictures] がスタックの一番上にあります。カルーセルから特定のサブフォルダー (たとえば [Summer]) を選択すると、図 2 のように、そのフォルダーがスタックの一番上になります。フォルダー構造の中を移動するたびに、それぞれの親フォルダーがスタックに表示されます。スタックの下にある矢印を使えば、1 つ上のレベルに移動することができます。

図 2 Hilo Browser では左上にスタックが表示される

タッチ インターフェイスまたはマウスのクリックにより、いつでもスタックを展開できます。スタックを展開すると、そのスタック内のフォルダーを示す階層リンクの軌跡に、すべてのフォルダーが表示されます (図 3)。階層リンクの軌跡の右側には、この軌跡の下にあるサブフォルダーの軌道が灰色で表示されます。

図 3 Hilo Browser でスタックを展開した状態

それぞれの親フォルダーの軌道が、展開されたスタックの一部分として表示されていますが、表示されるフォルダーは、階層リンクの軌跡にあるフォルダーだけです。また、この表示ではカルーセルの軌道を回転させることはできません。ただし、階層リンクの軌跡にあるいずれかのフォルダーを選択すると、別のフォルダーにすばやく移動し、そのサブフォルダーをカルーセルで表示することができます。このように階層リンクの軌跡を制限し、軌跡上のフォルダーだけを表示するようにすることで、たとえば Windows Explorer で使われているようなツリー表示と比べて、散らかった印象のないクリーンなインターフェイスになり、目的のフォルダーがはるかに見つけやすくなります。

前のカルーセル表示に戻るには、フォルダーをタッチまたはクリックするだけです。こうしたスタックの展開と縮小の方法により、フォルダー ツリーのナビゲーションが簡単かつ自然な操作になっています。

Windows 7 アプリケーションの開発

商品としてのアプリケーションには、機能性が高いこと、そして (一般に) 他の製品にないサービスを提供することが要求されます。ただし、競争熾烈な市場では、単に機能性が高いだけでは不十分であり、魅力的なユーザー エクスペリエンスを提供するアプリケーションにすることが重要になります。そこで重要な役割を担うのが、Windows 7 の機能です。Hilo Browser は Windows 7 の機能をフルに活用しています。Hilo Browser で使用されている主なテクノロジは、Direct2D、Windows アニメーション、タッチ API、シェル API の 4 つです。

Direct2D を使用したユーザー インターフェイスの作成

魅力的なアプリケーションを作成するうえで重要なのは、視覚的に訴求力があり、しかも実用的な UI を提供することです。最新のコンピューターは、強力なグラフィックス プロセッシング ユニット (GPU) を搭載したグラフィックス カードを装備し、高解像度モニターを使用しています。Direct2D は最新の GPU 向けに開発されたテクノロジであり、GPU の機能を完全に活用できます。Direct2D アプリケーションをフル機能のグラフィック カードで実行する場合、ハードウェア アクセラレーションが使用されます。ただし、Direct2D で可能な限り多くのグラフィックス カードをプログラミングできるようにするために、基のライブラリがカードの GPU の機能をチェックし、GPU がサポートしない機能がある場合は、DirectX® アプリケーション プログラミング インターフェイスがソフトウェア実装を提供します。つまり、どのようなグラフィックス カードが使われても、開発者が書くコードは同じになります。

Direct2D は、旧バージョンの Windows のグラフィックス デバイス インターフェイス (GDI) プログラミングとは異なるパラダイムを使用しています。GDI プログラミングでは、画面上のピクセルの変化をプログラム コードで決定し、コンピューターの中央処理装置 (CPU) がピクセルを変更するための計算を実行します。Direct2D プログラミングでは、表示の変化をプログラムで指定し、ライブラリがグラフィックス カードの GPU に指示を出して必要な計算を実行させ、表示を更新させます。これにより、コンピューターの CPU が解放され、データ処理に集中することができるので、より高速で応答性の高いアプリケーションを実現することができます。さらに、GPU はアンチエイリアシングやアルファ チャネル (不透明度) のブレンドといった高度な機能をサポートするので、魅力的なユーザー インターフェイスを提供できます。

Hilo Browser は、こうした Direct2D の機能をフルに活用しています。その一例として、カルーセルに表示される軌道 (図 3) は、グラデーション ブラシで描画されています。

Windows アニメーションの使用

開発者はアニメーション マネージャーを使用して、UI 要素のシーケンスをアニメーションすることができます。アニメーションの最も単純な形式は、一部のアイテムを変化させながら表示する一連のフレームです。変化としては、UI アイテムのサイズ、色、位置、方向などがあり、変化そのものをスムーズにも突発的にも、また直線的にも対数的にも実行できます。再生用のストーリーボードとしての一連のフレームの制作は、従来から大量のコーディング作業を必要とし、実行時の膨大な CPU 処理を伴うものでした。それだけでなく、アニメーションを可能な限りスムーズにするには、モニターのリフレッシュ レートと同期して各フレームが表示されるよう、コードを工夫する必要がありました。

Hilo Browser では、アニメーションを効果的に使用しています。高度なアニメーションもあります。たとえば、カルーセルでのフォルダー表示に使用される回転のパラダイムでは、カルーセルでのフォルダーの見かけ上の位置に応じて、フォルダー アイコンとキャプションのサイズが拡大縮小されます。つまり、ユーザーに最も近い位置にあるフォルダー (ユーザーが選んだフォルダー) は、キャプションも含めて他のフォルダーよりも大きく表示されます。

他にも、魅力的なユーザー エクスペリエンスを提供するアニメーションがあります。たとえば、特定のフォルダーをタッチするとカルーセルがズームインし、画面の最上部に表示されている既存の軌道に達するまで、以前の軌道が延長されます。また、選択されたフォルダーがスタックの一番上に移動します。それと同時に、メディア ペインに表示可能な数だけ、画像のサムネイルが表示されます。Hilo Browser は、テーブルにカードを並べるように、左から 1 枚ずつ画像をスライドさせながら表示します。このアニメーションは、画面の更新を楽しいものにするだけでなく、ある重要な目的も果たしています。人間の脳は、静止した画像よりも動きに対して敏感に反応します。そのため、このアニメーションによって、表示されるサムネイルにユーザーの注意を引くことができます。開発者は重要なデータ アイテムにユーザーの注意を引く必要があります。Hilo Browser は、それをアニメーションで達成する方法を具体的に示しています。

タッチ API の使用

画面上のアイテムを選択したり移動したりする場合のユーザーにとっての自然な動作は、指またはスタイラスで対象のアイテムをポイントすることです。タッチ API を使用すれば、アプリケーションでこの動作を実現し、ユーザー エクスペリエンスを向上させることができます。

Hilo Browser では、指でフォルダーをドラッグしてカルーセル（ターンテーブル）を回転させます。ユーザーが画面から指を離すと、現実の世界でもそうなるように、カルーセルは回転を続けながら速度を落としていき、最終的に停止します。ユーザーはフォルダーを指でタッチすると、回転中のカルーセルを停止させることができます。Hilo Browser の設計者は、アプリケーションにこのように自然な相互作用を組み込み、初めてのユーザーでも簡単に学習できるようにしています。

シェル API の使用

Hilo Browser は視覚的にリッチなアプリケーションです。標準のフォルダーは、誰もが知っているフォルダー アイコンで表示されます。ユーザーが作成したフォルダーは、フォルダー内容のプレビュー付きで表示されます。メディア ペインには、選択したフォルダーに含まれる画像のサムネイルが表示され、各サムネイルの大きさは実際の画像 サイズにかかわらず均一です。

こういった機能はすべて、シェル API によって提供されています。この API により、フォルダー画像や各ファイルのアイコンやサムネイルなど、シェルによるアイテムのビジュアル表現を利用できます。これらの画像の表示は、シェルと Windows エクスプローラーによって行われ、アプリケーションでも同じことを実行できます。つまり、Windows 7 のユーザー エクスペリエンスと一貫性のあるアプリケーション表示が可能になります。

Hilo Browser は、フォルダー内の画像のサムネイルを表示します。画像にはさまざまな種類がありますが、Hilo Browser は画像情報を抽出し、画面に表示可能なビットマップ形式のサムネイルを作成できなければなりません。これを可能にするために、Hilo Browser はシェル API を利用し、ファイルから画像情報を抽出した後、Windows Imaging Component (WIC) を使用し、画像を Direct2D API によって表示可能なビットマップに変換します。WIC は、すべての標準画像形式 (TIFF、GIF、JPG、PNG、ICO、BMP) の画像とメタファイル形式の読み込みと操作をサポートしています。

また、画像の読み込みと処理に時間がかかるため、アプリケーションの応答が遅くなる可能性がありますが、その問題は Hilo Browser には当てはまりません。メディア ペインに画像を表示するときのアニメーションの使い方が的確であることも理由の 1 つですが、最大の理由は、バックグラウンド スレッドで非同期的に画像を読み込むコードが提供されていることです。なぜ Hilo Browser でこれが可能かというと、Direct2D がマルチ スレッドに対応しているためです。これにより、Hilo Browser が実行すべき画像処理は膨大であるにもかかわらず、応答はスピーディです。

Hilo Browser アプリケーションの開発

Hilo Browser アプリケーションは、画像を参照、選択、操作するためのサンプル アプリケーション シリーズの第一弾です。Hilo Browser アプリケーションのコードは、MSDN コード ギャラリー (英語) からダウンロードできます。

この後の各記事では、Hilo Browser アプリケーションの設計と実装について詳しく説明します。ただしその前に、Hilo Browser アプリケーションの設計基盤となったハイレベルな意思決定について確認しておきます。これらの意思決定には、開発言語、アプリケーション フレームワーク、設計パラダイム、ツールなどの選択があります。

Windows 7 のリッチなユーザー エクスペリエンスを最大限に活かすには、強力で柔軟性に富んだ言語が必要になります。それに当てはまるのが C++ です。C++ を使用すれば、Windows 7 の API のパワーをそのままの形で活用できます。Hilo サンプル アプリケーションを作成するために必要なものは、Visual C++ Express と Windows SDK for Windows 7 だけであり、どちらも無料ダウンロードで入手できます。

Hilo アプリケーションは、Windows 7 対応アプリケーションの設計と開発の方法を具体的に示しています。ただし、コードは Windows 7 の API の使い方の見本となりますが、特定のアプリケーション フレームワークに依存するものではありません。その代わりに Hilo では、軽量な共通のアプリケーション レイヤーを実装しています。これは API をあいまいにするのではなく、API を直接使用して強調するものです。この共通のアプリケーション レイヤーが、すべての Hilo アプリケーションのサポートに使われており、Windows アプリケーションの開発に関するベスト プラクティスを具体的に示しています。このアプリケーション レイヤーは、決して完全なものではない (Hilo アプリケーションで必要な機能を提供するのみ) にもかかわらず、再利用可能なフレームワークの設計でのベスト プラクティスを示し、これを拡張することによって機能を追加できます。

Hilo Browser のコードを支える重要な設計上の特性は、簡潔さと読みやすさです。これが、共通のアプリケーション レイヤーが軽量な最大の理由です。また軽量であるために、エラー チェックとトレースが最小限に抑えられています。エラー チェックやトレースが重要でないという意味ではありませんが (それどころか、あらゆるコード設計に不可欠な要素です)、トレースを多用すると、API の使い方を示すという本来の目的が損なわれてしまうからです。

Hilo Browser は、インターフェイス プログラミング、抽象化、オブジェクト ファクトリ パターンに関するベスト プラクティスを応用した、オブジェクト指向型 C++ デザインです。このデザインを選んだのは、ユーザー インターフェイスの応答性を高めるためであり、そのためにバックグラウンド スレッドによる非同期的なデータ処理を利用しています。開発者は、これらのすべてを自身のプロジェクトで利用することができます。

最後になりましたが、アプリケーション開発には、あらゆる機能を備えた強力な開発環境が必要です。Visual Studio 2010 が提供する統合型の環境であれば、プロジェクトのコーディングとデバッグに、開発者がこれまでに習得したスキルを活かすことができます。Visual Studio には、高品質のコードを迅速に作成できる強力な各種ツールが備わっています。ツール サポートのレベル別に 4 種類のエディションが用意されているので、必要なツール サポートのレベルに応じてエディションを選ぶことができます。

まとめ

この記事では、Hilo Browser アプリケーションについて概要を説明しました。その中で、Hilo Browser の機能を紹介すると共に、これらの機能の実装に使われている Windows 7 の重要テクノロジについてご紹介しました。次の記事では、開発環境のセットアップ方法、すなわち Visual C++ と Windows SDK for Windows 7 をインストールして、Hilo Browser のソース コードのコンパイルと実行を可能にする方法を説明します。

前へ | 次へ | ホーム