チュートリアル : MFC Scribble アプリケーションの更新 (パート 1)

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

このチュートリアルでは、既存の MFC アプリケーションを変更して、2007 Microsoft Office リリースで導入された新しい Office Fluent リボンユーザーインターフェイスを使用する方法について説明します。Office Fluent リボンユーザーインターフェイスの詳細については、MSDN ライブラリの「Office Fluent User Interface Developer Portal」を参照してください。

このチュートリアルでは、マウスを使用して線画を描く、従来の Scribble 1.0 MFC サンプルを変更します。このチュートリアルのパート 1 では、リボンバーを表示するよう Scribble サンプルを変更します。パート 2 では、リボンバーにボタンを追加していきます。

前提条件

SCRIBBLE サンプル : MFC MDI 描画アプリケーション

RibbonGadgets サンプル : Ribbon Gadgets アプリケーション

セクション

このチュートリアルのパート 1 は、次のセクションで構成されています。

基本クラスの置き換え
リボンのアプリケーションへの追加
ビットマップのリボンへの追加
リボンバーのインスタンスの作成
リボンカテゴリの追加
アプリケーションの外観の設定

基本クラスの置き換え

メニューベースのアプリケーションをリボンベースのアプリケーションに変換するには、アプリケーション、フレームウィンドウ、ツールバーの各クラスを、Visual C++ 2008 Feature Pack で提供されている基本クラスから派生させる必要があります (元の Scribble サンプルは変更せず、Scribble プロジェクトをクリーンアップし、別のディレクトリにコピーして、コピーの方を変更することをお勧めします)。

Scribble アプリケーションの基本クラスを置き換えるには

scribble.cpp で、CScribbleApp::InitInstance に AfxOleInit の呼び出しが含まれていることを確認します。
stdafx.h ファイルに次のコードを追加します。
```
#include <afxcontrolbars.h>
```
scribble.h で、CScribbleApp クラスの定義を変更し、CWinAppEx クラスから派生するようにします。
```
class CScribbleApp: public CWinAppEx
```
Scribble 1.0 は、Windows アプリケーションが初期化 (.ini) ファイルを使用してユーザー設定のデータを保存したときに書き込まれています。初期化ファイルは変更せず、Scribble を変更してユーザー設定をレジストリに格納します。レジストリキーとベースを設定するには、次のコードを、LoadStdProfileSettings() ステートメントの後ろの CScribbleApp::InitInstance に含めます。
```
SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));
```
Visual C++ 2008 Feature Pack では、マルチドキュメントインターフェイス (MDI) アプリケーション用のメインフレームが CMDIFrameWnd クラスからは派生しません。代わりに、CMDIFrameWndEx クラスから派生します。

mainfrm.h ファイルと mainfrm.cpp ファイルで、CMDIFrameWnd への参照をすべて、CMDIFrameWndEx への参照に置き換えます。
childfrm.h ファイルと childfrm.cpp ファイルで、CMDIChildWnd を CMDIChildWndEx に置き換えます。

childfrm.h ファイルで、CSplitterWnd を CSplitterWndEx に置き換えます。
ツールバーとステータスバーを変更して、新しい MFC クラスを使用します。

mainfrm.h ファイルでは、次の手順に従います。
1. CToolbar を CMFCToolBar に置き換えます。
2. CStatusBar を CMFCStatusBar に置き換えます。
mainfrm.cpp ファイルでは、次の手順に従います。
1. m_wndToolBar.SetBarStyle を m_wndToolBar.SetPaneStyle に置き換えます。
2. m_wndToolBar.GetBarStyle を m_wndToolBar.GetPaneStyle に置き換えます。
3. DockControlBar(&m_wndToolBar) を DockPane(&m_wndToolBar) に置き換えます。

ipframe.cpp ファイルでは、コードの次の 3 行をコメントアウトします。

m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->DockPane(&m_wndToolBar);

