環境: Visual Studio 2010 (RTM), Office 2010

Visual Studio 2010 & Office 2010 UI 開発新機能

• バックステージビュー (backstage)
• コンテキストメニュー (context menu)
• リボンの AutoScale
• リボンタブのプログラムコードによる選択 (アクティベート)

こんにちは。

昨日は、Visual Studio 2010 Ready Day にご参加いただいた皆様、お忙しいところありがとうございました。(私達 開発者にとっては、記念すべき 1 日です)

さて、昨日の私のセッションの最後にデモした Visual Studio 2010 による Office UI 開発で、「注意点をブログで記載します」とお話しした箇所、および時間が無くデモしなかった箇所を含め、記載していきます。(CLR サイド・バイ・サイド、VSTO ランタイムの依存性の軽減、配置の話等については、ご説明した通りです。今回は、実行エンジンも含む細かな部分が改善されています。)
ここでは、UI 系の話にフォーカスしてコードを記載していきます。

まず、バックステージビュー (Backstage View) の開発について、記載していきましょう。

さっそくですが、昨日のデモの通り、Visual Studio 2010 を起動し、ターゲットのフレームワークバージョンとして [.NET Framework 4] を選択し、今回は [Excel 2010 Add-In] のプロジェクトを新規作成してみましょう。

つぎに、リボンの XML コントロールを追加します。
ソリューションエクスプローラーでプロジェクトを右クリックし、[追加] – [新しい項目] で [リボン (XML)] を選択します。

いつものリボン開発と同じ要領で、作成された Ribbon1.cs のコメントに記載されている必要事項を実施します。今回の場合、ThisAddIn.cs に、以下のメソッドを追加しました。(これで、上記で追加した Ribbon1 が有効になります。)

protected override Microsoft.Office.Core.IRibbonExtensibility CreateRibbonExtensibilityObject(){    return new Ribbon1();}

Ribbon1.xml を表示し、ここにバックステージビューの設定 (カスタマイズ) をおこないます。
ここで注意点ですが、昨日デモでお見せしたように、Visual Studio 2010 Beta 2 の環境を使用されている方は、下記 (太字) の通り XML 名前空間を変更しておきましょう。

<?xml version="1.0" encoding="UTF-8"?><customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">  . . .</customUI>

さて、ここの説明を省略してしまったのですが、これにあわせて、この XML 名前空間でインテリセンスを有効にしておくと、昨日お見せしたように、非常にサクサクと開発できます。Beta 2 をお使いの方は、こちら からスキーマ定義ファイル (customui14.xsd ファイル) をダウンロードして、Visual Studio の [XML] – [スキーマ…] メニューでこのスキーマ定義を設定しておいてください。(または、Visual Studio に入っている catalog.xml に記述して、以降、この XML 名前空間で、常にこのスキーマ定義を使用するようにします。)
なお、この作業は、Visual Studio 2010 RTM をお使いの方は不要 です。(ちゃんと入っています !) Visual Studio 2010 RTM の日本語版が楽しみですね。

さて、XML の編集をおこなう前に、準備として、ボタンが押された際などに呼ばれるイベント処理を作成しておきましょう。今回は、コードビハインドの Ribbon1.cs に、以下のテスト用のメソッドを追加しておきます。

public void Test_onAction(Office.IRibbonControl control){    // 実際は、ここで何か処理をおこなう . . .    System.Windows.Forms.MessageBox.Show("テストです");}

さいごに、Ribbon1.xml に以下の通り記述します。どう表示されるかは このあとで画面イメージを添付しますが、ポイントを記述すると、バックステージには、昨日ご説明したように、左半分 (firstColumn) と右半分 (secondColumn) の広い表示領域が使用できます。

コントロールとしては、button や hyperlink, imageControl など、インテリセンスを使って、いろいろなものを配置して遊んでみてください。また、一意な id 属性と、コントロールが選択された際に呼ばれる onAction のイベント処理 (今回の場合、Test_onAction メソッド) は必ず設定しておきましょう。

<?xml version="1.0" encoding="UTF-8"?><customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">  . . .  <backstage>    <tab id="myTab"         label="松崎テスト">      <firstColumn>        <taskGroup id="myTaskGroup1">          <category id="myCategory1"                    label="テストカテゴリー">            <task id="myTask1"                  label="選んで1"                  imageMso="HappyFace"                  description="これは、テストです"                  onAction="Test_onAction" />            <task id="myTask2"                  label="選んで2"                  imageMso="HappyFace"                  description="This is test."                  onAction="Test_onAction" />            <task id="myTask3"                  label="選んで3"                  imageMso="HappyFace"                  description="Hello, Office 2010 !"                  onAction="Test_onAction" />          </category>        </taskGroup>      </firstColumn>      <secondColumn>        <group id="myGroup1"               label="情報">          <topItems>            <button id="myButton1"              label="押してください"              onAction="Test_onAction" />          </topItems>        </group>      </secondColumn>    </tab>  </backstage></customUI>

以上で完了しました。
F5 ボタンを押してデバッグ実行をおこなうと Excel 2010 が起動し、[ファイル] メニューには、下図の通り「松崎テスト」のタブが表示され、選択をおこなうとカスタムのバックステージビューが表示されます。

なお、上記で、…Mso (今回は、imageMso を使用しました) となっている箇所は、Office があらかじめ持っているコントロール (部品) の Id です。今回は、imageMso を使用して、Office が組み込みで持っているスマイルアイコンを表示しています。
例えば、上記で tab の Id (上記の <tab id=”myTab” … の箇所) も、この idMso を使用すると、既存のバックステージのタブに独自のコントロールを追加したり、既存のタブを非表示にすることなども可能です。(このあたりは、リボン開発のときと同じ概念です。) また、insertAfterMso=”TabInfo” と記述すると、[情報] タブ (上図参照) の後ろに指定したタブが表示されるようになるので、順番も管理することができます。

なお、ご存じの方も居られるかと思いますが、Office 2007 の頃のコントロールの Id (Control ID) の一覧は、ダウンロードセンター「2007 Office System Document: Lists of Control IDs」にアップされていましたが、Office 2010 の ID 一覧は、リリース前ということもあり、未だのようです。以下の Office 2010 Engineering チームブログに記載されていますが、「Office Developer Center on MSDN」 で順次公開されていくようですので、登場を待ちたいと思います。

http://blogs.technet.com/office2010/archive/2009/11/03/ui-extensibility-in-office-2010.aspx

バックステージの開発詳細については、現時点では、以下の MSDN ドキュメントが参考になります。(検索してみたところ、日本のエンジニアの方の中にも既にこのあたりのノウハウを記述されている方も居られるようですので、是非参考にしてみてください。)

http://msdn.microsoft.com/en-us/library/ee691833(office.14).aspx

次回は、コンテキストメニューのカスタマイズ方法を説明します。(今回は、UI 系の新機能の話だけなので、4, 5 回で終わる予定です。。。)

関連ナンバー

• Visual Studio 2008 による Office 開発 新機能
• Visual Studio 2010 による Office 開発 新機能 (配置編)
• Visual Studio 2010 による Office 開発 新機能 (UI 編)