9/17/2018 10:17 PM © 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.

Windows 7 : リボン UI 対応アプリケーションの開発 9/17/2018 10:17 PM Session ID : T2-401 Windows 7 : リボン UI 対応アプリケーションの開発 マイクロソフト株式会社 エバンジェリスト 井上 章 Blog : http://blogs.msdn.com/chack/ © 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.

現在開発中のテクノロジーを取り扱っています。 仕様および機能は変更される可能性があります。 本セッションでは、 現在開発中のテクノロジーを取り扱っています。 仕様および機能は変更される可能性があります。

Agenda リボン UI とは？ Office 2007 リボン Windows Scenic リボン リボン UI の特徴と利点 リボン開発プラットフォーム Scenic リボン アーキテクチャ リボン マークアップ リボン マークアップ コンパイラ 初期化とコールバック ヘッダファイルのインクルード IUIApplication の実装 IUICommandHander の実装 リボン UI の初期化と破棄 コントロールの追加とイベント処理 Scenic リボン コントロール まとめ

リボン UI とは？ Office 2007 で採用された新しいユーザーインターフェース タブと大きめに配置されたコントロールで構成 Windows 7 ではリボン UI のための新たな API が標準で用意され、アプリケーションで容易に実装できる Windows 7 の ペイントやワードパッドでリボン UI が採用 以下の２種類に分けられる Office 2007 リボン Windows Scenic リボン

Office 2007 リボン Office ボタン タブ コンテキスト タブ セット ヘルプ クイック アクセス ツールバー グループ（別名 “Chunk”） ダイアログ ボックス ラウンチャー

Windows Scenic リボン Windows 7 に標準搭載, Windows Vista に配置可能 アプリケーション メニュー クイック アクセス ツールバー タブ コンテキスト タブ セット コンテキスト タブ ヘルプ グループ（別名 “Chunk”） ダイアログ ボックス ラウンチャー Windows 7 に標準搭載, Windows Vista に配置可能 Win32 API, COM ベースの開発（まずはネイティブデベロッパを対象） Microsoft Office 2007 リボンとほぼ同等の機能を提供

リボン UI の特徴と利点 統一されたユーザーエクスペリエンスの提供 大きくデザインされたボタンなどのコントロールと、ラベル表記によるコマンド説明 コンテキスト タブ による、選択オブジェクトに関連したコマンドのタブ表示 クイック アクセス ツールバーによるコマンドへの素早いアクセス コマンドを見つけやすい マウスでクリックしやすい 直観的なアプリケーション操作と操作方法の容易な習得 アプリケーションのユーザービリティ向上

リボン開発プラットフォーム ソフトウェアベンダのさまざまなニーズに対応 9/17/2018 10:17 PM リボン開発プラットフォーム ソフトウェアベンダのさまざまなニーズに対応 WPF MFC Scenic ターゲット: Managed ターゲット: MFC ネイティブ ターゲット: ネイティブ .NET Fx 3.5 必須 Windows 2000 以上 Windows Vista 以上 Office 2007 & Windows styles Office 2007 & Windows styles1 Windows styles Coming soon… 2009 年予定 Visual Studio 2008 SP1 に搭載 Coming soon… Windows 7 と同時にリリース Microsoft の リボン Strategy 1 Office 2007 スタイル はリリース済み, Windows スタイル は 2009 年を予定 © 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.

Scenic リボン アーキテクチャ マークアップ ベースの UI 小さく高性能なネイティブ コード ランタイム XML によるリボン コントロール定義 小さく高性能なネイティブ コード ランタイム 最上位のメニュー バー機能をオーバーライドし、リボン形式のコマンド UI をレンダリング COM API による初期化処理、およびコールバック メソッドの実装によるイベント処理 アプリケーション固有のビジネス ロジック void DoStuff() { … } Windows Scenic リボン Markup コントロールの構成 <Ribbon> <Tab> <Button … /> </Tab> </Ribbon> COM API 初期化および イベント処理 MyHandler::Execute(…) { DoStuff(); }

