SharePoint 開発でできること
-2019年9月版-
及川 紘旭
Microsoft MVP for Office Development
2019年9月7日
Japan SharePoint Group in 東京
目次
◼ はじめに
◼ プログラミングモデル
◼ ファームソリューション
◼ SharePoint アドイン
◼ JavaScript 埋め込み
◼ SharePoint Framework
◼ まとめ
2
© SharePoint Developer
sharepoint.orivers.jp
はじめに セッションの本題に入る前に。
3
自己紹介
© SharePoint Developer
sharepoint.orivers.jp 4
及川 紘旭 (おいかわ ひろあき)
◼ Microsoft MVP
for Office Servers and Services 2007年10月~2016年9月
for Office Development 2016年10月~
◼ アドバンスド・ソリューション株式会社
SharePoint 開発担当兼社長
◼ ブログ SharePoint Developer
(http://sharepoint.orivers.jp)
◼ Twitter @HiroakiOikawa
◼ Qiita https://qiita.com/HiroakiOikawa
会社紹介
© SharePoint Developer
sharepoint.orivers.jp 5
アドバンスド・ソリューション株式会社
◼ 得意分野
- Office 365 を活用したソリューションの提案、構築、利活用促進
- PowerApps、Flow、PowerBI による業務システム構築
- SharePoint、Teams、Office アドイン、スマホアプリ開発
- システム導入後の運用保守請負
◼ 主な数字
- 設立:2012年7月
- 売上:2.4億円
- 社員:♂7 ♀5
- 年齢:25~45歳
仲間、求む!
このセッションのゴール
SharePoint 開発における、
プログラミングモデルと
何が開発できるのかを理解する。
© SharePoint Developer
sharepoint.orivers.jp 6
プログラミングモデル どんなプログラミングモデルがあるのかをまと
めました。
7
さまざまなプログラミングモデル #1
© SharePoint Developer
sharepoint.orivers.jp 8
# 名前 説明
1 ファームソリューション オンプレ専用の開発手法。
サイトの機能、タイマージョブ、管理メニューなどを開発する。
2 SharePoint アドイン SharePoint の Web パーツや単独のページとして、ASP.NET など
で開発した Web アプリケーションを SharePoint にアドインする。
3 JavaScript 埋め込み JSLink やコンテンツエディタで JavaScript を埋め込み、主に UI の
カスタマイズを行う。
4 SharePoint Framework クラウド環境に最適化された開発手法。
モダン UI や Teams における各種コンポーネントの開発を行う。
5 PowerApps + Flow SharePoint Designer、InfoPath によるカスタマイズの後継として
位置付けられるカスタマイズ手法。
フォームやワークフローの開発を行う。
さまざまなプログラミングモデル #2
© SharePoint Developer
sharepoint.orivers.jp 9
# 名前 オンプレ オンライン 対象者 主要技術 開発環境
1 ファームソリューション ○ × 開発者 •C#
•SSOM
•Server OS
•Visual Studio
2 SharePoint アドイン ○ ○ 開発者 •C#
•ASP.NET
•REST API
•CSOM
•Visual Studio
3 JavaScript 埋め込み ○ ○ パワー
ユーザー
•JavaScript
•REST API
•JSOM
•テキストエディタ
4 SharePoint Framework ○ ○ 開発者 •TypeScript
•REST API
•Node.js
•Yeoman
•Gulp
•テキストエディタ
5 PowerApps + Flow ○ ○ パワー
ユーザー
•PowerApps
•Flow
•ブラウザ
※ SSOM: Server Side Object Model / CSOM: Client Side Object Model / JSOM: JavaScript Object Model
SharePoint オンプレ/オンライン
プログラミングモデル別コンポーネント配置図
© SharePoint Developer
sharepoint.orivers.jp 10
インフラストラクチャ
テナント/サイト
外部Web サーバー
SharePoint
Framework
JavaScript
埋め込み
SharePoint アドイン
(クライアント側)
GraphAPI など
外部サービス
ファームソリューション
REST APIなど各種機能
テナント/サイト
SharePoint
Framework
JavaScript
埋め込み
SharePoint アドイン
(クライアント側)
SharePoint アドイン
(サーバー側)
Office 365
PowerApps
Flow
ファームソリューション ファームソリューションによる開発の紹介。
11
ファームソリューションで開発できるもの
© SharePoint Developer
sharepoint.orivers.jp 12
# 開発できるもの 説明
1 PowerShell コマンドレット SharePoint 管理用の独自のコマンドレット。
2 タイマージョブ SharePoint の定期実行処理の中に組み込む独自処理。
3 コンテンツエンリッチメント
Webサービス
クロールにより作成されたインデックスに対して、独自の属性の追加や
値の変更を実施する処理をクロール処理の過程に差し込む。
4 カスタムフィールド 標準の列と同様にリストに組み込んで使用できる独自の列の種類。
5 イベントレシーバ アイテム登録時などのイベントをトリガーに起動する独自処理。
6 Webパーツ ページ上に配置する独自のWebパーツ。
7 アプリケーションページ _layoutsフォルダ配下に設置する全サイト共通ページ。
8 カスタムアクション サイトの設定やリストメニューなどに追加する独自のメニューと処理。
9 サイト定義、リスト定義 サイトテンプレート、リストテンプレートの雛形。
10 コンテンツタイプ ブラウザから作成するコンテンツタイプと同じもので、横展開可能。
SharePoint
アドイン
SharePoint アドインによる開発の紹介。
13
SharePoint アドインで開発できるもの
© SharePoint Developer
sharepoint.orivers.jp 14
# 開発できるもの 説明
1 Web パーツ ページ上に配置する独自のWebパーツ。
ファームソリューションの Web パーツと異なり、本体は別サーバーに配
置する。
2 カスタムページ SharePoint とは別のサーバーで動作するフルカスタムのASP.NET
Web アプリ。
認証や権限管理を SharePoint と連動できる。
3 リモートイベントレシーバ アイテム登録時などのイベントをトリガーに起動する独自処理。
ファームソリューションのイベントレシーバと異なり、本体は別サーバーに
配置する。
4 コンテンツタイプ ブラウザから作成するコンテンツタイプと同じもので、横展開可能。
5 2013 ワークフロー
カスタムアクティビティ
SharePoint Designer で作成する 2013 ワークフローに追加可
能な独自のアクティビティ。
6 カスタムアクション リボンメニュー、コンテキストメニューに追加する独自のメニュー項目。
JavaScript
埋め込み
JavaScript 埋め込みによる開発の紹介。
15
JavaScript 埋め込みで開発できるもの
© SharePoint Developer
sharepoint.orivers.jp 16
# 開発できるもの 説明
1 クラシックページへのデザイン
適用、機能追加
コンテンツエディタ Web パーツを設置し、JavaScript をロードするよ
うにして、JavaScript でページを作り上げる。
また、JavaScript から SharePoint REST API を呼び出し、
SharePoint 内のリストアイテムをページ上に表示するような、
SharePoint 準拠のページを作成する。
2 HTML ページ+
SharePoint
SharePoint のページを使用せず、HTML でゼロから作成したペー
ジに、SharePoint REST API を組み合わせて、完全オリジナルの
ページを作成する。
3 列のデザイン変更 JSLink を使用して、任意の列のビュー表示時のデザインを変更する。
SharePoint
Framework
(SPFx)
SPFx による開発の紹介。
17
SPFx で開発できるもの
© SharePoint Developer
sharepoint.orivers.jp 18
# 開発できるもの 説明
1 Web パーツ ページ上に配置する独自のWebパーツ。
クラシック、モダンの両方に対応。
2 サイト全体のデザイン変更 サイト全体に統一のデザインを適用する。
→Application Customizer
3 ビューに表示する列のデザイ
ン変更
ビューに表示する列のデザインを変更する。
→Field Customizer
4 カスタムアクション リストビューのツールバーに独自のボタンとアクションを追加する。
→Command Set
5 Teams タブ Teams のタブとして追加できるアプリを開発する。
→Teams Tab
SPFx 開発例
◼ SharePoint モダン UI 拡張
© SharePoint Developer
sharepoint.orivers.jp 19
Web パーツ Application Customizer
Field Customizer Command Set
SPFx 開発事例
◼ Teams タブ
© SharePoint Developer
sharepoint.orivers.jp 20
まとめ -SharePoint 開発の心得-
きちんとした知識をもって開発しなければ、
クラウドの変化に追従できないシステムしか生み出せない。
何ができるかをきちんと理解し、
プログラミングモデルで定められた方式で開発することが肝要。
© SharePoint Developer
sharepoint.orivers.jp 21
告知!
© SharePoint Developer
sharepoint.orivers.jp 22
2019/11/23(土)
https://connpass.com/event/144707/?fbcli
d=IwAR1liTGjQI6SJYnsVyOsGoYpvO0lKrm
UOz6nhgJZ31mc2cMCew97shHJjsc

SharePoint 開発でできること 2019年9月版

  • 1.
    SharePoint 開発でできること -2019年9月版- 及川 紘旭 MicrosoftMVP for Office Development 2019年9月7日 Japan SharePoint Group in 東京
  • 2.
    目次 ◼ はじめに ◼ プログラミングモデル ◼ファームソリューション ◼ SharePoint アドイン ◼ JavaScript 埋め込み ◼ SharePoint Framework ◼ まとめ 2 © SharePoint Developer sharepoint.orivers.jp
  • 3.
  • 4.
    自己紹介 © SharePoint Developer sharepoint.orivers.jp4 及川 紘旭 (おいかわ ひろあき) ◼ Microsoft MVP for Office Servers and Services 2007年10月~2016年9月 for Office Development 2016年10月~ ◼ アドバンスド・ソリューション株式会社 SharePoint 開発担当兼社長 ◼ ブログ SharePoint Developer (http://sharepoint.orivers.jp) ◼ Twitter @HiroakiOikawa ◼ Qiita https://qiita.com/HiroakiOikawa
  • 5.
    会社紹介 © SharePoint Developer sharepoint.orivers.jp5 アドバンスド・ソリューション株式会社 ◼ 得意分野 - Office 365 を活用したソリューションの提案、構築、利活用促進 - PowerApps、Flow、PowerBI による業務システム構築 - SharePoint、Teams、Office アドイン、スマホアプリ開発 - システム導入後の運用保守請負 ◼ 主な数字 - 設立:2012年7月 - 売上:2.4億円 - 社員:♂7 ♀5 - 年齢:25~45歳 仲間、求む!
  • 6.
  • 7.
  • 8.
    さまざまなプログラミングモデル #1 © SharePointDeveloper sharepoint.orivers.jp 8 # 名前 説明 1 ファームソリューション オンプレ専用の開発手法。 サイトの機能、タイマージョブ、管理メニューなどを開発する。 2 SharePoint アドイン SharePoint の Web パーツや単独のページとして、ASP.NET など で開発した Web アプリケーションを SharePoint にアドインする。 3 JavaScript 埋め込み JSLink やコンテンツエディタで JavaScript を埋め込み、主に UI の カスタマイズを行う。 4 SharePoint Framework クラウド環境に最適化された開発手法。 モダン UI や Teams における各種コンポーネントの開発を行う。 5 PowerApps + Flow SharePoint Designer、InfoPath によるカスタマイズの後継として 位置付けられるカスタマイズ手法。 フォームやワークフローの開発を行う。
  • 9.
    さまざまなプログラミングモデル #2 © SharePointDeveloper sharepoint.orivers.jp 9 # 名前 オンプレ オンライン 対象者 主要技術 開発環境 1 ファームソリューション ○ × 開発者 •C# •SSOM •Server OS •Visual Studio 2 SharePoint アドイン ○ ○ 開発者 •C# •ASP.NET •REST API •CSOM •Visual Studio 3 JavaScript 埋め込み ○ ○ パワー ユーザー •JavaScript •REST API •JSOM •テキストエディタ 4 SharePoint Framework ○ ○ 開発者 •TypeScript •REST API •Node.js •Yeoman •Gulp •テキストエディタ 5 PowerApps + Flow ○ ○ パワー ユーザー •PowerApps •Flow •ブラウザ ※ SSOM: Server Side Object Model / CSOM: Client Side Object Model / JSOM: JavaScript Object Model
  • 10.
    SharePoint オンプレ/オンライン プログラミングモデル別コンポーネント配置図 © SharePointDeveloper sharepoint.orivers.jp 10 インフラストラクチャ テナント/サイト 外部Web サーバー SharePoint Framework JavaScript 埋め込み SharePoint アドイン (クライアント側) GraphAPI など 外部サービス ファームソリューション REST APIなど各種機能 テナント/サイト SharePoint Framework JavaScript 埋め込み SharePoint アドイン (クライアント側) SharePoint アドイン (サーバー側) Office 365 PowerApps Flow
  • 11.
  • 12.
    ファームソリューションで開発できるもの © SharePoint Developer sharepoint.orivers.jp12 # 開発できるもの 説明 1 PowerShell コマンドレット SharePoint 管理用の独自のコマンドレット。 2 タイマージョブ SharePoint の定期実行処理の中に組み込む独自処理。 3 コンテンツエンリッチメント Webサービス クロールにより作成されたインデックスに対して、独自の属性の追加や 値の変更を実施する処理をクロール処理の過程に差し込む。 4 カスタムフィールド 標準の列と同様にリストに組み込んで使用できる独自の列の種類。 5 イベントレシーバ アイテム登録時などのイベントをトリガーに起動する独自処理。 6 Webパーツ ページ上に配置する独自のWebパーツ。 7 アプリケーションページ _layoutsフォルダ配下に設置する全サイト共通ページ。 8 カスタムアクション サイトの設定やリストメニューなどに追加する独自のメニューと処理。 9 サイト定義、リスト定義 サイトテンプレート、リストテンプレートの雛形。 10 コンテンツタイプ ブラウザから作成するコンテンツタイプと同じもので、横展開可能。
  • 13.
  • 14.
    SharePoint アドインで開発できるもの © SharePointDeveloper sharepoint.orivers.jp 14 # 開発できるもの 説明 1 Web パーツ ページ上に配置する独自のWebパーツ。 ファームソリューションの Web パーツと異なり、本体は別サーバーに配 置する。 2 カスタムページ SharePoint とは別のサーバーで動作するフルカスタムのASP.NET Web アプリ。 認証や権限管理を SharePoint と連動できる。 3 リモートイベントレシーバ アイテム登録時などのイベントをトリガーに起動する独自処理。 ファームソリューションのイベントレシーバと異なり、本体は別サーバーに 配置する。 4 コンテンツタイプ ブラウザから作成するコンテンツタイプと同じもので、横展開可能。 5 2013 ワークフロー カスタムアクティビティ SharePoint Designer で作成する 2013 ワークフローに追加可 能な独自のアクティビティ。 6 カスタムアクション リボンメニュー、コンテキストメニューに追加する独自のメニュー項目。
  • 15.
  • 16.
    JavaScript 埋め込みで開発できるもの © SharePointDeveloper sharepoint.orivers.jp 16 # 開発できるもの 説明 1 クラシックページへのデザイン 適用、機能追加 コンテンツエディタ Web パーツを設置し、JavaScript をロードするよ うにして、JavaScript でページを作り上げる。 また、JavaScript から SharePoint REST API を呼び出し、 SharePoint 内のリストアイテムをページ上に表示するような、 SharePoint 準拠のページを作成する。 2 HTML ページ+ SharePoint SharePoint のページを使用せず、HTML でゼロから作成したペー ジに、SharePoint REST API を組み合わせて、完全オリジナルの ページを作成する。 3 列のデザイン変更 JSLink を使用して、任意の列のビュー表示時のデザインを変更する。
  • 17.
  • 18.
    SPFx で開発できるもの © SharePointDeveloper sharepoint.orivers.jp 18 # 開発できるもの 説明 1 Web パーツ ページ上に配置する独自のWebパーツ。 クラシック、モダンの両方に対応。 2 サイト全体のデザイン変更 サイト全体に統一のデザインを適用する。 →Application Customizer 3 ビューに表示する列のデザイ ン変更 ビューに表示する列のデザインを変更する。 →Field Customizer 4 カスタムアクション リストビューのツールバーに独自のボタンとアクションを追加する。 →Command Set 5 Teams タブ Teams のタブとして追加できるアプリを開発する。 →Teams Tab
  • 19.
    SPFx 開発例 ◼ SharePointモダン UI 拡張 © SharePoint Developer sharepoint.orivers.jp 19 Web パーツ Application Customizer Field Customizer Command Set
  • 20.
    SPFx 開発事例 ◼ Teamsタブ © SharePoint Developer sharepoint.orivers.jp 20
  • 21.
  • 22.
    告知! © SharePoint Developer sharepoint.orivers.jp22 2019/11/23(土) https://connpass.com/event/144707/?fbcli d=IwAR1liTGjQI6SJYnsVyOsGoYpvO0lKrm UOz6nhgJZ31mc2cMCew97shHJjsc