Author Archives: Hiroaki Oikawa

SharePoint Framework v1.8 の変更点

2019年3月8日に SharePoint Framework  v1.8 がリリースされました。

この記事では v1.8 の変更点について気になるところだけ抜粋して記載します。
詳細は以下のリリースノートを確認してください。
SharePoint Framework v1.8 release notes

 

Teams タブ

  • v1.7 ではプレビュー版としてリリースされていましたが、v1.8 で正式サポートとなりました。
  • 「Teams タブ」は SharePoint Framework の Web パーツの開発と同じ開発手法で開発したカスタムアプリケーションを Microsoft Teams に「タブ」として追加できるようにするためのソリューションです。

SharePoint Framework を使用した Microsoft Teams タグの作成

 

App ページ

  • v1.7 では Single Part App Page と呼ばれていた機能が、App Pages としてリリースされました。
  • App ページは、単一の Web パーツだけが配置された、ユーザーがページのレイアウトやコンテンツの変更ができないページを作成するためのソリューションです。

SharePoint Online での Single Part App Pages の使用

 

分離された Web パーツ (Domain isolated web parts)

  • v1.7 ではプレビュー版としてリリースされていましたが、v1.8 で正式サポートとなりました。
  • 通常の Web パーツは、Webパーツが配置されたページのコンテキストで動作しますが、分離された Web パーツは iFrame として作成されるため、別のコンテキストとして動作させることができます。
    これにより、Web パーツで使用する API に対して Azure AD でアクセス許可を設定する際に、特定の分離された Web パーツに対してだけ、アクセスを許可するというような指定ができるようになります。

分離された Web パーツ

 

その他

  • 古いバージョンの Fabric CSS をロードしないようにした
  • Web パーツの背景色について、テーマの背景色を使用するようにするプロパティを追加した
  • Web パーツのプロパティペインのコードを sp-webpart-base から sp-property-pane に移動した

 

Docker を使った SharePoint Framework 開発環境の構築 その2

はじめに

Docker 上に SharePoint Framework の開発環境を構築する手順をまとめました。
この資料の内容は、こちらのスライドからの抜粋となります。
まとめて読みたい方は、スライドをダウンロードしてください。

なお、環境構築手順は、
・開発環境を構築するためにホストとなる PC で行う手順
・Docker 上でプロジェクトごとに行う手順
の2部構成になっています。

この記事では、ホスト PC にインストールした Docker 上で、プロジェクトごとに行う作業手順について記載します。

 

Docker 上でプロジェクトごとに行う手順

プロジェクトフォルダの作成

Docker で Shared Drive として指定したドライブに、SharePoint Framework 開発用の作業フォルダを作成し、その作業フォルダの下にプロジェクト用のフォルダを作成します。

 

SharePoint Framework Docker イメージのダウンロード、設定、起動

PowerShell を起動して、以下のコマンドを事項します。
コマンドを実行すると、ローカル PC 上に指定バージョンの Docker イメージが存在しない場合のみ、GetHub から指定のイメージがダウンロードされます。
そして、Docker 上に環境が構築され、環境が起動します。

なお、SPFx バージョン番号 を省略すると、最新バージョンのイメージをダウンロードします。

以下、実行コマンドの例です。

 

各種モジュールのインストール

Docker 上に構築された開発環境にて、以下のコマンドを実行して必要なモジュールをインストールします。

 

プロジェクトの作成

続いて、以下のコマンドを実行してプロジェクトを作成します。
yo コマンドを実行すると色々と質問が表示され、それに回答していくとプロジェクトが作成されます。
Web パーツ開発、拡張機能開発により、質問への回答の仕方が異なってくるのですが、その辺りは別記事で紹介したいと思います。

なお、このコマンドを実行すると SharePoint Framework 開発に必要な各種ソースコードや設定ファイルがダウンロードされるのですが、この際に環境によってはエラーが発生する可能性があります。
一部ではありますが、エラーが発生した場合の対応や、追加で行わなければならない設定などを別記事でまとめているので、行き詰った方は参考にしてください。

Docker で SharePoint Framework 開発環境を構築する際の注意事項
SharePoint Framework v1.7.0, v1.7.1 Docker image 使用時の注意点

 

開発証明書の作成、インストール

続いて、以下のコマンドを実行して開発用証明書を作成します。

コマンド実行後、開発サーバーが起動するので、ローカル PC の Internet Explorer で  https://localhost:4321  を開いて、証明書をインポートします。
証明書のインポート先には「信頼されたルート証明機関」を指定してください。

 

 

