Framework・Office365を中心に扱うブログです。Onlineも歴史が長くなり、カスタマイズの手段が増えてきました。自分も混乱したので簡単なメモ書きを残しておきます。当記事は概要レベルの記事となっております。技術者歴の長い方、長文に抵抗の少ない方は以下を参照頂くほうがより深い理解が得られるかと思います。Onlineのみを対象とした記事となっております。Serverについては省略します。ブラウザ上で行えないものは全て「カスタマイズ」と見做しています。このページはカスタマイズの方法論のみについて扱っています。構築例は別のページにまとめています。HTMLなどクライアントサイドの仕組みを利用することになります。Onlineのサーバー上で動作するプログラムの作成は一切行えないからです。APIでサーバーに処理を依頼することはできますが、APIをホストするWebサーバは自前で用意する必要があります。APIなどMicrosoft社が提供するものは勿論、自分で開発したAPIもJavaScriptから実行できます。AD側で用意されています。HTMLをSharePointに適用する方法は複数存在します。SharePoint標準のマスターページを編集して直接埋め込んだり、アドインを開発したり、PowerShellで埋め込んだりと手段が多く、私の混乱の主な原因になっています。ここまでは画面のカスタマイズに関する記述でしたが、SharePoint標準のイベントを拾って何かの処理を行いたい場合、これはクライアントサイドの領分ではありません。Flowを利用するか、自前で用意したAPIをSharePointアドインやWebhookを利用して呼び出します。アイテムを追加した時に何かの処理を行うなどの場合がこれに該当します。奇麗に載せるのが難しいので画像になってしまいました。リンクなんか張りたかったんですがね。カスタマイズ手法まとめ実現可能範囲について補足します。画面カスタマイズ(色だけ)サイト全体の配色のみを変更するカスタマイズを指します。画面カスタマイズ(その他を含む)配色だけでなくWebパーツや自作のボタンなど、画面に加えるカスタマイズ全てを指します。イベント処理SharePoint標準機能の操作に対して、イベントを加えるカスタマイズを指します。自作Webパーツ内のイベントなど、標準以外のイベントは含みません。アイテムの追加などが該当します。サイト全体の配色を決定する機能です。クラシックサイトとモダンサイトの両方で利用可能です。プログラミングは必要なく、「どの場所にどの色を適用するか」を記載したJSONファイルを作成して適用するだけの作業になります。サイトの「外観の変更」機能で選択できるようになります。Docs直接埋め込みこの手法には名前が付いていないので勝手に命名しました。HTMLをSharePointに手動で読み込ませる方法です。埋め込みの方法は色々あります。以下に一例を記載します。JavaScriptを登録するとにかく手軽に始められることが利点で、古くからよく採用されていました。SharePointとの通信や描画を全て自前で行いますので、SharePoint側のアップデートがあった場合に影響を受けやすいことが欠点です。(例えばSharePoint標準のHTML要素内に自作のボタンを追加した場合、SharePoint側がHTML要素の作り方を変えてしまったら動かなくなる可能性が高いです。サイトではこの手法が採れなくなってしまいました。今後は徐々に採用されなくなっていくと考えています。サイトでは提供されていません。ライブラリの画面カスタマイズに特化した方法です。画面に対して変更を加えることができます。SharePoint標準のHTMLが描画された後に自作の処理を上被せしますが、JSLinkではSharePointが描画するHTMLを定義することが可能です。用途が限定されているものの、直接埋め込みよりも強力な方法です。サイトでは利用できません。こちらも今後は徐々に見かけなくなっていくでしょう。Frameworkでは、JSLinkを代替する方法が紹介されています。タイプなど、SharePointの構成要素のほとんどを含めることができる、独立したパーツです。サイトでも利用でき、対応可能範囲が広いため非常に強力な仕組みです。開発コストがやや高く、単品のWebパーツを開発する程度の目的では採用しづらいことが欠点です。サイト向けの開発は直接埋め込みとJSLinkで実現してしまうことが多いです。(複数サイトに展開するなど、パッケージ化が大事な場合は別。アドインは、ユーザーが利用中のサイトとは別のサイトで実行されており、IFrameでページ内に読み込まれています。サイトか、又はアドインをホストする別のWebサーバー上で実行されます。コントロール権限を持っていないというセキュリティ上の利点にもなっています。(略称:SPFx)ここまで紹介した従来のカスタマイズ方法が抱える課題を解決するために考案された、比較的新しい仕組みです。SharePoint上に配置されるモジュールは開発したJavaScriptです。FrameworkはシンプルにJavaScriptのみがIFrameを介さずにページに読み込まれます。ストアには公開できません。Studioは必要なくなりました。最終的な成果物としてJavaScriptがあれば良く、TypeScriptと任意のエディタで開発が可能になりました。エンジニアも参入しやすくなりました。サイトでも動作します。今後もMicrosoftによってサポートされていく仕組みだと思われるので、これからWebパーツを開発する場合はまずSPFxを検討することになると考えます。