Go to Qiita Advent Calendar 2024 Top
LoginSignup
29
48

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@y__na_ka_ya_ma

Visual Studioを使用したOfficeアドインの開発環境導入から公開まで

Posted at

はじめに

今日は、Visual Studio 2017を使用して、Officeアドインの開発を行う手順についてまとめてみます。

Office アドインの開発ライフ サイクルに書かれていますように、

  1. アドインの用途を決定します。
  2. アドインのデータおよびデータ ソースを特定します。
  3. アドインの種類を判断し、アドインの目的に最も合致する Office ホスト アプリケーションを特定します。
  4. アドインのユーザー エクスペリエンスとユーザー インターフェイスを設計および実装します。
  5. Office アドイン マニフェスト スキーマに基づく XML マニフェスト ファイルを作成します。
  6. アドインをインストールおよびテストします。
  7. アドインを発行します。

以上の作業が発生します。
ここでは、Excelアドインの作業ウィンドウアドインの公開までの流れをある程度ざっくりと書いてみます。

事前作業

Visual Studioの環境設定を行います。

Visual Studio へ Microsoft Developer Toolsの導入

Visual Studio Installer を起動して、「変更」ボタンを左シングルクリックします。

fig2.png

ワークロード内にある、「Office/SharePoint 開発」 にチェックを入れて、右下の「変更」ボタンを左シングルクリックします。
既にチェックが入っている場合は、「Office/SharePoint 開発」が導入済みです。
これで、Visual Studio 2017のOffice/SharePointアドインの開発環境がそろいました。

Officeアプリケーション、Officeアドインの種類を決定

どのOfficeアプリケーションに、どのOfficeアドインの種類を使用するかを決定します。
Officeアプリケーションは、

  • Excel
  • Outlook
  • PowerPoint
  • Word

から選択します。
また、Officeアドインの種類、

  • 作業ウィンドウアドイン
  • コンテンツアドイン
  • Outlookアドイン

を決定するのですが、Officeアプリケーションとアドインの関係は以下のとおりです。

Officeアプリケーション コンテンツアドイン Outlookアドイン 作業ウィンドウアドイン
Excel 2013 以降 OK OK
Excel Online OK OK
Excel for iPad OK OK
Outlook 2013 以降 OK
Outlook for Mac OK
Outlook Web App OK
デバイス用 OWA OK
PowerPoint 2013 以降 OK OK
PowerPoint Online OK OK
Word 2013 以降 OK
Word Online OK
Word for iPad OK

例えば、OfficeアプリケーションをExcelとした場合は、

  • コンテンツアドイン
  • 作業ウィンドウアドイン

のどちらかを選択することになります。
更に、全てのOfficeアプリケーションで、動作することが必須条件となりますので、
OfficeアプリケーションをExcelとした場合は、

  • Excel 2013 以降 または Excel 2016 以降
  • Excel Online
  • Excel for iPad（Apple 開発者 IDをお持ちの場合）

この全てでExcelアドインが動作しなければなりません。

ここでは、Excelアドインの作業ウィンドウアドインをOfficeストアに公開することを例に取り上げて進めます。

iPad で Office アドインを使用できるようにする

iPad で Office アドインを使用できるようにするに書かれておりますが、Apple 開発者 IDをお持ちでしたら、iPad版のOfficeアドインもリリースできますので、より多くの方に利用していただける可能性が高まります。
iPad で Office アドインを使用できるようにする方は、販売者ダッシュボードへアドインの提出を行う際にApple 開発者 IDが必要になります。

サーバー環境の検討

Office アドインに必要なファイル

  • マニフェスト:XML形式
  • Webページ（ HTML、CSS、JavaScript等のファイル）

これらを、適切なサーバーに展開することになります。
ここでは、Microsoft Azure上に展開する方法で進めます。
Azure使用のランニングコストも念頭に置いてOfficeアドインの開発を行うことも必要かと思います。

詳細は、Office アドイン プラットフォームの概要、Office アドインを実行するための要件をご覧ください。

アドイン開発のベストプラクティス

