第13回 jpsps in 大阪 share pointerのためのクラウドビジネスアプリのすすめ

SharePointer のためのクラウド ビジネス アプリのすすめ

アドバンスド・ソリューション株式会社

及川 紘旭

2014年2月22日

Japan SharePoint Group in 大阪

目次

自己紹介、会社紹介

クラウド ビジネス アプリ とは- クラウド ビジネス アプリの正体

- クラウド ビジネス アプリの開発ツール

- プロジェクトの構成

クラウド ビジネス アプリ の特徴- お手軽 & パワフル

- SharePoint 連携

- モバイルデバイス対応

まとめ

2© アドバンスド・ソリューション株式会社

自己紹介会社紹介

jpsps in 大阪 リベンジマッチ！

3

及川 紘旭 (おいかわ ひろあき)

Microsoft MVP for SharePoint2007年10月～2014年9月

アドバンスド・ソリューション株式会社技術担当

ブログ SharePoint Developer(http://sharepoint.orivers.jp)

Twitter @HiroakiOikawa

自己紹介

4© アドバンスド・ソリューション株式会社

アドバンスド・ソリューション株式会社

2012年9月 始動

従業員 7名 (2014年2月22日時点)

主力事業- SharePoint の新規導入、移行支援

- SharePoint を活用したコミュニケーション基盤の構築

- SharePoint 上での業務アプリ開発

会社紹介

5© アドバンスド・ソリューション株式会社

クラウド ビジネスアプリ とは

SPS 2013 + VS 2013 で広がる世界

6

クラウド ビジネス アプリの正体

クラウド ビジネス アプリの正体は、自動ホスト型またはプロバイダーホスト型の SharePoint 用アプリ です。

7

Web サイト

SQL データベース

• HTML,JS• ビジネスロジック• データアクセス

• データベース

SharePoint Online

• アプリカタログ

クラウド ビジネス アプリ

※プロバイダーホストの場合は、Office 365、Windows Azure 以外に展開可能

クラウド ビジネス アプリの開発ツール

開発は Visual Studio 2013 で行います。

© アドバンスド・ソリューション株式会社 8

展開形態

SharePoint ホスト型

プロバイダーホスト型

自動ホスト型

実装形態開発ツール

画面• HTML,JS,CSS

ロジック• JS

データ• SharePoint リスト

画面• HTML,JS,CSS

ロジック• Web API 等

データ• データベース 等

• Napa• Visual Studio

2012,2013• SharePoint 用アプリ

プロジェクト

• Visual Studio 2012,2013• SharePoint 用アプリ

プロジェクト• クラウド ビジネス アプリ

プロジェクト(VS2013のみ)

• Access 2013• カスタム Web アプリ

参考：クラウド ビジネス アプリ プロジェクト

© アドバンスド・ソリューション株式会社 9

プロジェクトの構成

クラウド ビジネス アプリ プロジェクトは、LightSwitchHTML5 Client がベースとなっています。

10© 2 アドバンスド・ソリューション株式会社

①

②

③

④

① パッケージング用プロジェクトアプリをインストールするための app パッケージファイルをビルドする

② クライアント処理用プロジェクト画面及び JS、CSS を定義する

③ サーバー処理用プロジェクトデータモデル及びWeb APIをビルドする

④ SharePoint 展開用プロジェクトアプリと共に SharePoint 内にリストなどを展開する

クラウド ビジネスアプリ の特徴

SharePoint との親和性の高いWeb アプリケーション

11

お手軽 & パワフル 1/3

ポイント１：基本的な処理はノンコーディングで開発- 画面系

• 専用画面デザイナーにて、データと画面の紐付け、コントロールの配置、プロパティ設定が可能

• 画面遷移などのナビゲーションもプロパティ設定で対応

• 入力チェック（必須、型、範囲、書式）もプロパティ設定で対応

- ロジック系• データの取得、登録、更新処理は組み込み済み

- データ系• 専用データモデリングツールでテーブル、クエリを作成

• テーブル定義に従いデータベース作成スクリプトを自動生成

• SharePoint などデータベース以外のデータとの接続設定

12© アドバンスド・ソリューション株式会社

参考：画面デザイナー

© アドバンスド・ソリューション株式会社 13

参考：データモデリングツール

© アドバンスド・ソリューション株式会社 14

お手軽 & パワフル 2/3

ポイント２：アプリ固有の処理のみコーディング- 画面系 (JavaScriptでコーディング)

• 標準コントロールでは表現できない見た目(jQuery UIの使用など)

• 親画面から子画面へのデータ渡し

• 画面に紐付くデータ以外のデータの登録、更新処理の呼び出し

- ロジック系 (C#、VBでコーディング)• アプリ固有の業務ロジック

• テーブル定義したデータベース以外からのデータ取得、更新処理と、これらの処理の画面への公開(ajax呼び出し対応)

- データ系 (C#、VBでコーディング)• データ登録、更新、削除時のトリガー処理

• 複雑な妥当性チェック (存在チェック、項目間整合性チェックなど)

15© アドバンスド・ソリューション株式会社

参考：コードの追加

© アドバンスド・ソリューション株式会社 16

お手軽 & パワフル 3/3

ポイント３：ハイパフォーマンス- データ件数

• クラウド ビジネス アプリは SQL データベースに直接データを保存するため、SharePoint リストを利用する場合の一般的なアイテム数の上限 5,000 件の影響を受けない。

- 処理速度• シンプルな画面構成、データベースへの直接アクセスにより、

SharePoint に比べ処理速度が速い。

17© アドバンスド・ソリューション株式会社

SharePoint 連携

認証の統合- SharePoint での認証を引き継ぐ。

リストへのアイテム登録- 外部データソース連携機能により、SharePoint リストに対

してアイテムの登録、更新、削除をノンコーディングで実装可能。

ニュースフィードへの投稿- データの変更をトリガーに、アプリサイトのニュースフィードに自

動的につぶやき発信。

- これもまたノンコーディングで実装可能。 18

注意！・開発時にリストの実態と紐付けるため、複数のリストでの再利用は不可能。・必ずユーザー情報リストもアタッチすること。

参考：SharePoint リスト連携

© アドバンスド・ソリューション株式会社 19

参考：ニュースフィードへの投稿

© アドバンスド・ソリューション株式会社 20

モバイルデバイス対応

モバイルデバイスでも変わらぬ操作性- Visual Studio LightSwitch の HTML5 Client テクノ

ロジーがベースとなっているため、画面デザイナーで作成した画面は、何もせずにモバイルデバイス対応

- サーバーサイドは Web API で実装することで、クライアントの JS から非同期通信

21© アドバンスド・ソリューション株式会社

非同期通信クラウド ビジネス アプリ

(サーバーサイド)

まとめ 本セッションの振り返り

22

まとめ

最新テクノロジーでお手軽開発- LightSwitch HTML5 Client の開発お作法さえ理解すれ

ば、SharePoint 用アプリを誰でも手軽に開発可能！

SharePoint を新たなステージへ- ただの情報共有ポータルから、業務アプリケーションプラット

フォームへ

- これまで SharePoint に移行できなかった、あるいは移行に多くのコストがかかっていたシステムを最小限のコストで移行！

© アドバンスド・ソリューション株式会社 23

LightSwitch＋

参考：開発時に役に立つサイト

クラウド ビジネス アプリ 開発手順の紹介- Visual Studio 2013 のクラウド ビジネス アプリ

(松崎 剛 Blog)

- Building a Cloud Business App: Kudos(Apps for Office and SharePoint blog)

LightSwitch- Visual Studio LightSwitch

(Microsoft Developer Network)

- SharePoint 用 LightSwitch アプリ(Microsoft Developer Network)

- LightSwitch 関連タグ(技術との戯れ C# MVP 瀬尾さん)

© アドバンスド・ソリューション株式会社 24

おまけ

デモ開発中にバグを発見！

© アドバンスド・ソリューション株式会社 25

テーブルを展開すると、「作成済み」という列が・・・よくよく確認してみると、これは翻訳ミスで正しくは「作成日時」。

http://www.advanced-solution.jp

26© アドバンスド・ソリューション株式会社