SharePoint Framework の実践的な開発における 10 のヒント / 10 tips for practical development of Sharepoint Framework
Slide 1
Slide 1 text
MICROSOFT 365
Virtual MARATHON
May 27 & 28, 2020
36 hours / 2 days
MICROSOFT 365 VIRTUAL MARATHON
SharePoint Framework の実践的な開発における 10 のヒント
篠原 敬志 (Takashi Shinohara)
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 2
Slide 2 text
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
The SharePoint Conference is now The Microsoft 365 Collaboration Conference
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 3
Slide 3 text
THANK YOU TO ALL OUR GENEROUS SPONSORS
Slide 4
Slide 4 text
自己紹介
▪ 篠原 敬志 (Takashi Shinohara)
▪ アバナード株式会社 シニアコンサルタント
▪ Microsoft MVP for Office Development (2018-)
▪ Twitter: @karamem0
▪ Facebook: t.shinohara.56
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 5
Slide 5 text
▪ ベンダーブースやセッションに参加し、ビデオを観よう
▪ 答えを送って、抽選会にエントリーしよう
▪ 抽選で当たるには、少なくとも 5 問正解する必要があります
(米国、APAC、EMEA ごとにそれぞれ 1 つ当たります)
抽選会へ参加しよう!
抽選で OCULUS QUEST ALL IN ONE! (3名様) が当たる！
https://bit.ly/m365raffle
Slide 6
Slide 6 text
次のチャリティー救済基金への寄付をご検討ください :
UNITED WAY: HTTPS://GIVE.UWKC.ORG/M365VM
INTERNATIONAL MEDICAL CORPS: HTTPS://BIT.LY/MEDICALCORPSFUND
スポンサーからの寄付金の 10％ は地域社会の救済支援に使われます
詳細は [email protected] までお問合せください
Slide 7
Slide 7 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ いくつかのプロジェクトで SharePoint Framework (SPFx) 開発の現場を技術支援してきました。
そこで得た経験をこれから SPFx 開発に携わる人に役立てることができればと考えています。
▪ プログラミングに関する話はあまり出てきません。
開発者よりもマネージャーやアーキテクトに向けた内容になります。
セッションについて
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 8
Slide 8 text
本題に入る前に
▪ SPFx について簡単におさらい
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 9
Slide 9 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ 2016 年 8 月に開発者プレビュー
▪ 2017 年 2 月に一般提供 (GA)
▪ 2020 年 5 月時点の最新版は 1.10
SPFx の歴史
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 10
Slide 10 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ SharePoint のクラウド化やモダン化に対応するための新しい開発方法
▪ 現在のユーザーのコンテキストで動作する JavaScript コード
▪ 最新の Web テクノロジを使ったクライアント側での開発
▪ 高速化された読み込みとレンダリング
▪ REST API によるリソースへのアクセス
SPFx の特長
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 11
Slide 11 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
SPFx SharePoint アドイン
開発言語 TypeScript ASP.NET
表示方法 ページにコードを埋め込み iFrame による埋め込み
表示速度 速い 遅い
データ アクセス REST API JSOM
開発ツール Visual Studio Code Visual Studio
SPFx と SharePoint アドインの比較
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 12
Slide 12 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ Web パーツ
▪ アプリケーション カスタマイザー
▪ フィールド カスタマイザー
▪ リスト ビュー コマンド セット
SPFx でサポートされる機能
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 13
Slide 13 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ ワークフロー
▪ イベント レシーバー
▪ アプリケーション ページ
SPFx でサポートされない機能
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 14
Slide 14 text
アジェンダ
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 15
Slide 15 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ ヒント 1: SPFx で開発するメリットを明確化する
▪ ヒント 2: SPFx を採用するかどうかを決定する
▪ ヒント 3: SPFx の JavaScript フレームワークを選択する
▪ ヒント 4: SPFx の開発チームを構成する
▪ ヒント 5: SPFx の開発環境を準備する
アジェンダ
▪ ヒント 6: SPFx の権限の昇格に注意する
▪ ヒント 7: SPFx を外部システムと連携する
▪ ヒント 8: SPFx の表示方法を拡張する
▪ ヒント 9: SPFx の開発を CI/CD で効率化する
▪ ヒント 10: SPFx のトラブルに対応する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 16
Slide 16 text
▪ SPFx で開発するメリットを明確化する
ヒント 1:
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 17
Slide 17 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ SPFx は SharePoint のプラットフォーム上で動作します。
▪ SharePoint 上で動作するということは通常のアプリケーション開発よりもインフラやセキュリ
ティを考慮しなくてよいということになります。
それはつまりリソースを "やるべきこと" に集中させることに繋がります。
プラットフォームとしての SharePoint
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 18
Slide 18 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ さまざまなデータ列を定義することができるリスト
▪ 階層的にファイルを格納できるドキュメント ライブラリ
▪ Azure AD をベースとしたセキュアな認証
▪ 細かい制御が可能な権限管理
▪ 高度な検索
SharePoint が提供する機能
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 19
Slide 19 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ 開発が進むにつれて "SharePoint を使わなければよかった" と後悔することはよくあります。
▪ 通常のアプリケーション開発ではなぜ駄目なのかを考えましょう。
SharePoint 上でアプリケーションを動作させなければならない理由を明らかにしましょう。
SPFx で開発するメリットを明確化する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 20
Slide 20 text
▪ SPFx を採用するかどうかを決定する
ヒント 2:
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 21
Slide 21 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ モダン化された SharePoint のカスタマイズとしては以下の 2 種類の方法があります。
▪ SPFx の Web パーツ開発
▪ Power Apps のカスタム フォームまたは Web パーツでの埋め込み
▪ SPFx 開発が常に最適解とは限りません。
それぞれの方法における特性を理解して適切な方法を選択する必要があります。
SharePoint のカスタマイズ方法
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 22
Slide 22 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ メリット
▪ SharePoint のモダン UI と統合された美しい UI を使用できる
▪ SharePoint の機能を完全にサポートする
▪ 追加のライセンス費用が発生しない
▪ デメリット
▪ 開発コスト (初期コストや運用コストを含め) がかかる
▪ 開発するのに専門の知識が必要となる
SPFx のメリットとデメリット
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 23
Slide 23 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ メリット
▪ 開発コストがかからない
▪ 専門知識が不要なため誰でも開発できる
▪ デメリット
▪ SharePoint に埋め込むため UI の統一感がなくなる
▪ SharePoint のすべての機能が使えるわけではない
▪ 追加のライセンス費用が発生する
Power Apps のメリットとデメリット
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 24
Slide 24 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ SPFx は "開発" です。
開発には (自社開発にせよ委託開発にせよ) 大きなコストがかかります。
▪ 実現しようとしているその機能は Power Apps で実現できませんか?
SPFx ではないとできない理由があるかどうかを考えましょう。
SPFx を採用するかどうかを決定する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 25
Slide 25 text
▪ SPFx の JavaScript フレームワークを選択する
ヒント 3:
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 26
Slide 26 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ SPFx は開発言語として TypeScript を使用します。
▪ TypeScript を使った開発では JavaScript フレームワークを採用することで開発の生産性を格段に
上げることができます。
▪ SPFx ではプロジェクトを作成するときに JavaScript フレームワークを選択する必要があります。
"どのフレームワークを選択するか" はプロジェクトを始める上で最初に決めなければなりません。
SPFx の開発言語とフレームワーク
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 27
Slide 27 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ 公式テンプレート (@microsoft/gererator-sharepoint)
▪ React
▪ Knockout.js
▪ コミュニティ ベースのテンプレート (@pnp/spfx)
▪ Vue.js
▪ Handlebars
▪ Angular Elements
▪ Aurelia
Power Apps のメリットとデメリット
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 28
Slide 28 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ 基本的には公式にサポートされていて安定性が高い React を選択します。
Fluent UI や PnP SPFx Controls といった UI ライブラリを活用することで生産性も上がります。
▪ @pnp/spfx を使う場合は十分に事前検証をしましょう。
意図しない不具合が発生する可能性があります。
JavaScript フレームワークを選択する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 29
Slide 29 text
▪ SPFx の開発チームを構成する
ヒント 4:
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 30
Slide 30 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ SPFx は "開発" です。
一般的に開発はチームで行います。
チームで開発するためにはメンバーとなる要員を確保する必要があります。
▪ SPFx 開発はこれまでの SharePoint 開発と比べて使用するテクノロジーが大きく異なります。
これまでの SharePoint 開発の経験者を集めてもうまくいくとは限りません。
SPFx 開発のチーム ビルディング
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 31
Slide 31 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ チーム メンバーは SharePoint の知識があることよりもフロントエンドの知識があることのほう
が重要です。
▪ HTML や TypeScript などの開発言語の知識
▪ npm や gulp などの開発ツールの知識
▪ JavaScript フレームワークの知識
▪ ただしチーム リーダーには SharePoint の知識が必要です。
SPFx 開発に必要となるスキル
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 32
Slide 32 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ もちろん理想的なチームをはじめから作ることはできません。
むしろ SPFx 開発未経験のメンバーだけでプロジェクトを始めることがほとんどです。
▪ プロジェクトの早い段階から SharePoint およびフロントエンド技術の専門家をそれぞれプロジェ
クトに参加させるようにします。
ナレッジをチームに共有して開発がスムーズに進められるようにしましょう。
開発チームを構成する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 33
Slide 33 text
▪ SPFx の開発環境を準備する
ヒント 5:
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 34
Slide 34 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ 必要となるソフトウェアはすべて無償で入手できます。
▪ Node.js (現在は v10.x を推奨)
▪ Visual Studio Code (他のテキスト エディタでも可)
▪ Windows 10 ではなく Mac OS X や Linux でも開発することができます。
SPFx の開発環境
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 35
Slide 35 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ Self-Hosted Workbench
▪ localhost でホストする簡易的な Workbench
▪ SharePoint-Hosted Workbench
▪ SharePoint でホストする Workbench
▪ REST API 呼び出しを実行することができる
▪ コードは localhost で動くので複数の人が同じ環境で開発できる
SPFx の Workbench
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 36
Slide 36 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ Office 365 開発者プログラムから改名
▪ 開発向けの Microsoft 365 E5 の 25 ユーザー ライセンスが無償で提供されるプログラム
▪ 90 日間で更新だが更新している限りは永続的に使用できる
Microsoft 365 開発者プログラム
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 37
Slide 37 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ SPFx では複数の人が同じ実行環境で開発作業をすることができます。
同じ環境を共有できるということは開発する上で非常に大きなメリットがあります。
▪ 開発者ごとに異なる実行環境を提供する場合は環境の違いによる問題が発生しないように注意し
ましょう。
開発環境を準備する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 38
Slide 38 text
▪ SPFx の権限の昇格に注意する
ヒント 6:
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 39
Slide 39 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ SPFx はユーザーのコンテキストで動作します。
そのためユーザーの権限の範囲を超える操作はエラーになります。
▪ SPFx にはこれまでの SharePoint 開発にあったような "権限の昇格" をすることはできません。
ユーザーに対して適切な権限を付与することが基本的な対応方法になります。
SPFx でのユーザーの権限
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 40
Slide 40 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ 最も簡単な方法は Azure App Service または Azure Functions で特権アカウントで動作する処理を
実装し Web API として提供することです。
▪ 特権アカウントで動作させるためにはいくつかの方法があります。
▪ サービス アカウントの利用
▪ アプリケーションのアクセス許可の利用
▪ いずれの方法もメリットとデメリットがあり慎重に検討する必要があります。
SPFx での権限の昇格の代替案
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 41
Slide 41 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ サイト コレクションの管理者または SharePoint 管理者の権限を持つアカウントを作成します。
アカウントのユーザーとパスワードでログインします。
▪ 実装が簡単ですがセキュリティ上の懸念があります。
また多要素認証や定期的なパスワードの変更が要求される場合には使用できません。
サービス アカウントの利用
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 42
Slide 42 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ Azure AD に登録したアプリケーションにアプリケーションのアクセス許可を付与します。
証明書でログインします。
▪ 実装が複雑ですがセキュリティ上は安全です。
特定のサイト コレクションにのみ許可を与えるということはできません。
アプリケーションのアクセス許可の利用
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 43
Slide 43 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ ユーザーに与える権限をきちんと設計しましょう。
場合によってはカスタムの権限を作成することを検討しましょう。
▪ ユーザーに対してそれ以上の権限を与えることは脆弱性を生むことになりかねません。
組織によってはポリシーで禁止されている可能性もあります。
十分に検討した上で採用しましょう。
権限の昇格に注意する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 44
Slide 44 text
▪ SPFx を外部システムと連携する
ヒント 7:
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 45
Slide 45 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ SPFx は SharePoint REST API のほかに外部 API を呼び出すための機能を提供しています。
▪ Microsoft Graph (MSGraphClient)
▪ Azure AD でセキュリティ保護された API (AadHttpClient)
▪ OAuth は SPFx で実装されるため開発者は考慮する必要がありません。
SPFx の外部 API のサポート
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 46
Slide 46 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
サービス 機能
ユーザーとグループ ユーザー、グループ
ID およびアクセス管理 ID およびアクセス管理
生産性 予定表、ファイル、メール、メモ、個人用連絡先、ブックとグラフ
グループ作業 サイトとリスト、タスクとプラン、チームワーク
ユーザーと職場のインテリジェンス 複数のユーザー、プロファイル、ドキュメントの分析情報、分析
デバイスの管理 クラウド印刷、デバイスとアプリの企業管理
セキュリティ セキュリティ統合
クロスデバイス エクスペリエンス クロスデバイス エクスペリエンス
ユーザー通知 ユーザー通知
利用状況レポート レポート
教育 教育
ビジネス アプリケーション 顧客の予約、会計
Microsoft Graph のサービス
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 47
Slide 47 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ マニフェスト ファイルに使用するアクセス許可の種類を宣言します。
▪ アクセス許可はテナント レベルで管理されます。
▪ アクセス許可の承認には SharePoint 管理者の権限が必要になります。
外部 API へのアクセス許可の仕組み
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 48
Slide 48 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ マニフェスト ファイルに分離された Web パーツであることを宣言します。
これにより Web パーツに固有の Azure AD アプリケーションが作成されます。
▪ アクセス許可は Web パーツ単位で管理されます。
そのため他の Web パーツからの意図しない Web API の実行を防ぐことができます。
分離された Web パーツ
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 49
Slide 49 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ Microsoft Graph との連携は簡単です。
さまざまなサービスが統合されたエンドポイントである Microsoft Graph を使えば SPFx のできる
ことが格段に広くなります。
▪ Web パーツと連携するカスタムの Web API を作成する場合はセキュリティを向上させるため分
離された Web パーツにしましょう。
外部システムと連携する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 50
Slide 50 text
▪ SPFx の表示方法を拡張する
ヒント 8:
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 51
Slide 51 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ Web パーツの表示はサイト ページの設定で切り替えることができます。
▪ Article
▪ Home
▪ SingleWebPartAppPage
Web パーツの表示方法
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 52
Slide 52 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ マニフェスト ファイルに Single Part App Pages をサポートすることを宣言します。
ページの種類を SingleWebPartAppPage にすることで単一の Web パーツのみをサポートするペー
ジを作成することができます。
Single Part App Pages
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 53
Slide 53 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ Article または Home では複数の Web パーツを段組みで表現できます。
Web パーツ同士を接続してデータの交換を行うことができます。
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/dynamic-data
動的データによる Web パーツの接続
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 54
Slide 54 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ マニフェスト ファイルに Teams タブをサポートすることを宣言します。
▪ テナントのアプリ カタログ サイトにデプロイし Teams と同期することで Web パーツを Teams
タブとして使用することができるようになります。
▪ Teams のチームには Microsoft 365 グループのチーム サイトが紐づきます。
SPFx ではこのリソースを使用することができます。
Teams タブへの Web パーツの表示
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 55
Slide 55 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ "作るもの" の目的によって表示方法を検討しましょう。
▪ Single Part App Pages は Web パーツの没入感を向上させます。
SharePoint をベースとしたシステム開発では非常に役立ちます。
▪ Teams はコラボレーションのハブです。
Teams タブ開発ではユーザーのコラボレーションを加速させることができます。
SPFx の表示方法を拡張する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 56
Slide 56 text
▪ SPFx の開発を CI/CD で効率化する
ヒント 9:
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 57
Slide 57 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ SPFx でのソリューションのビルドおよび展開の自動化はぜひとも検討しておきたい課題です。
自動化することで開発者の余計な手間をなくすことができ開発者は本来の作業に集中できます。
▪ SPFx では Azure DevOps を使用してソリューションをビルドおよび展開する方法が紹介されてい
ます。
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/toolchain/implement-ci-cd-with-azure-devops
SPFx における CI/CD
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 58
Slide 58 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ ビルドやデプロイという反復的な作業から脱却できる
▪ 常に最新のビルドによる動作を確認できる
▪ コードに対しての品質が保証される
▪ 顧客のフィードバックを早く受け取ることで改善を加速させる
CI/CD によるメリット
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 59
Slide 59 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ 一般的にソフトウェア開発において CI/CD を導入することは必須といえます。
SPFx 開発も例外ではありません。
▪ Azure DevOps を使用する場合はジョブの実行時間について注意が必要です。
SPFx のビルドには時間がかかるため Free プランでは実行時間を使い切ってしまう可能性があり
ます。
SPFx の開発を CI/CD で効率化する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 60
Slide 60 text
▪ SPFx のトラブルに対応する
ヒント 10:
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 61
Slide 61 text
▪ SPFx 開発で発生しうるトラブルは以下のように分類できます。
▪ SharePoint に起因するトラブル
▪ SPFx に起因するトラブル
SPFx 開発で発生するトラブル
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 62
Slide 62 text
▪ SharePoint に起因するトラブルは SharePoint の仕様や制限によるものがほとんどです。
▪ 例としては REST API の 5000 件問題があります。
複数のフィルター条件の指定の順番によってエラーになることもあります。
リストのアイテムを 5000 件以下にするか検索を使うことで回避できます。
SharePoint に起因するトラブル
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 63
Slide 63 text
▪ SPFx に起因するトラブルは原因を究明することが難しいものがほとんどです。
▪ 例として SPFx はロード時に SPLoaderError.loadComponentError を発生させることがあります。
これは存在しないファイルを require したことや import の指定が間違っていることが原因です。
しかしエラー メッセージから判断することは困難です。
SPFx に起因するトラブル
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 64
Slide 64 text
▪ パフォーマンス テストは早めに実施しましょう。
特にリスト アイテムが 5000 件を超えるのかどうかは見積もりしておくようにしましょう。
▪ SPFx のエラーで解決できない場合は社内外のサポートを得られるようにします。
GitHub の issue や Tech Community も活用しましょう。
マイクロソフトのサポートを得る場合はプレミア サポートが必要になります。
SPFx のトラブルに対応する
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 65
Slide 65 text
まとめ
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 66
Slide 66 text
May 27 & 28, 2020
Takashi Shinohara | JP
#M365VM
▪ SPFx は新しく進化し続ける技術のためナレッジがまだ十分ではありません。
とはいえ実際に SPFx を使った事例は増えてきているというのが実感です。
▪ 10 のヒントとして実際に SPFx 開発を始めるために考えなければならないことを詰め込みました。
これからの SPFx 開発にご活用いただけると幸いです。
まとめ
Brought to you by:
The Global Microsoft Community &
M365Conf.com | #M365CONF
#M365VM
M365VirtualMarathon.com
Slide 67
Slide 67 text
MICROSOFT 365
Virtual MARATHON
May 27 & 28, 2020
36 hours / 2 days
ご参加いただきありがとうございました！
ご質問はありますか？
Speaker feedback
https://bit.ly/M365VMSpeakerFeedback
Event feedback
https://bit.ly/M365VMFeedback