アドイン開発のベストプラクティスにするべきこと、してはいけないことが書かれています。
UIの作法のようなものです。
アドイン（Officeアプリケーションの中に加える便利機能）なので、デザインの統一性を望んでいるのだと思います。

開発準備のまとめ

Excelにどんな機能（例えば、リボンに無い機能）を加えるとどのように便利になるかを検討して、どのように具現化するかを考えて、アドインの開発を始める。といったことを事前にイメージすると良いかもしれません。

以上で、開発のための準備ができました。

開発の開始

新しいプロジェクトの作成

Visual Studio 2017を起動して、［ファイル(F)］＞［新規作成(N)］＞［プロジェクト(P)］選択して、
新しいプロジェクトを開きます。
下図のように、「Office/SharePoint」を左シングルクリックするとOfficeアドイン（〇〇Webアドイン）のみならず、VSTOアドイン等も表示されます。

fig3.png

最初、「2016VSTOアドイン」と表示されているので、Visual StudioならC#でOfficeアドインの開発ができるんだ！と錯覚し、2016VSTOアドインで、開発を行い、販売者ダッシュボードでOfficeアドインの申請を行おうとしたら、マニフェストのアップロード？？XML形式の該当するマニフェストファイルはプロジェクト内に無いし。。。
リストに表示されているので、Officeアドインは、「Webアドイン」で開発しなければならない。と気付きませんでした。。

このようなことが無いように、特に初めてOfficeアドインの開発を行う方は、次の図のように、「アドイン」を左シングルクリックして、絞り込みを行うと分かりやすいかと思います。

fig4.png

この「アドイン」に表示されているのが、Officeアドインのプロジェクト一覧になります。
Officeストアに表示されているOfficeアドインの開発を行う方は、このExcel Web アドイン、Word Web アドイン、Outlook Web アドイン、 PowerPoint Web アドイン、 SharePoint アドインを新しいプロジェクトに選びます。
ここではExcel Web アドインを選びます。

Visual C# 版とVisual Basic版がありますが、HTML、CSS、JavaScript等に関してはどちらも同じですが、Visual C# 版には、Assemblyinfo.csがあるので、どこかで必要になるかもしれないので、Visual C# 版の方がよろしいかと思います。

Taskpane等の日本語作成

サンプルプログラムのマニフェストファイルには、作業ウィンドウで表示される文面が予め記述されています。
Excel 2016でしたら、

fig37.png

この部分や

fig38.png

この部分です。

ExcelWebAddin1.xml
      <!-- 短い文字列の最大文字数==125。 -->
      <bt:ShortStrings>
        <bt:String id="Contoso.TaskpaneButton.Label" DefaultValue="Show Taskpane" />
        <bt:String id="Contoso.Group1Label" DefaultValue="Commands Group" />
        <bt:String id="Contoso.GetStarted.Title" DefaultValue="Get started with your sample add-in!" />
      </bt:ShortStrings>
      <!-- 長い文字列の最大文字数==250。 -->
      <bt:LongStrings>
        <bt:String id="Contoso.TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane" />
        <bt:String id="Contoso.GetStarted.Description" DefaultValue="Your sample add-in loaded succesfully. Go to the HOME tab and click the 'Show Taskpane' button to get started." />
      </bt:LongStrings>

マニフェストファイルの127行目から137行目までが該当部分です。

fig36.png

Officeアドインの公開範囲が日本限定でしたら、日本語に変えておくと利用者に分かりやすいかと思います。

サポートURLの記入

マニフェストファイルの25行目はデフォルトで、

ExcelWebAddin1.xml
  <SupportUrl DefaultValue="http://www.contoso.com" />

となっておりますので、サポートURLを変更します。
この部分を変更しなくても、販売者ダッシュボードへ提出できてしまいますが、承認されませんので、変更をお忘れなく。

Buttonファイルの更新

fig35.png

  • Button16x16.png
  • Button32x32.png
  • Button64x64.png

を作って、それぞれのファイルを加工します。
例えば、Button16x16.pngを左ダブルクリックして、このエディターで直接ボタンを作ることができます。
別のエディター等でボタンファイルを作った場合は、Imagesフォルダー内にドラッグして上書きします。
Visual Studioのソリューションエクスプローラー上でドラッグして、ボタンファイルの上書きを行います。
エクスプローラーで、Imagesフォルダーに直に上書きしても反映されないようです。