以上で、プロジェクトごとに行う環境構築は完了です。
この後また別記事で、Web パーツなどプロジェクトの種類ごとに開発方法などを掲載していきたいと思います。

慣れればそうでもないのですが最初は大変な作業だと思いますので、何度か繰り返して体を慣らして、SharePoint Framework ライフを楽しみましょう!

Docker を使った SharePoint Framework 開発環境の構築 その1

はじめに

Docker 上に SharePoint Framework の開発環境を構築する手順をまとめました。
この資料の内容は、こちらのスライドからの抜粋+αとなります。
構築手順をまとめて確認したい方は、スライドをダウンロードしてください。

なお、環境構築手順は、
・開発環境を構築するためにホストとなる PC で行う手順
・Docker 上でプロジェクトごとに行う手順
の2部構成になっています。

この記事では、開発環境を構築するためにホストとなる PC で行う手順について記載します。

 

開発環境として Docker を使うことの利点

ローカル PC に開発環境を作らず、わざわざ Docker を使用する利点は、マイクロソフトの公式文書の中に記載があります。

SharePoint Framework におけるチーム ベースの開発

端的に言うと、プロジェクト毎の異なる環境要件に柔軟に対応できるようになるということが利点です。
例えばプロジェクト毎に SharePoint Framework のバージョンが異なっていたとしても、それぞれのバージョンの Docker 環境を作ることで複数環境を切り替えながら開発することができます。
SharePoint Framework はバージョンアップの頻度が高いため、こうしたバージョンを固定させる環境の仕組みづくりが非常に重要になると思います。

もう一つの利点は、SharePoint Framework のバージョン毎のイメージが提供されていることです。
そのため、バージョン毎の環境を簡単に用意することができます。

ということで、この記事を参考にぜひ Docker を使って開発環境を構築してみてください。

 

SharePoint Framework の開発環境として必要なもの

SharePoint Framework の開発環境を構築する前に、以下のものを用意してください。
※この記事でインストールするものは除いています。

  • OS
    • Windows、Mac、Linux など
  • ブラウザ
    • Google Chrome
      ※もちろん他のブラウザでも良いですが Chrome であればデバッガ機能があるので便利です。
  • コードエディタ
    • Visual Studio Code
      ※このブログでは VSCode を使用しますが、Sublime、ATOM など愛用のエディタでも良いです。
  • 実行環境

 

開発環境を構築するためにホストとなる PC で行う手順

それでは、SharePoint Framework の開発環境を構築するため、ホスト PC で行う手順を順を追って説明します。

Docker のインストール

Docker をダウンロードします。
https://www.docker.com/get-started

Windows ユーザー用ダウンロードリンクはこちら

ダウンロード後、インストーラの指示に従って Docker をインストールします。
インストールが完了すると、タスクトレイに Docker アイコンが表示されます。

Docker の設定

タスクトレイから Docker の[Settings]メニューを開きます。
[Shared Drives]タブを開き、開発中のソースファイルを格納する場所となる「プロジェクトフォルダ」を作成するドライブにチェックを付け、[Apply]ボタンをクリックします。

Visual Studio Code Debugger for Chrome のインストール

Visual Studio Code 拡張機能から[Debugger for Chrome]を検索しインストールします。

SharePointPnPPowerShellOnline のインストール

開発した SharePoint Framework アプリをデプロイする際に使用する PowerShell のコマンドレットをインストールします。
PowerShell を管理者モードで起動し  Install-module SharePointPnPPowerShellOnline を実行します。

 

以上が、ホスト PC で行う手順です。
この手順は、はじめて開発環境を構築する際に一度だけ行う作業となります。

ホスト PC の準備ができたので、別記事にてプロジェクト毎に行う作業について説明します。

SharePoint Online ページ診断ツール

はじめに

マイクロソフト純正の SharePoint Online 用ページ診断ツール「Page Diagnostics for SharePoint」が、google chrome 拡張機能としてリリースされています。

このツールを使ってどんな診断ができるのか試してみました。

 

Page Diagnostics for SharePoint の入手とインストール

chrome ウェブストアで「SharePoint」で検索すると出てきます。
https://chrome.google.com/webstore/search/sharepoint?hl=ja

[Chromeに追加]ボタンをクリックすると、確認メッセージが表示されるので[拡張機能を追加]をクリックします。

インストールするとブラウザの右上に拡張機能のボタンが追加されます(下図赤枠部分)

 

使い方と診断内容

