環境 :
Visual Studio 2013

こんにちは。

Office 用アプリ (App for Office) や SharePoint 用アプリ (App for SharePoint) で外部のプロジェクトを使いたい場合があります。典型的なパターンは、Office 用アプリ (App for Office) で SPA (Signle Page Applications) を使用するような場合ですね。(Visual Studio 2013 からは、App for Office のプロジェクト テンプレートとして ASP.NET MVC も使用できますが、App for Office と相性の良い SPA は入っていません。)
従来も知識があればこうした変換は可能でしたが、Visual Studio 2013 では、この変換がさらにやりやすくなっています。むしろ、今後は、既定のプロジェクトにこだわらず、自分で好きなテンプレートを組み込んで開発してください。

今日紹介した Tips ですが、他のデモに埋もれてバラバラに紹介してしまったので、そのあたりを以下におさらいしておきます。(以下、App for SharePoint についても記載します。)

NuGet Package

まず、内部で使用されているパッケージを説明します。
Office 用アプリ (App for Office) と SharePoint 用アプリ (App for SharePoint) で使用するライブラリーは、NuGet パッケージとして単独で組み込めます。(以下に説明します。)

まず、構築している Web プロジェクト (Web Application) を App for Office の Web プロジェクトとして実装する場合は、Office JavaScript API (Microsoft.Office.js) のパッケージを組み込むと便利です。
Office Store に申請するアプリケーションでは、CDN 上の office.js (https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js) を使用する必要がありますが、開発の際には、デバッグの用途で office.js がローカルにあると便利ですし、office.js のインテリセンス (intellisense) も必要でしょう。このパッケージを組み込むと、こうしたファイルをプロジェクトにインストールします。(もちろん、App for Office のプロジェクトを新規作成すると、これらが組み込まれた Web プロジェクトが新規作成されます。)

補足 : なお、デモ中にインテリセンスをごちゃごちゃと修正しましたが、これについては、「Visual Studio の JavaScript インテリセンス (Intellisense)」に役に立つ投稿が記載されていますので、是非参考にしてみてください。Office 用アプリ (App for Office) の場合には、_officeintellisense.js、office.js の順番で参照してください。

また、Web プロジェクトを SharePoint 用アプリ (App for SharePoint) に対応させるには、App for SharePoint Web Toolkit (AppForSharePointWebToolkit) のパッケージをインストールします。
このパッケージをインストールすると、CSOM を使用する際に使う TokenHelper、SharePointContext、さらに、ASP.NET MVC 用の SharePointContextFilter など一連のヘルパー ライブラリーがプロジェクトにインストールされます。

なお、ご紹介したように、Visual Studio 2013 以降の SharePointContext はオンプレミス (SharePoint Server) にも対応しています。

変換方法 1 : 変換メニューを使用する

では、SPA (Signle Page Applications) などで構築したアプリケーションを Office 用アプリ (App for Office) や SharePoint 用アプリ (App for SharePoint) のプロジェクトに変換する方法について紹介します。
1 つ目は、本日のデモでもお見せした専用のメニューを使用した方法です。

従来、Windows Azure SDK を入れると [Windows Azure クラウドサービス プロジェクトへ変換] (Convert to Windows Azure Cloud Service Project) メニューが表示され、単純な Web プロジェクトを Windows Azure Cloud Service のソリューションに変換できました。
Visual Studio 2013 では、この変換メニューが Office / SharePoint のアプリでも使用できます。

試しに、Visual Studio 2013 で SPA (Signle Page Applications) の Web プロジェクトを新規作成し、ソリューション エクスプローラーでプロジェクトを右クリックして、[変換] (Convert) – [Office 用アプリ プロジェクトへの変換 …] (Convert to App for Office Project …) を選択してみてください。

Office 用アプリ (App for Office) のプロジェクト作成時と同様のウィザードが表示され、SPA (Signle Page Applications) のプロジェクトと関連付いた Office 用アプリ (App for Office) のソリューションに変換されます。
そして、SPA のプロジェクトには、上述の Office JavaScript API (Microsoft.Office.js) がインストールされます。

