[Windows Phone 7 UIガイドを読み解く] 第21回 ~アプリケーションインターフェイスとなるコントロール~

[Windows Phone 7 UIガイドを読み解く] 第21回 ~アプリケーションインターフェイスとなるコントロール~ [Windows phone application interface controls] (136ページ – 137ページ) 今回からしばらくの間、Windows Phone 7のアプリケーションを作るときに使用するコントロールについて説明します。今までは、UIガイドの1つの項目をなるべく1回分の記事として書いてきましたが、コントロールの部分については1つの項目の分量が極端に少ないものや多いものがあるため、項目の分量が少ないものについては2~3の項目をまとめて記述し、分量の多いものについては2~3回に分けて記述します。 Windows Phone 7上で動くアプリケーションを開発する際に、Silverlightを使用することができます。多数のコントロールや、高機能なレイアウト及びスタイルなど、.NETのテクノロジのパワーを継承し、ベクターグラフィックスやアニメーションのAPIもサポートしています。今までに、Silverlightや.NETテクノロジを使用した開発の経験がある方であれば、その知識と経験をWindows Phone 7のアプリケーション開発に活かすことができます。 これから数回に渡り、Windows Phone開発ツールに含まれるSilverlightコントロールを説明します。コントロールの中には、目に見えるUIの要素を持っていないコントロールや、他のUIの一部として使われるコントロールもあります。このUIガイドでは、使用できるSilverlightの全てのコントロールを説明していません。アプリケーションを作成するうえで重要なコントロールのみを説明しています。 ユーザーがシステムのテーマを変更したときは、Windows Phone開発ツールに含まれる全てのコントロールが自動的に影響を受けます。 開発者は、自分自身でコントロールを作ることもできます。システムコントロールを複製して、作成することもできます。コントロールをカスタマイズする方法については、この「Windows Phone 7 UIガイドを読み解く」の連載ではなく、別の連載で説明する予定です。 [注意事項]この記事は、UI Design and Interaction Guide for Windows Phone 7 Version 2.0というドキュメントを元に書いています。個人的な意見や見解も含んでいます。記事中のページは、印刷後のページ(左上または右上に表示されている数字)です。画像は、断りのない限りオリジナルのドキュメントから引用しています。英語の得意な方は、オリジナルのドキュメントもご参照ください。 [オリジナルのドキュメント]オリジナルのドキュメントは、下記Webサイトよりダウンロードできます。http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspxこのページの最初のほうにある、「UI Design and Interaction…..」というリンクをクリックすると、ダウンロードが始まります。 [Windows Phone 7 UIガイドを読み解く]第1回~第15回の一覧第16回 : ~タッチによる入力~第17回 : ~タッチ方法(ゼスチャー)の種類~第18回 : ~ハードウェアの周囲についているもの~第19回…


[Windows Phone 7 UIガイドを読み解く] 第20回 ~出力方法の種類~

[Windows Phone 7 UIガイドを読み解く] 第20回 ~出力方法の種類~ [Output Methods] (132ページ – 133ページ) Windows Phone 7には、以下のように何らかの出力を行うためのいくつかの方法があります。 1. オーディオの出力ジャック2. スピーカー3. スクリーン4. バイブレーション Windows Phone 7は、少なくとも16ビット(赤が5ビット、緑が6ビット、青が5ビット)の輝度のスクリーンを備えています。電話機メーカーは、この輝度以上のスクリーンを使用することもできます。しかし、それぞれ何ビットの輝度が使えるかをアプリケーション側で知ることはできません。画面サイズは800 x 480ピクセルで、それ以外のサイズはありません。 バイブレーションについては、オンにするかオフにするかをユーザーが決めます。この設定をアプリケーション側で上書きすることはできません。 [注意事項]この記事は、UI Design and Interaction Guide for Windows Phone 7 Version 2.0というドキュメントを元に書いています。個人的な意見や見解も含んでいます。記事中のページは、印刷後のページ(左上または右上に表示されている数字)です。画像は、断りのない限りオリジナルのドキュメントから引用しています。英語の得意な方は、オリジナルのドキュメントもご参照ください。 [オリジナルのドキュメント]オリジナルのドキュメントは、下記Webサイトよりダウンロードできます。http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspxこのページの最初のほうにある、「UI Design and Interaction…..」というリンクをクリックすると、ダウンロードが始まります。 [Windows Phone 7 UIガイドを読み解く]第1回~第15回の一覧第16回 : ~タッチによる入力~第17回 : ~タッチ方法(ゼスチャー)の種類~第18回 : ~ハードウェアの周囲についているもの~第19回 : ~搭載されているセンサー~第20回 : ~出力方法の種類~ マイクロソフト田中達彦