使い方はとっても簡単。
チェックしたいページを開いた後、ツールバーから診断ツールを起動させて、[Start]ボタンをクリックするだけ。

 

すると、診断が開始されて、結果がすぐに表示されます。


結果が OK のところは緑のチェック、NG のところは赤のチェックが表示され、文字の部分をクリックすると NG の場合には NG の理由、改善策が英語で表示されます。

今回試しにすべてのチェックが NG になるようにして、どんな説明が表示されるのかを調べてみました。

Check Running as Standard  User

Check Requests To SharePoint

Check using CDN

Check for Large Image Sizes

Check for Structural Navigation

Check for CBQ WebPart

 

ちょっと試してみた

試しに以下二つの実験をしてみました。

実験1:
SharePoint のページライブラリに自分でコーディングした HTML ファイルの拡張子を aspx にしたファイルをアップロード。
このファイルの診断ができるかどうかをチェック。

結果は以下の通り、SharePoint ページではないと診断されチェックできませんでした。

実験2:
モダンページを診断できるかどうかをチェック。

結果は以下の通り、モダンページには対応していないとのこと。

 

今のところ、クラシック UI の診断しかできませんが、SPO のパフォーマンスが気になった場合は試してみると何か発見があるかもしれません。

 

SharePoint Framework v1.7 の変更点

SharePoint Framework 1.7 の変更点をまとめました。
プレビュー段階のものがほとんどですが、Dynamic Data が正式リリースになりました。

主な変更点

Dynamic Data

Web パーツ同士の連携を可能にするための仕組み。
Web パーツ A が自身の情報を動的データとして他の Web パーツに公開し、Web パーツ B が Web パーツ A の動的データをリアルタイムに読み取るということができるようになります。
動的データを使用した、SharePoint Framework コンポーネントの接続

 

SharePoint 2019 のサポート

SharePoint 2019 を正式サポート。

 

Teams タブへの対応(開発者プレビュー版)

SharePoint Framework の Web パーツと同じような開発手法で、Teams のタブに追加できるアプリの開発が可能となります。
SharePoint Framework を使用した Microsoft Teams タブの作成

 

SharePoint のページへの Teams タブアプリケーションの組み込み対応(開発者プレビュー版)

SharePoint のページ上に Teams タブのアプリを IFrame で組み込むことが可能となります。
SharePoint のソリューションとして Microsoft Teams のタブをホスティングする

 

Single Part App Pages(開発者プレビュー版)

ページ上に単一の Web パーツしか設置できないページで、エンドユーザーが自由にページのレイアウト変更や Web パーツの設定変更ができなくなっているページを作成することができます。
SharePoint Online での Single Part App Pages の使用

 

分離された Web パーツ(開発者プレビュー版)

Azure AD でセキュリティ保護された API (Microsoft Graph などの Azure AD に登録されている API) へアクセスする Web パーツを、他の Web パーツとは分離された状態で実行するための機能。
Web パーツを分離することにより、Azure AD により保護された API へのアクセストークンを他の Web パーツに横取りされることを防ぐことができます。
分離された Web パーツは IFrame としてページに埋め込まれます。
分離された Web パーツ

 

ドキュメントライブラリの変更通知のサブスクライブ(開発者プレビュー版)

ドキュメントライブラリに保存されているファイルに変更があった場合に、その変更を通知して他の Web パーツや SharePoint Framework 拡張機能が通知を受信することができます。
現時点ではリストには未対応。
複数のテナントをまたいで通知を受け取ることが可能なようす。
通知リストの購読

 

 

Dynamic Data については GA された機能なので、実際にサンプルを作ってみたいなと思っています。

 

SharePoint Framework v1.7.0, v1.7.1 Docker image 使用時の注意点

はじめに

Waldek Mastykarz さんが github で公開している docker-spfx ですが、先日 SharePoint Framework v1.7.0、v1.7.1 に対応したイメージが公開されました。

早速この最新イメージを使って環境構築を行ってみました。

これまでのイメージもそうだったのですが、使用するためには色々と山あり谷ありなので、きちんと動くまでに私が行ったことをメモしておきたいと思います。

 

docker-spfx

最新の docker-spfx は、以下の URL からダウンロード可能です。
https://github.com/waldekmastykarz/docker-spfx

docker-spfx を使った環境構築の基本については、昨年 bootcamp にて使用した資料を参照してください。
なお、最新版である version 1.7.0、1.7.1 のイメージは資料通りに作ってもうまくいかないので、この記事に記載の方法で適宜読み替えてください。

 