リボン マークアップ（１） <Application xmlns="http://schemas.microsoft.com/windows/2009/Scenic/Intent"> <Application.Commands> <!-- tabs --> <Command Name="TabHome" Symbol="cmdTabHome" Id="30000"> <Command.LabelTitle> <StringDef>Home</Stringdef> </Command.LabelTitle> </Command> <!-- chunks --> <Command Name="ChunkClipboard" Symbol="cmdChunkClipboard" Id="31002"> <StringDef>Clipboard</StringDef> <Command.LargeImages> <Image Source="Paste.bmp"/> </Command.LargeImages> <!-- Clipboard commands --> <Command Name="Paste" Symbol="cmdPaste" Id="57637”> <StringDef>Paste</Stringdef> </Application.Commands> <Application.Views> ... </Application.Views> </Application>

リボン マークアップ（２） <Application xmlns="http://schemas.microsoft.com/windows/2009/Scenic/Intent"> <Application.Commands> ... </Application.Commands> <Application.Views> <Ribbon Name="Microsoft.Scenic.Intent.RibbonSample"> <Ribbon.Tabs> <Tab CommandName="TabHome"> <Group CommandName="ChunkClipboard"> <Button CommandName="Paste"/> <Button CommandName="..."/> ... </Group> </Tab> <Tab CommandName=“..."> ... </Tab> </Ribbon.Tabs> </Ribbon> </Application.Views> </Application>

リボン マークアップ コンパイラ IntentCL.exe リボン マークアップ (XML) を検証 バイナリ版 リボン マークアップを生成 アプリケーションビルドで使用するヘッダファイルとリソースファイルを生成 コマンドライン構文 IntentCL <ribbonFile> <binaryFile> /header:<headerFile> /res:<resourceFile> /name:<ribbonName> markup.xml を記述 IntentCL.exeでコンパイル markup.bml ribbonres.h ribbonres.rc を生成 アプリケーションの ビルド リボン マークアップ のアプリケーションへの組み込み ※ リボン マークアップ の詳細は Windows SDK v7.0 ドキュメントを参照 オンライン：http://msdn.microsoft.com/en-us/library/dd371191(VS.85).aspx

初期化とコールバック アプリケーションへの組み込み リボン プラットフォーム アプリケーション CoCreateInstance Initialize(HWND, IUIApplication*) LoadUI( resourceName ) OnCreateUICommand OnDestroyUICommand OnViewChanged IUIFramework IUIApplication

ヘッダファイルのインクルード マークアップコンパイラで生成したヘッダファイルとリソースファイルをインクルード // RibbonApplication.rc #include “ribbonres.h” #include “ribbonres.rc” ATL/COM ヘッダファイルをインクルード // stdafx.h #include <atlbase.h> #include <atlcom.h> #include <initguid.h> リボンインターフェース定義のヘッダファイルをインクルード // RibbonImpl.cpp #include <scenicintent.h> #include <ScenicIntentPropertyHelpers.h>