[Windows Phone 7 UIガイドを読み解く] 第19回 ~搭載されているセンサー~

[Windows Phone 7 UIガイドを読み解く] 第19回 ~搭載されているセンサー~ [Sensors] (118ページ – 119ページ)[Accelerometer] (120ページ – 121ページ)[A-GPS] (122ページ – 123ページ)[Proximity sensor] (124ページ – 125ページ)[Camera] (126ページ – 127ページ)[Compass] (128ページ – 129ページ)[Light sensor] (130ページ – 131ページ) Windows Phone 7には、以下のセンサーが搭載されています。- 加速度センサー- A-GPS- 近接センサー- カメラ- コンパス- 光センサー [加速度センサー]重力などによる加速度を、+/-5度の精度で測ることができます。X、Y、Zの情報を得ることができます。アプリケーションでこれらの情報を利用することができます。 [A-GPS]A-GPS (assisted global positioning system) は、電話がある位置を知るためのセンサーで、ロケーション サービスとしても提供されます。直接A-GPSから情報を取得する方法はありませんが、System.Device.Location名前空間に含まれるロケーション サービスを使用して、情報を取得することができます。 [近接センサー]通話中に、近接センサーから15mm以内に物体(顔)を検知すると、バッテリーの消費を防ぐためにスクリーンをオフにします。近接センサーをつける位置は、電話機のメーカーによって異なります。スピーカーフォンモードで通話をしているときも近接センサーはオンになったままなので、近接センサーに指を近づけることで画面を消すことができます。アプリケーションから近接センサーを使うことはできません。 [カメラ]Windows Phone 7には、5メガピクセル以上のオートフォーカスとフラッシュがついたカメラが搭載されています。アスペクト比は4:3です。アプリケーションからカメラを使うときは、Microsoft.Photo.Tasks名前空間に含まれるCameraを使用します。 [コンパス]地磁気を使用するコンパスが搭載されています。アプリケーションからコンパスを使うことはできません。 [光センサー]光センサーは、画面の明るさの調節のために使われます。アプリケーションから光センサーを使うことはできません。 [注意事項]この記事は、UI…


[Windows Phone 7 UIガイドを読み解く] 第18回 ~ハードウェアの周囲についているもの~

[Windows Phone 7 UIガイドを読み解く] 第18回 ~ハードウェアの周囲についているもの~ [Microphone] (102ページ – 103ページ)[Phone hardware button] (104ページ – 105ページ)[Start button] (106ページ – 107ページ)[Search button] (108ページ – 109ページ)[Back button] (110ページ – 111ページ)[Power button] (112ページ – 113ページ)[Volume buttons] (114ページ – 115ページ)[Camera button] (116ページ – 117ページ) WP7にはマイクと数個のボタンがついています。 [マイク]150Hzから7kHzの周波数に対応したマイクがついています。 [ボタンの種類]1. 電源/スリープ2. ボリュームの大/小3. カメラ4. 戻る (back)5. スタート (start)6. 検索 (search) [スタート ボタン]スタートボタンが押されると、スタート画面に戻ります。起動中のアプリケーションは、一時停止のためのイベントを受け取ります。アプリケーション側で、スタートボタンの振る舞いを変更することはできません。 [検索ボタン]検索ボタンが押されると、Bingサーチが起動します。Outlookのようないくつかのアプリケーションでは、検索ボタンを押すことによりアプリケーション側で用意している検索の機能が起動します。開発者は、アプリケーション側で用意している検索をこのボタンに割り振ることはできませんが、SearchTaskクラスを使用することによりBingサーチを起動させることができます。 [戻るボタン]戻るボタンを押すと、アプリケーション内またはアプリケーションを超えて、1つ前のページに戻ります。メニューやダイアログを閉じるときにも、戻るボタンを使うことができます。戻るボタンを押したときのページ遷移に関しては、第11回…


[Windows Phone 7 UIガイドを読み解く] 第17回 ~タッチ方法(ゼスチャー)の種類~

