Sharepoint を 利用してサイトを作る必要が出たのでその時の備忘録としてメモしておきます
Sharepointでいろいろ開発しようとすれば、Sharepoint Framework での開発をしなければなりません。
Sharepoint は Webパーツをこの環境で作成することで様々な機能を付加することができます。
このWebパーツの開発をする環境がSharepoint Frameworkです。
MicrosoftにてSharepoint Frameworkの開発環境を整備について詳しく書かれています。
Sharepoint Framework の ベースとなっているのが Node.jsというJavascriptのプラットフォームです。
このNode.js上にSharepoint Frameworkの環境が作られるような感じです。
その内容は
Node.jsをインストール
コード エディターのインストール
Visual Studio Code
Gulp のインストール（gulpは、webサイト構築自動化の便利ツールです）
コマンドプロンプト上で
npm install gulp-cli --global
Yeoman のインストール（yeomanは、webアプリのプロジェクトのひな型生成をするツール）
コマンドプロンプト上で
npm install yo --global
Yeoman の SharePoint ジェネレーターをインストール
コマンドプロンプト上で
npm install @microsoft/generator-sharepoint --global
最新の Web ブラウザーをインストールする
Micsoroft Edge
新しい Web パーツ プロジェクトの作成
コマンドプロンプト上で
md ディレクトリ ・・・プロジェクトを作るディレクトリを作成する（すでにあればこのコマンドは不要）
cd ディレクトリ ・・・作成したディレクトリへ移動する
yo @microsoft/sharepoint
開発者用自己署名証明書の導入信頼
コマンドプロンプト上で
gulp trust-dev-cert
が一通りの手順です。
また、Micsoroftの「SharePoint 開発者向け GitHub リポジトリ」には、いくつかWebパーツのサンプルがあります。
そこで私は、１．のNode.jsのインストールを行った後でWebパーツ開発時に使用しているNode.jsのバージョン依存があることを知り、「SharePoint 開発者向け GitHub リポジトリ」で提供されているサンプルを使用するには、Node.jsのバージョンを切り換える必要があることを知りました。
このため、Node.jsをアンインストールしてNode.jsのバージョン管理ソフトを導入してからNode.jsをインストールするということをやり直しました。
いかがその手順です。
コード エディターのインストール
この導入は、どのタイミングでも良いです。
Visual Studio Code
最新の Web ブラウザーをインストールする
こちらも同じく、導入は、どのタイミングでも良いです。
Micsoroft Edge
Node.jsをインストールをやり直す
Node.jsを完全にアンインストールする
こちらの記事を参考に実施しました➡Windows 環境から Node.js を完全に削除する方法をやってみた
fnmというNode.jsバージョン管理ソフトをインストールする
こちらの記事を参考に実施しました➡Node.jsバージョン管理ツール「fnm」のインストール方法と使い方
fnmを利用してNode.jsをインストールする
同じくこちらの記事を参考に実施しました➡Node.jsバージョン管理ツール「fnm」のインストール方法と使い方
コマンドライン上で
fnm install 0.0.0 ・・・0.0.0は、Node.jsのバージョンです。必要なバージョンを指定してインストール
私の場合
fnm install 16.18.1
fnm install 13.14.0
ちなみに 導入されているバージョンを確認するには
fnm list
で確認できます。
新しい Web パーツ プロジェクトの作成
コマンドプロンプト上で
md ディレクトリ ・・・プロジェクトを作るディレクトリを作成する（すでにあればこのコマンドは不要）
cd ディレクトリ ・・・作成したディレクトリへ移動する（ここがプロジェクトのカレントディレクトリになる）
利用するNode.jsのバージョンを設定する
cd の移動先で（プロジェクトのカレントディレクトリ）
fnm use 0.0.0 ・・・0.0.0は、Node.jsのバージョンです。これから利用するバージョンを指定する
Yeoman の SharePoint ジェネレーターをインストール
cd の移動先で（プロジェクトのカレントディレクトリ）
npm install @microsoft/generator-sharepoint
Yeoman のインストール（yeomanは、webアプリのプロジェクトのひな型生成をするツール）
cd の移動先で（プロジェクトのカレントディレクトリ）
npm install yo
Gulp のインストール（gulpは、webサイト構築自動化の便利ツールです）
cd の移動先で（プロジェクトのカレントディレクトリ）
npm install gulp -D
コマンドライン上で動作を確認する（バージョン確認でGulpが使えるかを確認する）
.\node_modules\.bin\gulp -v
※ 相対アドレスで指定しないと動きません
新しい Web パーツ プロジェクトの作成
cd の移動先で（プロジェクトのカレントディレクトリ）
.\node_modules\.bin\yo @microsoft/sharepoint
※powershellが起動して行うバッチファイルがないというメッセージが出るなぜ？(未解決です)
gulpを使えるようにする（この項は不要かも）
プロジェクトのカレントディレクトリ内のpackage.jsonファイルを見つけてテキストエディタで開く
package.json内にある"script":{}を探す
"script":{}内に"gulp":"gulp", を追加する
※最後の「 , 」は、次に続く項目が無ければ不要です
"scripts":{
"gulp":"gulp"
}
上書き保存をする
開発者用自己署名証明書の導入信頼
コマンドプロンプト上で
.\node_modules\.bin\gulp trust-dev-cert
Node.jsをバージョン切り替えして利用するのであれば、基本的には、各プロジェクトごとにローカルインストールする必要があります。
グローバルインストールしてしまうとケンカしてしまう可能性があります。
プロジェクトのカレントディレクトリ上で
.\node_modules\.bin\コマンド
例
.\node_modules\.bin\gulp serve
.\node_modules\.bin\yo @microsoft/sharepoint
また、サンプルを実際に利用しようとした場合以下の方法でパッケージ化します。
サンプルのファイルをディレクトリごとコピーする
コマンドプロンプトを起動させる
cd でサンプルのディレクトリまで移動する
fnm で 使用するNode.jsのバージョンを切り換える
fnm use 0.0.0 ・・・0.0.0は、Node.Jsのバージョン fnm install 0.0.0 で事前利用するNode.jsをインストールしておくこと
npm で依存関係のあるファイルをインストールする
npm i-D
私の場合、この時点でよく「npm ERR! cb() never called!」がでるのであるがいろいろ試した結果
何回もnpm i を繰り返し実行するといずれインストールが完了するようです。
はっきりとはわからないがPCが遅すぎて途中でセッションが切れて接続できなくなるのではないかと思われる
gulpをインストールする
npm i gulp -D
コマンドライン上で動作を確認する
.\node_modules\.bin\gulp -v
コンパイルする
.\node_modules\.bin\gulp bundle --ship
パッケージ化する
.\node_modules\.bin\gulp package-solution --ship
開発者用自己署名証明書の導入
.\node_modules\.bin\gulp trust-dev-cert