アプリケーションを静的にリンクする場合は、プロジェクトのリソース (.rc) ファイルの先頭に次のコードを追加します。
```
#include "afxribbon.rc"
```
afxribbon.rc ファイルには、移行したアプリケーションで Visual C++ 2008 Feature Pack のダイアログボックスや文字列を使用する場合に、実行時に必要となるリソースが含まれています。MFC アプリケーションウィザードには、新しいアプリケーションを作成するときに、このファイルが自動的に含まれます。
変更を保存し、アプリケーションをビルドして実行します。

[ページのトップへ]

リボンのアプリケーションへの追加

メニューを使用するアプリケーションを、リボンを使用するアプリケーションに変更する場合は、既存のメニューを削除する必要も、無効にする必要もありません。代わりに、リボンバーを作成し、リボンボタンを追加し、新しいボタンを既存のメニュー項目と関連付けます。メニューは表示されなくなりますが、リボンバーからのメッセージはメニュー経由で送られます。また、メニューのショートカットは引き続き機能します。

リボンバーはアプリケーションボタンと 1 つ以上のタブで構成されます。アプリケーションボタンは、リボンの左上隅にある大きいボタンです。各タブは、1 つ以上のパネルで構成されます。パネルは、リボンのボタンやコントロールのコンテナとして動作します。

リボンバーをアプリケーションに追加するには、mainfrm.h ファイルでリボンバーを宣言します。mainfrm.cpp ファイルには、リボンバーにコントロールを追加するコードを作成します。

リボンをアプリケーションに追加するには

mainfrm.h ファイルで、メインフレームのクラス定義 CMainFrame の保護されたセクションに 2 つのデータメンバを追加します。これらのメンバは、リボンバーとアプリケーションボタンを表します。
```
// Ribbon bar for the application
CMFCRibbonBar  m_wndRibbonBar;
// The application button for the ribbon
CMFCRibbonApplicationButton  m_MainButton;
```
前の 2 つのメンバの後ろに、リボンパネルで使用されるイメージリスト用のデータメンバを追加します。このイメージは、ユーザーがアプリケーションのサイズを変更し、それに伴ってリボンのサイズが変更されたときにのみ表示されます。
```
// Ribbon panel icons
CMFCToolBarImages  m_PanelImages;
```

[ページのトップへ]

ビットマップのリボンへの追加

このチュートリアルの次の 4 つの手順には、ビットマップリソースが必要です。適切なビットマップをさまざまな方法で取得できます。

リソースエディタを使用して、独自のビットマップを作成します。または、リソースエディタを使用して、Visual Studio に用意されている Portable Network Graphics (.png) イメージからビットマップを作成します。これらのイメージは VS2008ImageLibrary ディレクトリに格納されています。

ただし、リボンユーザーインターフェイスでは、特定のビットマップが透明なイメージをサポートしている必要があります。透明なビットマップの色深度は 32 ビットで、そのうち 24 ビットは赤、緑、青の各色成分を表し、残りの 8 ビットは色の透明度を指定するアルファチャネルを表します。現行のリソースエディタでは、色深度が 32 ビットのビットマップを表示できますが、変更できません。そのため、透明なビットマップを作成する場合は、リソースエディタではなく、外部のイメージエディタを使用します。
適切なリソースファイルを別のアプリケーションからプロジェクトにコピーし、そのファイルからビットマップをインポートします。

このチュートリアルでは、Samples ディレクトリにあるアプリケーションからリソースファイルをコピーします。

ビットマップをリボンに追加するには

