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
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
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
▪ いくつかのプロジェクトで SharePoint Framework (SPFx) 開発の現場を技術支援してきました。 そこで得た経験をこれから SPFx 開発に携わる人に役立てることができればと考えています。 ▪ プログラミングに関する話はあまり出てきません。 開発者よりもマネージャーやアーキテクトに向けた内容になります。 セッションについて Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ SharePoint のクラウド化やモダン化に対応するための新しい開発方法 ▪ 現在のユーザーのコンテキストで動作する JavaScript コード ▪ 最新の Web テクノロジを使ったクライアント側での開発 ▪ 高速化された読み込みとレンダリング ▪ REST API によるリソースへのアクセス SPFx の特長 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
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
▪ Web パーツ ▪ アプリケーション カスタマイザー ▪ フィールド カスタマイザー ▪ リスト ビュー コマンド セット SPFx でサポートされる機能 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ ワークフロー ▪ イベント レシーバー ▪ アプリケーション ページ SPFx でサポートされない機能 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ SPFx は SharePoint のプラットフォーム上で動作します。 ▪ SharePoint 上で動作するということは通常のアプリケーション開発よりもインフラやセキュリ ティを考慮しなくてよいということになります。 それはつまりリソースを "やるべきこと" に集中させることに繋がります。 プラットフォームとしての SharePoint Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ さまざまなデータ列を定義することができるリスト ▪ 階層的にファイルを格納できるドキュメント ライブラリ ▪ Azure AD をベースとしたセキュアな認証 ▪ 細かい制御が可能な権限管理 ▪ 高度な検索 SharePoint が提供する機能 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ 開発が進むにつれて "SharePoint を使わなければよかった" と後悔することはよくあります。 ▪ 通常のアプリケーション開発ではなぜ駄目なのかを考えましょう。 SharePoint 上でアプリケーションを動作させなければならない理由を明らかにしましょう。 SPFx で開発するメリットを明確化する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ モダン化された SharePoint のカスタマイズとしては以下の 2 種類の方法があります。 ▪ SPFx の Web パーツ開発 ▪ Power Apps のカスタム フォームまたは Web パーツでの埋め込み ▪ SPFx 開発が常に最適解とは限りません。 それぞれの方法における特性を理解して適切な方法を選択する必要があります。 SharePoint のカスタマイズ方法 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ メリット ▪ 開発コストがかからない ▪ 専門知識が不要なため誰でも開発できる ▪ デメリット ▪ SharePoint に埋め込むため UI の統一感がなくなる ▪ SharePoint のすべての機能が使えるわけではない ▪ 追加のライセンス費用が発生する Power Apps のメリットとデメリット Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ SPFx は "開発" です。 開発には (自社開発にせよ委託開発にせよ) 大きなコストがかかります。 ▪ 実現しようとしているその機能は Power Apps で実現できませんか? SPFx ではないとできない理由があるかどうかを考えましょう。 SPFx を採用するかどうかを決定する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ 公式テンプレート (@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
▪ もちろん理想的なチームをはじめから作ることはできません。 むしろ SPFx 開発未経験のメンバーだけでプロジェクトを始めることがほとんどです。 ▪ プロジェクトの早い段階から SharePoint およびフロントエンド技術の専門家をそれぞれプロジェ クトに参加させるようにします。 ナレッジをチームに共有して開発がスムーズに進められるようにしましょう。 開発チームを構成する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ 必要となるソフトウェアはすべて無償で入手できます。 ▪ 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
▪ Office 365 開発者プログラムから改名 ▪ 開発向けの Microsoft 365 E5 の 25 ユーザー ライセンスが無償で提供されるプログラム ▪ 90 日間で更新だが更新している限りは永続的に使用できる Microsoft 365 開発者プログラム Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ SPFx では複数の人が同じ実行環境で開発作業をすることができます。 同じ環境を共有できるということは開発する上で非常に大きなメリットがあります。 ▪ 開発者ごとに異なる実行環境を提供する場合は環境の違いによる問題が発生しないように注意し ましょう。 開発環境を準備する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ SPFx はユーザーのコンテキストで動作します。 そのためユーザーの権限の範囲を超える操作はエラーになります。 ▪ SPFx にはこれまでの SharePoint 開発にあったような "権限の昇格" をすることはできません。 ユーザーに対して適切な権限を付与することが基本的な対応方法になります。 SPFx でのユーザーの権限 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ 最も簡単な方法は Azure App Service または Azure Functions で特権アカウントで動作する処理を 実装し Web API として提供することです。 ▪ 特権アカウントで動作させるためにはいくつかの方法があります。 ▪ サービス アカウントの利用 ▪ アプリケーションのアクセス許可の利用 ▪ いずれの方法もメリットとデメリットがあり慎重に検討する必要があります。 SPFx での権限の昇格の代替案 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ サイト コレクションの管理者または SharePoint 管理者の権限を持つアカウントを作成します。 アカウントのユーザーとパスワードでログインします。 ▪ 実装が簡単ですがセキュリティ上の懸念があります。 また多要素認証や定期的なパスワードの変更が要求される場合には使用できません。 サービス アカウントの利用 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ Azure AD に登録したアプリケーションにアプリケーションのアクセス許可を付与します。 証明書でログインします。 ▪ 実装が複雑ですがセキュリティ上は安全です。 特定のサイト コレクションにのみ許可を与えるということはできません。 アプリケーションのアクセス許可の利用 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ ユーザーに与える権限をきちんと設計しましょう。 場合によってはカスタムの権限を作成することを検討しましょう。 ▪ ユーザーに対してそれ以上の権限を与えることは脆弱性を生むことになりかねません。 組織によってはポリシーで禁止されている可能性もあります。 十分に検討した上で採用しましょう。 権限の昇格に注意する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ 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
▪ マニフェスト ファイルに使用するアクセス許可の種類を宣言します。 ▪ アクセス許可はテナント レベルで管理されます。 ▪ アクセス許可の承認には SharePoint 管理者の権限が必要になります。 外部 API へのアクセス許可の仕組み Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ マニフェスト ファイルに分離された Web パーツであることを宣言します。 これにより Web パーツに固有の Azure AD アプリケーションが作成されます。 ▪ アクセス許可は Web パーツ単位で管理されます。 そのため他の Web パーツからの意図しない Web API の実行を防ぐことができます。 分離された Web パーツ Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ Microsoft Graph との連携は簡単です。 さまざまなサービスが統合されたエンドポイントである Microsoft Graph を使えば SPFx のできる ことが格段に広くなります。 ▪ Web パーツと連携するカスタムの Web API を作成する場合はセキュリティを向上させるため分 離された Web パーツにしましょう。 外部システムと連携する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ Web パーツの表示はサイト ページの設定で切り替えることができます。 ▪ Article ▪ Home ▪ SingleWebPartAppPage Web パーツの表示方法 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ マニフェスト ファイルに Single Part App Pages をサポートすることを宣言します。 ページの種類を SingleWebPartAppPage にすることで単一の Web パーツのみをサポートするペー ジを作成することができます。 Single Part App Pages Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ 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
▪ マニフェスト ファイルに Teams タブをサポートすることを宣言します。 ▪ テナントのアプリ カタログ サイトにデプロイし Teams と同期することで Web パーツを Teams タブとして使用することができるようになります。 ▪ Teams のチームには Microsoft 365 グループのチーム サイトが紐づきます。 SPFx ではこのリソースを使用することができます。 Teams タブへの Web パーツの表示 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ "作るもの" の目的によって表示方法を検討しましょう。 ▪ Single Part App Pages は Web パーツの没入感を向上させます。 SharePoint をベースとしたシステム開発では非常に役立ちます。 ▪ Teams はコラボレーションのハブです。 Teams タブ開発ではユーザーのコラボレーションを加速させることができます。 SPFx の表示方法を拡張する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ 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
▪ ビルドやデプロイという反復的な作業から脱却できる ▪ 常に最新のビルドによる動作を確認できる ▪ コードに対しての品質が保証される ▪ 顧客のフィードバックを早く受け取ることで改善を加速させる CI/CD によるメリット Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
5000 件問題があります。 複数のフィルター条件の指定の順番によってエラーになることもあります。 リストのアイテムを 5000 件以下にするか検索を使うことで回避できます。 SharePoint に起因するトラブル Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
require したことや import の指定が間違っていることが原因です。 しかしエラー メッセージから判断することは困難です。 SPFx に起因するトラブル Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
GitHub の issue や Tech Community も活用しましょう。 マイクロソフトのサポートを得る場合はプレミア サポートが必要になります。 SPFx のトラブルに対応する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ SPFx は新しく進化し続ける技術のためナレッジがまだ十分ではありません。 とはいえ実際に SPFx を使った事例は増えてきているというのが実感です。 ▪ 10 のヒントとして実際に SPFx 開発を始めるために考えなければならないことを詰め込みました。 これからの SPFx 開発にご活用いただけると幸いです。 まとめ Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
karamem0
yusukebe
kimura_m_29
h0r15h0
77web
makihiro
yjszk
rainerhahnekamp
maroon1st
kentaroutakeda
seike460
niftycorp
kwakeuijin
philnash
sferik
ammeep
eileencodes
lemiorhan
addyosmani
reverentgeek
keithpitt
smashingmag
colly
mza
mongodb
