SharePoint Framework 拡張機能開発ハンズオン

#GM365TOKYO
SharePoint Framework
拡張機能開発ハンズオン
及川紘旭
Microsoft MVP for Office Development
2020年11月9日

#GM365TOKYO
目次
◼ はじめに
◼ ハンズオンの説明
◼ SPFx による SharePoint 拡張開発
◼ ハンズオン
1. アプリケーションカスタマイザー拡張機能を作成する
2. フィールドカスタマイザー拡張機能を作成する
3. コマンドセット拡張機能でリストをカスタマイズする
◼ まとめ
© SharePoint Developer
sharepoint.orivers.jp
2

#GM365TOKYO
はじめにセッションの本題に入る前に。
3

#GM365TOKYO
自己紹介
◼及川紘旭 (おいかわひろあき)
◼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
4

#GM365TOKYO
このセッションのゴール
SharePoint Framework (SPFx) の
拡張機能を開発してデプロイできるようになる。
5

#GM365TOKYO
ハンズオンの説明今回実施するハンズオンをご紹介します。
6

#GM365TOKYO
ハンズオンの内容
以下の Microsoft Learn コンテンツをハンズオンの題材にします。
7
https://docs.microsoft.com/ja-jp/learn/modules/intro-sharepoint-framework/
https://docs.microsoft.com/ja-jp/learn/modules/sharepoint-spfx-extensions/

#GM365TOKYO
SPFx による
SharePoint 拡張機能
開発
SharePoint Framework を使用することで、
どんなことができるのかを説明します。
8

#GM365TOKYO
SharePoint Framework (SPFx) とは
◼SharePoint Online における安心安全で最適なカスタマイズ手法
9
Microsoft 365 Virtual Marathon 2020/5/27
-SharePoint Framework によるモダンサイトのカスタマイズ-

#GM365TOKYO
SPFx でできること
SPFx を使用することで、モダンサイトにおける様々な機能を開発することができます。
10
できること説明
Web パーツの開発モダンサイト、クラシックサイトの両方で動作する Web パーツ。
ページヘッダー/ページフッターの追加モダンサイトのヘッダー、フッターに任意の HTML を組み込む。(Application Customizer)
CSS、JS 埋め込みモダンサイトに任意の CSS, JS を組み込む。(Application Customizer)
リストビューのコマンドボタン追加モダンサイトのリストビューのツールバーにボタンを追加する。(Command Set)
リストビューの右クリックメニュー追加モダンサイトのリストビューの右クリックメニューを追加する。(Command Set)
リストビューの列の表示処理変更モダンサイトのリストビューの列の表示処理を変更する。(Field Customizer)
Single Part App ページの作成ユーザーが設定変更不可能な Web パーツ 1 つをモダンサイトのページのコンテンツ領域いっぱいに配置
する。
共通ライブラリの開発モダンサイトで再利用可能な共通ライブラリを開発する。
※ デモ動画はこちら⇒Microsoft 365 Virtual Marathon

#GM365TOKYO
SPFx でできること (参考)
※Microsoft 365 Virtual Marathon スライドより抜粋
11

#GM365TOKYO
開発環境として必要なもの
◼ OS (必須)
⚫ Windows、Mac、Linux など
◼ ブラウザ (必須)
⚫ Microsoft Edge Chromium、
Google Chrome
◼ ツール (必須)
⚫ NodeJS LTS 10.x または 8.x
※9.x、11.x、12.x はサポート外
⚫ Yeoman SharePoint generator
⚫ npm または yarn
⚫ gulp
◼ コードエディタ (任意)
⚫ Visual Studio Code、Sublime、ATOM
など
◼ デバッガ (任意)
⚫ Visual Studio Code Debugger for
Microsoft Edge Chromium、
Visual Studio Code Debugger for
Chrome など、使用するコードエディタとブラ
ウザに対応したデバッガ
12
開発環境構築手順について
以下のどちらかの方法で開発環境を準備します。
• Docker を使った SPFx 開発環境の構築
• Docker を使わない SPFx 開発環境の構築（こちらが公式）

#GM365TOKYO
開発環境として必要なもの２
◼SharePoint モダンサイトとアプリカタログサイト
⚫ SPFx による開発には、モダンサイトが必要です。
⚫ SPFx で開発したコンポーネントのデプロイには、アプリカタログサイトが必要です。
⚫ 管理者権限を持つ上記サイトが手元にない方は、Microsoft 365 開発者プロ
グラムに参加して、ご自身の SharePoint 環境に、サイトを作成してください。
⚫Microsoft 365 開発者プログラム
https://developer.microsoft.com/ja-jp/office/dev-program
⚫アプリカタログサイトの作成手順
https://docs.microsoft.com/ja-jp/sharepoint/use-app-catalog
13

#GM365TOKYO
ハンズオンそれではハンズオンを始めましょう！
14

#GM365TOKYO
ハンズオン
Microsoft Learn から、以下 3 つのハンズオンを実施します。
1. アプリケーションカスタマイザー拡張機能を作成する
2. フィールドカスタマイザー拡張機能を作成する
3. コマンドセット拡張機能でリストをカスタマイズする
15

#GM365TOKYO
まとめ本日のセッションのまとめ。
16

#GM365TOKYO
まとめ
今回のセッションにて以下の内容について学びました。
◼ SharePoint Framework の拡張機能開発にてできること
◼ Application Customizer を使ったページヘッダー/フッターの追加
◼ Field Customizer を使ったリストビューの列表示形式のカスタマイズ
◼ Command Set を使ったリストビューのツールバーへのボタン追加
17
これら教材は全て Microsoft Learn に揃っており、
無料で使えるので使わない手はありません！
たくさん学んでスキルを高めましょう。

SharePoint Framework 拡張機能開発ハンズオン

Recomendados

Recomendados

Más contenido relacionado

Más de Hiroaki Oikawa

Más de Hiroaki Oikawa (11)