Windows エクスプローラを使用して、RibbonGadgets サンプルのリソースディレクトリ (res) から次の .bmp ファイルをコピーします。
1. main.bmp を Scribble プロジェクトにコピーします。
2. filesmall.bmp と filelarge.bmp を Scribble プロジェクトにコピーします。
3. filelarge.bmp ファイルと filesmall.bmp ファイルの新しいコピーを作成します。このとき、コピーは RibbonGadgets サンプルに保存します。homesmall.bmp と homelarge.bmp のコピーの名前を変更し、それらを Scribble プロジェクトに移動します。
4. toolbar.bmp ファイルのコピーを作成します。このとき、コピーを RibbonGadgets サンプルに保存します。panelicons.bmp のコピーの名前を変更し、それを Scribble プロジェクトに移動します。
MFC アプリケーション用のビットマップをインポートします。[リソースビュー] で、[scribble.rc] ノードをダブルクリックし、[ビットマップ] ノードをダブルクリックして [リソースの追加] をクリックします。表示されたダイアログボックスで、[インポート] をクリックします。res ディレクトリを参照し、main.bmp ファイルを選択して、[開く] をクリックします。

main.bmp ビットマップには、26 × 26 イメージが含まれています。ビットマップの ID を IDB_RIBBON_MAIN に変更します。
アプリケーションボタンにアタッチされるファイルメニュー用のビットマップをインポートします。
1. filesmall.bmp ファイルをインポートします。このファイルには 16 × 16 イメージが 10 個 (16 × 160) 含まれています。必要な 16 × 16 イメージは 8 個 (16 × 128) なので、[リソースビュー] を使用して、ビットマップの幅を 160 から 128 に変更します。ビットマップの ID を IDB_RIBBON_FILESMALL に変更します。
2. filelarge.bmp をインポートします。このファイルには 32 × 32 イメージが 8 個 (32 × 256) 含まれています。ビットマップの ID を IDB_RIBBON_FILELARGE に変更します。
リボンのカテゴリとパネル用のビットマップをインポートします。リボンバーの各タブはカテゴリであり、テキストラベルと省略可能なイメージで構成されます。
1. homesmall.bmp ビットマップをインポートします。このファイルには、小さいボタン用の 16 × 16 イメージが 8 個含まれています。ビットマップの ID を IDB_RIBBON_HOMESMALL に変更します。
2. homelarge.bmp ビットマップをインポートします。このファイルには、大きいボタン用の 32 × 32 イメージが 8 個含まれています。ビットマップの ID を IDB_RIBBON_HOMELARGE に変更します。
サイズが変更されたリボンパネル用のビットマップをインポートします。このビットマップ、つまりパネルアイコンは、リボンが小さすぎてパネル全体を表示できない場合に、サイズ変更操作後に使用されます。
1. panelicons.bmp をインポートします。このファイルには 16 × 16 イメージが 8 個含まれています。ビットマップエディタの [プロパティ] ウィンドウで、ビットマップの幅を 64 (16 × 64) に変更します。ビットマップの ID を IDB_PANEL_ICONS に変更します。

[ページのトップへ]

リボンバーのインスタンスの作成

次の手順では、アプリケーションの起動時にリボンバーのインスタンスを作成する方法を示します。その次に、アプリケーションボタンに関連付けられているメニュー項目とイメージを初期化する方法を示します。

リボンバーのインスタンスを作成するには

mainfrm.cpp ファイルで、CMainFrame::OnCreate 関数の末尾にある最後の return ステートメントの前に、次のコードを追加します。このコードは、リボンバーのインスタンスを作成します。
```
// Create the ribbon bar
if (!m_wndRibbonBar.Create(this))
{
return -1;   //Failed to create ribbon bar
}
```

前の手順のステートメントの後に次のコードを追加します。このコードは、リボンパネルとアプリケーションボタン用のイメージを読み込み、次にアプリケーションボタンをリボンにアタッチします。

// Load images for ribbon panels
m_PanelImages.SetImageSize(CSize(16,16));
m_PanelImages.Load(IDB_PANEL_ICONS);
// Initialize the application button
m_MainButton.SetImage(IDB_RIBBON_MAIN);
m_MainButton.SetToolTipText(_T("File"));
m_MainButton.SetText(_T("\nf"));
// Attach the application button to the ribbon
m_wndRibbonBar.SetApplicationButton(&m_MainButton, CSize(45,45));

