promise の概要 (JavaScript による Windows ストア アプリ向け)

Windows ストア アプリを JavaScript で記述する場合、非同期 API を含む処理を記述しようとすると、その種類にかかわらずすぐに promise (英語) と呼ばれるコンストラクターに遭遇します。間もなく、連続する非同期操作で自然にプロミスのチェーンを使うようになります。 また開発作業の中では、実際にどのような処理が行われているか完全には理解できないような promise の使用方法に出会うことも珍しくありません。そうした例が、HTML ListView のパフォーマンス最適化のサンプル (英語) にある、ListView コントロールのアイテム レンダリング関数の最適化です。これに関する記事も今後公開する予定ですが、//build 2012 で Josh Williams 氏が説明した WinJS の Deep Dive (英語) も参考になります (多少変更されています)。 list.reduce(function callback (prev, item, i) { var result = doOperationAsync(item); return WinJS.Promise.join({ prev: prev, result: result}).then(function (v) { console.log(i + ", item: " +…

1

ListView の項目レンダリングの最適化

コレクションを利用する JavaScript を使って作成された Windows ストア アプリの場合、アプリのすばらしいパフォーマンスを実現するには、通常、WinJS ListView コントロール (英語) とのスムーズな連携がきわめて重要です。これは意外なことではなく、数千個にもなり得る項目の管理と表示を処理する場合、項目に対するすべての最適化がものを言います。最も重要なことは、各項目がどのように表示されるか、つまり、ListView コントロール内の各項目がどのように、また、どのタイミングで、DOM によって組み立てられ、アプリの一部として表示されるかです。実際、このプロセスの “タイミング” の部分は、リスト内ですばやくパン操作を行った場合に、そのスピードに遅れずにリストの表示が変わることが期待されている場合は、特に重要な要素になります。 ListView 内でレンダリングされる項目は、HTML で定義された宣言型テンプレートか、リスト内の項目ごとに呼び出されるカスタムの JavaScript “レンダリング関数” によって処理されます。宣言テンプレートを使う方法が最も簡単ですが、このプロセスに対して特定の制御を行う場合の自由度は限られます。一方、レンダリング関数を使うと、項目ごとにレンダリングをカスタマイズでき、HTML ListView パフォーマンス最適化のサンプル (英語) に実装されているように、複数の最適化が可能です。この関数では、次のような最適化を実現できます。 項目データと表示要素の非同期配信の実現。これには、基本のレンダリング関数を使用します。 ListView の全体的なレイアウトを決めるために必要な、項目の形状の作成と、内部の要素との分離。これには、プレースホルダー レンダラーを使用します。 以前作成した項目要素 (とその子) のデータを置き換えて再利用。要素作成の大半のステップを省略できます。これには、プレースホルダー再利用レンダラーを使用します。 項目が表示され、ListView のパン操作のスピードが落ち着くまで、イメージの読み込みやアニメーションなど、負荷の高いビジュアル操作の遅延。これには、多段階レンダラーを使用します。 同じビジュアル操作をまとめて、DOM の再レンダリングを最小限に抑制。これには、多段階レンダラーを使用します。 この記事では、上記の全ステージを取り上げ、各ステージが ListView の項目レンダリング プロセスとどのように連携するかを説明します。お察しのとおり、項目をレンダリングするタイミングの最適化には、非同期操作、ひいては promise を多用します。したがって、この記事を読み進むにつれて、promise 自体の理解も、このブログの前回の記事「promise の詳細」(英語) の知識からさらに深めることができます。 すべてのレンダラーに言えることですが、常に、中心となる項目のレンダリング時間 (遅延操作を除く) を最小限に抑えることが重要です。ListView の最終的なパフォーマンスは、ListView の更新と画面の更新間隔がどの程度同期するかに大きく左右されるため、1 つの項目レンダラーで数ミリ秒余分にかかると、次の画面の更新までの間の ListView 全体のレンダリング時間が増大し、結果としてフレーム落ちや画面の乱れが発生します。つまり、項目レンダラーは、JavaScript コードの最適化を図る場合、本当に有効な領域です。 基本レンダラー まず、項目レンダリング機能…


