ユーザー (Citizenship Developer) による UI 開発については Power Apps、最新の 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 拡張ライブラリー

こんにちは。

前回の Build で登場し、瀬尾さんも「技術ひろば .net」で解説していたクラウド ビジネス アプリ (Cloud Business App) のプロジェクト テンプレートが、Visual Studio 2013 RC で既定で含まれるようになりました。
このテンプレートは、データ ドリブンで、より迅速に、簡易に (コードを記述することなく)、必要な業務アプリケーションを展開したい人 (企業) 向けのソリューションで、作成したアプリケーションは SharePoint Add-ins (SharePoint アドイン, 旧 App for SharePoint) として配置されます。(Cloud hosted です。発行時に、Autohosted か Provider-hosted か選択できます。) CSV / ISV 向けというよりは、企業アプリを展開する情報システム向けのテンプレートとお考えください。

現在、SharePoint Add-ins (旧 Apps for SharePoint) を構築できるツールとしては、Microsoft Access、LightSwitch、Napa、Visual Studio がありますが、このテンプレートは、LightSwitch をベースとした新しいテンプレートになります。

簡単に利用方法を紹介しておきます。(詳細は、きっと、「技術ひろば .net 」で瀬尾さんが解説してくれますので、ここでは省略します。)

構築手順

Visual Studio 2013 のプロジェクト テンプレートで、[クラウド ビジネス アプリ] を選択します。
なお、ウィザードで、デバッグに使用するサイトを選択する画面が表示されるので、SharePoint Online の開発用サイトを選択してください。(デバッグでは、サイド ローディングが必須ですので、必ず開発サイトを作成して使用してください。)
なお、デバッグ中は、Azure ではなく localhost にホストされ、SharePoint サイトにこの localhost のアプリ (App) がインストールされます。(通常の SharePoint Add-ins の開発と同じ考え方です。)

まず、テーブルを作成してみましょう。
既に作成済の外部のデータベースを参照することもできますが、今回は新規に作成します。(後述しますが、作成したテーブルは、Autohosted の場合は、dacpac としてパッケージ化され、アプリのプロビジョニングと同時に SQL Database にプロビジョンイングされます。)
表示されるスタート画面で、[新しいテーブルの作成] をクリックします。

テーブルのデザインをおこなう画面が表示されるので、ここに、テーブル名や、必要なカラムなどを定義します。(この定義ファイルを OrderItemSet.lsml とします。)

つぎに、このテーブルを使用する画面をデザインします。
上図下部の [HTMLClient] をクリックし、上部に表示される [追加] の [画面…] ボタンを押します。すると、下図のように、新しい画面を追加するためのダイアログが表示されるので、今回は、[データの参照画面] を選択し、[画面データ] として、上記で作成した OrderItem のテーブル (OrderItemSet) を選択します。

画面の定義が作成され、下図の通り、画面をデザインするための画面が表示されます。(BrowseOrderItemSet.lsml とします。)
下図の通り、画面内には、すでに、アイテム一覧を表示するためのリストが挿入されています。(あとから、こうしたコンポーネントを追加することもできます。)

動作確認の際には、アイテムの挿入 (追加) も必要なので、以降で、最低限の機能を付与していきましょう。

上図の [コマンド バー] の [追加] をクリックして機能を追加すると、画面下部のコマンドの場所にそれらしいボタンが配置されます。(あとで、この画面イメージを添付します。)
しかし、その前に、追加や編集をおこなうための画面を作っておく必要があるので、再度、OrderItemSet.lsml (テーブルの定義画面) の [HTMLClient] をクリックして、[追加] の [画面…] ボタンを押します。今度は、OrderItem の追加 / 編集用の画面を追加します。(下図参照)

再度、BrowseOrderItemSet.lsml (上図) に戻って、[コマンド バー] の [追加] (上図参照) をクリックします。
下図のダイアログボックスが表示されるので、既存のメソッドの中から、OrderItemSet の [addAndEditNew] (さきほど作成した画面) を選択して [OK] ボタンを押します。

さらに [追加] をクリックし、今度は、選択されたアイテムの編集をおこなえるよう、既存のメソッドの中から、OrderItemSet の [editSelected] を選択してコマンドを追加します。

以上で、アイテムの追加と編集の 2 つのコマンドの追加が完了しました。

実行結果と内部動作 (概要) について

では、F5 を押してデバッグ実行してみましょう。

SharePoint Online のログイン画面が表示され、通常の SharePoint Add-ins の開発と同様、信頼設定 (Trust) のための画面が表示されますので、[信頼する] ボタンを押します。

配置に成功すると、下図の通り、Web の画面が表示されます。

画面右下の [Add Order Item] ボタンをクリックすると、下図の通りポップアップが表示され、アイテムの追加が可能です。

追加された選択すると、下図の通り、[Edit Order Item] コマンドも表示され、追加したアイテムの変更が可能です。

どのように動いているか気になると思いますので、簡単に内部動作について記載しておきましょう。

LightSwitch で定義したこれらの情報 (テーブル、画面など) は .lsml の拡張子を持った XML の定義ファイルとして保存され、発行の際にコードに展開されます。
定義ベースで作成していきますが、テーブルにサーバー側のコード (トリガー) を記述したり (C# など .NET のコードです)、クライアント側のコード (JavaScript) を記述することが可能です。また、画面に独自の処理 (JavaScript) を追加することもできます。

テーブルは、前述の通り、Autohosted では SQL Database (Azure 上のデータベース) にプロビジョンされます。また、Provider-hosted では、あらかじめ SQL Database などにプロビジョンをおこない、発行時にそのデータベースへの接続文字列を設定します。

また、認証についても、Office 365、Azure Active Directory と統合されているので、Azure Active Directory にあらかじめ必要なセットアップをおこなっておけば OK です。

SharePoint 連携など、ここで紹介できなかった内容も含め、今後も「技術ひろば .net」で瀬尾さんが情報発信されると思いますので、興味ある方は是非！

Business Apps, Cloud Apps, and More at Build 2013
http://blogs.msdn.com/b/somasegar/archive/2013/06/27/build-2013-day-2.aspx

瀬尾さんスライド : Office 365 勉強会で「Cloud Business App」についてお話ししました
http://yseosoft.wordpress.com/2013/09/07/office-365-%E5%8B%89%E5%BC%B7%E4%BC%9A%E3%81%A7%E3%80%8Ccloud-business-app%E3%80%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%8A%E8%A9%B1%E3%81%97%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F-8%E6%9C%8831/

※ 変更履歴 :

2015/05/05  App for SharePoint (SharePoint 用アプリ) を SharePoint Add-ins (SharePoint アドイン) に名称変更