前の手順のステートメントの後に次のコードを追加します。このコードは、ユーザーがアプリケーションボタンを押したときに表示されるメニューを作成します。このコードで使用されているメッセージ ID は、Scribble 1.0 用のメニューで定義済みのものです。

CMFCRibbonMainPanel* pMainPanel = m_wndRibbonBar.AddMainCategory(
_T("File"), IDB_RIBBON_FILESMALL, IDB_RIBBON_FILELARGE);
pMainPanel->Add(new CMFCRibbonButton(
ID_FILE_NEW, _T("&New"), 0, 0));
pMainPanel->Add(new CMFCRibbonButton(ID_FILE_OPEN, _T("&Open..."), 1, 1));
pMainPanel->Add(new CMFCRibbonButton(ID_FILE_CLOSE, _T("&Close"), 5, 5));
pMainPanel->Add(new CMFCRibbonButton(ID_FILE_SAVE, _T("&Save"), 2, 2));
pMainPanel->Add(new CMFCRibbonButton(ID_FILE_SAVE_AS, _T("Save &As..."), 3, 3));
CMFCRibbonButton* pBtnPrint = new CMFCRibbonButton(ID_FILE_PRINT, _T("&Print"), 4, 4);
pBtnPrint->AddSubItem(new CMFCRibbonLabel(_T("Preview and print the document")));
pBtnPrint->AddSubItem(new CMFCRibbonButton(ID_FILE_PRINT, _T("&Print"), 4, 4, TRUE));
pBtnPrint->AddSubItem(new CMFCRibbonButton(ID_FILE_PRINT_DIRECT, _T("&Quick Print"), 7, 7, TRUE));
pBtnPrint->AddSubItem(new CMFCRibbonButton(ID_FILE_PRINT_PREVIEW, _T("Print Pre&view"), 6, 6, TRUE));
pBtnPrint->SetKeys(_T("p"), _T("w"));
pMainPanel->Add(pBtnPrint);
pMainPanel->Add(new CMFCRibbonSeparator(TRUE));
pMainPanel->Add(new CMFCRibbonButton(ID_FILE_CLOSE, _T("&Close"), 5, 5));
pMainPanel->AddRecentFilesList(_T("Recent Documents"));
pMainPanel->AddToBottom(new CMFCRibbonMainPanelButton(ID_APP_EXIT, _T("E&xit"), 8));

[ページのトップへ]

リボンカテゴリの追加

アプリケーションボタンを作成したので、最初のリボンカテゴリとリボンパネルを追加する準備ができました。各カテゴリは、リボンに表示されるタブを定義します (このチュートリアルでは、すべてのパネルで同じパネルアイコンを使用します。ただし、実験的に他のイメージリストインデックスを使用して、他のアイコンを表示してもかまいません)。

[Home] カテゴリと [Edit] パネルを追加するには

この Scribble プログラムに必要なカテゴリは 1 つだけです。このカテゴリの名前を「Home」とします。前の手順のステートメントの後に次のコードを追加します。

// Add a Home category to the ribbon bar.
CMFCRibbonCategory* pCategory = m_wndRibbonBar.AddCategory(
_T("&Home"),           // Category name
   IDB_RIBBON_HOMESMALL,    // Category small images (16 x 16)
   IDB_RIBBON_HOMELARGE);   // Category large images (32 x 32)