IUIApplication の実装 class CApplication : public CComObjectRootEx<CComMultiThreadModel> , public IUIApplication , public IUICommandHandler { public: BEGIN_COM_MAP(CApplication) COM_INTERFACE_ENTRY(IUIApplication) COM_INTERFACE_ENTRY(IUICommandHandler) END_COM_MAP() // IUIApplication インターフェースの実装 STDMETHOD(OnViewChanged)(UINT32 viewID, __in UI_VIEWTYPE typeID, __in IUnknown* pView, UI_VIEWVERB verb, INT32 uReasonCode); STDMETHOD(OnCreateUICommand)(UINT32 commandId, __in UI_COMMANDTYPE typeID, __deref_out IUICommandHandler** ppCommandHandler); STDMETHOD(OnDestroyUICommand)(UINT32 commandId, __in IUICommandHandler* pCommandHandler); ... 次スライドへ続く ...

IUICommandHander の実装 ... 前スライドの続き ... // IUICommandHandler インターフェースの実装 STDMETHODIMP Execute(UINT32 commandId, UI_EXECUTIONVERB verb, __in_opt const PROPERTYKEY* key, __in_opt const PROPVARIANT* ppropvarValue, __in_opt IUISimplePropertySet* pCommandExecutionProperties); STDMETHODIMP UpdateProperty(UINT32 commandId, __in REFPROPERTYKEY key, __in_opt const PROPVARIANT* currentValue, __out PROPVARIANT* newValue); };

リボン UI の初期化と破棄 IUIFramework* g_pFramework = NULL; HRESULT InitRibbon(CMainFrame* pFrame) { HRESULT hr = ::CoCreateInstance(CLSID_ScenicIntentUIFramework, NULL, CLSCTX_INPROC_SERVER, IID_PPV_ARGS(&g_pFramework)); CComPtr<CComObject<CApplication>> pApplication; hr = CComObject<CApplication>::CreateInstance(&pApplication); hr = g_pFramework->Initialize(*pFrame, pApplication); hr = g_pFramework->LoadUI(GetModuleHandle(NULL), L"APPLICATION_RIBBON"); return hr; } void DestroyRibbon() if (g_pFramework){ g_pFramework->Destroy(); g_pFramework->Release(); g_pFramework = NULL;

コントロールの追加とイベント処理（１） ボタンコントロールをタブグループへ追加 Markup.xml の Application.Commands 要素へ Command 要素を追加 Application.Views 要素の Ribbon.Tabs 要素へ Button 要素を追加 <Command Name="Paste" Symbol="cmdPaste" Id="57637”> <Command.LabelTitle> <StringDef>Paste</Stringdef> </Command.LabelTitle> <Command.LargeImages> <Image Source="Paste.bmp"/> </Command.LargeImages> </Command> <Tab CommandName="TabHome"> <Group CommandName="ChunkClipboard"> <Button CommandName="Paste"/> </Group> </Tab>

コントロールの追加とイベント処理（２） IUICommandHandler インターフェース Execute メソッドの実装 STDMETHODIMP Execute(UINT32 commandId, UI_EXECUTIONVERB verb, __in_opt const PROPERTYKEY* key, __in_opt const PROPVARIANT* ppropvarValue, __in_opt IUISimplePropertySet* pCommandExecutionProperties) { switch (verb) case UI_EXECUTIONVERB_EXECUTE: if (commandId == cmdPaste) AfxMessageBox(“Paste!!”); } break; return S_OK;

コントロールの追加とイベント処理（３） IUICommandHandler インターフェース UpdateProperty メソッドの実装 STDMETHODIMP UpdateProperty(UINT32 commandId, __in REFPROPERTYKEY key, __in_opt const PROPVARIANT* currentValue, __out PROPVARIANT* newValue) { BOOL fVal = TRUE; // or FALSE HRESULT hr = E_FAIL; if (key == UI_PKEY_Enabled) hr = UIInitPropertyFromBoolean(UI_PKEY_Enabled, fVal, newValue); } return hr;

Scenic リボン コントロール グループ ダイアログ ラウンチャー ドロップダウン ギャラリー カテゴリ別メニュー ツールチップ グループ ダイアログ ラウンチャー ドロップダウン ギャラリー カテゴリ別メニュー ツールチップ “In-Ribbon” ギャラリー フォント コントロール チェックボックス コンボボックス タブ＆グループ ボタン＆ スプリット ボタン スピナー ミニ ツールバー＆ コンテキスト メニュー カラー ピッカー ヘルプボタン

統一されたユーザーエクスペリエンスの提供 9/17/2018 10:17 PM まとめ リボン UI 対応アプリケーション リボン UI により直観的なアプリケーション操作が可能になり、ユーザービリティを向上することができる リボンプラットフォームにより基本処理が制御され、リボンを使ったアプリケーションのインターフェースの一貫性が保たれる 今後、MFC および WPF ベースでもリボン UI 対応アプリケーション開発が可能になり、アプリケーションへの実装もさらに容易になる 統一されたユーザーエクスペリエンスの提供 アプリケーションのユーザービリティ向上 Windows Scenic Ribbon SDK Document： http://msdn.microsoft.com/en-us/library/dd371191(VS.85).aspx リボン ガイドライン (MSDN Library)： http://msdn.microsoft.com/en-us/library/cc872782.aspx © 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.

関連セッション T2-201 Windows 7 機能概要 1月28日 13:15 - 14:25 T2-402 Windows 7：グラフィックス API 詳解 1月28日 16:05 - 17:15

9/17/2018 10:17 PM © 2009 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. © 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.