[Windows Phone 7 UIガイドを読み解く] 第17回 ~タッチ方法(ゼスチャー)の種類~ [Supported touch gestures] (78ページ – 79ページ)[Tap] (80ページ – 81ページ)[Double tap] (82ページ – 83ページ)[Pan] (84ページ – 85ページ)[Flick] (86ページ – 87ページ)[Pinch and stretch] (88ページ – 89ページ)[Touch and hold] (90ページ – 91ページ)[Four touch points] (92ページ – 93ページ)タッチによる入力の種類には、1本の指を使用する方法が5つと、2本の指を使用する方法が2つの、合計7種類の方法があります。 [タップ]1つの指でスクリーンをトンッと触り、すぐ指を離します。 [ダブルタップ]素早く2回タップします。アプリケーションによっては、ダブルタップを行うことで表示の拡大/縮小を行えるものもあります。 [パン]1つの指でスクリーンを触り、触ったまま指を動かします。指をスクリーンから話すことで、パンの動作を終了します。 [フリック]1つの指でスクリーンを触り、任意の方向へその指をシュッと跳ね上げます。 [ピンチ]2本の指でスクリーンを触り、スクリーンを触ったまま2本の指の間隔を狭くします。画像などを縮小して表示させるときなどに使用します。 [ストレッチ]2本の指でスクリーンを触り、スクリーンを触ったまま2本の指の間隔を広くします。画像などを拡大して表示させるときなどに使用します。 [タッチ アンド ホールド]1つの指でスクリーンを触り、そのまま動かさずにしばらく待ちます。タッチ アンド ホールドは、コンテキストメニューを表示させるときなどに使用します。 [4か所のタッチ]Windows Phone 7は、4か所までのタッチに対応しています。ゲームや音楽ソフトなどで使うことができます。 タッチを検知する範囲は7mm以上必要で、かつ他の端から3.5mm以上離れている必要があります。タッチはCPUパワーを使うため、同時に3点以上のタッチを使用した場合はアプリケーションのパフォーマンスに影響することがあります。…


[Windows Phone 7 UIガイドを読み解く] 第1回から第15回までの一覧~

[Windows Phone 7 UIガイドを読み解く] 第1回から第15回までの一覧~ この連載記事は、UI Design and Interaction Guide for Windows Phone 7 Version 2.0というドキュメントを元にしている、Windows Phone 7のユーザーインターフェイスに関する連載です。連載も15回を数えるところまで来ましたので、ここまでの一覧とブログビューワーを用意しました。 [Windows Phone 7 UIガイドを読み解く]第1回 : ~WP7のデザイン哲学~Windows Phone 7は、メトロと呼ばれるデザインを採用しています。なぜこのようなデザインにしたのか、このデザインが目指すところは何かを説明しています。 第2回 : ~スタート画面~Windows Phone 7の入り口とも言える、スタート画面を説明しています。 第3回 : ~ステータスバー~画面の上部に、電波状態や時間を表示させるステータスバーがあります。このステータスバーについて説明しています。 第4回 : ~アプリケーションバー~アプリケーションは、最大4つまでのボタンをアプリケーションバーに用意することができます。 第5回 : ~アプリケーションバー メニュー~アプリケーションバーには、ボタン以外にメニューを用意することもできます。 第6回 : ~電話機の傾きによる画面の向き~Windows Phone 7は、ポートレート、ランドスケープ ライト、ランドスケープ レフトの3方向の画面をサポートしています。 第7回 : ~プッシュ通知サービス~クラウド上のアプリケーションからWindows Phone 7に、情報を送ることができます。 第8回 :…


[Windows Phone 7 UIガイドを読み解く] 第15回 ~アプリケーションの設定~

