Windows Summit 2010 2/9/2020 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.

Presentation on theme: "Windows Summit 2010 2/9/2020 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be."— Presentation transcript:

1 Windows Summit 2010 2/9/2020 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2 Windows Summit 2010 2/9/2020 Windows 7 Ribbon Framework: The Next Generation User Experience for Presenting Commands in Windows Applications (Windows 7 リボン フレームワーク : Windows アプリケーションにおいて コマンドを提供するための 次世代ユーザー エクスペリエンス) Ryan Demopoulos Program Manager Microsoft Corporation © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3 Windows リボン フレームワーク (WRF)
2/9/2020 1:59 AM リボンの概要 リボンを採用する 3 つの方法 本日の議題: Windows リボン フレームワーク (WRF) WPF MFC WRF ターゲット: マネージ ターゲット: MFC ネイティブ ターゲット: ネイティブ1 .NET 3.5 が必要 Windows XP 以降 Windows Vista 以降 Windows ルック Office 2007 と Windows ルック Windows ルック CodePlex で入手可能 2010 年に 新バージョン Visual Studio 2008 SP1の一部として入手可能 Windows 7 に組み込み済み Windows Vista はプラットフォーム 更新プログラムでサポート Microsoft のリボン戦略 1Preview Ribbon ツールでリボンフレームワークの Managed ラッパーが入手可能 © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4 議題 リボンの設計に取り組む方法についての 理解 コントロールを実装する方法 皆様へのお願い リソース ムービー メーカーの例 ギャラリー
リボンの設計に取り組む方法についての 理解 ムービー メーカーの例 コントロールを実装する方法 ギャラリー コンテキスト タブ グループ アプリケーション モード 皆様へのお願い リソース

5 リボンの設計 “機能” 中心から “シナリオ” 中心の考え方 に移行 あせってメニューをタブにマップしてしまわ ない

6 リボンの設計 どこから開始するか? 製品チームが実行している一般的手順 手順 1: アプリケーションのすべてのコマンド を列挙
手順 2: シナリオ別にコマンドを分類 手順 3: シナリオをユーザー インターフェイス 領域にマップ 手順 4: タブ、グループ、およびコントロールを 作成

7 例: “FontControl” サンプルの改良 設計と実装
Windows SDK または下記から入手可能

8 例: “FontControl” サンプルの改良 設計と実装
Windows SDK または下記から入手可能 機能を追加してみましょう 4 つの設計手順に従う リボン マークアップとコードを作成

9 手順 1: アプリケーションのすべてのコマンドの列挙 FontControl の例
フォント フェイス フォント サイズ フォント サイズの拡大 フォント サイズの縮小 太字 斜体 下線 取り消し線 下付き 上付き テキストのハイライト テキストの色 終了 大文字の選択 小文字の選択 印刷 印刷プレビュー 印刷プレビューを閉じる テキスト スタイルの選択 テキスト スタイルの追加

10 手順 2: シナリオ別にコマンドを分類 FontControl の例
テキストの変換 テキストのスタイル 新しい FontControl コマンド Uppercase Selection Lowercase Selection Print Print Preview Close Print Preview Pick Text Style Add Text Style Uppercase Lowercase Pick Text Style Add Text Style 印刷 Print Print Preview Close Print Preview

11 手順 2: シナリオ別にコマンドを分類 FontControl の例
Font Face Font Size Increase Font Size Decrease Font Size Bold Italics Underline Strikethrough Subscript Superscript Text Highlight Text Color Exit テキストの変換 テキストのスタイル Uppercase Lowercase Pick Text Style Add Text Style Font commands (Bold, Decrease Font Size, Font face, Font Size, Increase Font Size, Strikethrough, Subscript, Italics, Superscript, Text color, Text Highlight, Underline) 印刷 Print Print Preview Close Print Preview 終了 Exit

12 手順 3: シナリオをユーザー インターフェイス領域にマップ
リボン “ワークスペース” 関連のシナリオ ユーザーがコマンドを見つける主要な場所

13 手順 3: シナリオをユーザー インターフェイス領域にマップ
Canvas 迅速に直接実行される操作 コマンド規則を維持 「このコマンドは本当にキャンバス上に必要ですか?」

14 手順 3: シナリオをユーザー インターフェイス領域にマップ
アプリケーション メニュー 従来の [ファイル] メニューに相当 “メタ ワークスペース” シナリオ プレファレンスとアプリケーションの設定

15 手順 3: シナリオをユーザー インターフェイス領域にマップ FontControl の例
印刷 テキストのスタイル アプリ ケーション メニュー Print Print Preview Close Print Preview Pick Text Style Add Text Style Font commands (Bold, Decrease Font Size, Font face, Font Size, Increase Font Size, Strikethrough, Subscript, Italics, Superscript, Text color, Text Highlight, Underline) リボン 終了 Exit Canvas テキストの変換 Uppercase Lowercase

16 手順 4: タブ、グループ、コントロールの作成 お楽しみはこれからです
まとめ: 手順 1: すべてのコマンドを列挙 手順 2: それらをユーザー シナリオ別に分類 手順 3: シナリオを UI 領域にマップ これで、UI 要素を作成する準備が整いました

17 手順 4: タブ、グループ、コントロールの作成 タブに関するヒント
タブの数は多すぎないように 将来のスケーラビリティに影響を及ぼす可能性あり

18 手順 4: タブ、グループ、コントロールの作成 タブに関するヒント
タブの数は多すぎないように 将来のスケーラビリティに影響を及ぼす可能性あり ユーザーは大きなタブの「中央左寄り」に注目