docker-spfx v1.7.0、1.7.1 を使うために必要なこと

github に記載の Known issues

まずはこれが必須です。
毎回のリリースごとに Known issues に必要な手順が記載されているので、ご自身の環境に合わせて対応してください。
v1.7.0、1.7.1 を Windows 上の Docker で使用する場合は、以下の 2 つの issue を対応してください。

Can’t access workbench and bundles in SharePoint Framework 1.6.0/1.7.0/1.7.1
Can’t access workbench and bundles in SharePoint Framework 1.6.0/1.7.0/1.7.1 on Windows

 

yo @microsoft/sharepoint 実行時のエラー対応

問題点

yo @microsoft/sharepoint を実行すると以下のエラーが発生します。

対策

yo で使用するパッケージマネージャを yarn に変更してください。
具体的には、 yo @microsoft/sharepoint  の代わりに yo @microsoft/sharepoint --package-manager yarn  を実行してください。
参考:https://github.com/waldekmastykarz/docker-spfx/issues/19

 

Local workbench を開く際に発生する「このページを表示できません」エラーの対応

問題点

Local workbench を開こうとすると「このページを表示できません」エラー(INET_E_RESOURCE_NOT_FOUND)が発生し、Local workbench が開けません。

対策

本記事の「github に記載の Known issues」に記載の対応を行ってください。

 

Local workbench が真っ白問題の対応

問題点

Local workbench を開くと Web パーツを追加するためのプラスマークのボタンなどが表示されず、Web パーツの追加ができません。

対策

IE 11 だとこの問題が起きるようです。Chrome で開くようにしてください。

 

Hosted workbench で Web パーツを追加しようとすると消えてしまう問題の対応

問題点

Hosted workbench を開いて Web パーツを追加するためにプラスマークを押すと、Web パーツを追加する領域が消えて操作ができなくなります。

対策

Hosted workbench 用に指定している SharePoint サイトの言語を「英語」にしてください。
第二言語だとダメなので、「英語」を指定してサイトを作成する必要があります。

 

私はこれらの対応を行うことで、v1.7.0、1.7.1 の docker-spfx で無事開発環境を構築することができました。

環境構築で行き詰った方、参考にしてみてください。

Docker で SharePoint Framework 開発環境を構築する際の注意事項

Docker を使って SharePoint Framework の開発環境を構築することで、プロジェクト毎の異なる環境要件にも対応できるようになります。

これにより、例えばプロジェクト毎に SharePoint Framework のバージョンが異なっていたとしても、それぞれのバージョンの Docker 環境を作って問題なく開発することができます。

SharePoint Framework はバージョンアップの頻度が高いため、こうしたバージョンを固定させる環境の仕組みづくりが非常に重要になり、マイクロソフトのサイトでも Docker を使った開発環境についての記載があります。

SharePoint Framework におけるチーム ベースの開発

 

とても便利な Docker を使った開発環境ですが、いざ構築しようとするといろいろと問題が発生します。

この投稿では 、私が Docker で SPFx 開発環境を構築する際に発生した問題について、分かっている限りの対応策を紹介したいと思います。

 

問題が発生したことがない条件

Docker による SPFx 開発環境構築で、過去に問題が発生したことがない条件は以下になります。
可能であればこの条件を満たした状態で環境構築をしたいところです。
ただ、あくまでも私が過去に問題が発生しなかっただけで、いかなる場合も問題が発生しないと言っている訳ではないのでご注意ください。

パターン1

・PC が オンプレ AD のドメインに参加している。
・ユーザーが オンプレ AD に属するユーザーである。
・ユーザーがローカル PC の Administrators グループに所属している。

パターン2

・PC が オンプレ AD のドメインに所属していない。(ワークグループに所属している)
・ユーザーが Microsoft アカウントのユーザーである。
・ユーザーがローカル PC の Administrators グループに所属している。

 

過去に発生した問題

上記条件を満たしていない状態で環境構築をした際に、以下に挙げるような問題に遭遇しました。

問題1

npm install gulp、npm install @microsoft/sp-office-ui-fabric-core –save、yo @microsoft/sharepoint を実行した際に「Error: EACCES」が発生する。

対策1

npm により多数のモジュールがダウンロード&インストールされますが、このエラーは node 上にアクセス権限がない場合に出るようです。
Linux に疎い私はアクセス権限を付けなおさないといけないのか?と思い、こちらのサイトを参考に「sudo chmod 777 /usr/local」を試したりしましたが、そもそも「sudo」が使えなかったりしてうまくいきませんでした。
結局私は問題が発生したことがない条件を満たす構成に変更して逃げたのですが、こちらのサイトに記載の対応で行けるよという情報がありました。