接続された Windows ストア アプリの作成

私たちの周囲には、ネットワークに接続されたデバイスがあふれています。冷蔵庫や洗濯機でさえ、最近ではインターネットやホーム ネットワークに接続できるのです。ですから、アプリも同じようにネットワークに接続したいとエンド ユーザーが考えても不思議はありません。これらの “接続アプリ” は、Web 上の最新コンテンツ (ソーシャル メディア、デジタル メディア、ブログなど、さまざまな種類のコンテンツ) を利用します。接続アプリの開発は標準になりつつありますが、ネットワークの切断、従量制課金接続のコスト、パフォーマンスなどの一般的な問題への対応が課題として残っています。Windows 8 では、接続アプリを今までにないほど簡単に開発できます。 この記事では、Windows ストア アプリのユーザーに、高速かつ滑らかで手間のかからない接続エクスペリエンスを提供するための有効なヒントについてご説明します。 シナリオに合った API を選ぶ 適切なネットワーク機能を選ぶ アプリの動作を従量制課金接続に対応させる ネットワークの状態の変化に対応する コンテンツをキャッシュして滑らかな動作を実現する では、それぞれのヒントについて詳しく説明していきましょう。 適切な API を選ぶ 家を建てようとする場合、適切な道具が必要ですね。釘を打つなら金づち、板を切るならのこぎり、ネジを締めるならドライバーがそれぞれ必要です。同様に、ネットワークに接続される Windows ストア アプリを開発する場合にも、適切な Networking API を使用する必要があります。Windows 8 には、アプリがインターネットとプライベート ネットワークのどちらを介して他のコンピューターやデバイスと通信する場合にも使用できる、さまざまな Networking API が用意されています。したがって、最初のステップは、開発するアプリに必要なネットワーク機能を把握することです。 ネットワークにおける最も一般的なシナリオは、Web サイトにアクセスして情報を取得または保存することです。簡単な例として、Web サイトを使用してユーザー情報やスコアを保存するゲームがあります。もう少し複雑な例としては、REST ベースの Web サービスに接続し、その Web サービスが提供するライブラリを使用して情報へのアクセスや保存を行うアプリがあります。Windows 8 には、Web サービスや Web サイトに接続する API がいくつかあります。アプリでこれらの API…


jQuery Version 2.0 での Windows ストア アプリのサポート

既に Web 開発の経験をお持ちなら、オープン ソースの JavaScript フレームワーク、jQuery を使用されたことがあるかもしれません。また、jQuery を使用して Windows ストア アプリの構築を試されたことがあるなら、JavaScript ランタイムまたは動的なコンテンツに関するエラーが発生したのではないでしょうか。今度の v2.0 リリースでは、jQuery チームはこれらの問題に取り組みました。jQuery v2 ベータでは、HTML5/JS による Windows ストア アプリの開発がサポートされます。皆さんは、Web 開発者としてお持ちのスキルとアセットを使用して Windows 8 用のすばらしいアプリを開発することができます。最新の jQuery 2.0 ベータ ビルドで今すぐお試しになれます(英語) 「jQuery チームは、jQuery 2.0 を使用できる新しい環境に興奮を覚ています。HTML 開発者、JavaScript 開発者は、このような環境で jQuery に関する知識を得て、作業場所にとらわれずに開発プロセスを効率化したいと期待を寄せています。jQuery 2.0 は、Windows 8 ストア アプリケーションなどの環境でこのような期待に応えることができる機能を提供します」- jQuery Foundation 理事長、Dave Methvin Windows ストア アプリ: JavaScript コードでの異なるコンテキスト 皆さんは、jQuery は以前どうして “まったく機能しなかった” のか不思議に思われているかもしれません。Windows…


Windows ストア ゲームの開発

