Office 2010 の Backstage ビューのカスタマイズ (開発者向け)

  • [アーティクル]

概要 : Microsoft Office 2010 には、Backstage ビューという新しいインターフェイスが導入されています。独自のアプリケーションのユーザー インターフェイスを拡張する方法を、サンプルを使って説明します (17 ページ)。

適用対象: Excel 2010 | Office 2007 | Office 2010 | Open XML | PowerPoint 2010 | SharePoint Server 2010 | VBA | Word 2010

この記事の内容
Microsoft Office Backstage ビューの概要
カスタム UI を初期化する
Backstage ビューが最初に表示された場合または非表示の場合にアクションを実行する
ファスト コマンド ボタンを作成する
Backstage ビューで 3 種類の列レイアウトを作成する
組み込みタブにカスタム グループを挿入する
組み込みタブにカスタム タスクを挿入する
グループの表示を動的に変更する
コントロールのレイアウトを指定する
コントロールのスタイルを動的に設定してそのステータスを強調する
コントロール セットの表示を別のコントロール セットから同期させる
まとめ
追加情報

公開日:   2009 年 11 月

提供元:   Mirko Mandic、Microsoft Corporation | Frank Rice、Microsoft Corporation

目次

  • Microsoft Office Backstage ビューの概要

  • カスタム UI を初期化する

  • Backstage ビューが最初に表示された場合または非表示の場合にアクションを実行する

  • ファスト コマンド ボタンを作成する

  • Backstage ビューで 3 種類の列レイアウトを作成する

  • 組み込みタブにカスタム グループを挿入する

  • 組み込みタブにカスタム タスクを挿入する

  • グループの表示を動的に変更する

  • コントロールのレイアウトを指定する

  • コントロールのスタイルを動的に設定してそのステータスを強調する

  • コントロール セットの表示を別のコントロール セットから同期させる

  • まとめ

  • 追加情報

Microsoft Office Backstage ビューの概要

Microsoft Office Backstage ビューは、Microsoft Office 2010 system の最新機能の 1 つです。[ファイル] タブから使用できるこのユーザー インターフェイス (UI) は、ファイル レベルでタスクとアクションを結合でき、以前のリリースの Microsoft Office system で Microsoft Office ボタンから利用できた類似の機能に置き換わるものです。

注意

要素と属性の説明、コールバックの署名など、概要については、「Office 2010 の Backstage ビューについて (開発者向け)」を参照してください。

Microsoft Office Fluent リボン UI と同様に、Backstage ビューは拡張性に優れており、XML を使用して構造やコンポーネントを定義し、コールバック プロシージャと呼ばれるプログラミング コードでコンポーネントの機能を指定します。リボン UI の拡張に慣れていれば、既存のタブの更新やカスタム Backstage ビュー UI の作成をほとんど問題なく行うことができます。

カスタム Backstage ビューを作成するには、ドキュメント固有のカスタマイズの場合は Office Open XML 形式のファイルを使用し、アプリケーション レベルのカスタマイズの場合は COM アドインを使用します。UI を拡張するこの 2 種類の方法の詳細については、「2007 Office Fluent リボンをカスタマイズする (開発者向け)」という一連の記事を参照してください。

注意

この記事で説明するサンプル コードは、https://code.msdn.microsoft.com からダウンロードできます。

以下のシナリオでは、Microsoft Excel 2010 の Backstage ビューをカスタマイズする XML および Microsoft Visual Basic for Applications (VBA) コードについて説明します。

注意

XML とイメージを Microsoft Office 2010 プログラムに追加するには、Custom UI Editor の使用を検討してください。エディターのダウンロード リンクは、この記事の末尾にあります。

カスタム UI を初期化する

<customUI> 要素の onLoad 属性は、UI を参照し、コード内で使用する変数を初期化するコードを指定する場所です。<customUI> 要素の onLoad 属性を設定することによって、このイベントのコールバックを指定します。

<customUI xmlns="https://schemas.microsoft.com/office/2009/07/customui" onLoad="OnLoad">

以下のコールバック プロシージャでは、最初に、RibbonUI オブジェクトを通じて UI を参照します。次に、この記事で説明するサンプル コードで使用される各種変数を初期化します。

