Modern Work 食堂

Microsoft 365 やら Azure やらを広く浅く触って、Modern Work の研鑽を積むためのメモブログ

お試し用 SPFx extensions を公開

先日の Office 365 勉強会にて「SharePoint starter kit」の LT をやった反応を追っていて「表示領域が…」という意見がちらほらと。

そう、そうなの。

ノート PC だとまともにコンテンツを見れないのが Communication site の欠点だと思ってる。

 

この SPFx extensions は、SharePoint Communication site のバナーがスクロールされないイライラを解消するもので、ただそれだけです。

f:id:SPRestaurant:20180701232430p:plain

 

細かな内容は順次 readme.md に追加していくので、「誰でも使える」「便利」なものになるようにしていければと。

わからないことや、「こんな機能どう?」とかあれば、GitHub Issue か Twitter で投げかけれもらえれば、適宜対応していきやす。

 

github.com

 

これを機に、色んな SharePointer や Teams スキー とアプリを作っていけたらおもしろいんでないかな。

Office 365 User Group #22 に参加してきた & お蔵入り LT のはなし

かなり久しぶりに行ってきた。

LT で参加してきたわけなのだが、実は数日前に 2 回も LT 資料をまるっと書き直してたり・・・。

 

実際に LT で話した内容は、発表されたばかりの「sp-starter-kit」を使ってみた所感をざっと述べるぜ的なもの。

www.slideshare.net

 

でも実はこんなことをやろうかと思ってた。

 

まずは「SPFx v1.5」のはなし

beta の機能を分けてプロジェクトを作成できたり、Dynamic data が Preview として登場したりと、なかなかおもしろいアップデートだった。

もうちょっとすれば「Microsoft Graph client の GA」や「Microsoft Teams 上での SPFx サポート」「generator-sharepoint で Angular / Vue などのインテグレート」などが控えているので、いよいよ SPFx を学ぶ必要があるのかと思い、啓蒙活動をしていこうかと。

 

次に「Microsoft Teams」のはなし

「(正直なところでは) 好き勝手チームを作りたい」ものの、ほとんどの企業では「承認制」によって展開されているのが現実…。

申請書 (Excel) をメールで受け取って、管理者が PowerShell をポチポチする会社はまだまだ多いだろうなぁと。それを解決して、もっと多くの人に Microsoft Teams を使ってほしい。

 

そんなわけで、Microsoft Graph で beta API として Teams API が提供されたこともあり、Microsoft Flow だけで実現できないものかと、LT しようと思ったり。

 

【簡単な流れ】

  1. ユーザーが SharePoint リストに作成したいチームの情報を登録する
  2. 「Create list item」のトリガーで MS Flow が起動する
  3. Azure AD action が「Office 365 Groups」を作成する (このままだと Public なので、更新用アクションを追加する必要あり)
  4. Create Teams action が「チーム」を作成する
  5. ユーザーが作成した SharePoint リストアイテムに作成完了ステータスを書き込む

 

f:id:SPRestaurant:20180620235047p:plain

 

注意ポイント

  • Azure AD アクションは Preview 版 (6/20 時点)
  • Create Teams アクションは GitHub に公開されている有志のもの (※)
  • 事前に Azure AD アプリケーションの登録が必要

 ※ Microsoft Graph の CreateTeam は、beta の現時点では「Delegate」でないと使うことができないため、このような手法になる。

 

こんなところで、あとで気がむいたらサンプル or テンプレートでも公開しておこうかと。

React Script Editor の紹介①

滞っていたこの雑なブログも、そろそろ復帰の時…。

SharePoint がモダン UI になって、少し時間が経ちました。 「あれができなくなった」「これがやりたい」といった具合にけっこう不満?がたまってる人がいたので、今回は「SPFx React Script Editor Web パーツ」を紹介がてら、一通り読めば実装できるように手順を書いていこうかと。

この Web パーツは、クラシック UI で標準提供されていた「スクリプトエディター Web パーツ」を、SPFx でリメイク?したものです。

前提環境
  • Visual Studio Code (お好みでその他 IDE もどうぞ)
  • Node.js
    事前にいくつかのモジュールを用意したいので、下記コマンドを実施します
    「npm install -g typescript gulp-cli
本題

GitHub からソースコードを ZIP Download します。(Fork > Clone でもおk)

github.com

f:id:SPRestaurant:20180322004043p:plain

解凍したら、「samples\react-script-editor」を VS Code で開きます。

f:id:SPRestaurant:20180322004040p:plain

「Ctrl + @」でターミナルを起動します。

f:id:SPRestaurant:20180322004037p:plain

ターミナルで下記のコマンドを実行します。
このコマンドによって、react-script-editor で必要な追加モジュールがダウンロードされます。(けっこう時間かかる)
「npm install」

次は証明書のインストールを行います。(この後のローカル確認作業時に必要になります。)
「gulp trust-dev-cert」

次にローカルで Web パーツを動かしてみたいので、下記のコマンドを実行します。
このコマンドでは、TypeScript や Sass などのトランスパイル・バンドルを実施後、既定のブラウザで Web パーツをデバッグが開始されます。
「gulp serve」

f:id:SPRestaurant:20180322002903p:plain

Web パーツをページに追加して、スクリプトを挿入し、Preview を見てみましょう。
(ここでは、フォルダー内の readme.md に記載されたデモ用のスクリプトを挿入しています。)

f:id:SPRestaurant:20180322004034p:plain

f:id:SPRestaurant:20180322004030p:plain

f:id:SPRestaurant:20180322004104p:plain

f:id:SPRestaurant:20180322003108p:plain

けっこういい感じに動くんじゃないかなぁと。

さて、このままではデバッグモードを実行したままなので、VS Code に戻ってターミナルに「Ctrl + C」を送信して処理を中断しましょう。

f:id:SPRestaurant:20180322003105p:plain

ここまでで前半戦終了

続きは次の更新で。 次回は、実際の SharePoint サイトへ展開していきます。

(当然 OSS なので、何か問題があったり改善案がある場合には、GitHub の Issue に投稿してみるのもありかもしれませんね。)