Windows ストア アプリ UX デザイン ガイドライン インデックス

Windows 、Windows Phone ストア アプリのためのユーザー エクスペリエンス ガイドラインは、Windows デベロッパー センターで公開されています。また、PDF にした情報も英語版は Windows デベロッパー センターで、日本語版の PDF は Windows ストア への道からダウンロードすることができます。これらのガイド ラインを公開してから、良く聞くのが分量が多いので読むのが大変という話になります。UX ガイドラインの目的は、自分が作成しようとするアプリに関連する事項だけを拾い読みすることであって、すべてを順守する必要は必ずしもない点になります。そこで、今回は UX ガイドラインのインデックスへのリンク集を記載します。この目的は、自分が作成するアプリのに関連しそうなガイドラインを素早く見つけることにあります。ゆっくり読みたい場合は、PDF 版をご活用ください。 Windows らしさ モダン デザイン エッジ ライブ タイル スプラッシュ スクリーン チャームとコントラクト ビジョン ビジョンの定義 レスポンシブ デザインとフォームファクター Windows Phone のプラットフォームとエコシステム 独創的なビジュアル ブランド レイアウト アニメーション 書体 アイコン 色 インタラクションと UX ナビゲーション パターン(Windows ストア アプリ) ナビゲーション、向き、ジェスチャ(Windows Phone…

0

パフォーマンスと診断ハブの使い方

先週末(12/20)は、.NET ラボにお邪魔して「パフォーマンス診断 Windows ストア アプリ」というテーマでお話をさせて頂きました。今回は、この時にお話しした内容と時間の関係で割愛したデモなども含めて記載します。お話した内容は、大きく分類すると以下の2種類になります。 パフォーマンスを設計段階から考慮する 設計したパフォーマンスを診断する Visual Studio パフォーマンスと診断ハブ Windows パフォーマンス ツールキット 全く同じものではありませんが、de:code でパフォーマンスに関するセッションがありましたので、以下の動画も参考にして下さい。 de:code Track 1 Devices トラック Windows アプリのデバッグ、パフォーマンス測定、テスト、Windows App Certification Kit (WACK) パフォーマンスを設計段階から考慮する パフォーマンスを意識してアプリを設計し、実装することがとても重要です。アプリをリリースしてから、パフォーマンス問題が発生してチューニングするのとでは、かかる工数自体が異なることから、パフォーマンスを意識して設計しなければなりません。 設計するときの前提知識として、CPU、メモリ、補助記憶装置、ネットワークなどにおける物理的な速度を意識して適切な組み合わせを考えることが重要であることと、一般的なレイア アーキテクチャが保守や構築しやすというメリットはあるが、パフォーマンスを重要視する局面ではパフォーマンス面で不利になることを説明しました。大切なことは、要求される事項に応じて適切にアーキテクチャを組み合わせて、パフォーマンス重視であれば意図的にアーキテクチャを無視することも必要になるということです。 たとえば、適切に設計されたコンポーネントの1つのメソッドを呼び出すと、マシン語レベルではcall命令が発行されます。call命令が発行されるということは、プログラム カウンタなどの様々な情報が呼び出された命令へと切り替わるわけです。これは、数回や100回程度であれば問題にならなくても(仮に、1msとして100msです)、数万の回数になるとしたらどうなるでしょう?(10秒の単位になりますよね)。パフォーマンスを向上させるということは、このような処理にかかる時間を削ることになりますから、設計が素晴らしいことと比例しないのがパフォーマンス向上という世界になるわけです。 このような世界がパフォーマンス向上になるわけですから、設計段階からパフォーマンス目標を明確にして、その目的達成のために様々な工夫をする必要があるわけです。たとえば、ユーザー インターフェースが関係する場合であれば「応答なし」の状態は、もっとも避けるべき状況になるわけです。この「応答なし」を避けるためには、UI スレッドと異なるスレッドで実行したり、処理状況を可視化したり、ユーザーの操作の合間に分散して処理させたりなどの様々な工夫が考えられますし、要求される状況におうじて適切に組み合わせる必要があります。このような様々な工夫をした結果、パフォーマンスを達成できているかを確認する作業が診断作業になるわけです。診断した結果から、目的が達成されているかどうかを分析し、達成できていなければボトルネックを分析し、プログラムに対処コードを組み込んで、その結果を診断するという作業を繰り返すことになります。これらの診断に使用できるツールが、Visual Studio パフォーマンスと診断ハブか Windows パフォーマンス ツールキットになるわけです。 Visual Studio パフォーマンスと診断ハブ 実際のデモで使用したコードは、「パフォーマンスと診断のページからの分析ツールの実行」を基にして、ETW のトレースを組み込んだものになります。最初に、Visual Studio を起動して、診断に使用するプロジェクトを開いておきます。そうして、[分析]-[パフォーマンスと診断]からパフォーマンスと診断ハブを起動します。 パフォーマンスと診断ハブで注意する点は、以下のようなことです。 ターゲット アプリケーションは、必ずリリースモードにしておくこと。 使用可能なツールの中で「メモリ使用量」、「JavaScriptメモリ」、「JavaScript関数の応答性」とその他の項目は排他的になるため、組み合わせることはできません。 ここでは、CPU 使用率だけにして開始ボタンをクリックします。そうすると、目的のアプリが起動します。 アプリで診断する操作を行ってから、Visual Studio…

0

イン プロセスの Windows ランタイム コンポーネントの作り方

以前にアプリ ブローカーの作り方の記事(その1、その2)を公開しました。今回は、アプリ ブローカーのような ランタイム ブローカーではなく、イン プロセス向けの Windows Runtime コンポーネントの作成方法を説明します。基になる題材は、Windows 8.1 サンプル パックにも含まれている 追記:アプリ ブローカーの説明をしたセッション動画が、公開されています。de:code Track1 Device  デスクトップ アプリケーションとWindows ストア アプリの連携このMVA コースでサンプル コードも公開しています。 Windows Runtime in-process component authoring with proxy/stub generation sample になります。 このサンプルは、クライアント(C++、C#、JavaScript) – ProxyStub – Windows ランタイム コンポーネント(サーバー) という構造になっています。このサンプルの作り方は以下のようになります。 空のソリューション(ProxyStubsForWinRTComponents)を作成します。 サーバーを ProxyStubsForWinRTComponents_server というプロジェクトで作成します。 [追加]-[新規プロジェクト]-[C#]-[ストア アプリ]-[Windows アプリ]-[Windows ランタイム コンポーネント] プロジェクトを作成します。 サンプルと同じように、BreadeServer.cs と OpenServer.cs を追加します(名前空間は、プロジェクトに合わせて修正しておきます)。 (私の場合は、IBread、IApplication、IOven…

0

Blend for Visual Studio 2015 プレビュー

マイクロソフト本社の「Blend for Visual Stduio 2015 Preview」の記事を参考にしながら、プレビューで何ができるようになっているかを説明します。最初に、Blend を起動したスクリーン ショットを掲載します。 この画像から理解できることは、Blend のルック & フィールが Visual Studio のダークテーマになっており、Visual Studio の IDE と非常に似通っているということです。似通っているだけでなく、多くの機能が Visual Studio と同じになっています。このことを、Visual Studio のユーザー インターフェースとの一貫性(Consistent user interface)と呼んでいます。 Visual Studio Online へのサインイン(ユーザー設定情報の保存など) ソリューション エクスプローラー XAML のビジュアル エディタと XAML のコードエディタ など 次に示すのは、XAML エディタの改善機能になります。 コンテキスト メニューだけでなく、XAML エディタにおけるインテリセンスのサポートも追加されています。コンテキスト メニューの「定義をここに表示」機能は、まだ使えませんが、「定義へ移動」を呼び出すとオブジェクト ブラウザーが表示されます。 オブジェクト ブラウザーも、新しく追加された機能です。今度は、コード エディタを示します。 Visual Studio と同じようにコンテキスト メニューを表示しています。「定義をここに表示」を行うと、Visual Studio と同じ動作をします。…

0

WPF のロードマップ

本記事は、マイクロソフト本社の .NET Blogの記事を勝手に翻訳したものです。 元記事は、The Roadmap for WPF 2014/11/12 AM 7:37 私のオレオレ翻訳なので、翻訳の変更などはこのBlogのコメント欄にフィードバックをください。正確な情報は、オリジナルのBlogを参照するようにしてください。   2006年に WPF (.NET Framework 3.0) を紹介した時の反応は、とても素晴らしいものでした。なぜなら、企業、ISV、マイクロソフトのパートナーは、お客様向けのミッション クリティカル アプリケーションと素晴らしいバーティカル ソリューションを構築するビジネスの中心となる技術として選択してくれたからです。また、現在へ繋がる推進力にもなりました( Visual Studio 2013 で過去60日で開発された新規プロジェクトの 10% が WPF プロジェクトです。WPF は、データ中心のビジネス アプリを構築する情熱的で活力のあるコミュニティを持っています。最近の事例としては、私たちのパートナーである InterKnowlogy が開発した新しい WPF アプリケーションがあります。このアプリは、CNN のプロデューサーがオンエア中の投票におけるデータの構成と検証、中間結果のアップロードを行うために使用しています。投票データは、CNN のMagic Wallに表示されています。Magic Wallの開発には、マイクロソフトの Bing Pulse チームが協力しています。この記事では、WPF プラットフォームのロードマップを取り扱います。ロードマップには、次期 Visual Studio リリースのツールにおける機能強化と投資領域の優先順位が含まれています。 プラットフォームに対する投資領域 今年(2014年)の //build カンファレンスで行ったユーザー調査における示唆や数か月に渡る様々なマーケットで活躍する多くの開発者に対するインタビューを基にして、WPF をより素晴らしいプラットフォームにするための投資領域の優先順を以下に記載します。 パフォーマンス:WPF が、大規模で高パフォーマンスなアプリ(たとえば、Visual Studio や…

0

プログラミング Windows 第6版 下巻に向けて

「プログラミング Windows 第6版」という書籍を使用して、WPF の学習を補助するという目的で、上巻を WPF に置き換えて説明するというエントリーを以下のように記述しました。 XAML とは何か 第1章 マークアップとコード 第2章 XAML 構文 第3章 基本的なイベント処理 第4章 パネルを使った表示 第5章 コントロールとのやりとり 第6章 WinRT と MVVM 第7章 非同期性 第8章 アプリ バーとポップアップ 第9章 アニメーション 第10章 座標変換 第11章 3つのテンプレート 第12章 ページとナビゲーション そして、第1章の記事に書いた目標は、「下巻は自分で WPF に置き換えて学習ができるようになることです」ということでした。今回は、下巻に自分で取り組む場合の簡単な概要を示します。 第14章 ビットマップ WritableBitmap クラスを使用して、ビットマップ オブジェクトを作成する方法を説明しています。Windows 8.1 の話題では、RenderTargetBitmap を説明しています。 WPF XAML でも WritableBitmap クラスを同様に使用することができます。そして、WritableBitmap クラスは、Render メソッドをサポートしていますから、Visual を継承する…

0

HttpClient で 認証プロキシ サーバーを使用するには

.NET Framework 4.5 以降や Windows Phone、Windows ストア アプリで、http 通信に HttpClient クラスを使用することが多いと思います。HttpClient クラスを使用する場合に問題になるのが、プロキシ サーバーの有無でしょう。基本的な考え方としては、インターネット エクスプローラーに設定されているプロキシ設定を HttpClient は透過的に使用します。 例外的にインターネット エクスプローラーのプロキシ情報が、空になって HttpClient による通信が失敗するケースが報告されています。この事象に対する技術情報が公開されており、この技術情報によれば PC を再起動することで回復すると記述されています。 今度は、認証情報を必要とするプロキシ サーバーを使用する場合はどうしたら良いかという問題です。HttpClient クラスのドキュメントによれば、シンプルな解決方法としては HttpClientHandler を使用する方法になります。何故かと言えば、HttpClientHandler クラスが Proxy プロパティを持っているからです。ですから、HttpClientHandler のドキュメントにあるように HttpClient のコンストラクタに引数として渡す前に、プロキシを設定します。このような仕組みになっていると、Azure Mobile Service のように独自のクラス MobileServiceClient のように内部で HttpClient クラスを使用している場合にプロキシを設定するにはどうしたら良いでしょうかかという問題が起きます。このような時に役立つ記事として「HttpClientを認証プロキシに対応させる」や「HttpClientを簡単に認証プロキシに対応させることができるライブラリ、RuntimeProxyをつくりました」がありました。この記事に掲載されているコードを示します。 //Handlerに設定 //ProxyはOSで設定したプロキシサーバーURLとポートが取得可能 //認証情報は取得できなかったのでPickerによって取得 HttpClientHandler handler = new HttpClientHandler(); handler.Proxy = WebRequest.DefaultWebProxy; handler.Proxy.Credentials = new NetworkCredential(UserName,…

0

プログラミング Windows 第6版 第12章 WPF編

この記事では、「プログラミング Windows 第6版」を使って WPF XAML の学習を支援することを目的にしています。この目的から、書籍と併せて読まれることをお勧めします。 第12章 ページとナビゲーション 本章では、WinRT XAML におけるページとナビゲーションを説明しています。この説明は、XAML 系の UI 技術が提供するナビゲーション メカニズムを採用するのであれば、WPF XAML にも当てはまることが多くなります。もちろん、違いも存在します。最初に、説明するのはどのようなナビゲーションを使用するかというころです。 WinRT XAML では、Frame クラスを使ったナビゲーションを採用した方が良いでしょう。 この理由は、ページの進むや戻るという実装が容易になるからです。 WPF XAML では、Windows Forms と同じようにウィンドウを基準にするのであれば、プログラマーが自由に設計します。 WinRT XAML と同じように Frame クラスを使ったナビゲーションを利用することもできますが、この場合は Window クラスではなく NavigationWindow クラスを使用するという制約があります。 Visual Studio 2013 が提供するプロジェクト テンプレートには、次に示す 4 種類があります。 WPF アプリケーション Window クラスを継承する MainWindow.xaml が含まれます。 WPF ブラウザー アプリケーション Page クラスを継承する Page1.xaml…

0

プログラミング Windows 第6版 第11章 WPF編

この記事では、「プログラミング Windows 第6版」を使って WPF XAML の学習を支援することを目的にしています。この目的から、書籍と併せて読まれることをお勧めします。 第11章 3つのテンプレート 本章では、タイトルにあるように 3種類のテンプレート(コントロール テンプレート、データ テンプレート、アイテム テンプレート)を説明しています。データ テンプレートは、データバインドを行う場合に活用されるもので、ContentControl を継承するクラスで使用されます。コントロール テンプレートは、コントロールの外観を再定義するために使用するもので、マウスなどの動きに応じてコントロールの外観を変化させるアニメーションの定義なども含まれています。最後のアイテム テンプレートは、コレクションをデータ バインドした時に個々のデータに適用されるテンプレートになります。たとえば、リスト ボックスなどのアイテムに適用されるのがアイテム テンプレートです。書籍にも記述がありますが、これらのテンプレートを作成したりカスタマイズするのであれば、Blend for Visual Studio の操作に慣れておくことをお勧めします。その理由は、Blend ではテンプレートをビジュアルに編集することが容易だからです。テンプレートの編集では、Visual Studio のデザイナーは Blend よりも非力になります。 11.1(P494) ボタンのデータ 本節では、Button コントロールの Content プロパティを使ってどのように外観を定義できるかを具体例を使って説明しています。最初に Image オブジェクトを使い、次に Ellipse と LinearGradientBrush を組み合わせてから、テンプレートをリソースに定義することを説明しています。ここまでの説明をしてから、Button に対するスタイル定義を説明するために、SharedStyleWithDataTemplate プロジェクトの MainWindow.xaml の抜粋を示します。 <Window … > <Window.Resources> <Style TargetType=”Button”> <Setter Property=”HorizontalAlignment” Value=”Center” />…

0

プログラミング Windows 第6版 第10章 WPF編

この記事では、「プログラミング Windows 第6版」を使って WPF XAML の学習を支援することを目的にしています。この目的から、書籍と併せて読まれることをお勧めします。 WPF を利用する上で、有益な資料を八巻さんがアップデートして公開してくれました。「Windowsフォームに対するWPFの真の優位性とは」という記事から、ダウンロードできますので、参考にしてください。私が、「XAML とは何か」で記述したディスプレイ ドライバー のことなども踏まえている資料になります。 第10章 座標変換 本章では、アニメーションなどで使用する座標変換を説明しています。WPF XAML も WinRT XAML と同じように座標変換を利用可能になっています。座標変換は、Windows Forms などでは高度なグラフィックスを描画する場合などに必要とされる技術でしたから、Direct X などのグラフィックス技術を扱わない技術者にとっても馴染みがないものになることでしょう。 10.1(P417) 概要 本節では、座標変換が座標 (x,y) を新しい座標 (x’,y’) に変換するものであり、WinRT XAML では RenderTransform、RenderTransformOrigin、Projection という 3つのプロパティでサポートされていることを説明しています。WPF XAML に置き換えると、Projection プロパティのみが適用できないものになります。なぜなら、WPF XAML が 3D オブジェクトをサポートしているためです。Projection は、Silverlight で導入されて、WinRT XAML でも採用された疑似的な 3D を扱う座標変換になります。最初に、RenderTransform の派生クラスである RotateTransform を使用する SimpleRotate プロジェクトの MainWindow.xaml の抜粋を示します。…

0