Private processRibbon As IRibbonUI

Sub OnLoad(ribbon As IRibbonUI)
    Set processRibbon = ribbon
    engGrpVisible = True
    taskOneComplete = False
    taskTwoComplete = False
    taskThreeComplete = False
    taskFourComplete = False
    issueResolved = False
    issueVisibility = True
End Sub

Backstage ビューが最初に表示された場合または非表示の場合にアクションを実行する

Backstage ビューが表示された場合または表示されない場合に、何らかの処理を実行する必要があることがあります。たとえば、特定の日付を越えるなどのイベントに基づいて、タブを表示したり非表示にしたりします。<backstage> 要素の onShow 属性と onHide 属性は、このようなアクションを実行するコードを指定できます。以下の例は、onShow 属性を使用してグループ内のボタンのスタイルを設定する方法を示しています。

<backstage onShow="OnShow">

<group id="workStatusGroup" label="Work Status" getHelperText="GetStatusHelperText" getStyle="GetWorkStatusStyle" >
   <primaryItem>
      <button id="sendStatusMailButton" label="Send Status E-Mail" imageMso="ReplyAll" />
   </primaryItem>
</group>

以下の VBA コードでは、日付の値に応じて showGrpStyle 変数が次の 3 つの値のいずれかに設定されます。

  • BackstageGroupStyle.BackstageGroupStyleNormal。グループの外観に対して特別な処理は行われません。

  • BackstageGroupStyle.BackstageGroupStyleWarning。グループは黄色で強調表示されます。

  • BackstageGroupStyle.BackstageGroupStyleError。グループは赤色で強調表示されます。

