SharePoint Online モダンサイトの唯一のカスタマイズ方法として、SPFxも定着してきたように思います。本記事では初心を思い出しつつエンジニアがSPFx開発に入門するために概要・前提知識・参考になるリンクをまとめます。
尚、当記事は開発初心者向けの情報を掲載しております。バリバリのWebフロントエンドエンジニア様にとっては冗長な記載が多くなりますがご容赦ください。
- SharePoint Framework (SPFx) とは
- SPFx開発に必要なスキル
- スキルが無い?心配無用。HelloWorldからどうぞ
- 簡単な開発に成功した後に周辺知識もどうぞ
- 事例好きの皆様お待たせしました。こちら事例です。
SharePoint Framework (SPFx) とは
SPFxは、SharePoint Online モダンサイトに対してJavaScript / CSSでのカスタマイズを導入するための唯一の仕組みです。開発はJavaScriptで行います。
SPFxで開発できるものは以下です。
・Webパーツ
・ビューにカスタムのコマンドを追加
・ビューに表示する列の描画をカスタマイズ
・サイト全体のヘッダ開発
・サイト全体のフッタ開発
・サイト全体にJavaScript / CSSを埋め込む
開発した物をSharePointに適用するには、「アプリ カタログ」と呼ばれる特殊なフォルダに開発物をアップロードする必要があります。下記はWebパーツ開発の例です。
SPFx開発に必要なスキル
前述の通りJavaScriptでの開発になりますが、ピュアなJavaScriptではなくそれをベースに型付けを追加したTypeScriptを利用します。
JavaScriptはオープンソースの世界です。エディタ・フレームワーク・JavaScriptファイルの圧縮自動化・テスト自動化など快適な開発に必要な諸々すべてオープンソースのものを入手することができます。
と、いうわけで、SPFxの開発もオープンソースなツールで行えるようになっています。Office 365と直接繋がるコアな処理の部分はMicrosoftが作ったライブラリを利用するほうが便利ですが、その他は自由です。
とはいえ新しい開発をする度にオープンソースを寄せ集めてアレもコレも組み合わせるのは面倒極まりない。そこで予め寄せ集めておいたセットを簡単に展開できる「ジェネレーター」なるツールを利用するのがWebフロントエンド開発では一般的です。SPFxではyeomanというジェネレーターを介してプリセットが提供されております。
プリセットに含まれているツールを含め、SPFx開発で知っておくべきキーワードを以下に列挙します。
- TypeScript / CSS / HTML (開発言語)
- Sass (CSSをより便利に書く記法)
- React (フレームワーク。必須ではなく他のものでも書けるし使わなくても良い)
- yeoman (ジェネレーター)
- Node.js (開発・デバッグ時にWebサーバーとして利用)
- gulp (操作の自動化ツール。デバッグやパッケージ化の際に利用)
スキルが無い?心配無用。HelloWorldからどうぞ
とにかく書いてみれば分かる。細かいことは後。まずは環境構築。
からのHelloWorld!
簡単な開発に成功した後に周辺知識もどうぞ
SPFxの開発は、Webパーツ以外は全部「拡張機能」に分類されています。拡張機能でできることをまとめました。
とりあえず公式は読んでおきましょう。私は一回開発しないと頭に入らないタイプですが。
複数のWebパーツをインタラクティブに接続するなら動的データ接続が有効です。
ちと古いやり方ですが動的データ接続が登場するまではグローバルにオブジェクトを共有して実現していました。
SPFxバージョン1.8はes5です。es6対応したい方はこちら。
事例好きの皆様お待たせしました。こちら事例です。
グラフ表示Webパーツ。
ニュース投稿Webパーツ。
ビュー内で値を編集できるフィールドカスタマイザー。
以上、参考になれば幸いです。