Microsoft 365 Virtual Marathon で使用したスライドです。 SharePoint Framework を使ったモダンサイトのカスタマイズについて、概要レベルの説明となります。

1. MICROSOFT 365
Virtual MARATHON
May 27 & 28, 2020
36 hours / 2 days
SharePoint Framework によるモダンサイトのカスタマイズ
及川 紘旭
Microsoft MVP for Office Development
@HiroakiOikawa
Broughtto youby:
TheGlobalMicrosoft Community&
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com

2. MICROSOFT 365
Virtual MARATHON
May 27 & 28, 2020
36 hours / 2 days
Mark Your Calendars:
March 23-25, 2021, MGM Grand Resort
Las Vegas, Nevada, USA
M365Conf.com
#M365CONF
TheSharePoint Conferenceis nowTheMicrosoft 365 CollaborationConference
#M365VM
M365VirtualMarathon.com
Broughtto youby:
TheGlobalMicrosoft Community&
M365Conf.com | #M365CONF

3. THANK YOU TO ALL OUR GENEROUS SPONSORS

4. ▪ 及川 紘旭（Hiroaki Oikawa), 1976年生まれ, 神奈川県出身
▪ アドバンスド・ソリューション株式会社
代表取締役社長兼 SharePoint 導入コンサルから開発まで何でも担当
▪ SharePoint 歴は15年ほど。
▪ Microsoft MVP
for Office Servers and Services 2007年10月～2016年9月
for Office Development 2016年10月～
▪ ブログ SharePoint Developer (https://sharepoint.orivers.jp)
自己紹介
Broughtto youby:
TheGlobalMicrosoft Community&
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com

5. ▪ ベンダーブースやセッションに参加し、ビデオを観よう
▪ 答えを送って、抽選会にエントリーしよう
▪ 抽選で当たるには、少なくとも 5 問正解する必要があります
(米国、APAC、EMEA ごとにそれぞれ 1 つ当たります)
抽選会へ参加しよう!
抽選で OCULUS QUEST ALL IN ONE!（3名様）が当たる！
https://bit.ly/m365raffle

6. 次のチャリティー救済基金への寄付をご検討ください :
UNITED WAY: HTTPS://GIVE.UWKC.ORG/M365VM
INTERNATIONAL MEDICAL CORPS: HTTPS://BIT.LY/MEDICALCORPSFUND
スポンサーからの寄付金の 10％ は地域社会の救済支援に使われます
詳細は INFO@M365VIRTUALMARATHON.COM までお問合せください

7. May 27 & 28, 2020
Hiroaki Oikawa | JA
#M365VM
アジェンダ
▪ SharePoint のカスタマイズ手法あれこれ
▪ SPO モダンサイト カスタマイズに対する考え方
▪ SharePoint Framework によるカスタマイズのデモ
▪ まとめ

8. May 27 & 28, 2020
Hiroaki Oikawa | JA
#M365VM
SharePoint のカスタマイズ手法あれこれ
SharePoint の歴史は長く、時代の流れに乗ってさまざまなカスタマイズ手法が提供されてきました。
オンプレからクラウドに主流が移り変わるに従い、サーバーサイドからクライアントサイドの技術へ推移してきています。
カスタマイズ手法 説明
SPO モダン
サイトで利用
ファームソリューション
オンプレ専用の手法。
クラシックページに設置可能な Web パーツの開発や定期実行処理（タイマーサービス）、
_layouts 配下のページ、サイトの管理ページのメニュー追加などを開発することができる。
×
SharePoint Designer
InfoPath
アイテムの各種フォームのカスタマイズやワークフローの作成を行う。
既に下記の通りマイクロソフトからサポート終了時期が発表されている。
メインストリーム終了 2021/7/13、延長サポート終了 2026/7/14
×
JavaScript埋め込み
コンテンツエディタ、スクリプトエディタで JavaScript をページに埋め込み、主に UI のカ
スタマイズを行う。
×
Power Apps
Power Automate
SharePoint Designer、InfoPath によるカスタマイズの後継として位置付けられるカスタマ
イズ手法。
〇
SharePoint アドイン
ASP.NET などで開発した Web アプリケーションを、Web パーツや単独のページとして、
SharePoint に組み込むことができる。
〇
SharePoint Framework
SharePoint Oline における安心安全で最適なカスタマイズ手法。
モダンページや Teams アプリの開発の他、将来的に Office アドインの開発もできるように
なり、今後の Microsoft 365 開発の基礎技術となる。
〇

9. May 27 & 28, 2020
Hiroaki Oikawa | JA
#M365VM
SharePoint Online は、ユーザーが安心安全にカスタマイズができるプラットフォームとして利用されることを想定し、
以下の観点での考慮がされていると考えられます。
SPO モダンサイト カスタマイズに対する考え方

10. May 27 & 28, 2020
Hiroaki Oikawa | JA
#M365VM
SPO モダンサイト カスタマイズに対する考え方 #1
ユーザーのカスタマイズが原因となって、他テナントに対
して、サービス停止やパフォーマンス低下などの影響がで
ないようにする。
SharePoint ファーム (サーバー群)SharePoint ファーム (サーバー群)SharePoint ファーム (サーバー群)
Power Apps
Power Automate
Microsoft Azure
(Web アプリなら Azure 以外も OK)
SharePoint
アドイン
カスタマイズ箇所
カスタマイズ箇所は SharePoint ファーム外で動作するため、カスタマイズ箇所に問題が起きて
も SharePoint への影響を最小限に抑えることができる。
テナントA
クライアントPC
テナントB
クライアントPC
テナントC
クライアントPC
SharePoint
Framework
SharePoint
Framework
SharePoint
Framework

11. May 27 & 28, 2020
Hiroaki Oikawa | JA
#M365VM
SPO モダンサイト カスタマイズに対する考え方 #2
SharePoint 管理者が関知しないところで、さまざまなカ
スタマイズが自由気ままに行われ、カオスな状態にならな
いようにコントロールする。
SharePoint Framework 及び SharePoint アドインによるカスタマイズでは、アプリカタログの
管理権限を持つアカウントがパッケージファイルを登録し、サイトの管理者がサイトにアプリを
追加する必要があるため、ユーザーが自由にカスタマイズを行うことはできない。
SharePoint アプリカタログ パッケージ
ファイル
登録
アプリの
追加

12. May 27 & 28, 2020
Hiroaki Oikawa | JA
#M365VM
SPO モダンサイト カスタマイズに対する考え方 #3
ユーザーのカスタマイズが足かせとなり、マイクロソフト
が継続的に行うサービスのバージョンアップが滞ることが
ないよう、カスタマイズ可能範囲を限定する。
SharePoint Framework によるカスタマイズ可能範囲は限定されているが、カスタマイズが許可
されている箇所は安全にカスタマイズができる。
• Web パーツの開発
• ページヘッダー、フッターの追加
• リストビューのコマンドボタンの追加
• リストビューの右クリックメニューの追加
• リストビューの列の表示形式の変更
• リストの更新通知の受信
• Single Part App ページの作成
• Teams タブアプリの開発
• Teams 個人アプリの開発
SharePoint Framework でできること

13. May 27 & 28, 2020
Hiroaki Oikawa | JA
#M365VM
SharePoint Framework によるカスタマイズのデモ #1
Web パーツ
ページヘッダー
ページフッター
リストビューのコマンドボタン
リストビューの右クリックメニュー
リストビューの列の表示形式変更

14. May 27 & 28, 2020
Hiroaki Oikawa | JA
#M365VM
SharePoint Framework によるカスタマイズのデモ #2
Single Part App ページ
Teams タブアプリ

15. May 27 & 28, 2020
Hiroaki Oikawa | JA
#M365VM
まとめ
モダンサイトのカスタマイズ手法
• Power User 向けの Power Platform
• SharePoint 開発者向けの SharePoint Framework
• ASP.NET 開発者向けの SharePoint アドイン
SharePoint Framework の特徴
• 他テナントのカスタマイズやサービスバージョン
アップの影響を受けない
• 完全統制で安心安全
• 今後の Microsoft 365 開発のプラットフォーム

16. May 27 & 28, 2020
Hiroaki Oikawa | JA
#M365VM
モダンサイトカスタマイズ をはじめよう！
詳細はこちらへ
↓
SharePoint Developer
https://sharepoint.orivers.jp
Microsoft Docs
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx
/sharepoint-framework-overview

17. MICROSOFT 365
Virtual MARATHON
May 27 & 28, 2020
36 hours / 2 days
ご参加いただき、ありがとうございました！
ご質問はありますか？
Speaker feedback
https://bit.ly/M365VMSpeakerFeedback
Event feedback
https://bit.ly/M365VMFeedback