新しいUI(モダンUI)でのカスタマイズ -SharePoint Framework-

こんにちは、MS開発部の 荒井 です。

新しいUI(以下モダンUI)の機能が次々と更新されていく中、「これからSharePointOnlineを使うならモダンサイトがいいのでは?」「モバイル対応のためにレスポンシブなサイトづくりをするならモダンサイトが…」と、モダンサイトに興味を持っている方はたくさんいらっしゃるはずです。

ただ、その中で障害となっていることの1つがカスタマイズだと思います。「そもそもカスタマイズしたくない」というお客様が大半ですが、便利なサイトづくりのためにも、少しだけカスタマイズすることはよくあることです。
しかし、クラシックサイトでよく使用されていた”スクリプトエディター”や”HTMLフォームのWebパーツ”はモダンサイトには存在しないため、JavaScriptで気軽にカスタマイズすることが不可能になっています。

ではモダンサイトでカスタマイズするにはどうするのかと言いますと、SharePoint Framework(略してSPFx)と呼ばれるものを使用します。

今回はこのSPFxについて少しご紹介できればと思います。
 

種類

・Webパーツ
ページに配置できるWebパーツです。以前のWebパーツとは作成方法が違い別物になっています。
モダンサイトでのカスタマイズではこちらを作成するのが一般的かなと思います。

・拡張機能
こちらはさらに複数のタイプが用意されており、
①委任コントロールのように全てのページで実行されるプログラムを作成したり、ヘッダーやフッターの作成が可能なApplicationCustomizers
リストビューの外観を変更でき、以前ご紹介した 列の書式設定 よりも自由度が高いFieldCustomizers
リストビューのツールバーに新たなメニューを追加することができるCommandSets
の3種類があります。

 

作成方法

最初に環境構築として下記ページの操作を行う必要があります。
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/set-up-your-development-environment

環境構築が終わった後、下記ページを参考に作成することが可能です。
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension

どれもTypeScript、HTML、CSSを中心に作成します。TypeScriptはコンパイルされてJavaScriptになる言語で、jQueryなどのライブラリを使用することもできます。
またReactなんかも使えるので、表示内容を動的に変更したい場合などはオススメですね。

 

サンプル

弊社でも少しずつですが、Webパーツを作成しています。

以前ご紹介した「5000件以上のリストアイテムを表示するJavaScriptライブラリ」のWebパーツver.といったところでしょうか。モダンサイトに馴染むような外観に変更し、当然レスポンシブ対応もしています。


もちろん検索機能も充実させる予定です。
がんばって完成させたいですがなかなか時間がとれない…

 

以上、SharePoint Frameworkの簡単な紹介でした。
これからSharePointの主流は少しずつモダンサイトに移っていくと思うので、SPFxについてはまだまだ次回以降も書いていく予定です。

 

弊社の業務内容などにご興味のある方は、お気軽にお問い合わせください。
(お問い合わせはこちらのページをご確認の上、メールアドレス「info@deepcom.co.jp」までご連絡ください。)

 

コメントは利用できません。