Office 2010 の Backstage ビューのコントロールの書式をカスタマイズする

概要:   Microsoft Office 2010 の Backstage ビューのコントロールの横または縦のレイアウトおよび表示方法を定義する方法について説明します。

適用対象: Excel 2010 | Office 2010 | Open XML | PowerPoint 2010 | VBA | Visual Studio | Word 2010

公開:  2010 年 4 月

提供元:   Michael Case 氏、iSoftStone

Microsoft Office 2010 の新機能である Microsoft Office Backstage ビューは、従来の [ファイル] メニューに代わり、新規または既存のファイルを開いたり、ドキュメントのプロパティを定義したり、情報を共有したりするファイル管理機能がまとめて用意されている領域です。Microsoft Office Fluent リボン同様、Backstage ビューも、構造を定義する XML、コンポーネントとコンポーネントに機能を追加するコールバック プロシージャを使用して拡張できます。 この Office Visual How To 記事では、カスタム コントロール形式を使用してドキュメント固有のカスタマイズした Backstage ビューを作成する方法について説明します。Backstage ビューで layoutContainer コントロールを使用すると、コントロールを縦方向と横方向のどちらに配置するかを指定できます。Backstage ビューでは、コールバック プロシージャを使用してコントロール グループの表示方法を動的に定義することもできます。 この Visual How To の例では、Trang Luu の Custom UI Editor ツール (英語)を使用して、Microsoft Excel 2010 ブックにカスタム UI XML を簡単に追加できるようにします。この記事の手順を実行するには、Custom UI Editor をダウンロードしてインストールする必要があります。 この記事では、XML と Microsoft Visual Basic for Applications (VBA) コードを併用して Microsoft Excel 2010 ブックの Backstage ビューをカスタマイズする方法を説明します。XML では、Backstage ビューに表示するカスタム タブとコントロールを定義します。VBA コードには、このカスタム UI XML で定義したコールバック プロシージャで必要な機能を用意します。また、カスタマイズした Backstage ビューを Excel 2010 ブックで作成する方法を示すために、以下の手順についても説明します。 Backstage ビューを使用するサンプルの Excel ブックを作成します。 カスタム UI XML を追加します。 VBA コールバック コードを追加します。 カスタム Backstage ビュー ページを表示します。 サンプル Excel ブックの作成 この Visual How To では、Excel ブックにカスタム UI XML と VBA コードを追加します。 > [!NOTE] > この Excel ブックは、VBA コードをサポートするためにマクロ有効ブック (.xlsm) として作成する必要があります。 Microsoft Excel 2010 を起動します。 [ファイル] メニューの [名前を付けて保存] をクリックします。 [名前を付けて保存] ダイアログ ボックスの [ファイルの種類] ドロップダウン リストで、[Excel マクロ有効ブック (*.xlsm)] を選択します。 ドキュメントを C:\Temp\BackstageViewFormatControls.xlsm として保存します。[保存] をクリックして作業を終了します。 カスタム UI XML を追加する Custom UI Editor を使用すると、前の手順で作成したブックにカスタム UI XML を簡単に追加できます。 Custom UI Editor を起動します。 [File] メニューの [Open] をクリックします。 前の手順で作成した C:\Temp\BackstageViewFormatControls.xlsm ファイルを選択し、[Open] をクリックします。 [Insert] メニューの [Office 2010 Custom UI Part] をクリックします。これによって、customUI14.xml ファイルがドキュメント内に作成されます。 customUI14.xml ファイルを選択し、そのファイル内に次の XML をコピーします。 <?xml version="1.0" encoding="utf-8"?> <!-- CustomUI is the root tag of all Office Fluent UI customizations. --> <customUI xmlns="https://schemas.microsoft.com/office/2009/07/customui" onLoad="onLoad"> <!-- The Backstage view defines custom structure of the Backstage UI. --> <backstage> <tab id="customFormatTab" label="Customized Control Format" insertAfterMso="TabInfo"> <firstColumn> <group id="specDetailsGroup" label="Specification Details" getHelperText="GetSpecDetailsHelperText"> <topItems> <!-- The layoutChildren attribute places this set of controls vertically. --> <!-- The GetSpecDetailText callback returns a value to display for each editBox. --> <layoutContainer id="specDetails" layoutChildren="vertical"> <editBox id="specTitle" label="Title: " getText="GetSpecDetailText" /> <editBox id="specDesigner" label="Designer: " getText="GetSpecDetailText" /> <editBox id="specEngineer" label="Engineer: " getText="GetSpecDetailText" /> <editBox id="specTeam" label="Team: " getText="GetSpecDetailText"/> <editBox id="specCost" label="Cost: " getText="GetSpecDetailText"/> </layoutContainer> <!-- The layoutChildren attribute places the buttons horizontally. --> <layoutContainer id="specButtons" layoutChildren="horizontal"> <button id="getCostBasis" label="Get Cost Basis Info"/> <button id="getCostCodes" label="Get Cost Codes"/> <button id="getTeamCodes" label="Get Team Codes"/> </layoutContainer> </topItems> </group> </firstColumn> <secondColumn> <!-- The getStyle and getHelperText callbacks dynamically set the Open Design Issues Group style and text based on whether there are any open issues. --> <group id="openDesignIssuesGroup" label="Open Design Issues" getStyle="GetIssuesStyle" getHelperText="GetIssuesHelperText"> <topItems> <!-- The layoutChildren attribute places each set of issues controls horizontally. --> <!-- The onAction callback marks issues as resolved when the user clicks the Click to resolve button. --> <!-- The getVisible callback hides the issues after they are marked as resolved. --> <layoutContainer id="delayIssueContainer" layoutChildren="horizontal"> <button id="resolveDelayIssue" label="Click to resolve" imageMso="AcceptInvitation" onAction="ResolveIssue" getVisible="getIssueVisibility" /> <labelControl id="delayIssue" label="Issue: Delay in Material Delivery" getVisible="getIssueVisibility" /> </layoutContainer> <layoutContainer id="equipmentIssueContainer" layoutChildren="horizontal"> <button id="resolveEquipmentIssue" label="Click to resolve" imageMso="AcceptInvitation" onAction="ResolveIssue" getVisible="getIssueVisibility" /> <labelControl id="equipmentIssue" label="Issue: Equipment Down Time" getVisible="getIssueVisibility" /> </layoutContainer> <layoutContainer id="laborIssueContainer" layoutChildren="horizontal"> <button id="resolveLaborIssue" label="Click to resolve" imageMso="AcceptInvitation" onAction="ResolveIssue" getVisible="getIssueVisibility" /> <labelControl id="laborIssue" label="Issue: Labor Dispute" getVisible="getIssueVisibility" /> </layoutContainer> </topItems> </group> </secondColumn> </tab> </backstage> </customUI> [File] メニューの [Save] をクリックします。 Custom UI Editor を閉じます。 VBA コールバック コードを追加する 前の手順でカスタム UI XML を使用して追加したカスタム Backstage ビュー コンポーネントに、VBA コールバック プロシージャで機能を追加します。 Microsoft Excel 2010 を起動します。 [ファイル] タブの [開く] をクリックします。 BackstageViewFormatControls.xlsm ブックを開きます。 [開発] タブをクリックします。 [Visual Basic] をクリックします。 [挿入] メニューの [標準モジュール] をクリックします。 [Module1] を選択し、そのファイル内に次の VBA コードをコピーします。 ' Reference to the ribbon for refreshing the UI. Public processRibbon As IRibbonUI ' Variables that track the open design issues. Public delayIssueResolved As Boolean Public equipmentIssueResolved As Boolean Public laborIssueResolved As Boolean ' Store a reference to the ribbon for refreshing the UI. Sub OnLoad(ribbon As IRibbonUI) Set processRibbon = ribbon End Sub ' Helper text for the specification details group. Sub GetSpecDetailsHelperText(control As IRibbonControl, _ ByRef returnedVal) returnedVal = "Please be sure that the following information " & _ "is kept up to date. Many processes rely on " & _ "this information." End Sub ' Returns the text to display for each specification detail editBox object. Sub GetSpecDetailText(control As IRibbonControl, _ ByRef returnedVal) Select Case control.ID Case "specTitle" returnedVal = "Flexible Bracket" Case "specDesigner" returnedVal = "Andrew Fuller" Case "specEngineer" returnedVal = "Nancy Davolio" Case "specTeam" returnedVal = "Design" Case "specCost" returnedVal = "$896,210" End Select End Sub ' Group style for the open design issues group. ' If all issues are not resolved the error style ' emphasizes the group. Sub GetIssuesStyle(control As IRibbonControl, _ ByRef returnedVal) If (delayIssueResolved And equipmentIssueResolved _ And laborIssueResolved) Then ' This enumeration was renamed after the Office 2010 beta release. ' For the beta, use the OutSpaceSlabStyle.OutSpaceSlabStyleNormal enumeration. returnedVal = BackstageGroupStyle.BackstageGroupStyleNormal Else ' This enumeration was renamed after the Office 2010 beta release. ' For the beta release, use the OutSpaceSlabStyle.OutSpaceSlabStyleError enumeration. returnedVal = BackstageGroupStyle.BackstageGroupStyleError End If End Sub ' Helper text for the open design issues group. ' Text returned is based on the status of all issues. Sub GetIssuesHelperText(control As IRibbonControl, _ ByRef returnedVal) If (delayIssueResolved And equipmentIssueResolved _ And laborIssueResolved) Then returnedVal = "All issues are resolved." Else returnedVal = "Click Resolve as issues are resolved." End If End Sub ' Visibility for each open design issue. ' If an issue is not marked as resolved, the corresponding ' button and label display. Sub GetIssueVisibility(control As IRibbonControl, _ ByRef returnedVal) Select Case control.ID Case "resolveDelayIssue" returnedVal = Not delayIssueResolved Case "delayIssue" returnedVal = Not delayIssueResolved Case "resolveEquipmentIssue" returnedVal = Not equipmentIssueResolved Case "equipmentIssue" returnedVal = Not equipmentIssueResolved Case "resolveLaborIssue" returnedVal = Not laborIssueResolved Case "laborIssue" returnedVal = Not laborIssueResolved End Select End Sub ' Called when the user clicks a resolve issue button. ' Sets the button's corresponding issue as resolved. Sub ResolveIssue(control As IRibbonControl) Select Case control.ID Case "resolveDelayIssue" delayIssueResolved = True Case "resolveEquipmentIssue" equipmentIssueResolved = True Case "resolveLaborIssue" laborIssueResolved = True End Select ' Invalidate is called to reset the UI, causing all controls ' to redisplay and executing all relevant callbacks. processRibbon.Invalidate End Sub [ファイル] メニューの [保存] をクリックします。 Visual Basic for Applications エディターを閉じ、ブックに戻ります。 カスタム Backstage ビュー ページを表示する 前の手順で定義したカスタム Backstage ビュー ページを表示するには、[ファイル] タブを選択して Backstage ビューを表示します。新しい Backstage ビューが表示されます。Backstage ビューを表示したら、組み込みの [情報] タブの下にある [Customized Control Format] タブを選択します。[Customized Control Format] タブを選択すると、カスタム Backstage ビュー ページを表示できます。 図 1. カスタム Backstage ビュー ページ   この Office 2010 Backstage ビューを拡張してカスタム ページやカスタム コントロールを含めるには、カスタム UI XML を Office ドキュメントに追加すると共に、カスタム UI XML で指定されたコールバック用の機能を実現する VBA コードを追加する必要があります。 サンプル コードでは、Backstage ビュー ページに追加したコントロールの縦と横のレイアウトを制御する方法を示します。また、コントロール グループの表示スタイルを設定して強調表示する方法も示します。 カスタム UI を初期化する コールバック プロシージャで変更を行った場合、Backstage ビューのコントロールを再表示することが必要になる場合があります。Backstage ビューのコントロールを再表示するには、RibbonUI オブジェクトの Invalidate メソッドを呼び出します。 以下のコード スニペットは、カスタム UI のロード時に RibbonUI コントロールへの参照を保存する方法を示しています。customUI 要素には onLoad 属性が含まれています。この例では、この属性で OnLoad コールバックを指定します。OnLoad コールバックは、RibbonUI オブジェクトへの参照を保存します。RibbonUI オブジェクトは、コールバック内で Backstage ビューのコントロールを再表示するときに使用します。 <!-- customUI is the root tag of all Fluent UI customizations. --> <customUI xmlns="https://schemas.microsoft.com/office/2009/07/customui" onLoad="OnLoad"> 'Reference to the ribbon for refreshing the UI. Public processRibbon As IRibbonUI 'Store a reference to the ribbon for refreshing the UI. Sub OnLoad(ribbon As IRibbonUI) Set processRibbon = ribbon End Sub コントロールのレイアウトを指定する 既定の縦のレイアウトは使用せずに、ページ上のコントロールを横に配置することが必要になる場合があります。以下のコード例では、layoutContainer コントロールを使用して、layoutContainer コントロールの layoutChildren 属性を設定することによって、コントロールを横方向または縦方向に配置する方法を示します。1 番目の layoutContainer コントロールでは、layoutChildren 属性を既定値の vertical に設定します。これによって、[Specification Detail] の editBox コントロールは縦に並んで表示されます。2 番目の layoutContainer コントロールでは、layoutChildren 属性を horizontal に設定します。これによって、[Specification Detail] の button コントロールはエディット ボックスの下に横に並んで表示されます。 <!-- The layoutChildren attribute places this set of controls vertically. --> <!-- The GetSpecDetailText callback returns a value to display for each editBox. --> <layoutContainer id="specDetails" layoutChildren="vertical"> <editBox id="specTitle" label="Title: " getText="GetSpecDetailText" /> <editBox id="specDesigner" label="Designer: " getText="GetSpecDetailText" /> <editBox id="specEngineer" label="Engineer: " getText="GetSpecDetailText" /> <editBox id="specTeam" label="Team: " getText="GetSpecDetailText"/> <editBox id="specCost" label="Cost: " getText="GetSpecDetailText"/> </layoutContainer> <!-- The layoutChildren attribute places the buttons horizontally. --> <layoutContainer id="specButtons" layoutChildren="horizontal"> <button id="getCostBasis" label="Get Cost Basis Info"/> <button id="getCostCodes" label="Get Cost Codes"/> <button id="getTeamCodes" label="Get Team Codes"/> </layoutContainer> グループのスタイルを設定して状態を強調表示する ある条件に基づいて、特定のグループのコントロールを強調表示することが必要な場合があります。ここでは、未解決の問題がある場合に [Open Design Issues] グループを赤色で強調表示します。Backstage ビューのグループでは、getStyle 属性のコールバックを使用して表示スタイルを設定します。このコールバックからは、以下のいずれかの BackstageGroupStyle 列挙値を返します。 BackstageGroupStyleNormal。グループに特別なビジュアル処理は行いません。 BackstageGroupStyleWarning。グループは黄色で強調表示されます。 BackstageGroupStyleError。グループは赤色で強調表示されます。 以下のカスタム UI XML の例では、ページ上のコントロールの表示方法を定義するコールバックを動的に指定する方法を示します。[Open Design Issues] グループでは、getStyle 属性のコールバックおよび getHelperText 属性のコールバックを設定します。これらのコールバックでは、未解決の問題があるかどうかを評価し、対応するスタイルとテキストを返します。問題ごとの [Click to Resolve] ボタンと説明用のラベルでは、getVisible 属性のコールバックを設定して、問題が解決したときにこれらのコントロールを非表示にします。解決用ボタンでは、onAction 属性のコールバックも設定して、問題を解決済みとしてマークします。 <!-- The getStyle and getHelperText callbacks dynamically set the Open Design Issues Group style and text based on whether there are any open issues. --> <group id="openDesignIssuesGroup" label="Open Design Issues" getStyle="GetIssuesStyle" getHelperText="GetIssuesHelperText"> <topItems> <!-- The layoutChildren attribute places each set of issue controls horizontally. --> <!-- The onAction callback marks issues as resolved when the user clicks the resolve button. --> <!-- The getVisible callback hides issues after they are marked as resolved. --> <layoutContainer id="delayIssueContainer" layoutChildren="horizontal"> <button id="resolveDelayIssue" label="Click to resolve" imageMso="AcceptInvitation" onAction="ResolveIssue" getVisible="getIssueVisibility" /> <labelControl id="delayIssue" label="Issue: Delay in Material Delivery" getVisible="getIssueVisibility" /> </layoutContainer> <layoutContainer id="equipmentIssueContainer" layoutChildren="horizontal"> <button id="resolveEquipmentIssue" label="Click to Resolve" imageMso="AcceptInvitation" onAction="ResolveIssue" getVisible="getIssueVisibility" /> <labelControl id="equipmentIssue" label="Issue: Equipment Down Time" getVisible="getIssueVisibility" /> </layoutContainer> <layoutContainer id="laborIssueContainer" layoutChildren="horizontal"> <button id="resolveLaborIssue" label="Click to resolve" imageMso="AcceptInvitation" onAction="ResolveIssue" getVisible="getIssueVisibility" /> <labelControl id="laborIssue" label="Issue: Labor Dispute" getVisible="getIssueVisibility" /> </layoutContainer> </topItems> </group> 以下のコード例では、[Open Design Issues] グループの getStyle 属性 (と対応する GetIssuesStyle コールバック) および getHelperText 属性 (と GetIssuesHelperText コールバック) を使用して、未解決の問題がある場合にグループを強調表示する方法を示します。最初はすべての問題が未解決なので、GetIssuesStyle コールバックからは BackstageGroupStyleError 列挙値が返され、[Open Design Issues] グループが強調表示されます。すべての問題が解決すると、GetIssuesStyle コールバックから BackstageGroupStyleNormal 列挙値が返され、強調表示が解除されます。getHelperText 属性のコールバック GetIssuesHelperText は、GetIssuesStyle コールバックと並行して処理され、すべての問題が解決するまでは、問題を解決済みとしてマークする方法の説明を表示します。 ' Group style for the Open Design Issues Group. ' If all issues are not resolved the error style ' emphasizes the group. Sub GetIssuesStyle(control As IRibbonControl, _ ByRef returnedVal) If (delayIssueResolved And equipmentIssueResolved _ And laborIssueResolved) Then ' This enumeration was renamed after the Office 2010 beta release. ' For the beta release, use the OutSpaceSlabStyle.OutSpaceSlabStyleNormal ' enumeration. returnedVal = BackstageGroupStyle.BackstageGroupStyleNormal Else ' This enumeration was renamed after the Office 2010 beta release. ' For the beta release, use the OutSpaceSlabStyle.OutSpaceSlabStyleError ' enumeration. returnedVal = BackstageGroupStyle.BackstageGroupStyleError End If End Sub 'Helper Text for the Open Design Issues group. ' Text returned is based on the status of all issues. Sub GetIssuesHelperText(control As IRibbonControl, _ ByRef returnedVal) If (delayIssueResolved And equipmentIssueResolved _ And laborIssueResolved) Then returnedVal = "All issues are resolved." Else returnedVal = "Click resolve as issues are resolved." End If End Sub 以下のコード例では、[Click to resolve] ボタンおよび issue ラベルの getVisible 属性 (と GetIssueVisibility コールバック) を使用して、問題が解決済みとしてマークされたときにその問題を非表示にする方法を示します。GetIssueVisibility 値はコントロールの表示または非表示を示し、関連する問題の解決状態に基づいて True または False を返します。 ' Visibility for each Open Design Issue. 'If an issue is not marked as resolved, the corresponding ' button and label display. Sub GetIssueVisibility(control As IRibbonControl, ByRef returnedVal) Select Case control.ID Case "resolveDelayIssue" returnedVal = Not delayIssueResolved Case "delayIssue" returnedVal = Not delayIssueResolved Case "resolveEquipmentIssue" returnedVal = Not equipmentIssueResolved Case "equipmentIssue" returnedVal = Not equipmentIssueResolved Case "resolveLaborIssue" returnedVal = Not laborIssueResolved Case "laborIssue" returnedVal = Not laborIssueResolved End Select End Sub 以下のコード例は、[Click to Resolve] ボタンの onAction 属性のコールバック ResolveIssue で問題を解決済みとしてマークする方法を示します。ResolveIssue コールバックは、クリックされたボタンを識別し、対応する問題を解決済みとしてマークします。問題が解決した後は、RibbonUI オブジェクトの Invalidate メソッドを使用して Backstage ビューのコントロールを再表示し、解決済みの問題の現在の状態を表示します。Invalidate メソッドを呼び出すと、[Open Design Issues] グループの getStyle 属性のコールバックおよび getHelperText 属性のコールバックが再度実行されます。[Click to Resolve] ボタンと issue ラベルごとの getVisible 属性のコールバックも再度実行されます。 ' Called when a user clicks the Resolve issue button. ' Sets the button's corresponding issue as resolved. Sub ResolveIssue(control As IRibbonControl) Select Case control.ID Case "resolveDelayIssue" delayIssueResolved = True Case "resolveEquipmentIssue" equipmentIssueResolved = True Case "resolveLaborIssue" laborIssueResolved = True End Select ' Invalidate is called to reset the UI, causing all controls ' to redisplay and executing all relevant callbacks. processRibbon.Invalidate End Sub

ビデオを見る (英語) ビデオの長さ: 00:09:14 | ファイル サイズ: 19.2 MB | ファイル形式: WMV コードを取得する (英語) Office 2010 の Backstage ビューについて (開発者向け) Office 2010 の Backstage ビューのカスタマイズ (開発者向け) Office 2010 デベロッパー センター Microsoft Office 2010 よくある質問: Office Backstage ビューとは何ですか。 Trang Luu による Custom UI Editor の記事 (英語) Customizing the 2007 Office Fluent Ribbon for Developers