Windows 8 によってもたらされた、革新的なフォーム ファクター、新しいチップ アーキテクチャ、強力な商用モデル、多大なチャンスにより、PC を取り巻く環境は変化しました。PC ゲームは、長らくコンピューターを楽しむための主要な手段となってきました。現在ではこれまで以上に、ゲームは、デバイスを取り巻くこの新しい環境の価値を代表するものとなっています。Windows ストアによって、ゲームの入手、プレイ、友人との共有、安全な更新がより簡単に行えるようになりました。ゲームがもたらす膨大なダウンロード数、多大な収益、新しいプラットフォームへのユーザーの関心の移行は、不思議なことではありません。GDC を間近に控え、Windows 8 がもたらすチャンスに対するゲーム開発者の興味は高まっています。 それでは、優れた Windows ストア ゲームはどのようにして作成するのでしょうか。ゲームの創造性、革新性、収益性、開発の容易さのために、Windows は何を提供しているのでしょうか。また、どのようなツール、テクノロジ、サービスを使用できるのでしょうか。エコシステムでは何が利用できるでしょうか。Windows 8 の開発時に開発者に共有 (英語) されたその他の発見にはどのようなものがあるでしょうか。この記事では、こうしたトピックに関する質問の回答を明確にし、すばらしい Windows ストア ゲームを開発する方法を説明します。 Windows 8 のゲーム デザインおよび開発に関する考慮事項 Windows 8 は、特にエンターテインメント エクスペリエンスの楽しさを追求するために設計および開発されました。Windows 8 ユーザー エクスペリエンス (UX) ガイドラインでは、境界線や余分なウィンドウの装飾を表示せずに高速で滑らかな対話式操作と、全画面イメージを実現することを奨励しています。このデザイン ガイダンスは、イマーシブ エクスペリエンスを通じてユーザーの関心を引きつけ、案内のための対話式操作を提供するエクスペリエンスにアプリの重点を置くことを推奨しています。メイン ゲーム コントロールは簡単にアクセスできるようにして、サブ コントロールは必要になるまでアプリ バーまたは設定パネルにまとめておくようにします。こうした原則は、一般的なアプリには適切なものですが、ゲームにはどのような効果があるのでしょうか。これまでにもゲーム開発者は、高速で滑らかな全画面のイマーシブなエクスペリエンスを長い間にわたって提供してきました。それにもかかわらず、次のような基本的な疑問がいつも付きまといます。 ゲーム メカニクスは、強力なデスクトップ PC からノートブックおよびタブレットまでどのようにスケーリングを行うか ターゲットとすべき最も重要なフォーム ファクターは何か タッチ、ゲーム コントローラー、およびキーボード/マウスをゲームで同時に有効化することは可能か 最も重要な画面サイズ、縦横比、解像度は何か ゲーム開発者は、長期間にわたり PC コミュニティに楽しいゲームを提供するためにさまざまなテクノロジを使用してきました。Windows で使用される…


Windows ストア アプリを世界市場対応にする