Sub OnShow(ByVal contextObject As Object)
    If (Date < #9/29/2009#) Then
        showGrpStyle = BackstageGroupStyle.BackstageGroupStyleWarning
    ElseIf ((Date >= #9/29/2009#) And (Date < #10/1/2009#)) Then
        showGrpStyle = BackstageGroupStyle.BackstageGroupStyleError
    Else
        showGrpStyle = BackstageGroupStyle.BackstageGroupStyleNormal
    End If
    processRibbon.Invalidate
End Sub

Sub GetWorkStatusStyle(control As IRibbonControl, ByRef returnedVal)
        returnedVal = showGrpStyle
End Sub

XML とコードは次のように連携しています。

  1. Backstage ビューが表示されると、OnShow コールバック プロシージャが呼び出されます。

  2. OnShow プロシージャ内のコードは日付をテストし、その値に応じて、showGrpStyle 文字列変数を、BackstageGroupStyle オブジェクトの 3 つの列挙のうちの 1 つに設定します。

  3. コードは次に、UI をリセットする processRibbon.Invalidate メソッドを実行します。このため、Backstage ビューの各コントロールに対してコールバックが実行されます。

  4. workStatusGroup グループの getStyle 属性はコールバック GetWorkStatusStyle を指しています。これは、変数 showGrpStyleの値、つまり、列挙値の 1 つを返します。これにより、グループのスタイルが設定されます。

ファスト コマンド ボタンを作成する

ファスト コマンドは、頻繁に使用する必要があるオプションで役立ちます。以下の XML を使用すると、現在のブックを保存するカスタム ファスト コマンド ボタンを作成できます。また、isDefinitive 属性を使用して Backstage ビューを閉じ、シートに戻ります。図 1 は、XML マークアップによって作成されたファスト コマンドを示しています。

図 1. 保存して閉じるファスト コマンド

[保存して閉じる]

XML を見ると、insertAfterMso="FileSaveAs" 属性の指定により、カスタム ボタンは [名前を付けて保存] コマンドの直後に挿入されます。ラベルにアンパーサンド (&) 記号を挿入するには、2 つの &amp;&amp; を連結したトークンを使用することに注目してください。

<button id="saveBtn" label="Save &amp;&amp; Close" imageMso="SourceControlCheckIn" keytip="Z" onAction="SaveAction" insertAfterMso="FileSaveAs" isDefinitive="true" />

onAction 属性は、アクティブなブックの Save メソッドを使用してブックを保存するコールバックを指しています。

Sub SaveAction(control As IRibbonControl)
    'Saves any changes to the workbook.
    ActiveWorkbook.Save
End Sub

Backstage ビューで 3 種類の列レイアウトを作成する

Backstage ビューでカスタム コンテンツを追加するには、3 種類の方法があります。<firstColumn> 要素を使用すると、1 つの列を指定できます。この方法は、水平方向に情報を表示する場合に便利です。<firstColumn> 要素と<secondColumn> 要素の両方を使用すると、情報を 2 列で指定することもできます。これが最も一般的な方法です。最後に、taskFormGroup コントロールを使用して追加のサブナビゲーションを作成する方法があります。たとえば、最初の列で異なるコントロールをクリックすると、横のウィンドウに異なるグループが表示されます。

図 2 に示すような 1 列のレイアウトは <firstColumn> 要素を使用して作成します。

図 2. 1 列のレイアウトの例

1 列のレイアウト

<firstColumn>
   <group id="reviewersGroup" label="Document Reviewers">
      <topItems>
         <layoutContainer id="headerLayout" layoutChildren="horizontal">
            <labelControl id="spacerLabel" label="               " />
            <labelControl id="nameHeaderLabel" label="       NAME" />
            <labelControl id="titleHeaderLabel" label="      TITLE " />
            <labelControl id="roleHeaderLabel" label="       ROLE" />
            <labelControl id="approvalDueDateLabel" label="    APPROVAL DUE DATE" />
         </layoutContainer>
         <layoutContainer id="arthurLayout" layoutChildren="horizontal">
            <imageControl id="arthurImage" image="Arthur" />
            <labelControl id="arthurNameLabel" label="          Arthur Davis" />
            <labelControl id="arthurTitleLabel" label="    Corporate VP" />
            <labelControl id="arthurRoleLabel" label="    Final Approver" />
            <labelControl id="arthurDueDateLabel" label="    10/20/2009" />
         </layoutContainer>
      </topItems>
</firstColumn>

次の XML では、<firstColumn> 要素と <secondColumn> 要素を使用して、図 3 に示すような 2 列の情報を定義しています。

図 3. 2 列のレイアウトの例

2 列のレイアウト

<firstColumn>
…<group id="customPrinter" label="PR-XYZ Printer" insertAfterMso="GroupPrintSettings" >
      <primaryItem>
         <button id="setPaperType" label="Set Paper Type" imageMso="PrintAreaMenu" />
      </primaryItem>
      <topItems>
         <button id="setPlotStart" label="Set Plot Start      " imageMso="ChartDepthAxis" />
         <button id="setPlotXAxis" label="Set X-Axis Limits" imageMso="ChartSecondaryHorizontalAxis" />
         <button id="setPlotYAxis" label="Set Y-Axis Limits" imageMso="ChartSecondaryVerticalAxis" />
      </topItems>
…</group>
</firstColumn>
<secondColumn>
   <taskGroup id="bidProcessTaskGroup" label="Contract Bid Process Checklist" >
      <category id="defineWorkScopeCategory" getLabel="GetCatHelperText"  >
         <task id="defineScope" label="Define the Scope of Work." tag="Work scope" imageMso="_1" onAction="GetCalcCostCatVisibility"/>
         <task id="assignTasks" label="Assign the Tasks" tag="Task assignments" imageMso="_2" onAction="GetCalcCostCatVisibility"/>
      </category>
             
</secondColumn>

taskFormGroup コントロールを使用すると、コントロール内での選択に基づいてグループを表示できます。コントロールは、カテゴリ内のタスクを使用して、グループ定義を格納しています。taskFormGroup コントロール内のタスクをクリックすると、<task> 要素内で定義されているグループ (複数も可) が、タスク コントロールの横のウィンドウに表示されます。図 4 と図 5 は、以下の XML マークアップで記述される taskFormGroup コントロールの使用例を示しています。

図 4. 先頭のグループを選択すると右側に 1 つのグループが表示される

最初のグループの表示

図 5. 次のグループを選択すると右側に別のグループが表示される

次グループの表示

以下の XML は、taskFormGroup コントロールの使用方法を示しています。

<tab id="teamTasksTab" label="Team Tasks" >
   <firstColumn>
      <taskFormGroup id="teamTaskFormGroup">
            <category id="engineeringTeamCategory" label="Engineering Tasks">
              <task id="engineeringTeamTasks" label="Manager: William Rodgers" description="Engineering Excellance" imageMso="TableDesign">
                <group id="engineeringTeamTasksGroup" label="Engineering Group">
                     <topItems>
                        <button id="concept" label="Concept     " tag="Task One" imageMso="_1" />
                        <button id="design" label="Design       " tag="Task Two" imageMso="_2" />
                        <button id="prototype" label="Prototype  " tag="Task Three" imageMso="_3" />
                        <button id="production" label="Production" tag="Task Four" imageMso="_4" />
                     </topItems>
                </group >
              </task>
            </category>
            <category id="manufacturingTeamCategory" label="Manufacturing Tasks">
              <task id="manufacturingTeamTasks" label="Manager: Alice Morton" description="Right the First Time" imageMso="ControlsGallery">
                <group id="manufacturingTeamTasksGroup" label="Manufacturing Group">
                   <topItems>
                        <button id="flowDesign" label="Flow Design    " tag="Task One" imageMso="_1" />
                        <button id="tooling" label="Tooling            " tag="Task Two" imageMso="_2" />
                        <button id="staffing" label="Staffing           " tag="Task Three" imageMso="_3" />
                        <button id="manufacturing" label="Manufacturing" tag="Task Four" imageMso="_4" />
                   </topItems>
                </group >
              </task>
            </category>
         <category id="marketingTeamCategory" label="Marketing Tasks">
            <task id="marketingTeamTasks" label="Manager: Jane Burns" description="Bringing Quality to the Customer" imageMso="SignatureShow">
               <group id="marketingTeamTasksGroup" label="Marketing Group">
                  <topItems>
                     <button id="concepts" label="Concepts              " tag="Task One" imageMso="_1" />
                     <button id="storyBoarding" label="Story Boarding     " tag="Task Two" imageMso="_2" />
                     <button id="finalization" label="Finalization           " tag="Task Three" imageMso="_3" />
                     <button id="channelSelection" label="Channel Selection " tag="Task Four" imageMso="_4" />
                     <button id="execution" label="Execution              " tag="Task Five" imageMso="_5" />
                  </topItems>
               </group >
            </task>
          </category>
      </taskFormGroup >
   </firstColumn>
</tab>

先頭の列の engineeringTeamTasks タスクをクリックすると、先頭の列の横のウィンドウに engineeringTeamTasksGroup グループが表示されます。列 1 の manufacturingTeamTasks タスクをクリックすると、manufacturingTeamTasksGroup グループが engineeringTeamTasksGroup グループに代わって列の右側に表示されます。したがって、異なるタスク コントロールを選択すると、その列の横の 1 つ以上のグループの表示が切り替わります。これにより、小さなスペースに多くの情報を表示できます。

組み込みタブにカスタム グループを挿入する

組み込みタブへのグループの挿入は、リボン タブへのグループの挿入に似ています。組み込みタブは、idMso 属性を使用して表します (Mso サフィックスを使用する属性は、組み込みのコントロールまたはイメージを表します)。組み込みコントロールの後にカスタム グループを挿入するには、insertAfterMso 属性を使用します。以下の例では、組み込みの [印刷] タブの組み込みのグループ GroupPrintSettings の後にカスタム グループ customPrinter を挿入します。

<tab idMso="TabPrint">
    <firstColumn>
      <group id="customPrinter" label="PR-XYZ Printer" insertAfterMso="GroupPrintSettings" >
         <primaryItem>
             <button id="setPaperType" label="Set Paper Type" imageMso="PrintAreaMenu" />
         </primaryItem>
         <topItems>
            <button id="setPlotStart" label="Set Plot Start      " imageMso="ChartDepthAxis" />
            <button id="setPlotXAxis" label="Set X-Axis Limits" imageMso="ChartSecondaryHorizontalAxis" />
            <button id="setPlotYAxis" label="Set Y-Axis Limits" imageMso="ChartSecondaryVerticalAxis" />
         </topItems>
       </group>
   </firstColumn>
</tab>

この XML を使用した結果を図 6 に示します。

図 6. [印刷] タブに追加されたカスタム プリンター グループ

カスタム プリンター グループ

組み込みタブ内のタスクに対してカスタム グループを追加することもできます。図 7 は、組み込みタスクにカスタム グループを追加した状態を示しており、この図に続く XML はその方法を示しています。

図 7. 組み込みタスクへのカスタム グループの追加

カスタム グループの追加結果

<taskFormGroup idMso="GroupShare">
    <category idMso="Share">
      <task idMso="SendUsingEmail">
         <group id="sendViaHotmailGroup" insertAfterMso="GroupSendAsLink" label=" ">
            <bottomItems>
               <layoutContainer id="hotmailItemsLayout" layoutChildren="horizontal">
                  <button id="sendViaHotmail" style="large" label="Send via Hotmail" image="WindowsLive32"/>
                     <layoutContainer id="hotmailLabelAndBulletsLayout" layoutChildren="vertical">
                        <labelControl id="hotmailLabel" label="Use your Hotmail account to send this document."/>
                           <layoutContainer id="BillboardHotmailRowOne" layoutChildren="horizontal">
                               <imageControl id="BillboardHotmailRowOneBullet" image="BillboardBullet"/>
                              <labelControl id="BillboardHotmailRowOneLabel" label="Choose from your list of Hotmail contacts."/>
                           </layoutContainer>
                           <layoutContainer id="BillboardHotmailRowTwo" layoutChildren="horizontal">
                               <imageControl id="BillboardHotmailRowTwpBullet" image="BillboardBullet"/>
                               <labelControl id="BillboardHotmailRowTwpLabel" label="Recipients get the document from your Windows Live Hotmail address."/>
                           </layoutContainer>
                        </layoutContainer>
                     </layoutContainer>
                  </bottomItems>
               </group>
      </task> 
    </category>
</taskFormGroup>

組み込みタブにカスタム タスクを挿入する

次の例では、組み込みの [共有] タブに taskFormGroup コントロールを挿入します。組み込みの SendUsingEmail タスクにグループが追加されます。ネストされた layoutContainer コントロールを使用することで、異なるコントロールがタブに設定されます。

注意

この例は、さまざまな組み込みグループで使用される行頭文字を取得する方法も示しています。この処理は、行頭文字を表すカスタム イメージをラベルの横に配置することによって行われます。

以下の図と例は前の例に似ており、taskFormGroup コントロールから表示されるコントロールをレイアウトする別の方法を示しています。ここでは箇条書きリストが定義され、ボタンが使用されます。

図 8. コントロールのレイアウトを示す別の例

レイアウトの例

<task id="ButtonTaskSaveToFacebook" insertAfterMso="SendUsingEmail" label="Post to Facebook" imageMso="HelpContactMicrosoft">
   <group id="GroupSaveToFacebook" label="Post to Facebook">
      <topItems>
         <labelControl id="BillboardFacebookRowOne" label="Post to Facebook to make this document available to all of your friends."/>
         <layoutContainer id="BillboardFacebookRowTwo" layoutChildren="horizontal">
            <imageControl id="BillboardFacebookRowTwoBullet" getImage="GetBillboardBullet"/>
            <labelControl id="BillboardFacebookRowTwoLabel" label="Use a Web browser to view and edit documents from anywhere."/>
         </layoutContainer>
         <layoutContainer id="BillboardFacebookRowThree" layoutChildren="horizontal">
            <imageControl id="BillboardFacebookRowThreeBullet" getImage="GetBillboardBullet"/>
            <labelControl id="BillboardFacebookRowThreeLabel" label="Receive notifications when documents change."/>
         </layoutContainer>
         <button id="ButtonSignIn" style="large" label="Sign in" imageMso="HelpContactMicrosoft"/>
      </topItems>
   </group>
</task>

グループの表示を動的に変更する

次の例では、2 つのグループの表示を動的に変更する方法を示します。これにより、一方のグループから他方のグループへと表示を切り替えているように見えます。この方法は、2 つのグループが相互に排他的な場合に役立ちます。図 9 と図 10 は切り替えの結果を示しています。

図 9. マーケティング グループが最初に表示される

マーケティング グループの表示

図 10. グループの表示が変更され、エンジニアリング グループが表示される

エンジニアリング グループの表示

XML は、2 つのボタンのメニュー グループを含む primaryItem コントロールで構成されます。最初のボタンをクリックすると、切り替えが開始します。marketingGroupDetails グループと engineeringGroupDetails グループがこの切り替えの影響を受けます。

<primaryItem>
   <menu id="switchMenu" label="Groups" imageMso="ControlLayoutStacked" >
      <menuGroup id="switchMenuGroup">
         <button id="switchGroups" label="Switch for Group Status" onAction="SwitchGroupsBtn"/>
      </menuGroup>
   </menu>
</primaryItem>

<group id="marketingGroupDetails" label="Marketing Group" getVisible="GetMarketingGroupVisibility">
   <primaryItem>
      <button id="marketingButton" label="Marketing" imageMso="OutlookGlobe" />
   </primaryItem> 
   <topItems>
      <editBox id="marketingManager" label=" Manager:              " getText="GetMarketingDetail"/>
      <editBox id="marketingBudget" label=" Budget:                 " getText="GetMarketingDetail"/>
      <editBox id="marketingEndDate" getText="GetMarketingDetail" label="Completion Date: "/>
   </topItems>
</group>
<group id="engineeringGroupDetails" label="Engineering Group" getVisible="GetEngineeringGroupVisibility" >
   <primaryItem>
      <button id="engineeringButton" label="Engineering" imageMso="TableDesign" />
   </primaryItem>
   <topItems>
      <editBox id="engineeringManager" label=" Manager:              " getText="GetEngineeringDetail"/>
      <editBox id="engineeringBudget" label=" Budget:                 " getText="GetEngineeringDetail"/>
      <editBox id="engineeringEndDate" getText="GetEngineeringDetail" label="Completion Date: "/>
      <layoutContainer id="hyperlinkLayout" layoutChildren="horizontal" >
         <labelControl id="hyperlinkLabel" label=" Check Parts Availability:" />
         <hyperlink id="checkPartsHyperlink" label="https://www.microsoft.com" getTarget="GetHyperLink"/>
      </layoutContainer>
   </topItems>
</group>

Sub SwitchGroupsBtn(control As IRibbonControl)
    engGrpVisible = Not engGrpVisible
    If (engGrpVisible = False) Then
      mrktGrpVisible = True
    Else
      mrktGrpVisible = False
    End If
    processRibbon.Invalidate
End Sub

XML と VBA コードは次のように連携しています。

  1. ボタンをクリックすると、onAction="SwitchGroupsBtn" コールバックが呼び出されます。

  2. SwitchGroupsBtn サブルーチンにより engGrpVisible 変数が対の値に設定されます。最初、この変数は True に設定されており、[Contoso プロセス] タブが最初に表示されるときには engineeringGroupDetails グループが表示されます。

  3. 次に engGrpVisible 変数の値がテストされ、その値に応じて mrktGrpVisible 変数がその対の値に設定されます。つまり、UI がリセットされると (processRibbon.Invalidate メソッドが実行されると)、どちらの変数が True に設定されているかによって、表示されるグループが決まります。

    Sub GetMarketingGroupVisibility(control As IRibbonControl, ByRef returnedVal)
    returnedVal = engGrpVisible
End Sub

Sub GetEngineeringGroupVisibility(control As IRibbonControl, ByRef returnedVal)
    returnedVal = mrktGrpVisible
End Sub

  4. UI がリセットされると、getVisible="GetMarketingGroupVisibility" 属性と getVisible="GetEngineeringGroupVisibility" 属性が呼び出されます。値は互いに対の値なので、どちらの値が True であるかによって、対応するグループの表示が決まります。

コントロールのレイアウトを指定する

layoutContainer コントロールを使用すると、コントロールの方向として水平または垂直を指定できます。これは、layoutChildren 属性の値を vertical または horizontal に設定することによって行います。

図 11. 垂直および水平のコントロール レイアウトの例

縦型と横型のレイアウト

以下の XML は、図 11 に示されている水平方向と垂直方向のコントロールを作成します。

<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>

<layoutContainer id="getSpecDetailsControls" layoutChildren="horizontal">
   <button id="getCostBasis" label="Get Cost Basis Info" screentip="Display Cost Basis List" />
   <button id="getCostCodes" label="Get Cost Codes" screentip="Display Cost Code List"/>
   <button id="getTeamCodes" label="Get Team Codes" screentip="Display Team Code List"/>
</layoutContainer>

コントロールのスタイルを動的に設定してそのステータスを強調する

場合によっては、ある条件に基づいて特定のグループに注目させる必要があります。getStyle 属性を使用すると、BackstageGroupStyle オブジェクトの列挙 (前のセクションを参照) の 1 つからスタイルを返すことができます。

図 12. BackstageGroupStyleError スタイルを使用してグループを強調する例

BackstageGroupStyleError スタイル

<group id="openDesignIssuesGroup" label="Open Design Issues" getStyle="GetIssuesStyle" getHelperText="GetIssuesHelperText" >
   <primaryItem>
      <button id="resolveIssuesButton" label="Click to Resolve" imageMso="AcceptInvitation" onAction="ResolveIssues" />
   </primaryItem>
   <topItems>
      <labelControl id="delayIssue" label="Issue: Delay in Material Delivery" getVisible="getIssueVisibility" />
      <labelControl id="equipmentDownIssue" label="Issue: Equipment Down Time" getVisible="getIssueVisibility" />
      <labelControl id="laborDisputeIssue" label="Issue: Labor Dispute" getVisible="getIssueVisibility" />
   </topItems>
</group>

Sub GetIssuesStyle(control As IRibbonControl, ByRef returnedVal)
    If (Not issueResolved) Then
        returnedVal = BackstageGroupStyle.BackstageGroupStyleError
    Else
        returnedVal = BackstageGroupStyle.BackstageGroupStyleNormal
    End If
End Sub

Sub ResolveIssues(control As IRibbonControl)
    issueResolved = True
    issueVisibility = False
    processRibbon.Invalidate
End Sub

Sub getIssueVisibility(control As IRibbonControl, ByRef returnedVal)
    returnedVal = issueVisibility
End Sub

XML と VBA は次のように連携しています。

  • openDesignIssuesGroup グループを囲んでいる領域は、最初、赤色 (BackstageGroupStyle.BackstageGroupStyleError) で表示されます。これは issueResolved 変数が False のためです。また、 issueVisibility 変数は True なので、すべての labelControls コントロールのテキストが表示されます。primaryItem ボタンをクリックすると、ResolveIssues コールバック プロシージャが呼び出されます。

  • これにより、 issueResolved 変数は True に設定され、 issueVisiblity 変数は False に設定されます。次に、processRibbon.Invalidate メソッドを使用して UI をリセットすると、再び ResolveIssues コールバックが呼び出されます。

  • 今度は issueResolved 変数が True に設定され、BackstageGroupStyle.BackstageGroupStyleNormal 値が Office に返されます。これにより、グループを囲んでいる領域が色のない状態 (既定) になります。

  • さらに、ResolveIssues コールバック プロシージャが再び呼び出されると、 issueVisiblity 変数 (値は False) が getIssueVisibility プロシージャによって返されます。これにより、labelControls コントロール内のテキストが非表示となります。

コントロール セットの表示を別のコントロール セットから同期させる

コントロールのセットの表示を、Backstage ビューの別の場所から制御することが必要になる場合があります。たとえば、あるタスクが完了するまで承認の署名のテキスト ボックスを表示させない場合です。以下の例では、あるタスクのセットを表示する前に、2 つのタスクを完了する必要があります (該当のタスクでボタンをクリックすることによってタスクの完了が示されます)。2 番目のタスクのセットを完了すると、別のコントロールが表示されます。このアクションにより、図 13 と図 14 に示すようなカスケード効果が得られます。

図 13. 最初の 2 つのタスクが表示されている状態

2 タスクの表示

図 14. 最初の 2 つのタスクの完了により別のタスクが表示された状態

連鎖的影響

<taskGroup id="bidProcessTaskGroup" label="Contract Bid Process Checklist" >
   <category id="defineWorkScopeCategory" getLabel="GetCatHelperText"  >
      <task id="defineScope" label="Define the Scope of Work." tag="Work scope" imageMso="_1" onAction="GetCalcCostCatVisibility"/>
      <task id="assignTasks" label="Assign the Tasks" tag="Task assignments" imageMso="_2" onAction="GetCalcCostCatVisibility"/>
   </category>
   <category id="calculateCostsCategory" getLabel="GetCatHelperText" getVisible="GetCatVisibility" >
      <task id="calcManHours" label="Calculate Total Man-Hours" tag="Calculate Man-Hours" imageMso="_3" onAction="GetTaskCompleteVisibility"/>
      <task id="calcOverheadCosts" label="Determine Overhead Costs" tag="Calculate Overhead Costs" imageMso="_4" onAction="GetTaskCompleteVisibility"/>
  </category>
</taskGroup>
<group id="tasksCompleteImageGroup" >
   <topItems>
      <layoutContainer id="taskCompleteImageLayout" layoutChildren="horizontal" >
         <imageControl id="checkMarkImage" imageMso="AcceptInvitation" getVisible="GetTaskCompleteImageVisibility"/>
         <labelControl id="completionLabel" label="The proposal is ready for review."  getVisible="GetTaskCompleteImageVisibility" />
      </layoutContainer>
   </topItems>
</group>

Sub GetCalcCostCatVisibility(control As IRibbonControl)
    If (control.ID = "defineScope") Then
        taskOneComplete = True
        If (taskOneComplete And taskTwoComplete) Then
            catTwoVisible = True
            processRibbon.InvalidateControl ("calculateCostsCategory")
        End If
    Else
        taskTwoComplete = True
        If (taskOneComplete And taskTwoComplete) Then
            catTwoVisible = True
            processRibbon.InvalidateControl ("calculateCostsCategory")
        End If
    End If
End Sub

この例で使用されている主要なコントロールは taskGroup コントロールであり、タスクのカテゴリで構成されています。タスク コントロールを順番にクリックすることにより 1 つのカテゴリのタスクを完了すると、別のカテゴリのタスクが表示されます。そのタスクを順番に完了すると、imageControl コントロールと labelControl コントロールが表示され、すべてのタスクが完了したことが通知されます。

このアクションは次のように行われます。

  1. タブが初期化されると、bidProcessTaskGrouptaskGroup コントロールの defineWorkScopeCategory カテゴリが表示されます。そこに含まれる 2 つのタスク コントロールも表示されます。defineScope タスク コントロールをクリックすると、GetCalcCostCatVisibility コールバック プロシージャが呼び出されます。

  2. GetCalcCostCatVisibility プロシージャにより、 taskOneComplete 変数が True に設定されます。次に、 taskOneComplete 変数と taskTwoComplete 変数が True かどうかがテストされます。 taskTwoComplete 変数は True に設定されていないので、ループの中でテストが失敗します。

  3. 次に、assignTasks タスク コントロールをクリックすると、GetCalcCostCatVisibility プロシージャが再び呼び出され、If Then ステートメントの Else 部分がテストされます。ここでは最初に、 taskTwoComplete 変数が True に設定されます。 taskOneComplete 変数と taskTwoComplete 変数がテストされると、両方とも True なので、 catTwoVisible 変数が True に設定されます。次に、calculateCostsCategory カテゴリのコントロールがリセットされ、その GetCatVisibility コールバックが呼び出されます。

  4. このサブルーチンは、 catTwoVisible 変数を返します。この変数は前に True に設定されているので、カテゴリが表示されます。calcManHours タスクをクリックするとプロセスが再び始まりますが、今度は、calculateCostsCategory カテゴリのタスクは除外されます。2 つのタスクが完了したときに別のカテゴリを表示するのではなく、checkMarkImageimageControl コントロールと completionLabellabelControl コントロールを表示してすべてのタスクが完了したことを通知するのが唯一の違いです。

まとめ

この記事の例は、Backstage ビューで実行できるいくつかのシナリオを示しています。UI を定義し、その機能を指定する方法は、リボンでも Backstage ビューでも概念的には同じです。UI のカスタマイズを試みることで、組織に適したアプリケーションを作成することをお勧めします。

追加情報

この記事で説明したトピックの詳細については、次のリソースを参照してください。

Office 2010 の Backstage ビューについて (開発者向け)

2007 Office Fluent リボンをカスタマイズする (開発者向け)

Custom UI Editor

Download: Office 2010 Schema: Fluent User Interface Schema

この記事の作成にあたりエディターの Linda Cannon の協力に感謝を意を表します。