[Windows Phone 7 UIガイドを読み解く] 第15回 ~アプリケーションの設定~ [Application settings] (68ページ – 69ページ)何らかの設定する項目があるアプリケーションでは、設定用のページを用意したほうがよいでしょう。設定用のページを作る場合は、以下の設定ページのような、システムの設定やシステムアプリケーションの設定のレイアウトや振る舞いを参考にしてください。 アプリケーションの設定を変更する際は、変更を即座に反映するように実装します。すなわち、[更新]ボタン、[OK]ボタンや、その他の確認用のダイアログなどを必要とする実装をしないようにします。 アプリケーションの設定は、なるべくシンプルにします。複数のページを使用する設定や複雑な設定などは、ユーザーを困惑させることや、ユーザーのフラストレーションにつながってしまいます。設定用のページ数としては、最大2ページ(2スクリーン)に収まるようにします。 設定にテキストボックスを使用している場合など、ユーザーの動作が途中でキャンセルされる可能性があるときは、キャンセルできる方法を用意したほうがよいでしょう。データを上書きしたり、消去してしまう可能性がある場合か、データを元に戻せない場合は、キャンセルボタンを用意します。 ネットワークを介してデータをやり取りするアプリケーションは、ネットワークへのアクセスを無効にするオプションを用意してください。 [連絡事項]11月25日、26日に開催される、PDC10 (Professional Developers Conference) というイベントで、Windows Phone 7について話しました。「UX1 ついに公開! Windows Phone 7 知っておくべき開発の心得」というセッションを担当しています。本ブログで、セッションを元にした記事を後日書く予定です。 [注意事項]この記事は、UI Design and Interaction Guide for Windows Phone 7 Version 2.0というドキュメントを元に書いています。個人的な意見や見解も含んでいます。記事中のページは、印刷後のページ(左上または右上に表示されている数字)です。画像は、断りのない限りオリジナルのドキュメントから引用しています。英語の得意な方は、オリジナルのドキュメントもご参照ください。 [オリジナルのドキュメント]オリジナルのドキュメントは、下記Webサイトよりダウンロードできます。http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspxこのページの最初のほうにある、「UI Design and Interaction…..」というリンクをクリックすると、ダウンロードが始まります。 [Windows Phone 7 UIガイドを読み解く]第1回 : ~WP7のデザイン哲学~第2回 : ~スタート画面~第3回 : ~ステータスバー~第4回 : ~アプリケーションバー~第5回 :…


[Windows Phone 7 UIガイドを読み解く] 第14回 ~システムとシステムアプリケーションの設定~

[Windows Phone 7 UIガイドを読み解く] 第14回 ~システムとシステムアプリケーションの設定~ [System and system application settings] (66ページ – 67ページ)システムの設定やシステムアプリケーションの設定の変更を行うには、アプリケーションの一覧にあるSettingsのアイコンをタップします。設定の画面では、システムの設定とシステムアプリケーションの設定の画面がピボット形式で表示されています。※ ピボット(Pivot)については後日説明します。第11回で説明している画面もピボットです。 システムやシステムアプリケーションの設定を変更した場合、その変更は直ちにシステムに反映されます。例えば下図の日付と時間の設定画面の下のほうにある “24 hour format” と書かれている部分の右にあるつまみを右に動かすと、24時間表記がONになります。この場合は、つまみを動かし終わった時に24時間表記がONになります。つまみを動かした後、[更新]ボタンや[OK]ボタンのようなボタンをタップする必要はありません。 システムアプリケーションの設定は、アプリケーションによっては、下図のInternet Explorerのようにアプリケーションバーメニューから呼び出すこともできます。この場合は、赤い矢印が指している “settings” と書かれた部分をタップすると、設定画面を表示します。 アプリケーションを開発する際、そのアプリケーションの設定画面はアプリケーション自身で用意する必要があります。作成したアプリケーションの設定画面を、システムとシステムアプリケーションの設定の画面に登録することはできません。 開発者は、システムの設定の内容が開発しているアプリケーションにどのように影響するかについて、考慮しておく必要があります。例えば、airplaneモードという飛行機に乗っているときにONにしておくモードがあります。そのairplaneモードがONになっているときにはネットワークにつなげたり電波を拾ったりすることができません。ネットワークにつなげることがあるアプリケーションは、airplaneモードを確認して、ネットワークにつなげる状態かどうかを確認し、アプリケーションの振る舞いを変えるように実装する必要があります。 [注意事項]この記事は、UI Design and Interaction Guide for Windows Phone 7 Version 2.0というドキュメントを元に書いています。個人的な意見や見解も含んでいます。記事中のページは、印刷後のページ(左上または右上に表示されている数字)です。画像は、断りのない限りオリジナルのドキュメントから引用しています。英語の得意な方は、オリジナルのドキュメントもご参照ください。 [オリジナルのドキュメント]オリジナルのドキュメントは、下記Webサイトよりダウンロードできます。http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspxこのページの最初のほうにある、「UI Design and Interaction…..」というリンクをクリックすると、ダウンロードが始まります。 [Windows Phone 7 UIガイドを読み解く]第1回 : ~WP7のデザイン哲学~第2回 : ~スタート画面~第3回 : ~ステータスバー~第4回 : ~アプリケーションバー~第5回 : ~アプリケーションバー…


[Windows Phone 7 UIガイドを読み解く] 第13回 ~WP7のテーマ~

