鍋綿ブログ

C#・SharePoint・SharePoint Framework・Office365を中心に扱うブログです。

【初心者向け】SharePoint Framework (SPFx) 入門

SharePoint Online モダンサイトの唯一のカスタマイズ方法として、SPFxも定着してきたように思います。本記事では初心を思い出しつつエンジニアがSPFx開発に入門するために概要・前提知識・参考になるリンクをまとめます。

尚、当記事は開発初心者向けの情報を掲載しております。バリバリのWebフロントエンドエンジニア様にとっては冗長な記載が多くなりますがご容赦ください。

 

 

SharePoint Framework (SPFx) とは

SPFxは、SharePoint Online モダンサイトに対してJavaScript / CSSでのカスタマイズを導入するための唯一の仕組みです。開発はJavaScriptで行います。

SPFxで開発できるものは以下です。

 ・Webパーツ

 ・ビューにカスタムのコマンドを追加

 ・ビューに表示する列の描画をカスタマイズ

 ・サイト全体のヘッダ開発

 ・サイト全体のフッタ開発

 ・サイト全体にJavaScript / CSSを埋め込む

開発した物をSharePointに適用するには、「アプリ カタログ」と呼ばれる特殊なフォルダに開発物をアップロードする必要があります。下記はWebパーツ開発の例です。

f:id:micknabewata:20190613180057p:plain

開発~導入までのざっくりフロー

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からどうぞ

とにかく書いてみれば分かる。細かいことは後。まずは環境構築。

www.micknabewata.com

 

からのHelloWorld!

www.micknabewata.com

簡単な開発に成功した後に周辺知識もどうぞ

SPFxの開発は、Webパーツ以外は全部「拡張機能」に分類されています。拡張機能でできることをまとめました。

www.micknabewata.com

 

とりあえず公式は読んでおきましょう。私は一回開発しないと頭に入らないタイプですが。

docs.microsoft.com

 

複数のWebパーツをインタラクティブに接続するなら動的データ接続が有効です。

www.micknabewata.com

 

ちと古いやり方ですが動的データ接続が登場するまではグローバルにオブジェクトを共有して実現していました。

www.micknabewata.com

 

SPFxバージョン1.8はes5です。es6対応したい方はこちら。

www.micknabewata.com

 

事例好きの皆様お待たせしました。こちら事例です。

グラフ表示Webパーツ。

www.micknabewata.com

 

ニュース投稿Webパーツ。

www.micknabewata.com

 

ビュー内で値を編集できるフィールドカスタマイザー。

www.micknabewata.com

 

以上、参考になれば幸いです。