各リボンカテゴリは名前付きパネルに整理されます。各パネルには、関連操作を実行するコントロールのセットが含まれています。次のコードを追加して、編集機能を処理するパネルを作成します。このパネルの名前は「Edit」とします。
```
// Add an Edit panel to the Home category.
CMFCRibbonPanel* pPanelEdit = pCategory->AddPanel(
    _T("Edit"),                // Panel name
    m_PanelImages.ExtractIcon(0));  // Panel icon
```
[Edit] パネルにボタンを追加します。このパネルは、ドキュメントの内容を消去します。このボタンのメッセージ ID は、IDR_SCRIBBTYPE メニューリソースに定義済みです。ボタンテキストと、ボタンを装飾するビットマップのインデックスに、「Clear All」と指定します。
```
// Add a Clear All button to the Edit panel.
pPanelEdit->Add(new CMFCRibbonButton(ID_EDIT_CLEAR_ALL, _T("Clear All"), 0));
```
変更を保存し、アプリケーションをビルドして実行します。見慣れた Scribble アプリケーションが起動されますが、ウィンドウ最上部にはメニューバーではなく、リボンが表示されます。リボンバーには [Home] というカテゴリが 1 つだけあり、そこには [Edit] というパネルが 1 つだけあります。

追加したリボンボタンは既存のイベントハンドラに関連付けられており、[開く]、[閉じる]、[保存]、[印刷]、[すべてクリア] の各ボタンは、従来どおり動作します。

[ページのトップへ]

アプリケーションの外観の設定

ビジュアルマネージャは、アプリケーションのすべての描画を制御するグローバルオブジェクトです。このアプリケーションは既定の GUI スタイル (Office 2000) を使用しているので、外観が多少古い印象を与えます。このチュートリアルでは、Office 2007 ビジュアルマネージャを使用して、この Scribble アプリケーションの外観を、Office 2007 アプリケーションのような新しいものに変更します。

アプリケーションの外観を設定するには

CMainFrame::OnCreate 関数に次のコードを入力して、既定のマネージャとスタイルを変更します。

// Set the default manager to Office 2007 
CMFCVisualManager::SetDefaultManager(RUNTIME_CLASS(CMFCVisualManagerOffice2007));
CMFCVisualManagerOffice2007::SetStyle(CMFCVisualManagerOffice2007::Office2007_LunaBlue);

変更を保存し、アプリケーションをビルドして実行します。アプリケーションのユーザーインターフェイスが Office 2007 のユーザーインターフェイスのようになります。

[ページのトップへ]

これで処理は完了しました。

これで、このチュートリアルのパート 1 は完了しました。パート 2 へ進んでください。

参照

処理手順

チュートリアル : MFC Scribble アプリケーションの更新 (パート 2)

SCRIBBLE サンプル : MFC MDI 描画アプリケーション

その他の技術情報

チュートリアル (MFC Feature Pack)

次の方法で共有

チュートリアル : MFC Scribble アプリケーションの更新 (パート 1)

前提条件

セクション

基本クラスの置き換え

Scribble アプリケーションの基本クラスを置き換えるには

リボンのアプリケーションへの追加

リボンをアプリケーションに追加するには

ビットマップのリボンへの追加

ビットマップをリボンに追加するには

リボンバーのインスタンスの作成

リボンバーのインスタンスを作成するには

リボンカテゴリの追加

[Home] カテゴリと [Edit] パネルを追加するには

アプリケーションの外観の設定

アプリケーションの外観を設定するには

これで処理は完了しました。

参照

処理手順

その他の技術情報

その他のリソース

次の方法で共有

チュートリアル : MFC Scribble アプリケーションの更新 (パート 1)

前提条件

セクション

基本クラスの置き換え

Scribble アプリケーションの基本クラスを置き換えるには

リボンのアプリケーションへの追加

リボンをアプリケーションに追加するには

ビットマップのリボンへの追加

ビットマップをリボンに追加するには

リボン バーのインスタンスの作成

リボン バーのインスタンスを作成するには

リボン カテゴリの追加

[Home] カテゴリと [Edit] パネルを追加するには

アプリケーションの外観の設定

アプリケーションの外観を設定するには

これで処理は完了しました。

参照

処理手順

その他の技術情報

その他のリソース

リボンバーのインスタンスの作成

リボンバーのインスタンスを作成するには

リボンカテゴリの追加