プログラミング

Office ストアに提出されたアプリとアドインの検証ポリシー (バージョン 2.1)に適合する必要があります。
この検証ポリシーをクリアしなければ、承認されませんので、しっかりと把握してプログラミングすることになります。

Visual Studioの［開始］ボタンで動作確認を行いますと、Localhost上にWebページが展開され、作業ウィンドウアドインの動作確認ができます。

経験では、Excel 2016で動作しても、Excel Onlineでは動作しないことがありましたので、忘れずにExcel Onlineでも動作確認を行っていただきたいところです。

Excel Onlineでは、公開しないといった選択肢はありませんので、
Excel Onlineで動作しなければ、承認されません。

Excel Onlineでの動作確認は、次項目のWebページの展開を行って、

  • 信頼できるアドインカタログにマニフェストファイルを保存して（Excel 2016等での）確認
  • SharePoint管理センターのアプリカタログ（Office用アプリの配布）上にマニフェストファイルをアップロードしてExcel Onlineでの確認

を行っていただき、実際の状態を動作確認するのがよろしいかと思います。

Webページの展開

Microsoft Azure で Office アドインをホストするを行います。

fig9.png

上図のように、（この場合は、ExcelWebAddin1Webを）右シングルクリックして、発行を選びます。
下図のよう表示されます。

fig10.png

初めてですとOfficeアドインと表示されないので、戸惑うかもしれませんが、
Microsoft App Service(A)、新規作成を選択し、［発行］を押します。

fig11.png

App Nameは、ファイル名＋日時で自動生成されますが、変更もできます。
初めての場合は、リソースグループがありませんので、リソースグループの［新規作成］を押します。

fig12.png

例えば、上図のようにグループ名を設定します。
App Service プランは、自動設定されます。こちらも念のため、［新規作成］を押して設定状況を確認します。

fig13.png

ここで確認が必要なのは、本番環境では、SizeがS1以上である必要があります。

fig14.png

念のため、左側にある［サービス］を押します。

fig15.png

上図の場合、データベースサーバーを使用していない状況です。
下段の「選択済みおよび構成済みのリソース」右端に赤の×マークが付いていますが、問題ありの表示では無くて、削除するためのボタンとなっています。

設定が終わりましたら、［作成］を押します。

fig16.png

発行が完了しましたら、Web発行アクティビティで発行の成功を確認できます（上図）。
これで、Webページの展開ができましたが、マニフェストファイルを見ると下図のとおりです。

fig17.png

23行を見ると分かりますが、現在のマニフェストファイルは、インターネット空間のWebページにアクセスしません。
なので、次の作業が必要です。

マニフェストファイルの加工

Office アドインを発行するにありますように、Officeアドインを発行するためのオプションは、以下のとおりです。

種類 Officeストア 企業のアドインカタログ 共有フォルダーのアドインカタログ Exchangeサーバー
作業ウィンドウアドイン OK OK OK
コンテンツアドイン OK OK OK
Outlookアドイン OK 　　 OK

Officeストアでの公開するには、マニフェストファイルを加工して、販売者ダッシュボードへアップロードする作業があります。

ソリューションエクスプローラーの上から２番目のExcelWebAddin1を右シングルクリックして、公開を左シングルクリックします。

fig18.png

下図のアドインの発行に関する画面が開きます。
［Webプロジェクトを配置する］を押します。

fig19.png

発行「プレビュー」の画面が表示されますが、プレビューの二つ上の項目の［接続］を押します。

fig20.png

下図のように、宛先 URL(L)がhttp://...となっていましたらhttps://...にします。
［接続の検証］を押します。下図は、検証結果の画面です。

fig21.png

［次へ］を押します。今回の例ではデータベースを使用していませんので、下図の画面になります。

fig22.png

［次へ］を押すと先ほどの「プレビュー」画面になりますので、中央にあります［プレビューの開始］を押します。下図が変更反映中の画面です。