[Windows Phone 7 UIガイドを読み解く] 第13回 ~WP7のテーマ~ [Themes] (62ページ – 63ページ)WP7では、画面の背景色とアクセントの色を選ぶことができます。この背景色とアクセントの色の組み合わせをテーマと呼びます。テーマは、使う人が自由に選ぶことができます。 テーマとして設定できる背景色として、darkという黒っぽい色か、lightという白っぽい色のどちらかを選択することができます。アクセントとなる色は、以下の10色が用意されています。 携帯電話のキャリアまたは電話機の製造元は、追加で色を1つ追加することができます。ユーザーは、これらの組み合わせである以下の20のテーマ (追加色がある場合は22のテーマ) の中から、好きなテーマを選ぶことができます。 デフォルトとして設定されている色は、以下の図のように黒っぽい背景色と青色のアクセント色です。 携帯電話のキャリアまたは電話機の製造元は、出荷時のテーマを別の色に設定することができます。 アクセントのそれぞれの色とRGBの関係は、以下のようになっています。magenta : FF0097purple  : A200FFteal    : 00ABA9lime    : 8CBF26brown   : 996600pink    : FF0097orange  : F09609blue    : 1BA1E2red     : E51400green   : 339933アプリケーションで使用するコントロールの色はテーマで設定した色が自動的に適用されるため、開発者はわざわざ色をテーマに合わせて設定する必要はありません。とはいえ、アプリケーション側で、そのアプリケーション内で使用する場合に限り、テーマの色を変更することもできます。注意する点として、白っぽい色を多用すると液晶ディスプレイで使用する電気の容量が増えるため、バッテリーの消費が早くなることがあるので気を付けてください。 [注意事項]この記事は、UI Design and Interaction Guide for Windows Phone 7 Version 2.0というドキュメントを元に書いています。個人的な意見や見解も含んでいます。記事中のページは、印刷後のページ(左上または右上に表示されている数字)です。画像は、断りのない限りオリジナルのドキュメントから引用しています。英語の得意な方は、オリジナルのドキュメントもご参照ください。 [オリジナルのドキュメント]オリジナルのドキュメントは、下記Webサイトよりダウンロードできます。http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspxこのページの最初のほうにある、「UI Design and Interaction…..」というリンクをクリックすると、ダウンロードが始まります。 [Windows Phone 7…


[Windows Phone 7 UIガイドを読み解く] 第12回 ~ページのタイトル~

[Windows Phone 7 UIガイドを読み解く] 第12回 ~ページのタイトル~ [Page title] (56ページ – 57ページ)WP7のページには、以下のようにタイトルをつけることができます。 このタイトルはオプションなので、タイトルをつけないことも可能です。Windows Phone用開発ツールのテンプレートには、デフォルトでタイトルがあります。コンテンツがスクロールする場合でもタイトルの部分はスクロールしません。 タイトル部分は、タップしても何もアクションをおこしません。ただし、ピボットを使用した場合は、タイトル部分をタップするとそのタイトルに紐づく情報を表示させます。ピボットとは下図のようなUIで、左右にスクロールさせて異なる情報を表示させることができます。(実機を撮影。少し見づらくて申し訳ありません)この図は、allが選択されている状態で、メールボックスに入っているメールを全て表示しています。この画面の上部にあるunreadの部分をタップするか、その下のメールの情報が表示されているところを左方向にフリックする(指でシュッと右から左にこする)と、unreadの情報が表示されます。 ピボットに関してはUIガイドの174ページに情報があります。本連載では、早めに記事を載せるようにします。 [注意事項]この記事は、UI Design and Interaction Guide for Windows Phone 7 Version 2.0というドキュメントを元に書いています。個人的な意見や見解も含んでいます。記事中のページは、印刷後のページ(左上または右上に表示されている数字)です。画像は、断りのない限りオリジナルのドキュメントから引用しています。英語の得意な方は、オリジナルのドキュメントもご参照ください。 [オリジナルのドキュメント]オリジナルのドキュメントは、下記Webサイトよりダウンロードできます。http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspxこのページの最初のほうにある、「UI Design and Interaction…..」というリンクをクリックすると、ダウンロードが始まります。 [Windows Phone 7 UIガイドを読み解く]第1回 : ~WP7のデザイン哲学~第2回 : ~スタート画面~第3回 : ~ステータスバー~第4回 : ~アプリケーションバー~第5回 : ~アプリケーションバー アイコン~第6回 : ~電話機の傾きによる画面の向き~第7回 : ~プッシュ通知サービス~第8回 : ~タイルによる通知~第9回 : ~トーストによる通知~第10回 : ~直接の通知~第11回…