macでSharePoint Frameworkの最初の一歩を踏み出す

8332 ワード
SharePointFramework SharePoint SharePoint テキストリンク

はじめに

社内の情報ポータルサイトとして、SharePoint Online を使っています。見た目の統一感を出しやすいので、モダン表示を採用しています（その他、いろいろなメリットありますが割愛します）。標準 Web パーツでそれなりのことはサクッとできちゃいますが、ちょっとしたインタラクティブなコンテンツを作りたいと思うと、すぐ壁にブチ当たってしまいます。標準 Web パーツだけでは、HTML や JavaScript を仕込めないのです、、、。

そこで利用するのが、SharePoint Framework です。サクッと標準 Web パーツを「使う」のではなく、ゴリッと拡張 Web パーツを「作る」ためのフレームワークが用意されています。今回は、最初の一歩ということで、HelloWorld してみました。公式ヘルプ上の手順は、Windows や PowerShell を前提としていますが、せっかくなので mac ベースでやってみました。

手順

事前準備から SharePoint Framework で作成した独自 Web パーツをローカル環境で動かすまでの手順をまとめました。

Node.js を整備する

執筆時点でサポートされている Node.js は v8.x 系と v10.x 系です。必要に応じて、インストールしてください。わたしは、v8.17.0 しかインストールしていなかったので、v10.20.1 を追加インストールしました。

インストール済みのバージョンを確認。

$ nodebrew ls
v8.17.0

インストール可能なバージョンを確認。

$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
v0.1.8    v0.1.9    v0.1.10   v0.1.11   v0.1.12   v0.1.13   v0.1.14   v0.1.15
v0.1.16   v0.1.17   v0.1.18   v0.1.19   v0.1.20   v0.1.21   v0.1.22   v0.1.23
v0.1.24   v0.1.25   v0.1.26   v0.1.27   v0.1.28   v0.1.29   v0.1.30   v0.1.31
v0.1.32   v0.1.33   v0.1.90   v0.1.91   v0.1.92   v0.1.93   v0.1.94   v0.1.95
v0.1.96   v0.1.97   v0.1.98   v0.1.99   v0.1.100  v0.1.101  v0.1.102  v0.1.103
v0.1.104  
（省略）

v10.x 系の最新版をインストール。

$ nodebrew install v10.20.1 
Fetching: https://nodejs.org/dist/v10.20.1/node-v10.20.1-darwin-x64.tar.gz
######################################################################### 100.0%
Installed successfully

インストールが成功したら、利用バージョンを切り替えます。

$ nodebrew use v10.20.1
use v10.20.1
$ nodebrew ls          
v8.17.0
v10.20.1

current: v10.20.1

必要なモジュールをインストールする

まず、Yeoman と Gulp から。

$ npm install -g yo gulp

続いて、本命の SharePoint Client-side Solution Generator を。

$ npm install -g @microsoft/generator-sharepoint

SharePoint プロジェクトを生成してみる

先ほどインストールした SharePoint Client-side Solution Generator を実行し、プロジェクトを生成します。

$ mkdir helloworld-webpart
$ cd helloworld-webpart 
$ yo @microsoft/sharepoint

インタラクティブに回答していきます（すべてデフォルト応答しました）。

$ yo @microsoft/sharepoint
? ==========================================================================
We're constantly looking for ways to make yo better! 
May we anonymously report usage statistics to improve the tool over time? 
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== (Y/n)

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |      Welcome to the      |
   `---------´   |  SharePoint Client-side  |
    ( _´U`_ )    |    Solution Generator    |
    /___A___\    '--------------------------'
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

Let's create a new SharePoint solution.
? What is your solution name? helloworld-webpart
? Which baseline packages do you want to target for your component(s)? SharePoin
t Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.14.4
? Do you want to allow the tenant admin the choice of being able to deploy the s
olution to all sites immediately without running any feature deployment or addin
g apps in sites? No
? Will the components in the solution require permissions to access web APIs tha
t are unique and not shared with other components in the tenant? No
? Which type of client-side component to create? WebPart
Add new Web part to solution helloworld-webpart.
? What is your Web part name? HelloWorld
? What is your Web part description? HelloWorld description
? Which framework would you like to use? No JavaScript framework
（省略）

最後の質問の選択肢のひとつに React がありました！ 最近も React でデモアプリを作成してもらったばかりなので、別の機会に移植してみようと思います。今回は、デフォルトの No JavaScript framework で先に進めます。

? Which framework would you like to use? (Use arrow keys)
❯ No JavaScript framework 
  React 
  Knockout

SharePoint Workbench で Web パーツを動かしてみる

まず、事前準備として、開発用の自己署名証明書を準備します。こちらの手順は、初回のみ実行すれば OK です。

$ gulp trust-dev-cert

開発用の自己署名証明書を受け入れるため、パスワードを入力します。

$ gulp trust-dev-cert  
Build target: DEBUG
[11:52:59] Using gulpfile ~/Repositories/helloworld-webpart/gulpfile.js
[11:52:59] Starting gulp
[11:52:59] Starting 'trust-dev-cert'...
[11:52:59] Starting subtask 'configure-sp-build-rig'...
[11:52:59] Finished subtask 'configure-sp-build-rig' after 4.95 ms
[11:52:59] Starting subtask 'trust-cert'...
[11:53:00] [trust-cert] Attempting to trust a dev certificate. This self-signed certificate only points to localhost and will be stored in your local user profile to be used by other instances of gulp-core-build-serve. If you do not consent to trust this certificate, do not enter your root password in the prompt.
Enter your password: 
[11:53:24] Finished subtask 'trust-cert' after 25 s
[11:53:24] Finished 'trust-dev-cert' after 25 s
[11:53:25] ==================[ Finished ]==================
[11:53:25] Project helloworld-webpart version:0.0.1
[11:53:25] Build tools version:3.12.1
[11:53:25] Node version:v10.20.1
[11:53:25] Total duration:28 s
$

続いて、SharePoint Workbench を起動します。

$ gulp serve

Web ブラウザ上で SharePoint Workbench がローカル起動しました。「HelloWorld」Web パーツを追加し、Group Name に "My First App" をセットしてみました。

Visual Studio Code でプロジェクト構成を確認してみる

プロジェクト構成はこんな感じです。標準 Web パーツの「だれでも使える Office ワールド」とは別世界ですね、心が落ち着きます。TypeScriptが採用されており、render メソッドを実装すれば良さそうです。

さいごに

今回は、公式リファレンスに忠実に従い、No JavaScript framework を選択しましたが、候補として React も選択可能です。既存の React アセットを SharePoint ネイティブで動かすことができるので、可能性が広がりそうですね。

SharePoint Online というエンタープライズ向けのコラボレーションソフトウェアに、React などを採用したモダン Web アプリケーションを正規に持ち込む拡張手段が用意されているのは、大変好ましいことです。しばらく、こっち系の開発から遠ざかっていましたが、あらためて「開発者にやさしい」（リファレンスが体系的に整理されており、物量的にも充実している）に感心させられました。

参考

SharePoint Framework の概要（公式リファレンス）