ハンズオン ラボ: Windows Ribbon ～ Win32 ネイティブ アプリケーションへのリボンの追加 ～ 更新日: 2009 年 11 月 30 日 ダウンロード ドキュメント: HOLNativeRibbon-rev1.1 (XPS 形式、2.04 MB | PDF 形式、1.89 MB) コードサンプル: HOLNativeRibbon-Source-rev1.1 (ZIP 形式、100 KB) 目次 演習: Windows Ribbon ～ Win32 ネイティブ アプリケーションへのリボンの追加 ～ 練習 1: 空のリボンの作成 タスク Visual Studio を使用して、プロジェクトを新規作成する 基本的なリボンのマークアップ ファイルを作成する リボンのマークアップを自動的にコンパイルするように Visual Studio を構成する リボンのホストを作成する リボンの作成と初期化を記述する リボンをアプリケーションに組み込む (リボンの初期化を行う) リボンの後処理を行う 練習 2: リボンへのコントロールの追加 タスク タブにボタンを追加する ラベル、ツールチップ、およびアイコンをボタンに追加する ボタンがクリックされた際にメッセージ ボックスを表示する チェックボックスを追加する チェックボックスをトグル ボタンに変更する SizeDefinition テンプレートをグループに指定する トグル ボタンの状態に応じてボタンの有効化や無効化を行う 実行時にトグル ボタンのラベルを変更する 練習 3: グループの追加とサイズの調整 タスク タブにグループと複数のコントロールを追加する 動的にリサイズを行うルールを指定する まとめ このドキュメントに記載されている情報 (URL 等のインターネット Web サイトに関する情報を含む) は、将来予告なしに変更することがあります。このドキュメントに記載された内容は情報提供のみを目的としており、明示または黙示に関わらず、これらの情報についてマイクロソフトはいかなる責任も負わないものとします。 お客様が本製品を運用した結果の影響については、お客様が負うものとします。お客様ご自身の責任において、適用されるすべての著作権関連法規に従ったご使用を願います。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることなく、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。 マイクロソフトは、このドキュメントに記載されている内容に関し、特許、特許申請、商標、著作権、またはその他の無体財産権を有する場合があります。別途マイクロソフトのライセンス契約上に明示の規定のない限り、このドキュメントはこれらの特許、商標、著作権、またはその他の無体財産権に関する権利をお客様に許諾するものではありません。 別途記載されていない場合、このソフトウェアおよび関連するドキュメントで使用している会社、組織、製品、ドメイン名、電子メール アドレス、ロゴ、人物、出来事などの名称は架空のものです。実在する会社名、組織名、商品名、個人名などとは一切関係ありません。 © 2009 Microsoft Corporation. All rights reserved. Microsoft、MS-DOS、Windows、Windows NT、MSDN、Active Directory、BizTalk、Windows Server、SQL Server、SharePoint、Outlook、PowerPoint、FrontPage、Visual Basic、Visual C++、Visual C#、Visual Studio は、米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。 記載されている会社名、製品名には、各社の商標のものもあります。 1. 演習: Windows Ribbon ～ Win32 ネイティブ アプリケーションへのリボンの追加 ～ このハンズオンでは、Visual C++ 用いて作成した従来のネイティブ アプリケーションへ、新しい Windows Ribbon Framework の「リボン」を追加する方法について取り上げます。まず、アプリケーションに空のリボンを追加する方法を確認した後、そのリボンに対して、アイコンとラベルを伴うコントロールや、その他のリソースを追加します。さらに、リボン上のコントロールから、アプリケーションに実装された処理を実行できるようします。最後に、リボンが動的なレイアウト変更を行うように構成し、実行時のアプリケーションのウィンドウ サイズに応じて、リボンが自動的にレイアウトを調整するようにします。このハンズオンを一通り行うと、基本的なリボンを追加しカスタマイズする一連の手順を体験することができます。 前提知識 この演習のドキュメントでは、次に挙げる知識を既にお持ちであることを前提に解説しています。ただし、C++ の言語文法等に自信のない方でも、この演習付属のサンプルの完成品をコンパイルし、実行することで、Windows Ribbon Framework が提供するリボンの機能を体感することができます。 Visual Studio 2008 (Visual C++ 2008) における基本的な操作。たとえば、ソリューションを開く方法、エディターでの編集、ビルド (コンパイル) や実行の方法など。 C++ の言語文法や、オブジェクト指向プログラミングに関する基本的な用語。 COM の基本的な用語。たとえば、COM インターフェイスなど。 演習のシステム要件 この演習を行うには、あらかじめ以下の環境を用意する必要があります。 Windows 7 (日本語 32 ビット版) Visual C++ 2008 SP1 (Visual Studio 2008 SP1) 日本語版、Express Edition も可能 Windows SDK for Windows 7 and .NET Framework 3.5 SP 1 (英語版、x86 用) この演習で使用する付属のソース プログラム (サンプル プログラム) この後は、上記の各項について、留意点をいつくか補足します。予めご覧ください。 Windows 7 では Visual Studio 2008 を動作させ、リボンの機能を確認することが目的なので、特に Windows 7 のエディションは問いません。 Visual C++ 2008 のエディションは問いません。Visual C++ 2008 Express Edition も演習を行うことが可能です。ただし、SP1 をご利用ください。今回使用する Windows SDK は、SP1 環境が前提になります。なお、Visual C++ 2008 Express Edition は、Visual Studio 2008 Express Edition SP1 の一部として、以下の URL のダウンロード センターから無償で入手できます。(2009 年 9 月現在) https://www.microsoft.com/downloads/search.aspx?displaylang=ja Windows SDK for Windows 7 and .NET Framework 3.5 SP1 (以降は Windows SDK と表記) は、MSDN サブスクリプション サイト、または、上記のサイトから入手できます (英語版なので、上記サイトで、検索する際には「Microsoft U.S. ダウンロード センターも検索する」オプションを付けて検索してください。なお、使用にあたり、Visual C++ 2008 から Windows SDK を参照可能にする設定が必要です (次頁参照)。 演習に使用する付属のソース プログラムの入手方法については、このドキュメントを入手されたサイト等でご確認ください。ソース プログラムの使用方法は、後述の「演習で使用する付属のソース プログラム (サンプル プログラム) のインストール方法」の項を参照してください。 Visual C++ 2008 から Windows SDK を参照する方法 Note: Visual C++ 2008 (Visual Studio 2008) を使用して、演習付属のプログラムを正常にビルドするには、あらかじめ、Visual C++ と Windows SDK を統合する設定をしなければなりません。次に示す方法で、この設定を行ってください。これを行わないと、Visual C++ 上でビルドを行った際、Windows SDK のヘッダー ファイルの参照に失敗する場合があります。 Visual C++ 2008 (Visual Studio 2008) と Windows SDK をインストールした後、次の操作を行います。 スタート メニューから、[すべてのプログラム]、[Microsoft Windows SDK v7.0]、[Visual Studio Registration] の順にメニューを展開して、[Windows SDK Configuration Tool] をクリックします。 もし、[ユーザー アカウント制御] ダイアログ ボックスが表示されたら、[はい] をクリックして、管理者権限へ昇格します。 Windows SDK Configuration Tool が起動するので、右上部のドロップダウン リストでは、[v7.0] を選択して、下部の [Make Current] ボタンをクリックします。 設定が完了した旨を示す、以下のメッセージ ボックスが表示されたら、[OK] をクリックします。すると、このメッセージ ボックスと上記のダイアログ ボックスが閉じ、設定は完了します。 演習で使用する付属のソース プログラム (サンプル プログラム) のインストール方法 演習で使用するソース プログラムには、特別なインストール方法はありません。入手されたソース プログラムのフォルダー「HOLNativeRibbon」全体を、任意のパスにコピーしてください。たとえば、C:\ にコピーすれば、演習で作業を行うソース プログラムのパスは、次のようになります。 例1. C:\HOLNativeRibbon なお、演習の本文では、ソース プログラム等の位置を示す際、次のように、ソース プログラムのルート フォルダーに対する相対パスで表記しています。 例2. Ex1_Starter\RibbonApp.sln この場合、ソース プログラムのフォルダーが例 1 の場所であるなら、絶対パスは次の意味になります。 例3. C:\HOLNativeRibbon\Ex1_Starter\RibbonApp.sln なお、演習作業の中で、ソース プログラムに書き込む場合もあるので、作業を行うユーザー アカウントには、ソース プログラムに対して、書き込み可能なアクセス許可を与えてください。 演習の目的 この演習では、次に挙げる点を取り上げます。 リボンを使用できるように、Visual Studio のプロジェクトを構成する ウィンドウ (HWND) とリボンを統合する ボタン、チェックボックス、タブ、およびグループを追加する アプリケーションに実装された処理を、リボン コントロールから駆動できるようにする コントロールのレイアウトを見直し、リボンのリサイズ方法を指定する 参考情報 リボンやその他関連情報などついては、次のアドレスをご参照ください。 リボンに関するユーザー エクスペリエンス ガイドライン Windows Ribbon Framework Overview (英語) The Microsoft Office Fluent user interface overview (英語) ページのトップへ 2. 練習 1: 空のリボンの作成 この練習では、Visual Studio のプロジェクトを新規作成するところから始めます。そして、空のリボンを定義したマークアップを作成し、それをコンパイルする上で必要な構成をプロジェクトに行います。また、リボンの初期化に必要なコードを記述します。 リボンの基礎知識 リボンには、次に示す UI 要素が用意されています。 また、Windows Ribbon Framework の API は次の 2 つの要素から構成されています。 XML マークアップ、リボンの構造やコントロールの配置の定義で使用する COM インターフェイス、リボンの初期化やイベント駆動の構成などに使用する 上記のマークアップを実行時に使用するためには、専用のバイナリ形式のファイルへコンパイルする必要があります。このコンパイルを行うには、Windows SDK に同梱された UICC.exe (UI Command Compiler) を使用します。この練習では、Visual Studio を使ってプロジェクトをビルドする過程の中で、自動的に UICC.exe を使用してコンパイルするように、プロジェクトを構成します。 タスク 1 - Visual Studio を使用して、プロジェクトを新規作成する このタスクでは、リボンを追加するために使用するアプリケーションを準備します。 Visual Studio 2008 を起動します。 新規にプロジェクトを作成するため、メニュー バーから [ファイル]、[新規作成]、[プロジェクト] の順にクリックします。 Note: Visual Studio のエディションによっては、プロジェクトの新規作成の手順が若干異なる場合もあります。それぞれのエディションに応じた方法で作成してください。 [新しいプロジェクト] ダイアログ ボックスが表示されたら、次の情報を指定し、[OK] をクリックして、プロジェクトの作成を開始します。 プロジェクトの種類: Visual C++ テンプレート: Win32 プロジェクト プロジェクト名: RibbonApp 場所: C:\HOLNativeRibbon (任意) ソリューション名: RibbonApp Win32 アプリケーション ウィザードが起動したら、[次へ] をクリックします。「アプリケーション設定」というタイトルのあるページが表示されたら、アプリケーションの種類として「Windows アプリケーション」オプションが選択されていることを確認して、[完了] をクリックします。 [ビルド] メニューの [ソリューションのビルド] をクリックして、ビルドを行います。 [デバッグ] メニューの [デバッグなしで開始] をクリックして、アプリケーションを実行します。次のように、簡単なメニューを伴う、Windows アプリケーションが起動することを確認します。 確認が済んだら、アプリケーションを終了します。 ページのトップへ タスク 2 - 基本的なリボンのマークアップ ファイルを作成する 次に、簡単なリボンの XML マークアップを、このプロジェクトに追加します。このマークアップは、リボンで使用できるイベント駆動型のコマンドや、コマンドに対応するコントロールの配置などを定義できます。 このプロジェクトに、リボンとのマークアップを記述するためのファイルを追加するため、ソリューション エクスプローラー上で、Ribbon プロジェクトを右クリックし、ショートカット メニューを表示させ、[追加]、[新しい項目] の順にクリックします。 [新しい項目の追加] ダイアログ ボックスが表示されたら、テンプレートとして「XML ファイル (.xml)」を選択し、ファイル名として「ribbonmarkup.xml」を入力して、[追加] をクリックします。 追加したファイルが開くので、次のマークアップを追加します。 <Application xmlns="https://schemas.microsoft.com/windows/2009/Ribbon"> <Application.Commands> <Command Name="TabHome" Symbol="cmdTabHome" Id="30000" /> </Application.Commands> <Application.Views> <Ribbon> <Ribbon.Tabs> <Tab CommandName="TabHome"> </Tab> </Ribbon.Tabs> </Ribbon> </Application.Views> </Application> Note: マークアップの編集は、改めて練習 2 で行いますが、余力があれば、練習 1 の最後の段階でアプリケーションを実行するので、実行結果と照らし合わせ、タブやコマンドの定義の様子を確認してみてください。 入力が済んだら、[ファイル] メニューの [ribbonmarkup.xml の保存] をクリックして、このファイルを保存しておきます。 ページのトップへ タスク 3 - リボンのマークアップを自動的にコンパイルするように Visual Studio を構成する ソリューション エクスプローラー上の ribbonmarkup.xml を右クリックして、[プロパティ] をクリックします。 [ribbonmarkup.xml プロパティ ページ] が開いたら、左ペインのツリー上で、[構成プロパティ] の配下にある [カスタム ビルド ステップ] をクリックします。 右ペインに表示された [コマンド ライン] ボックスに、次のコマンドを入力します。 UICC.exe ribbonmarkup.xml ribbonmarkup.bml /res:ribbonres.rc UICC.exe は、実行時に使用するリボンのリソースを生成するための新しいコンパイラです。ここでは、コンパイル対象の入力ファイルとして ribbonmarkup.xml が指定され、コンパイルの結果として、バイナリ ファイル ribbonmarkup.bml が出力されます。また、リボンに必要なリソースとして、通常のリソース ファイル形式の ribbonres.rc も出力できます。 さらに、[出力ファイル] ボックスに、次のファイル名を指定します。 ribbonmarkup.bml;ribbonres.rc 最終的に、このプロパティ ページの設定が次のようになることを確認し、[OK] をクリックしてこれを閉じます。 最後に、このプロジェクトからリソース ファイル ribbonres.rc を参照できるように変更します。そのために、ソリューション エクスプローラー上で、RibbonApp.rc を右クリックし、[コードの表示] をクリックして、RibbonApp.rc をコード エディターで開きます。 RibbonApp.rc の上部のほうで、「// アイコン」という表記のあるコメントのブロックを見つけ、そのコメント部分の上部に、次に示すよう、#include ディレクティブを追加します (黄色の部分)。 #include "ribbonres.rc" ///////////////////////////////////////////////////////////////////////////// // // アイコン // 入力が済んだら、RibbonApp.rc を保存しておきます。 ページのトップへ タスク 4 - リボンのホストを作成する リボンからの様々な通知を受け取るためには、ホストを使用します。ホストは、リボンの初期化にも必要です。なお、ここではホストの作成に ATL を使用するので、まずは ATL を使用できるように、プロジェクトの構成を変更します。 このプロジェクトで、ATL を利用できるように構成するため、ソリューション エクスプローラー上で RibbonApp プロジェクトを右クリックし、[プロパティ] をクリックします。 プロパティ ページが表示されたら、左ペインのツリーで [構成プロパティ] の配下にある、[全般] をクリックします。このとき、右ペインの [ATL の使用] ボックスでは、「ATL に動的にリンク」または「ATL に静的にリンク」を選択します (どちらを選ぶかは任意)。 設定が済んだら、[OK] をクリックして、プロパティ ページを閉じます。 ファイルを追加するため、ソリューション エクスプローラー上の RibbonApp プロジェクトを右クリックし、[追加]、[新しい項目] の順にクリックします。 [新しい項目の追加] ダイアログ ボックスが表示されたら、テンプレートとして「C++ ファイル (.cpp)」を選択し、ファイル名として「Ribbon.cpp」と入力して、[追加] をクリックします。 この Ribbon.cpp ファイルの中に、次のヘッダー ファイルをインクルードする記述を追加します。 #include "stdafx.h" #include <atlbase.h> #include <atlcom.h> #include <initguid.h> #include <uiribbon.h> Note: 1 行目は、このプロジェクトのプリコンパイル ヘッダー (stdafx.h) をインクルードしています。その後の 3 行は、ATL を使用するために必要です。最後の uiribbon.h は、リボン関係の API を使用するために必要です。 続いて、uiribbon.h に定義された IUIApplication インターフェイスを実装します。この練習では、このインターフェイスに含まれる、通知を処理する関数の実装は重要ではないので、どの関数も戻り値は、E_NOTIMPL にしておきます。次のように入力します。 class CApplication : public CComObjectRootEx<CComMultiThreadModel> , public IUIApplication { public: BEGIN_COM_MAP(CApplication) COM_INTERFACE_ENTRY(IUIApplication) END_COM_MAP() STDMETHOD(OnViewChanged)(UINT32 nViewID, __in UI_VIEWTYPE typeID, __in IUnknown* pView, UI_VIEWVERB verb, INT32 uReasonCode) { return E_NOTIMPL; } STDMETHOD(OnCreateUICommand)(UINT32 nCmdID, __in UI_COMMANDTYPE typeID, __deref_out IUICommandHandler** ppCommandHandler) { return E_NOTIMPL; } STDMETHOD(OnDestroyUICommand)(UINT32 commandId, __in UI_COMMANDTYPE typeID, __in_opt IUICommandHandler* pCommandHandler) { return E_NOTIMPL; } }; ページのトップへ タスク 5 - リボンの作成と初期化を記述する 次に、同じ Ribbon.cpp ファイルの中に、リボン フレームワークのインスタンスを表す、グローバルなポインタ変数を、次のように宣言します。(#include ディレクティブの下あたりでよいでしょう。) IUIFramework* g_pFramework = NULL; さらに、リボンの初期化を行う関数 InitRibbon を、Ribbon.cpp の中の下部に追加します。次に示す要領で入力します。 引数として、アプリケーションのメイン ウィンドウのハンドルを受け取るようにします (hWindowFrame)。 CLSID として CLSID_UIRibbonFramework を使用して、リボン フレームワークの COM インスタンスを作成します。このインスタンスのポインタ (IUIFramework) を、変数 g_pFramework で受け取るようにします。 CApplication オブジェクトのポインタ変数 pApplication を宣言し、そのインスタンスを作成します。 リボン フレームワークを初期化するため、g_pFramework の Initialize 関数を呼び出します。引数には、メイン ウィンドウのハンドルと、CApplication オブジェクトを渡します。 マークアップ リソースをロードするため、g_pFramework の LoadUI 関数を呼び出します。 HRESULT InitRibbon(HWND hWindowFrame) { ::CoCreateInstance(CLSID_UIRibbonFramework, NULL, CLSCTX_INPROC_SERVER, IID_PPV_ARGS(&g_pFramework)); CComObject<CApplication> *pApplication = NULL; CComObject<CApplication>::CreateInstance(&pApplication); g_pFramework->Initialize(hWindowFrame, pApplication); g_pFramework->LoadUI(GetModuleHandle(NULL), L"APPLICATION_RIBBON"); return 0; } ページのトップへ タスク 6 - リボンをアプリケーションに組み込む (リボンの初期化を行う) ATL COM に関する初期化や後処理、また、前述の初期化関数である InitRibbon を呼び出すコードを、RibbonApp.cpp に追加します。 RibbonApp.cpp を開き、このファイルの中の、他の #include ディレクティブの下に、初期化のために必要なオブジェクトと関数のため、次の記述を追加します。 #include <atlbase.h> CComModule _Module; extern HRESULT InitRibbon(HWND hWindowFrame); メイン関数 _tWinMain の中で、先頭に COM の初期化を行う CoInitialize 関数の呼び出しを追加し、また、return ステートメントの直前に後処理の CoUninitialize 関数の呼び出しを追加します。 int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow) { CoInitialize(NULL); ...(省略) CoUninitialize(); return (int) msg.wParam; } InitInstance 関数の中の、ShowWindow 関数呼び出しの前に、以下の InitRibbon 関数呼び出しを追加します。 BOOL InitInstance(HINSTANCE hInstance, int nCmdShow) { ...(省略) InitRibbon(hWnd); ShowWindow(hWnd, nCmdShow); UpdateWindow(hWnd); return TRUE; } ビルドを行い、正常にビルドできることを確認しておきます。 ページのトップへ タスク 7 - リボンの後処理を行う Ribbon.cpp の中で、InitRibbon 関数の記述の下に、次のように DestroyRibbon 関数を追加します。 void DestroyRibbon() { if (g_pFramework) { g_pFramework->Destroy(); g_pFramework->Release(); g_pFramework = NULL; } } RibbonApp.cpp の上部にある InitRibbon 関数の宣言の下に、次のように DestroyRibbon 関数の宣言を追加します。 #include <atlbase.h> CComModule _Module; extern HRESULT InitRibbon(HWND host); extern void DestroyRibbon(); RibbonApp.cpp の中の WndProc 関数で、WM_DESTROY メッセージに対する処理として、次のように、DestroyRibbon 関数の呼び出しを追加します。 case WM_DESTROY: DestroyRibbon(); PostQuitMessage(0); break; ウィンドウのリサイズの際に、リボンのフリッカーを防ぐため、次のように、InitInstance 関数の中ので CreateWindow 関数を呼び出して、メイン ウィンドウを生成する際に、スタイル WS_CLIPCHILDREN を追加します。 hWnd = CreateWindow(szWindowClass, szTitle, WS_OVERLAPPEDWINDOW | WS_CLIPCHILDREN, CW_USEDEFAULT, 0, CW_USEDEFAULT, 0, NULL, NULL, hInstance, NULL); Note: フリッカーが発生する理由は、リサイズの都度、メイン ウィンドウ自身が独自に再描画した上で、リボンが再描画するからです。WS_CLIPCHILDRE を指定すると、メイン ウィンドウ自身が描画する際に、子ウィンドウの領域は除外します。 ここでビルドを行った後、アプリケーションを実行します。 次のように、空のリボンが表示されることを確認します。 また、アプリケーション メニューをドロップダウンして、空であることを確認します。 確認が済んだら、アプリケーションを終了します。 この練習では、従来のネイティブ アプリケーションに、空のリボンを追加する基本的な方法を確認しました。 なお、ここまで行った完成版のサンプル アプリケーション (ソリューション) は、次のパスに用意されています。 Ex1_Solution\RibbonApp\RibbonApp.sln ページのトップへ 3. 練習 2: リボンへのコントロールの追加 この練習では、引き続き練習 1 のプロジェクトを使用して、リボンにコントロールを追加します。また、リボンのコントロールから通知を受け取る方法や、コントロールのプロパティを参照したり、設定したりする方法を確認します。 なお、練習 1 を行っていない場合は、以下のパスにある練習 1 の完成サンプルを使用して、練習 2 を行うことができます。 Ex1_Solution\RibbonApp\RibbonApp.sln タスク 1 - タブにボタンを追加する このタスクでは、コントロールに Button コントロールを追加します。 再び、Visual Studio に戻ります。RibbonApp ソリューションを開いていない場合は、これを開いておきます。 ribbonmarkup.xml を開き、次のように <Application.Commands> 要素ブロックの中に、名前を付けたコマンドを 2 つ定義します (ここでは、GroupMain と MyButton)。後ほど、このコマンドには、様々な属性を追加します。 <Application.Commands> <Command Name="TabHome" Symbol="cmdTabHome" Id="30000" /> <Command Name="GroupMain" Symbol="cmdGroupMain" Id="30001"/> <Command Name="MyButton" Symbol="cmdMyButton" Id="30002"/> </Application.Commands> ここで、前の手順で定義したコマンドの名前を参照するグループとボタンを追加することにします。次のように、<Tab> 開始タグの次にグループを追加します。グループの中に、ボタン コントロールを追加します。グループとタブのそれぞれの CommandName 属性には、前の手順で定義したコマンドの名前を指定します。これによって、各コントロールは、コマンドに指定される属性を帯びることになります。 <Tab CommandName="TabHome"> <Group CommandName="GroupMain"> <Button CommandName="MyButton"/> </Group> </Tab> ここで、アプリケーションをビルドして、実行します。 次のように、グループ内の先頭付近で、マウスをホバリングすると、空のボタンがあることが分かります。(ボタンとリボンの背景色が同じため、マウス ポインタを上に移動しないと、実質的に見えません。) 確認が済んだら、アプリケーションを終了します。 ページのトップへ タスク 2 - ラベル、ツールチップ、およびアイコンをボタンに追加する リボンに使用されるリソースの情報は、ヘッダー ファイルに出力されます。まずは、ヘッダー ファイルを出力する指定方法を確認します。そして、ヘッダー ファイルを生成する際の元になるリボンのマークアップ ファイルの中で、アイコンやラベル等を指定する方法を確認します。 UICC.exe でマークアップをコンパイルする際に、ヘッダーを出力するようにするため、次のように構成します。 ソリューション エクスプローラー上の ribbonmarkup.xml を右クリックして、[プロパティ] をクリックします。 [ribbonmarkup.xml プロパティ ページ] が開いたら、左ペインのツリー上で、[構成プロパティ] の配下にある [カスタム ビルド ステップ] をクリックします。 [コマンド ライン] ボックスに、次のようにヘッダーを生成する指定を追加します。(紙面の都合で途中改行しています。) UICC.exe ribbonmarkup.xml ribbonmarkup.bml /header:ribbonres.h /res:ribbonres.rc [出力ファイル] ボックスに、次のようにヘッダー ファイルを追加します。 ribbonmarkup.bml;ribbonres.rc;ribbonres.h [OK] をクリックして、プロパティページを閉じます。 ソリューション エクスプローラー上で、RibbonApp.rc を右クリックして、[コードの表示] をクリックします。既存の ribbonres.rc をインクルードする行の 1 つ上に、ヘッダー ファイルをインクルードする記述を追加します。 #include "ribbonres.h" #include "ribbonres.rc" ///////////////////////////////////////////////////////////////////////////// // // アイコン // 次に、以下のパスにあるビットマップ ファイルをプロジェクトの直下にコピーします。 (複写するファイル) BITMAPS\Button_Image.bmp (複写先) RibbonApp\RibbonApp フォルダー ビットマップ ファイルをプロジェクトに追加するため、ソリューション エクスプローラー上の RibbonApp プロジェクトを右クリックし、[追加]、[既存の項目] の順にクリックします。 [既存項目の追加] ダイアログ ボックスが表示されたら、前述のビットマップ ファイルを指定して (以下のパスにあるはずです)、[追加] をクリックします。 RibbonApp\ \RibbonApp\Button_Image.bmp ここで、既に定義したコマンドにリソースを設定することにします。ribbonmarkup.xml の中にある、<Command Name="MyButton" ... /> というコマンド定義を、次のように変更します。この例では、ラベルやツールチップ、イメージ ファイルを指定しています。 <Command Name="MyButton" Symbol="cmdMyButton" Id="30002" LabelTitle="My Button"> <Command.TooltipTitle>My Button</Command.TooltipTitle> <Command.TooltipDescription>Click My Button</Command.TooltipDescription> <Command.LargeImages> <Image Source="Button_Image.bmp"/> </Command.LargeImages> </Command> ソリューションをリビルドして、アプリケーションを実行します。次のように、ボタンには、ラベルとイメージが表示されることを確認します。 確認が済んだら、アプリケーションを終了します。 ここで、次のように変更して、他のコマンドにもラベルを追加します。 <Application.Commands> <Command Name="TabHome" Symbol="cmdTabHome" Id="30000" LabelTitle="Home" /> <Command Name="GroupMain" Symbol="cmdGroupMain" Id="30001" LabelTitle="Main" /> 再び、ソリューションをリビルドして、アプリケーションを実行します。次のように「Home」タブと、「Main」グループのラベルが表示されるはずです。 確認が済んだら、アプリケーションを終了します。 ページのトップへ タスク 3 - ボタンがクリックされた際にメッセージ ボックスを表示する IUICommandHandler インターフェイスは、ユーザーがコントロールを操作した際に発するイベントを受けるために、アプリケーションに実装すべきインターフェイスです。このインターフェイスに、Execute 関数と UpdateProperty 関数があります。ボタンがクリックされた際には、そのイベントをアプリケーションに伝えるべく、リボン フレームワークが Execute 関数を呼び出します。また、有効化や無効化などのように、コントロールのプロパティを変更する必要がある際には、リボン フレームワークが、UpdateProperty 関数を呼び出します。 Ribbon.cpp ファイルの中の、他の #include ディレクティブの下に、次のようにヘッダー ファイル ribbonres.h (UICC.exe によって生成されるヘッダー) をインクルードする記述を追加します。 #include <uiribbon.h> #include "ribbonres.h" Ribbon.cpp の CApplication クラスに IUICommandHandler を実装するため、次のように継承元を変更し、また、COM_INTERFACE_ENTRY マクロを追加します。 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() ...(省略) } CApplication クラスの内側に、IUICommandHandler インターフェイスの 2 つの関数の実装を、次のように追加します。 STDMETHODIMP Execute(UINT nCmdID, UI_EXECUTIONVERB verb, __in_opt const PROPERTYKEY* key, __in_opt const PROPVARIANT* ppropvarValue, __in_opt IUISimplePropertySet* pCommandExecutionProperties) { HRESULT hr = S_OK; switch (verb) { case UI_EXECUTIONVERB_EXECUTE: if (nCmdID == cmdMyButton) { MessageBox(NULL, L"Clicked on My Button!", L"My Button Execute", MB_OK); } break; } return hr; } STDMETHODIMP UpdateProperty(UINT nCmdID, __in REFPROPERTYKEY key, __in_opt const PROPVARIANT* ppropvarCurrentValue, __out PROPVARIANT* ppropvarNewValue) { return E_NOTIMPL; } CApplication クラスの既存の OnCreateUICommand 関数の中で、return ステートメントの前に、次の if ステートメントを追加します。 STDMETHOD(OnCreateUICommand)(UINT32 nCmdID, __in UI_COMMAND_TYPE typeID, __deref_out IUICommandHandler** ppCommandHandler) { if (nCmdID == cmdMyButton) { return QueryInterface(IID_PPV_ARGS(ppCommandHandler)); } return E_NOTIMPL; } 再び、ソリューションをビルドして、アプリケーションを実行します。[My Button] をクリックすると、次のようにメッセージ ボックスが表示されることを確認します。 確認が済んだら、メッセージ ボックスを閉じ、アプリケーションを終了します。 ページのトップへ タスク 4 - チェックボックスを追加する ここでは、チェックボックス用のコマンドを定義して、それと関連付けたチェックボックスを追加します。 RibbonMarkup.xml の中の、<Application.Commands> 要素ブロックの中の末尾に、次に示すコマンドの定義を追加します。 <Command Name="MyChoice" Symbol="cmdMyChoice" Id="30003" LabelTitle="My Choice"> <Command.TooltipTitle>My Choice</Command.TooltipTitle> <Command.TooltipDescription>Select My Choice</Command.TooltipDescription> <Command.LargeImages> <Image Source="Button_Image.bmp"/> </Command.LargeImages> </Command> 既存の GroupMain グループの中に、次のように CheckBox コントロールを追加します。 <Group CommandName="GroupMain"> <CheckBox CommandName="MyChoice"/> <Button CommandName="MyButton"/> </Group> このチェックボックスにコマンド ハンドラーを関連づけるために、Ribbon.cpp の中の、OnCreateUICommand 関数において、if ステートメントを次のように修正します。 STDMETHOD(OnCreateUICommand)(UINT32 nCmdID, __in UI_COMMAND_TYPE typeID, __deref_out IUICommandHandler** ppCommandHandler) { if (nCmdID == cmdMyButton || nCmdID == cmdMyChoice) { return QueryInterface(IID_PPV_ARGS(ppCommandHandler)); } return E_NOTIMPL; } Ribbon.cpp の中の、Execute 関数おいて、UI_EXECUTIONVERB_EXECUTE に対する分岐し処理で、次のようにチェックボックスに関する処理を追加します。 case UI_EXECUTIONVERB_EXECUTE: if (nCmdID == cmdMyButton) { MessageBox(NULL, L"Clicked on My Button!", L"My Button Execute", MB_OK); } else if (nCmdID == cmdMyChoice) { MessageBox(NULL, L"Toggled My Choice!", L"My Choice Execute", MB_OK); } break; 再び、ソリューションをビルドして、アプリケーションを実行します。チェックボックスがグループに追加されたことを確認します。また、チェックボックスをクリックするたびに、メッセージ ボックスが表示されることを確認します。 確認が済んだら、アプリケーションを終了します。 ページのトップへ タスク 5 - チェックボックスをトグル ボタンに変更する ここでは、チェックボックスをトグル ボタンに変更します。チェックボックスもトグル ボタンも、同じコマンドを使用でき、コードで実装すべき動作は同じなので、C++ のコードは書き換える必要がありません。 ribbonmarkup.xml の中で、チェックボックスを表す <CheckBox> を <ToggleButton> に変更します。 <Group CommandName="GroupMain"> <ToggleButton CommandName="MyChoice"/> <Button CommandName="MyButton"/> </Group> 再び、ソリューションをビルドして、アプリケーションを実行します。チェックボックスがトグル ボタンに変わったことを確認します。また、トグル ボタンをクリックするたびに、同様にメッセージ ボックスが表示されることを確認します。 確認が済んだら、アプリケーションを終了します。 ページのトップへ タスク 6 - SizeDefinition テンプレートをグループに指定する ここでは、グループの SizeDefinition 属性に、SizeDefinition テンプレートを設定します。このテンプレートは、グループの中でのコントロールの物理的な配置情報を提供します。Windows Ribbon Framework では、いくつかの定義済みのテンプレートが用意されています。また、カスタム テンプレートを作成することも可能です。ここでは、グループの中にボタンが 2 つになったので、定義済みの「TwoButtons」というテンプレートを使用することにします。 ribbonmarkup.xml のグループ GroupMainの開始タグに、次のように SizeDefinition 属性を追加します。 <Group CommandName="GroupMain" SizeDefinition="TwoButtons"> <ToggleButton CommandName="MyChoice"/> <Button CommandName="MyButton"/> </Group> 再び、ソリューションをビルドして、アプリケーションを実行します。テンプレート TowButtons を使用したことによって、グループの中に大きなボタンが 2 つ並ぶことを確認します。 確認が済んだら、アプリケーションを終了します。 ページのトップへ タスク 7 - トグル ボタンの状態に応じてボタンの有効化や無効化を行う Ribbon.cpp の CApplication クラスのブロックの内側の末尾に、次の BOOL 型のプライベート変更を追加します。 class CApplication : public CComObjectRootEx<CComMultiThreadModel> , public IUIApplication , public IUICommandHandler { ...(省略) private: BOOL _fEnabled; }; Ribbon.cpp の #include "ribbonres.h" の直前に、次の #include ディレクティブを追加します。 #include <UIRibbonPropertyHelpers.h> #include "ribbonres.h" 次に、propsys.lib にリンクします。これを行うため、ソリューション エクスプローラー上の RibbonApp プロジェクトを右クリックし、プロパティページを開きます。左ペインのツリーで、[構成プロパティ] の配下にある [リンカ] ノードを展開し、さらに [入力] ノードをクリックして選択します。右ペインの [追加の依存ファイル] ボックスには、propsys.lib と入力して、[OK] をクリックします。 Ribbon.cpp の中の CApplication クラスにある Execute 関数の中で、トグル ボタンをクリックした際に実行されるブロック (else if ブロック)の内側を、次のように書き換えます。 else if (nCmdID == cmdMyChoice) { PROPVARIANT var, varNew; hr = g_pFramework->GetUICommandProperty( cmdMyChoice, UI_PKEY_BooleanValue, &var); if (FAILED(hr)) { return hr; } hr = PropVariantToBoolean(var, &_fEnabled); if (FAILED(hr)) { return hr; } _fEnabled = !_fEnabled; hr = UIInitPropertyFromBoolean(UI_PKEY_Enabled, _fEnabled, &varNew); if (FAILED(hr)) { return hr; } hr = g_pFramework->SetUICommandProperty(cmdMyButton, UI_PKEY_Enabled, varNew); if (FAILED(hr)) { return hr; } } 再び、ソリューションをビルドして、アプリケーションを実行します。トグル ボタンをクリックすると、MyButton が連動して無効化したり、元に戻ったりすることを確認します。 確認が済んだら、アプリケーションを終了します。 ページのトップへ タスク 8 - 実行時にトグル ボタンのラベルを変更する Ribbon.cpp の中の CApplication クラスにある Execute 関数において、トグル ボタンをクリックした際に実行されるブロック (else if ブロック) の中の末尾に、次のコードを追加します。 else if (nCmdID == cmdMyChoice) { ...(省略) hr = g_pFramework->InvalidateUICommand(cmdMyChoice, UI_INVALIDATIONS_PROPERTY, &UI_PKEY_Label); if (FAILED(hr)) { return hr; } } CApplication クラスにある UpdateProperty 関数の中を、次のように置き換えます。このコードでは、トグル ボタンのラベルの切り替えを行っています。 STDMETHODIMP UpdateProperty(UINT nCmdID, __in REFPROPERTYKEY key, __in_opt const PROPVARIANT* ppropvarCurrentValue, __out PROPVARIANT* ppropvarNewValue) { UNREFERENCED_PARAMETER(ppropvarCurrentValue); HRESULT hr = E_FAIL; if (key == UI_PKEY_Label) { // Update the Label of ToggleButton control if (nCmdID == cmdMyChoice) { if (_fEnabled) { hr = UIInitPropertyFromString(UI_PKEY_Label, L"Disable Button", ppropvarNewValue); } else { hr = UIInitPropertyFromString(UI_PKEY_Label, L"Enable Button", ppropvarNewValue); } } } return hr; } 再び、ソリューションをビルドして、アプリケーションを実行します。トグル ボタンをクリックする都度、ラベルの表示が切り替わることを確認します。 確認が済んだら、アプリケーションを終了します。 この練習 2 では、リボンにコントロールを追加する方法や、コマンドを定義して、それをコントロールに関連付ける方法、また、コントロールのイベントに呼応して処理を実行する方法について確認しました。 なお、ここまで行った完成版のサンプル アプリケーション (ソリューション ファイル) は、次のパスに用意されています。 Ex2_Solution\RibbonApp.sln ページのトップへ 4. 練習 3 グループの追加とサイズの調整 この練習では、引き続き練習 2 のプロジェクトを使用して、グループや複数のコントロールを追加します。また、リボンがリサイズする際のルールを指定します。 なお、練習 2 を行っていない場合は、以下のパスにある練習 2 の完成サンプルを使用して、練習 3 を行うことができます。 Ex2_Solution\RibbonApp\RibbonApp.sln タスク 1 - タブにグループと複数のコントロールを追加する 再び、Visual Studio に戻ります。RibbonApp ソリューションを開いていない場合は、これを開いておきます。 RibbonMarkup.xml を開き、次のように <Application.Commands> 要素ブロックの中に、新しいグループのために使用するコマンドを追加します。 <Application.Commands> ...(省略) <Command Name="GroupDatabase" Symbol="cmdGroupDatabase" Id="30004"> <Command.LabelTitle>Database</Command.LabelTitle> </Command> <Command Name="GroupClipboard" Symbol="cmdGroupClipboard" Id="30005"> <Command.LabelTitle>Clipboard</Command.LabelTitle> </Command> </Application.Commands> 次に、次のパスにあるビットマップ ファイルをプロジェクトの直下にコピーします。 (複写するファイル) BITMAPS\AddTableL.bmp BITMAPS\AddTableS.bmp BITMAPS\Copy.bmp BITMAPS\Cut.bmp BITMAPS\DeleteTableL.bmp BITMAPS\DeleteTableS.bmp BITMAPS\Paste.bmp BITMAPS\PrintRelationshipsL.bmp BITMAPS\PrintRelationshipsS.bmp (複写先) RibbonApp\RibbonApp フォルダ これらのビットマップ ファイルを追加するため、ソリューション エクスプローラー上の RibbonApp プロジェクトを右クリックし、[追加]、[既存の項目] の順にクリックします。 [既存項目の追加] ダイアログ ボックスが表示されたら、前述のビットマップ ファイルをすべて選択して (次のパスにあるはずです)、[追加] をクリックします。 RibbonApp\ \RibbonApp\ 手順 2 と同様に、次のコマンドも <Application.Commands> 要素ブロックの中に追加します。 <Command Name="AddTable" Symbol="cmdAddTable" Id="30006" LabelTitle="Add Table"> <Command.TooltipTitle>Add Table</Command.TooltipTitle> <Command.TooltipDescription>Add Table</Command.TooltipDescription> <Command.LargeImages> <Image Source="AddTableL.bmp"/> </Command.LargeImages> </Command> <Command Name="DeleteTable" Symbol="cmdDeleteTable" Id="30007" LabelTitle="Delete Table"> <Command.TooltipTitle>Delete Table</Command.TooltipTitle> <Command.TooltipDescription>Delete Table</Command.TooltipDescription> <Command.LargeImages> <Image Source="DeleteTableL.bmp"/> </Command.LargeImages> </Command> <Command Name="PrintRelationships" Symbol="cmdPrintRelationships" Id="30008" LabelTitle="Print Relationships"> <Command.TooltipTitle>Print Relationships</Command.TooltipTitle> <Command.TooltipDescription>Print Relationships</Command.TooltipDescription> <Command.LargeImages> <Image Source="PrintRelationshipsL.bmp"/> </Command.LargeImages> </Command> <Command Name="Paste" Symbol="cmdPaste" Id="30009" LabelTitle="Paste"> <Command.TooltipTitle>Paste</Command.TooltipTitle> <Command.TooltipDescription>Paste</Command.TooltipDescription> <Command.LargeImages> <Image Source="Paste.bmp"/> </Command.LargeImages> </Command> <Command Name="Cut" Symbol="cmdCut" Id="30010" LabelTitle="Cut"> <Command.TooltipTitle>Cut</Command.TooltipTitle> <Command.TooltipDescription>Cut</Command.TooltipDescription> <Command.SmallImages> <Image Source="Cut.bmp"/> </Command.SmallImages> </Command> <Command Name="Copy" Symbol="cmdCopy" Id="30011" LabelTitle="Copy"> <Command.TooltipTitle>Copy</Command.TooltipTitle> <Command.TooltipDescription>Copy</Command.TooltipDescription> <Command.SmallImages> <Image Source="Copy.bmp"/> </Command.SmallImages> </Command> <Tab CommandName="TabHome"> 開始タグから始まるタブの要素ブロックの中の最後に、2 つの新しいグループを追加します。 <Tab CommandName="TabHome"> ...(省略) <Group CommandName="GroupDatabase" SizeDefinition="ThreeButtons"> <Button CommandName="AddTable"/> <Button CommandName="DeleteTable"/> <Button CommandName="PrintRelationships"/> </Group> <Group CommandName="GroupClipboard" SizeDefinition ="BigButtonsAndSmallButtonsOrInputs"> <ControlGroup> <Button CommandName="Paste"/> </ControlGroup> <ControlGroup> <Button CommandName="Cut"/> <Button CommandName="Copy"/> </ControlGroup> </Group> </Tab> 再び、ソリューションをビルドして、アプリケーションを実行します。 リボンに 3 つのグループが表示されることを確認します。 ここで、このアプリケーションの右側の境界をドラッグして、アプリケーションのウィンドウの幅を徐々に狭くしてみます。 すると、右端がリボンの端よりも左に来ると、Pager コントロールが表示され、リボンの右端が隠れていることを表すようになります。 このまま幅を小さくしていくと、アプリケーションの作業領域を確保するために、リボンが非表示になることを確認します。 確認が済んだら、アプリケーションを終了します。 ページのトップへ タスク 2 - 動的にリサイズを行うルールを指定する ここでは、リボンにリサイズのためのルールを指定して、固定レイアウトの代わりに、ウィンドウのサイズに応じて適宜変化する動的レイアウトを適用します。 タブを表す <Tab CommandName="TabHome"> 開始タグのすぐ下に、次のようにサイズに関するルールを追加します。 <Tab CommandName="TabHome"> <Tab.ScalingPolicy> <ScalingPolicy> <ScalingPolicy.IdealSizes> <Scale Group="GroupMain" Size="Large"/> <Scale Group ="GroupDatabase" Size="Large"/> <Scale Group ="GroupClipboard" Size="Large"/> </ScalingPolicy.IdealSizes> <Scale Group ="GroupClipboard" Size="Medium"/> <Scale Group ="GroupClipboard" Size="Popup"/> <Scale Group ="GroupDatabase" Size="Medium"/> </ScalingPolicy> </Tab.ScalingPolicy> ... 再び、ソリューションをビルドして、アプリケーションを実行します。アプリケーションのウィンドウのサイズを変化させ、次の動作を確認します。 ウィンドウの幅が狭くなると、Clipboard グループの幅は小さくなり、グループの中のボタンが小さくなる。 そのままウィンドウの幅が狭くなると、Clipboard グループはドロップダウン ボタンになる。ボタンをクリックすると、すべてのコントロールの一覧が、ポップアップ形式で表示される。 さらにウィンドウの幅をせまくすると、Database グループのコントロールが小さくなり、垂直方向に並ぶ。 さらに幅をせまくすると、タスク 1 の手順 12 と同様に、リボンが非表示になる。 また、以下の問題点があることも確認します。 Clipboard グループがドロップダウン ボタンになった際に、ボタン上にイメージが表示されない。(これは、グループ自体にイメージを指定していないからです。) Database グループが小さくなったとき、ボタンのアイコンが若干歪んでいる。たとえば、全体的に色が薄い感じになる。(これは、もともと使用している大きなアイコン イメージを、小さいアイコン イメージに変換しているからです。これを修正するには、予め小さいサイズのアイコン (16×16) を用意する必要があります。) ここで問題点を対処するため、Clipboard グループのコマンドにイメージを追加します。また、Database グループの各ボタンのコマンドに、小さいイメージを追加します。 <Application.Commands> ...(省略) <Command Name="GroupClipboard" Symbol="cmdGroupClipboard" Id="30005"> <Command.LabelTitle>Clipboard</Command.LabelTitle> <Command.LargeImages> <Image Source="Paste.bmp"/> </Command.LargeImages> </Command> <Command Name="AddTable" Symbol="cmdAddTable" Id="30006" LabelTitle="Add Table"> <Command.TooltipTitle>Add Table</Command.TooltipTitle> <Command.TooltipDescription>Add Table</Command.TooltipDescription> <Command.LargeImages> <Image Source="AddTableL.bmp"/> </Command.LargeImages> <Command.SmallImages> <Image Source="AddTableS.bmp"/> </Command.SmallImages> </Command> <Command Name="DeleteTable" Symbol="cmdDeleteTable" Id="30007" LabelTitle="Delete Table"> <Command.TooltipTitle>Delete Table</Command.TooltipTitle> <Command.TooltipDescription>Delete Table</Command.TooltipDescription> <Command.LargeImages> <Image Source="DeleteTableL.bmp"/> </Command.LargeImages> <Command.SmallImages> <Image Source="DeleteTableS.bmp"/> </Command.SmallImages> </Command> <Command Name="PrintRelationships" Symbol="cmdPrintRelationships" Id="30008" LabelTitle="Print Relationships"> <Command.TooltipTitle>Print Relationships</Command.TooltipTitle> <Command.TooltipDescription>Print Relationships</Command.TooltipDescription> <Command.LargeImages> <Image Source="PrintRelationshipsL.bmp"/> </Command.LargeImages> <Command.SmallImages> <Image Source="PrintRelationshipsS.bmp"/> </Command.SmallImages> </Command> ...(省略) </Application.Commands> 再び、ソリューションをビルドして、アプリケーションを実行します。 再び、ウィンドウの幅を小さくしていきます。今度は、Clipboard グループのドロップダウン ボタンにはイメージが表示され、Database グループの各ボタンのアイコンは、より鮮明になります。 この練習 3 では、グループを追加したほか、サイズ調整に関するルールを追加しました。 なお、ここまで行った完成版のサンプル アプリケーション (ソリューション) は、次のパスに用意されています。 Ex3_Solution\RibbonApps.sln ページのトップへ 5. まとめ ここでは、ネイティブ アプリケーションに、リボンを追加する基本的な方法を確認しました。また、リボンにコントロールを追加する方法や、コマンドの定義とそれをコントロールに関連付ける方法、コントロールから発生するイベントに対応する方法も確認しました。さらに、グループの追加方法や、動的なレイアウト変更のルールを指定する方法を確認しました。 Windows Ribbon Framework では、マークアップとコードを分離するアーキテクチャが提供されます。また、コントロールの配置管理など、従来の UI 構築ではプログラマーが行っていた多く作業が、フレームワークによって自動的に行われます。これによって、開発工数を大幅に削減することができます。 このハンズオンでは、Windows Ribbon Framework が提供するリボンの基本的な機能を取り上げました。まだまだ、多くの興味深い機能が存在します。このハンズオンを通じて学んだことが、皆様の糧となれば幸いです。

ページのトップへ