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
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
自己紹介 ▪ 篠原 敬志 (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
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
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
May 27 & 28, 2020 Takashi Shinohara | JP #M365VM ▪ Web パーツ ▪ アプリケーション カスタマイザー ▪ フィールド カスタマイザー ▪ リスト ビュー コマンド セット SPFx でサポートされる機能 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
May 27 & 28, 2020 Takashi Shinohara | JP #M365VM ▪ ワークフロー ▪ イベント レシーバー ▪ アプリケーション ページ SPFx でサポートされない機能 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
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
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
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
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
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
May 27 & 28, 2020 Takashi Shinohara | JP #M365VM ▪ SPFx では複数の人が同じ実行環境で開発作業をすることができます。 同じ環境を共有できるということは開発する上で非常に大きなメリットがあります。 ▪ 開発者ごとに異なる実行環境を提供する場合は環境の違いによる問題が発生しないように注意し ましょう。 開発環境を準備する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
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
May 27 & 28, 2020 Takashi Shinohara | JP #M365VM ▪ サイト コレクションの管理者または SharePoint 管理者の権限を持つアカウントを作成します。 アカウントのユーザーとパスワードでログインします。 ▪ 実装が簡単ですがセキュリティ上の懸念があります。 また多要素認証や定期的なパスワードの変更が要求される場合には使用できません。 サービス アカウントの利用 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
May 27 & 28, 2020 Takashi Shinohara | JP #M365VM ▪ Azure AD に登録したアプリケーションにアプリケーションのアクセス許可を付与します。 証明書でログインします。 ▪ 実装が複雑ですがセキュリティ上は安全です。 特定のサイト コレクションにのみ許可を与えるということはできません。 アプリケーションのアクセス許可の利用 Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
May 27 & 28, 2020 Takashi Shinohara | JP #M365VM ▪ ユーザーに与える権限をきちんと設計しましょう。 場合によってはカスタムの権限を作成することを検討しましょう。 ▪ ユーザーに対してそれ以上の権限を与えることは脆弱性を生むことになりかねません。 組織によってはポリシーで禁止されている可能性もあります。 十分に検討した上で採用しましょう。 権限の昇格に注意する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
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
May 27 & 28, 2020 Takashi Shinohara | JP #M365VM ▪ マニフェスト ファイルに使用するアクセス許可の種類を宣言します。 ▪ アクセス許可はテナント レベルで管理されます。 ▪ アクセス許可の承認には SharePoint 管理者の権限が必要になります。 外部 API へのアクセス許可の仕組み Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
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
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
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
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
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
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
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
May 27 & 28, 2020 Takashi Shinohara | JP #M365VM ▪ ビルドやデプロイという反復的な作業から脱却できる ▪ 常に最新のビルドによる動作を確認できる ▪ コードに対しての品質が保証される ▪ 顧客のフィードバックを早く受け取ることで改善を加速させる CI/CD によるメリット Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ SPFx 開発で発生しうるトラブルは以下のように分類できます。 ▪ SharePoint に起因するトラブル ▪ SPFx に起因するトラブル SPFx 開発で発生するトラブル Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ SharePoint に起因するトラブルは SharePoint の仕様や制限によるものがほとんどです。 ▪ 例としては REST API の 5000 件問題があります。 複数のフィルター条件の指定の順番によってエラーになることもあります。 リストのアイテムを 5000 件以下にするか検索を使うことで回避できます。 SharePoint に起因するトラブル Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
▪ パフォーマンス テストは早めに実施しましょう。 特にリスト アイテムが 5000 件を超えるのかどうかは見積もりしておくようにしましょう。 ▪ SPFx のエラーで解決できない場合は社内外のサポートを得られるようにします。 GitHub の issue や Tech Community も活用しましょう。 マイクロソフトのサポートを得る場合はプレミア サポートが必要になります。 SPFx のトラブルに対応する Brought to you by: The Global Microsoft Community & M365Conf.com | #M365CONF #M365VM M365VirtualMarathon.com
karamem0
itohiro73
fishofprey
kentaroutakeda
siketyan
miso
n1215
10xinc
niftycorp
os1ma
cocoeyes02
fabpot
akatsuki174
aarron
malarkey
soudai
quramy
lara
maltzj
yeseniaperezcruz
chrislema
jcasabona
shpigford
cassininazir
trallard