問題2

yo @microsoft/sharepoint を実行した際に、「Error: EINVAL」などのコンパイルエラーが発生する。

対策2

デフォルト設定では、yo をすると、パッケージマネージャとして npm が使用されますが、npm であるがためにコンパイルエラーになるということがあるようです。
何回やってもコンパイルエラーになるようであれば、以下の通り npm 以外のパッケージマネージャを指定して yo してみてください。
yo @microsoft/sharepoint –package-manager yarn

 

今後も問題を見つけたら追記していきたいと思います。

 

SharePoint Framework Extension (拡張機能) 基礎講座

SharePoint Framework Extension (拡張機能) の開発をこれからはじめる方向けに、以下の手順をまとめました。

  • 開発環境の構築
  • Application Customizer の開発
  • Field Customizer の開発
  • Command Set の開発

 

この資料は 2018 年 10 月 27 日に開催した、Global Office 365 Developer Bootcamp でハンズオン用の資料として作成したものになりますが、実際にハンズオンをしてみると環境により色々な問題が起きて、開発環境の構築をするだけでも一苦労という感じでした。

開発環境構築時のポイントについては別途まとめたいと思いますが、開発環境の構築さえできてしまえば、それぞれの開発については資料を見て進められるかと思います。

 

SharePoint Framework の開発は、これまでの SharePoint 開発と全く異なる環境、言語での開発となるため、新しく覚えないといけないことが多く最初のハードルがとにかく高い印象がありますが、そのハードルを越えるために本資料が少しでもお役に立てれば幸いです。

今度の Bootcamp で使用する環境

ただいま、10/27 開催の Global Office 365 Developer Bootcamp in Japan に向けてスライドやらハンズオンのネタやらを準備しているところです。

今回は SharePoint Framework を使った開発のハンズオンになるので、マイクロソフト系開発者が当たり前のように使っている Visual Studio 2017 を使うことはありません。

Web フロント開発の経験がない方だと、もしかすると普段はあまり使うことのない環境で開発をすることになるため、ハンズオンでは開発環境の構築から行う予定です。

 

ただ、開発環境構築のために色々ダウンロードしなければならず、会場の Wifi を使ってみんなが一斉にダウンロードをすると時間がかかってしまう可能性が高いです。

ということで、私のハンズオンにご参加いただく方は可能であれば以下の事前設定を終えておいていただけると、この後のハンズオンがスムーズに進められるかと思います。

①以下のスライドに記載のツール類のインストール

②Docker イメージのダウンロード

PowerShell を起動して、以下のコマンドを実行
docker pull waldekm/spfx:1.5.1

 

事前準備としてご協力いただけると幸いです。

Office 365 と kintone の連携

Office 365 と kintone の両方を使い分けている場合、この二つの優れたツールをシームレスに連携できれば・・・と考えることが多々あると思います。

そのニーズに応えるため、Microsoft Flow には kintone と繋ぐためのコネクタが提供されています。

kintone コネクタ (Microsoft Flow) を使う前に知っておきたいこと10選

 

kintone コネクタを使用すればプログラムを書くことなく Office 365 と kintone を連携させることができます!

ですが、有料なんですよね・・・Flow の有料プランでなければ、kintone コネクタが使えないのです。

 

ということで、この度、サイボウズさんからお話をいただき kintone コネクタを使わずに、Office 365 と kintone を連携させる方法を記事にしました。

そして、先日サイボウズさんの cybozu developer netowrk に公開していただきました!

Outlookアドインを使ってOutlookの中にkintoneのデータを表示する

こちらの記事を参考にしていただければ、プログラムを書く必要はありますが Office 365 と kintone を連携させることができます、しかも無料!

 

ぜひ、参考にしていただければと思います。

 

なお、kintone を使ったことがないけど、試してみたいなという Office Developer の方は、cyboze developer network への登録をお勧めします。

登録は無料で、1 年間、開発者ライセンスとして、kintone を使うことができます。

developer network へようこそ

 

逆に、Office 365 を使ったことがないけど、試してみたいなという kintone developer の方は、Office 365 試用版への登録をお勧めします。

こちら試用期間は30日間となってます。

Office 365 Enterprise E3 試用版 申込ページ

 

結構手軽にできるので、ぜひ試してみてください。