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 コードの最適化を図る場合、本当に有効な領域です。 基本レンダラー まず、項目レンダリング機能…


Game On Virtual Event にご参加ください

ゲームは、Windows ストアにおける重要なアプリの 1 つです。Windows ストアのゲーム開発の方法を模索している皆様に、ゲーム開発支援を目的とした仮想イベントをお知らせいたします。これは、初めての開発者にもプロの開発者にも役立つ、参加無料のイベントです。 本イベントでは、YoYo Games の GameMaker: Studio (英語) を使って、高品質なゲームをかつてないスピードで開発、公開する方法をお伝えします。GameMaker:Studio には豊富な設計オプションが組み込まれ、各ツールはドラッグ アンド ドロップで操作できるので、ゲームのアイデアがなくても、また開発経験を持たない方でも開発を始めることができます。もちろん、プロフェッショナルの皆様の要求に応える高度なツールも備えておりますので、独自のゲーム エクスペリエンスの開発に挑戦していただくことができます。 このオンライン イベントは 6 月 15 日午前 10 時 (太平洋夏時間) に開催されます。ローンチ セッションとライブ チャットで幕を開け、さまざまなゲームの種類、基本的なゲームにグラフィック、レベル、サウンドを追加する方法、ゲームにオリジナリティを加える方法などを紹介していきます。サポートは 1 週間にわたり継続され、GameMaker フォーラムを通して 1 対 1 のサポートが提供される予定です。 学生の皆様、開発を初めたばかりの方、経験豊かなプロフェッショナルの皆様は、ゲームの開発を開始、アップロードし、Windows ストアに公開するために必要なすべての情報を、イベントを通して学ぶことができます。イベントの詳細、登録方法、無料のツールとリソースに関する情報については、http://msdnevents.com/gameon/ (英語) をご覧ください。 –Robert Rodriguez-Lawson、シニア コンテンツ パブリッシング マネージャー、Windows 開発者コンテンツ チーム


資格情報保管ボックス: Windows ストア アプリのユーザー名とパスワード処理のソリューション

Windows ストア アプリで使用できる資格情報保管ボックスついてご存知なければ、ここでぜひ知っておいてください。理由は、資格情報保管ボックスを使うと、ユーザー資格情報の格納と取得の作業を簡略化できるだけでなく、資格情報を安全に格納でき、ユーザーの Microsoft アカウントと合わせて “無料で” ローミングできるからです。 たとえば、メディア ファイルやソーシャル ネットワークなど、保護されたリソースにアクセスするサービスに接続するアプリがあるとします。サービスを利用するには、ユーザーごとにログイン情報が必要です。そこで、ユーザーのユーザー名とパスワードを取得し、それを使ってサービスにユーザーをログインする UI をアプリに組み込みました。すべてがスムーズに機能しています。 今度はさらに、ユーザーの利便性を考えて、アプリを使うたびにログインしなくても済むようにログイン情報を安全に格納したいと考えました。そこで、資格情報保管ボックスの出番です。資格情報保管ボックス API を何回か呼び出すだけで、ユーザーのユーザー名とパスワードを格納し、ユーザーが次にアプリを開くときに、簡単に格納した情報を取得して、自動でユーザーのログインを処理できます。 安全な保存スペース アプリにとっての資格情報保管ボックスの最大のメリットは、ユーザー資格情報が安全な場所に格納されることです。資格情報は、ディスク上に格納されるとき、暗号化されます。もちろん、アプリに使うユーザー資格情報をファイルに保存してローカルの保存スペースに格納することもできますが、ユーザー資格情報をプレーンテキストで格納すると、大きなセキュリティ ホールになります。ユーザーのシステムが何かの形で侵害された場合、ユーザーのユーザー名とパスワードにアクセスして操作することは簡単です。ユーザー名とパスワードが資格情報保管ボックスを使って格納されていれば、悪意のあるソースは暗号化されたファイルを入手するのが関の山です。 資格情報保管ボックスは各 Windows PC ユーザーに一意であり、資格情報を格納したアプリしか、その資格情報にアクセスできません。つまり、その特定のアプリのために格納した資格情報以外は取得できません。同様に、他のアプリは、この特定のアプリによって資格情報保管ボックスに格納されている資格情報にはアクセスできません。 資格情報のローミング ユーザーに提供できるもう 1 つのメリットは、資格情報保管ボックスを使ってユーザー名とパスワードを格納すると、格納された資格情報はユーザーの Microsoft アカウントと共に、ユーザーがその Microsoft アカウントを使う限りどの信頼済みコンピューターにもローミングされることです。その結果、ユーザーの Microsoft アカウントに関連付けられていて、アプリがインストールされていれば、どの信頼済みコンピューターからでも、ユーザーはアプリに自動的にログインできる (ユーザーに資格情報の入力が求められない) ため、セキュリティで保護されたアプリはユーザーにとってさらに便利なものになります。 ドメイン アカウントの場合は、処理が少し異なります。Microsoft アカウントを使って格納されている資格情報があり、そのアカウントをドメイン アカウント (仕事で使うアカウントなど) に関連付けている場合、資格情報はそのドメイン アカウントにローミングされます。ただし、そのドメイン アカウント使ってサイン オンするときに追加された新しい資格情報は、ローミングされません。これにより、そのドメイン固有の資格情報が、ドメイン外部に知られないようにしています。 ユーザー資格情報の格納 資格情報保管ボックスへのユーザー資格情報の格納は、簡単な 2 ステップのプロセスです。最初に、Windows.Security.Credentials 名前空間の PasswordVault オブジェクトを使って、資格情報保管ボックスへの参照を取得します。次に、アプリの識別子、ユーザー名およびパスワードを保持する PasswordCredential オブジェクトを作成し、このオブジェクトを PasswordVault.Add() メソッドに渡して、資格情報を資格情報保管ボックスに追加します。 C#…