開発する新しいアプリを世界市場に対応させ、ユーザー数の拡大を図りたいと思いませんか。Windows 8 では、さまざまな言語や文化に対応するアプリを今までにないほど簡単に開発できます。今回の記事では、ほとんどまたはまったくコードを変更せずに、新しいアプリを世界対応で設計する方法を紹介します。 世界対応がもたらす市場チャンスについては、多言語アプリ ツールキットに関する Sara Thomasさんの記事でも説明されています。その中にある「45 億人にアピールできる可能性」と「200 を超える市場で」アプリを販売できるというフレーズを念頭に、今回の記事を読み進めていただけるとさいわいです。 シナリオ レンタカー会社の営業所のタブレットで使用する Windows ストア アプリを設計しているとします。営業所のスタッフと顧客は、レンタカーの写真、仕様の説明、駐車場所をこのアプリで確認します。タブレットを見ながら、車についての情報 (現在の走行距離など) を入力または確認し、既存の傷などについての情報を記録します。顧客が署名する契約もこのタブレット上にあります。 車の返却時にも、同じアプリが使われます。新しい走行距離を入力し、車に新たに付いた傷があれば記録します。これは世界共通のエクスペリエンスです。世界中でレンタカーは利用されており、同じような手続きを踏みます。このアプリはグローバル市場向けのアプリとして有望です。世界対応にすることで、アプリ販売のチャンスは大きく広がります。 アプリの開発では、密接に関連する次の 2 種類のプロセスを利用します。 グローバリゼーション: 複数の地域と言語で機能するようにアプリを設計および開発するプロセス。 ローカライズ: 特定のローカル市場の言語、文化、制度に合わせてアプリを (文字要素と文字以外の要素も含めて) 調整するプロセス。 グローバリゼーション アプリのグローバリゼーションを行う際は、次の点に注意してください。 柔軟なレイアウトのアプリを設計する。 アプリ設計に静的フォームを使用しないようにします。Windows ストア アプリがサポートするレイアウト機能を活用することで、テキストのサイズ、レイアウト、向きの変化に最適化される、柔軟なアプリを実現することができます。推奨事項については、デベロッパー センターの「レイアウトの選択」を参照してください。 理由があって静的フォームを使う必要がある場合は、テキスト フィールドとボタンのキャプションが翻訳後のテキストを表示できる大きさになるようにしてください。英文は翻訳すると、40% 長くなる可能性があります。また、Å や Ņ のように記号付きの文字が使われる言語や、最小フォント サイズが他の言語よりも大きい言語では、縦のスペースも多めに取って文字が完全に表示されるようにします。 翻訳しやすいテキストや画像を作成する。 翻訳を社内で行うか社外に委託するかにかかわらず、他の言語や文化に翻訳しやすいアプリにする必要があります。 次の点に注意してください。 特定の言語に固有の口語表現や比喩は使わない。 翻訳しにくい技術的なスラング、略語、または頭字語は使わない。 アプリに口語体を採用する場合や、特定の地域だけで有効な用語を採用している場合は、翻訳担当者にその意味を説明してください。 翻訳が必要になるテキストを画像に含めない。 世界共通でない、文化固有のもの (郵便受けなど) を示す画像は使わない。使わざるを得ない場合は、ローカライズされた画像を提供する (これについては後述します)。 文化の違いに配慮する。 自分の文化では適切な画像が、他の文化では不快に取られたり、誤って解釈される場合があります。 次の点に注意してください。 宗教上のシンボル、動物、または国旗や政治運動を想起させる色の組み合わせは使わない。…


Visual Studio 2012 を使った Windows ストア アプリ開発のための多言語アプリ ツールキット

Windows 8 は、さらに多くのロケールに対応し、世界中でさらに便利に使用できるように設計されています。皆さんのような開発者の方と協力し、これまで以上に多くの地域で現地に即したアプリケーションをリリースすることで、Windows 8 が目指すこの “グローバル対応” のエクスペリエンスをより洗練させることができます。機械翻訳を使って翻訳するか、人間の翻訳者によってローカライズして、Windows ストア アプリの対応言語を増やすことで、展開する市場を拡大して、より多くのユーザーにアプリをアピールできます。アプリのグローバルな展開は常に優先事項の 1 つとして考えられていますが、Windows 8 なら、このプロセスが非常に容易になります。 Windows 8 向けの Visual Studio 2012 用拡張機能である多言語アプリ ツールキット (無料の Express バージョンもあります) を使うと、自分自身で Machine Translation サービスを使用するか、ローカライズ業者に依頼して、アプリを容易にローカライズできます。この記事では、アプリのローカライズにはそれに見合う価値があること示し、多言語アプリ ツールキットを使って容易にローカライズする手順を紹介します。 市場の機会 Windows 8 は 14 種類の新しい表示言語を含む 109 の言語で提供され、その結果 45 億人にアピールできる可能性があります。Windows ストアの登場で、200 を超える市場でアプリを販売できるようになりました。このうち、現地通貨での販売をサポートする市場は 70 余りあります。多言語アプリ ツールキット (MAT) を使うと、Windows がサポートする任意の言語でアプリのバージョンを作成でき、ストアがサポートする市場に展開できます。 MAT により多言語に対応することで、新しい市場への道が開かれるだけでなく、既存市場内での販売拡大も期待できるようになります。米国税調査局が実施した 2010 年の American Community Survey によると、米国内では…

1