19 手順 4: タブ、グループ、コントロールの作成 タブに関するヒント
タブの数は多すぎないように 将来のスケーラビリティに影響を及ぼす可能性あり ユーザーは大きなタブの「中央左寄り」に注目 [ホーム] タブ: 最も重要なコマンド用

20 手順 4: タブ、グループ、コントロールの作成 タブに関するヒント
タブの数は多すぎないように 将来のスケーラビリティに影響を及ぼす可能性あり ユーザーは大きなタブの“中央左寄り” に注目 [ホーム] タブ: 最も重要なコマンド用 ユーザビリティは最も重要

21 手順 4: タブ、グループ、コントロールの作成 テキストのスタイル シナリオのコマンド
Pick Text Style Add Text Style Font commands (Font Face, Bold, Text Color, Strikethrough, etc..) ターゲット: リボン (およびキャンバス) ユーザーはテキストのスタイリングによる 効果の確認を望む

22 Gallery コントロール ビジュアルなコマンドを公開するメニュー 任意のアイテム イメージ サイズ アイテムの動的生成
DropDown SplitButton InRibbon ビジュアルなコマンドを公開するメニュー リアルタイムのプレビュー 任意のアイテム イメージ サイズ アイテムの動的生成

23 Gallery コントロール ビジュアルなコマンドを公開するメニュー 任意のアイテム イメージ サイズ アイテムの動的生成
コマンド入力 スペース ビジュアルなコマンドを公開するメニュー リアルタイムのプレビュー 任意のアイテム イメージ サイズ アイテムの動的生成 コマンド入力スペース

24 Gallery コントロール 推奨: InRibbonGalleries を使用 ギャラリーの機能が一目瞭然
アイテムに到達するまでのクリック数を削減 リボンの場所を適切に満たす

25 デモ スタイル ギャラリー マークアップ: <InRibbonGallery>
2/9/2020 1:59 AM デモ スタイル ギャラリー マークアップ: <InRibbonGallery> コード: IUISimplePropertySet アイテムの IUICollection © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

26 手順 4: タブ、グループ、コントロールの作成 終了シナリオのコマンド
Exit ターゲット: アプリケーション メニュー

27 手順 4: タブ、グループ、コントロールの作成 テキストの変換シナリオのコマンド
Uppercase Lowercase ターゲット: リボン [ホーム] タブに置くほど一般的ではない

28 手順 4: タブ、グループ、コントロールの作成 テキストの変換シナリオのコマンド
Uppercase Lowercase ターゲット: リボン テキストが選択されていない時は グレイアウト

29 手順 4: タブ、グループ、コントロールの作成 テキストの変換シナリオのコマンド
Uppercase Lowercase ターゲット: リボン 必要な場合、アプリケーションはコンテキ スト タブ グループをアクティブに

30 デモ コンテキスト タブ グループ マークアップ: <TabGroup>
2/9/2020 1:59 AM デモ コンテキスト タブ グループ マークアップ: <TabGroup> コード: UI_PKEY_ContextAvailableへの応答 © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

31 手順 4: タブ、グループ、コントロールの作成 印刷シナリオのコマンド
Print Print Preview Close Print Preview ターゲット: アプリケーション メニュー

32 手順 4: タブ、グループ、コントロールの作成 印刷シナリオのコマンド
Print Print Preview Close Print Preview ターゲット: アプリケーション メニュー (およびリボン)

33 アプリケーション モード アプリケーションの UI を再構成する方法 コンテキスト タブ グループとアプリケーション モード
タブ グループ: ワークスペースのコンテキストが変更 アプリケーション モード: アプリケーションのコンテキストが変更

34 <Tab ApplicationModes=“1,3,4”>
アプリケーション モードの機能 モードには番号 (0、1、 … 31) が付される 3 種類のコントロールにバインド可能 コア タブ タブ内のグループ アプリケーション メニュー直下のコントロール 常に排他的とは限らず、組み合わせ可能 <Tab ApplicationModes=“1,3,4”>

35 デモ アプリケーション モード マークアップ: ApplicationModes=“1”
2/9/2020 1:59 AM デモ アプリケーション モード マークアップ: ApplicationModes=“1” コード: IUIFramework::SetModes() © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

36 デフォルト (既定) モード モード 0 は「デフォルト (既定)」モード 起動時に、既定モードが自動的に アクティブ化
モードに明示的にバインドされていない モーダル コントロールは、 モード 0 (既定モード) つまり、この FontControl サンプルは既に モーダル 起動時に、既定モードが自動的に アクティブ化 既定の UI 構成に役立つ

37 デモ アプリケーション モード マークアップ: ApplicationModes=“1”
2/9/2020 1:59 AM デモ アプリケーション モード マークアップ: ApplicationModes=“1” コード: IUIFramework::SetModes() © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

38 皆様へのお願い 優れたリボンの設計を実践してください。 このセッションの発表について、 評価フォームへの記入をお願いいたします。
機能中心からシナリオ中心の考え方へシフトし てください。 リボンのマークアップを使用して反復的に設計 してください。 ユーザビリティの研究は非常に有効です。 ユーザビリティが最も重要です。 このセッションの発表について、 評価フォームへの記入をお願いいたします。

39 リソース Windows リボンに関するドキュメント Windows リボンの紹介 Nicolas Brun, PDC 2008
開発者向けのガイドとサンプルをチェック Windows リボンの紹介 Nicolas Brun, PDC 2008

40 Windows Summit 2010 2/9/2020 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.