fig23.png

変更の反映が完了しますと、下図のように表示されます。

fig24.png

［発行］を押します。これでWebページの展開が完了しました。

アドインをパッケージ化する

マニフェストファイルを完成させるために次の作業を行います。
下図の画面で［アドインをパッケージ化する］を押します。

fig25.png

下図の画面がポップアップしますので、URLがhttps://...となっていることを確認して［完了］を押します。

fig26.png

マニフェストファイルが完成しますと下図のように、完成したマニフェストファイルのフォルダーが開きます。

fig27.png

このマニフェストファイルをメモ帳で開いてみると

fig28.png

SourceLocation DefaultValue=などで、URLがWebページとなっていることで、マニフェストファイルが完成したことを確認できます。

マニフェストファイルの検証

下図の画面右下の部分にある、マニフェストファイル［…］をおして、先ほど開いたフォルダーのマニフェストファイルを選択して、［検証チェックを実行する］を押します。

fig25.png

マニフェストファイルに問題がなければ、下図のように表示されます。

fig29.png

これで、全てのファイルが完成しました。

Office ストアに Office アドインと SharePoint アドインおよび Office 365 Web アプリを提出する

先ほども書きましたが、Office ストアに Office アドインと SharePoint アドインおよび Office 365 Web アプリを提出するには、検証ポリシーに合格する必要があります。

fig30.png

販売者ダッシュボードにログインしてOffice［続行］を押します。

fig31.png

［新しいアプリの追加］を押します。

fig32.png

Officeアドインを選択して［次へ］を押します。

fig33.png

マニフェスト［＋］を押します。マニフェストファイルを選択して［OK］を押すとマニフェストファイルの簡易検証が行われます。
ここで、注意していただきたいのは、マニフェストファイルが複数存在しているので、間違いの無いよう慎重にアップロードしてください。

fig34.png

上図では、「マニフェストファイルの確認に合格しました。」と表示されていますが、
SourceLocation DefaultValue=などで、URLがWebページとなっているマニフェストファイルを必ず間違えずにアップロードしてください。
Visual Studioでの動作確認ではLocalhostにWebページを生成するので、ソリューションエクスプローラーにあるマニフェストファイルは
SourceLocation DefaultValue="~remoteAppUrl/Home.html"となっていますので、お間違えの無いように。

今は改善されているかもしれませんが、
SourceLocation DefaultValue="~remoteAppUrl/Home.html"となっていても、「マニフェストファイルの確認に合格しました。」と表示された経験があります。

これから先は、各設定となりますので、省略させていただきます。

結果

Officeアドインが承認されなかった場合

Officeアドインが承認されなかった場合は、Seller Dashboard Teamから
件名：Microsoft 販売者ダッシュボード: アプリの承認について推奨される変更
の電子メールが届きます。

fig40.png

ダウンロードしたPDFファイルに問題個所がどの検証ポリシー番号に該当するか等が記載されています。問題となっている部分の画面が貼り付けられて示してくださる時もあります。問題個所を修正して、再提出できます。

Officeアドインが承認された場合

Officeアドインが承認された場合は、Seller Dashboard Teamから
件名：Microsoft 販売者ダッシュボード: アプリが承認されました
の電子メールが届きます。

fig39.png

参考

Office アドインの開発ライフ サイクル
iPad で Office アドインを使用できるようにする
Office アドイン プラットフォームの概要
Office アドインを実行するための要件
アドイン開発のベストプラクティス
Office ストアに提出されたアプリとアドインの検証ポリシー (バージョン 2.1)
Microsoft Azure で Office アドインをホストする
Office アドインを発行する

おわりに

Officeアドインの開発で、検索結果を読んでいくと、知らぬ間にVSTOやVBAのコンテンツを読んでいたりすることがあるので、開発環境の構築から公開までをまとめてみました。
かなりの長文になってしまいました。すみません。
Officeアドインの開発に興味を持ち、開発にチャレンジする方が一人でも多くなれば、Officeアドインがより痒い所に手が届く便利機能として充実していくと感じています。

最後までお読みいただきありがとうございました。

29
48
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
29
48

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?