最新の SharePoint 開発については SharePoint Framework を参照してください。(この開発手法は、古い情報です。)

SharePoint Add-ins 開発

• 概要
• .NET CSOM を使ったプログラミングと認証
• Cross-domain library を使ったプログラミング
• App Part の開発
• List Definition の開発と Client Side Rendering (CSR)
• Remote Event Receiver の開発と Debug
• UI Custom Action の開発 (Ribbon のカスタマイズ)
• Workflow の開発
• On-Premises (SharePoint Server) で動く SharePoint Add-ins の作成 (Authentication)
• クラウド ビジネス アプリ (Cloud Business App)
• Patterns and Practices (PnP) による CSOM 拡張ライブラリー

こんにちは。

SharePoint アドイン (SharePoint Add-ins) では、そのアプリ・モデル (思想) から、これまで Farm Solution (従来型の On-Prem 開発) を使って可能だったいくつかの機能で実装できないものがあります。

下記は、SharePoint の Farm Solution と SharePoint Add-ins における機能実装の可否を表しています。下記以外にも、特に SharePoint Online では、現在、Custom Master Page の登録や、既存の Master Page の変更も推奨されておらず、変わりに CSS やカスタム JavaScript を使ったカスタマイズが推奨されています。(Office 365 に細かな Update が入った場合に対応できなくなるためです。)

そこで、これら標準でサポートされていない機能をサポートする Patterns and Practices (PnP) のライブラリーが追加で提供されており、NuGet でインストールして使うことができます。

本投稿では、この PnP を使った実装のいくつかをピックアップして紹介します。(詳細のコードは Github の Url を記載しましたので、そちらを参照してください。)

なお、ここで紹介する PnP のサンプルを使うには、下図の OfficeDev PnP Core の Nuget package をインストールしてください。
これにより、既存の CSOM (SharePoint の Client Side Object Model) に、必要な拡張メソッド (extension method) がインストールされ、後述する機能を使用できます。

なお、下記のサンプルはすべて Full Control 権限が必要です。現在、Full trust (Full Control 権限) のアドイン (Add-ins) は Office Store に登録できないため注意してください。

補足 : こうした Add-in は App catalog に manual install をおこなうか、あるいは、Full trust の Add-in と協調動作する Add-in は Office Store に登録できるため、Full trust の機能とわけて Office Store に登録し、Full trust で動作する機能の manual install を利用者 (利用企業) に促してください。(利用者は Full trust で動作する Add-in を App catalog などに別途 manual install します。)

Custom Theme を設定するサンプル

https://github.com/OfficeDev/PnP/tree/master/Samples/Branding.Themes

このサンプルでは、Remote App の Page 上から、Host web (サイト) に Theme File (および、関連する Image File 含む) を Upload し、サイトに適用します。PnP Core の UploadThemeFile 拡張メソッドを使っています。

カスタムの CSS の適用とサイト ロゴを変更するサンプル

https://github.com/OfficeDev/PnP/tree/master/Samples/Branding.AlternateCSSAndSiteLogo

上述の通り、サイトの Branding を変更する際、Master Page の直接編集は推奨されておらず、CSS やカスタム JavaScript を使う必要があります。

このサンプルでは、Remote App の Page 上から CSOM を使って、Host web (サイト) に CSS File (関連する Image File 含む) を Upload し、サイト内の Page に適用される CSS の入れ替えとサイト ロゴの変更をおこないます。

2014 年 4 月の CU (Cumulative Update, 累積的アップデート) により、SharePoint CSOM の Web (SPWeb) に AlternateCSS と SiteLogoUrl のプロパティが追加されていて、本サンプルではこれらを使用しています。(On-Prem と Online の双方)

サイトの Page 全体に JavaScript を埋め込むサンプル

https://github.com/OfficeDev/PnP/tree/master/Samples/Core.EmbedJavaScript

このサンプルでは、コードを使って、カスタムの js ファイルの参照 (ScriptLink) を挿入する Custom Action をサイトに登録し、サイト内のページ全体に JavaScript のファイル参照を Injection しています。(上記と同じく、Remote App の Page 上から CSOM を使って実行しています。)

Provisioning Engine

https://github.com/OfficeDev/PnP/tree/master/Samples/Provisioning.Framework.Console

テンプレート (元) となるサイトのデザインなどの情報を XML で抽出し、この XML の定義情報を元に同じデザインと構成でサイトを構築するフレームワーク (ライブラリー) です。(コードによる配置をおこなっています。)

従来のカスタム サイト定義 (Site Definition) やサイト テンプレートの代わりとして、この Provisioning Engine を使用できます。

非同期 Job (Long running operations) のサンプル

https://github.com/OfficeDev/PnP/tree/master/Samples/Core.QueueWebJobUsage

Office 365 の SharePoint Online では、アプリを使ったカスタムの Timer Jobs 登録や、Word Automation Service の利用などの、いわゆる Job に相当する機能を利用することはできません。(このため、長時間かかる操作などでは、タイムアウトの原因にもなります。)

このサンプルでは、Azure WebJob を使用することで、Remote App の Page 上から CSOM を使って非同期 Job を実行します。(このサンプルでは、ドキュメント ライブラリーを作成しています。)

内部では、Azure Storage Queue に Job を登録し、Azure WebJobs を使ってバックグラウンド Job を開始しています。また、access token を取得して、SharePoint に対する結果の書き戻しなどもおこなっています。

サイト作成 (Provisioning) や Remote Event Receiver などとの組み合わせも可能です。

上記では代表的なものをいくつかピックアップしましたが、Github 上のフォルダーには非常に多くのサンプルが載っていますので是非参考にしてみてください。