アドバンスド · ソリューション株式会社 及川紘旭
はじめに
クラウドビジネスアプリをご存知でしょうか？
クラウドビジネスアプリはタッチデバイス対応のレスポンシブWebデザインなSharePointアプリを、素早くコーディングレスで構築するためのアプリケーションの仕組みです。
開発者向けに分かり易く言うと、クラウドビジネスアプリはLightSwitchというRAD(Rapid Application Development)のための仕組みを、SharePointアプリの開発に利用できるようにしたVisual Studioのプロジェクトテンプレートの一つです。
登場してしばらく経ちますが、まだまだ情報量が少ないのが実状ですので、本記事でクラウドビジネスアプリを使ったSharePointアプリ開発の基本をご紹介したいと思います。
なお、クラウドビジネスアプリの開発にはVisual Studio 2013が必要になります。
Visual Studioを使うから開発者向けと思うかもしれませんが、コーディングレスで開発できるので、開発経験が無い方もぜひ試してみてください。
※Visual Studioは無償のCommunityエディションでもクラウドビジネスアプリの開発が可能です。
今回題材にするアプリ
本記事で題材にするアプリについて説明します。
今回はクラウドビジネスアプリの基本を理解していただくために、SharePoint Onlineのサイト上にあるお知らせリストに対して、アイテムの参照、登録、更新、削除を行うシンプルなアプリを開発します。
クラウドビジネスアプリはSharePointだけでなく、データベースやWeb APIと連携することもできますが、本記事はSharePointに関するTipsですので、SharePointとの連携を題材にします。
完成イメージは下図の通りで、Webパーツとしてページの中に組み込まれるのではなく、ページ全体がクラウドビジネスアプリの画面になります。
一覧画面 (SharePointのビューページに相当)
登録画面 (SharePointのアイテム新規登録ページに相当)
なお、今回は開発環境でのクラウドビジネスアプリの開発の流れまでをご紹介します。
最終的に運用環境で利用するためには、プロバイダーホスト形式のSharePointアプリと同様、Microsoft AzureやオンプレのWebサーバーを準備した上で、アプリケーションのデプロイを行う必要があります。
本記事はクラウドビジネスアプリの開発に特化した内容を取り扱うため、プロバイダーホスト形式のSharePointアプリのデプロイ方法については、MSDNの記事などをご参照ください。（本記事の最後に参考サイトのリンクを掲載しています。）
それでは早速クラウドビジネスアプリを開発しましょう。
クラウドビジネスアプリを開発するための準備
クラウドビジネスアプリの開発には、「開発者向けサイト」のテンプレートから作成したサイトコレクションが必要になるため、SharePoint管理センターから新規作成します。
SharePoint Onlineの管理権限を持っていない方は、Office 365の試用版をご利用ください。
Office 365試用版では、無償で30日間、SharePoint Onlineを利用できます。
サイトが作成された後、お知らせリストをサイトに追加します。
ここで注意が必要です。
クラウドビジネスアプリはSharePointの書式付複数行テキストに対応していません。
従って、お知らせリストの本文列は書式なしの複数行テキストに変更する必要があります。
今後のバージョンアップで書式付複数行テキストにも対応してもらいたいところですね。
続いて、Visual Studio 2013を起動し[新しいプロジェクト]をクリックします。
[新しいプロジェクト]ダイアログが表示されるので、左ペインのツリーから[Office/SharePoint]をクリックし、中央ペインの[クラウドビジネスアプリ]をクリックします。
その後、[名前]、[場所]、[ソリューション名]を指定し、[OK]ボタンをクリックします。
※今回はサンプルなので上記入力項目はすべてデフォルト設定のまま進めます。
続いて[新しいクラウドビジネスアプリケーション]ダイアログが表示されるので、[アプリのデバッグに使用するSharePointサイト]に、サイトのURLを入力し[完了]ボタンをクリックします。
しばらくすると、クラウドビジネスアプリのプロジェクトが作成されます。
これで準備は整いました。
いよいよ開発を始めますが、その前に開発の流れを簡単に説明します。
クラウドビジネスアプリの開発の流れは、
① データソースを決める
② 画面を作る
という2段階の手順を、専用のエディタを使って行います。
その他、複雑な業務ロジックを組み込む場合や、画面デザインをデフォルトのデザインから変更したい場合は、C#やJavaScriptでコーディングをします。
クラウドビジネスアプリの開発 –データソースを決める–
まずは今回利用するデータソースを決めます。
今回はサイトに追加したお知らせリストがデータソースとなります。
SharePointのリストをデータソースとする場合は、Visual Studioの左ペインの[外部データソースにアタッチ]をクリックします。
[データソースのアタッチウィザード]が起動します。
[アプリケーションがデータを取得する場所]から”SharePoint”をクリックし、[次へ]ボタンをクリックします。
続いて、SharePointサイトのアドレスと認証方法を指定します。
SharePoint Onlineに接続する際には、認証の種類は[ユーザーIDを自動的に選択する]をチェックする必要があります。
アドレスと認証の種類を指定したら、[次へ]ボタンをクリックします。
次に、下図の画面が表示されるので、[お知らせ]をチェックし、[完了]ボタンをクリックします。
下図の警告画面が表示されるので、そのまま[続行]ボタンをクリックします。
これで、データソースとしてお知らせリストが追加されました。
クラウドビジネスアプリの開発 –画面を作る–
次にお知らせリストの参照、登録、更新、削除をするための画面を作ります。
[ソリューションエクスプローラー]から”HTMLClient”と書かれたノードを右クリックし、[画面の追加]をクリックします。
[新しい画面の追加]ダイアログが表示されるので、以下の通り入力し[OK]ボタンをクリックします。
・[画面テンプレートの選択]は”共通の画面セット”を選択
・[画面セット名]は”お知らせ”と入力
・[画面データ]は「サイト名Data.お知らせ」を選択
※サイト名の部分は、お知らせリストが設置されているサイトのタイトルが表示されます。
これでお知らせリストの参照、登録、更新、削除用の画面が作成されました。
[ソリューションエクスプローラー]を見ると、”Screens”の下にAddEdit、Browse、Viewと書かれた拡張子「lsml」のファイルが追加されているのが分かります。
AddEditが追加、更新画面、Browseが一覧画面、Viewが参照と削除の画面になります。
クラウドビジネスアプリの開発 –画面をカスタマイズする–
続いて画面を少しカスタマイズします。
今回はお知らせリストを対象としているので、お知らせリストとして必要なタイトル、本文、有効期限の列のみユーザーが入力を行えるようにし、その他の列は出力のみにします。
[ソリューションエクスプローラー]から”AddEditお知らせ.lsml”をダブルクリックします。
すると左ペインにAddEditお知らせ画面の入力項目がツリー構造(下図、赤枠内)で表示されます。
この画面がクラウドビジネスアプリの画面エディタとなります。
画面の入出力項目がこのようなツリー構造で示され、開発者は入出力項目の増減やコントロールの種類の変更、画面上の配置場所の変更を行うことができます。
ツリーには、コンテンツタイプ、登録者、更新者が表示されていますが、これらの項目はSharePointが自動的にセットする項目なので、AddEditお知らせ画面には不要な項目となります。
画面から不要な項目を削除する場合は、削除したい項目名を右クリックして[削除]をクリックします。
コンテンツタイプ、登録者、更新者を削除し、AddEditお知らせ画面は下図の通りとなりました。
以上でカスタマイズ完了です。
クラウドビジネスアプリの開発 –実行–
これで開発は完了したので、実行して動作を確認してみましょう。
メニューから[デバッグ]→[デバッグ開始]をクリックするか、キーボードの[F5]キーを押下してください。
しばらくするとビルドが完了し、ブラウザが起動します。
ブラウザが起動するとまず初めにアプリケーションを信頼するかどうかを問うページが表示されます。
ここで[信頼する]をクリックすることで、アプリがSharePoint Onlineのサイトにインストールされます。
続いて、クラウドビジネスアプリの一覧画面が表示されます。
アイテムが何も登録されていないため、一覧が表示されるのではなく「No items」というメッセージが表示されています。
ページ右下の[Add]ボタンをクリックしアイテムを登録してみましょう。
[Add]ボタンをクリックするとお知らせのアイテム登録画面がダイアログ表示されます。
各項目を入力し右上のフロッピーディスクマークのボタンをクリックするとアイテムが登録されます。
続けて数件アイテムを登録してみてください。
一覧画面には登録したアイテムがタイル状に表示されます。
タイルをクリックすると、参照画面が表示されます。
次にクラウドビジネスアプリのブラウザを閉じ、SharePointサイトを開いてお知らせリストの状態を見てみましょう。
先ほどクラウドビジネスアプリから登録した内容が無事反映されています。
アイテムの参照ページを開くとタイトル以外の列も登録されていることが確認できます。
作成者、更新者については、標準のSharePointとは少々表示内容が異なりますが、データとしては無事登録できています。
最後にもう少しカスタマイズをしてみましょう。
まずは、登録画面の本文列を複数行テキストに変更します。
AddEditお知らせ画面を開き、ツリーの本文の左にある[▼]をクリックし、[テキスト領域]を選択します。
次に一覧画面の表示をタイル形式ではなく、テーブル形式で表示するように変更します。
Browseお知らせ画面を開き、ツリーのタイルリストの右にある[▼]をクリックし、[テーブル]をクリックします。
カスタマイズが完了しました。
再びデバッグを開始します。
デバッグを開始し一覧画面を表示します。
一覧の表示形式がテーブル形式に変更されました。
続いて[Add]ボタンをクリックします。
本文列の縦幅が広くなり、複数行テキストが入力できるようになりました。
まとめ
本記事では、クラウドビジネスアプリを使ってSharePointのリストを操作する基本的な方法をご紹介しました。
クラウドビジネスアプリは、ここに記載したこと以外に入力チェック、計算式、外部Web APIとの連携など、様々な機能を盛り込むことができます。
また、JavaScriptやCSSを組み込み、ビジュアルデザインを変更することもできます。
C#のコードも書けるため、SharePoint単体では実現できない業務ロジックを組み込むこともできます。
ぜひこの記事を参考に、クラウドビジネスアプリを開発しSharePointの新しい使い方を考えてみてください。
参考資料
■日本語サイト
松崎 剛Blog
Visual
Studio 2013のクラウドビジネスアプリ(Cloud Business App)
Microsoft Developer Network
[方法]: Visual Studioを使用してSharePoint用アプリを公開する
Visual Studio Community 2013
製品紹介ページ
Office 365
試用版申し込みサイト
■英語サイト
Microsoft Developer Network
Visual Studio LightSwitch
Channel 9
How Do I: Build
and Deploy My First Cloud Business App on Office 365?