SharePoint Online はクラウド サービスです。そのため、日々サーバー側でのバグフィックスや機能改善などが行われています。それらは、ユーザーインタフェースの部分に関することもあり、サイトの見た目に関わるデザインをカスタマイズしていた場合、大きな影響を受けることもあります。

こうしたデザイン カスタマイズについて扱ったセッションが Ignite 2015 にもありましたので、その内容を追いながらデザイン カスタマイズについて考えたいと思います。

Deep Dive into Safe SharePoint Branding in Office 365 Using Repeatable Patterns and Practices
https://channel9.msdn.com/Events/Ignite/2015/BRK3164

マスターページのカスタマイズ

これまで、SharePoint のデザイン カスタマイズはマスターページと呼ばれるファイルを作成・カスタマイズすることが多くありました。しかしながら、マスターページは SharePoint が動作する上での様々な処理が組み込まれており、バージョンアップ時などでは大きな影響を受けることがあります。

マスターページのカスタマイズを行う場合は、標準のマスターページ ファイル(例えば Seattle.master)のコピーを作成し、カスタマイズを行い、サイトへ適用を行います。こうしたファイルでは、標準のファイルへは反映されるはずのバグフィックスなどが適用されないなどの注意が必要になります。

そのため、マスターページのカスタマイズは、極力避けることが推奨されています。

テーマの適用

SharePoint Online の外観を変更する方法として、「テーマ」機能があります。「サイトの設定」-「外観」-「外観の変更」の機能が、この「テーマ」機能です。いくつか既定で用意されているテーマのほかに、独自のテーマを作成することができます。

テーマ作成を手助けしてくれるのが、無償で公開されてる SharePoint Color Palette Tool です。本来、XML にて記述するテーマですが、このツールを用いることで GUI で設定を行い、その結果を XML へ出力することが可能となります。出力されるファイルの拡張子は「.spcolor」です。

このツールに関しては、下記の記事でもご紹介をしています。

SharePoint Color Palette Tool を使ってみた
http://idea.tostring.jp/?p=431

代替 CSS の適用

テーマでは扱うことができない細かな部分の変更を行うために、スタイルシートの作成・適用を行うことができます。この適用には、マスターページをカスタマイズするのではなく「代替 CSS」機能が利用できます。「発行機能」に含まれる「デザイン マネージャー」を利用するほか、プログラムなどを作成し CSOM または REST により、Web クラスの「AlternateCssUrl プロパティ」を変更することで適用が可能なようです。

Office 365 カスタム テーマの適用

その他、最上部の Office 365 のロゴが表示されている部分については、「Office 365 管理センター」-「会社プロファイル」-「カスタム テーマ」から変更が可能になっています。こちらの変更は、Office 365 の他のサービスへも反映されますので、Office 365 サービス全体の統一感を作ることができます。

どの方法を選択すべきか?

今回ご紹介した方法のうち、やはりマスターページのカスタマイズが自由度が高いのですが、その分だけカスタマイズに必要なコスト、維持に必要なコストが多くなってしまいます。

20150708-1

企業内で利用するのであれば、みんなが利用するポータルサイトではある程度のデザイン変更を行い、その他のチームサイトではテーマの変更くらいに留めておくなどの考慮が必要になるかと思います。

さいごに

クラウドサービスである SharePoint Online を長く利用するあいだに、今後も様々な機能拡張や変更があるものと思います。こうしたデザインのカスタマイズに関しても、そうした将来の変更を考慮しながら上手くつき合っていけたらと思いました。ためしにということで、「テーマ」と十数行ほどの「代替 CSS」を用いてサイトを作成してみました。コンテンツ部分は「JS リンク」などで表示部分に手を入れています。

20150708-2

わずかな変更ですが、このくらいの変更でも印象が変わったように思います。デザインにどこまでコストをかけるべきか?それにより得られる効果がどれだけあるか?など、考えていく必要がありそうです。