SharePoint 用アプリ (App for SharePoint) においても同様に変換可能です。

変換方法 2 : App for Office (SharePoint) プロジェクトの [Web Project] プロパティを使用する

2 つ目は、これもデモで使用した Office 用アプリ (App for Office) や SharePoint 用アプリ (App for SharePoint) のプロジェクトのプロパティ (project property) を使用する方法です。

例えば、Visual Studio 2013 を使用して、Office 用アプリ (App for Office) のプロジェクトを新規作成し、作成されたソリューションに SPA (Signle Page Applications) などの Web プロジェクトを追加します。(外部から既存のプロジェクトを追加しても構いません。) そして、元となる Office 用アプリ (App for Office) のプロジェクト プロパティの [Web プロジェクト] (Web project) を下図の通り変更してみてください。

ただ単にプロジェクトの関連付け (マニフェスト) が変更されるだけでなく、上述の Office JavaScript API (Microsoft.Office.js) が Web プロジェクトにインストールされます。以降は、いっさいの設定変更は不要で、Office 用アプリ (App for Office) のプロジェクトの 1 つとして SPA のプロジェクトを開発できます。

こちらの方法も、SharePoint 用アプリ (App for SharePoint) においても同様に使用可能です。

変換したら、あとは、IDE の新機能 (本日紹介したワークフロー・デバッグ、プロパティを使ったホスティング方法の切り替え、など) が使用できます。もちろん、Office.initialize、SharePointContextFilter など、必要な実装は開発者のみなさん自身で追加してくださいね。
地味ですが、現実の開発で、かなり活用できるでしょう。

本日のセッションでスキップしたデモ (Microsoft Conference 2013「Office 用アプリ / SharePoint 用アプリの開発 “実践”！」)

かなりデモを飛ばしました。以下のデモができなかったのでブログで補足しておきます。(15 分延長でも伝えきれなかった。。。今日は、一人で反省会です。)

• クロスドメイン対策ですが、ASP.NET Web API を使用した場合、CORS と JSONP はパッケージを使用して容易に対応可能です。(このため、是非、ASP.NET Web API を使用してください。)
  XDM だけが、唯一対応が困難な手法になります。
• Office 用アプリにおける Paging や Carousel UI などの実装の必要性について説明しましたが、実は、OData (WCF Data Services や ASP.NET Web API で可能) と、datajs または Breeze.js などの OData 対応のライブラリーを組み合わせると、こうした実装が容易に可能です。
  是非、ネット上のドキュメントなどを参考にしてみてください。
• ASP.NET MVC のデモでお見せした Cookie 問題ですが、実は、Visual Studio 2013 の SPA (Single Page Application) を使用すると、同じ認証 (個人ユーザーアカウント認証) を使用していてもこの問題が回避できます。(今日、私が実施したデモと同じことを、今度は SPA を使ってやってみてください。ちゃんと動くのです。)
  理由は、SPA の個人ユーザーアカウント認証では Cookie を使用していないためです。
  SPA のテンプレートは、こうした点以外にも さまざまな理由から、”今風な開発” に最適化されています。
• リモート イベント レシーバーを使用したデバッグの場合は、本日お見せした手法以外にも、Windows Azure 上に配置して Remote Debug をおこなうという手法もあります。(手順については こちら を参照。)
• 上述の通り、「App for SharePoint Web Toolkit」を使うことで、Office 用アプリでお見せした方法と同様、好みのテンプレートを使って App for SharePoint に組み込めます (上記参照)。
  また、オンプレ (SharePoint Server) を使った開発も、以前より簡単にできるようになっています。
• Visual Studio 2013 からは、新しくクラウド ビジネス アプリというテンプレートが含まれています。(こちら を参照。技術ひろば.net などでも、よりディープな内容がディスカッションされています。。。)

時間を延長し、失礼いたしました。