SharePoint Framework 拡張機能開発 ハンズオン
2020年11月9日に Global Microsoft 365 Developer Bootcamp 2020 TOKYO にて、SharePoint Framework の拡張機能開発についてのハンズオンを担当しました。 その際のスライドを SlideShare にアップしています。
SharePoint Framework での SharePoint REST API 呼び出し (async/await 編)
はじめに
別記事にて、 SharePoint Framework の SPHttpClient による SharePoint REST API 呼び出しで Promise を使った場合のパターンについて記事を書きましたが、今度は Promise を使わず、TypeScript の async/await を使ったパターンについて書きたいと思います。
async/await を使った SharePoint REST API 呼び出しのサンプル
GET 処理
概ね以下のようなコードになるかと思います。 ちなみにこの例は、指定のリストの指定のアイテム ID のアイテムについて列を指定してデータを取得するものとなります。
SharePoint Framework での SharePoint REST API 呼び出し (Promise 編)
はじめに
SharePoint Framework にて SharePoint REST API を呼び出す方法について、Promise チェーンを書く際にあまりにも煩雑に感じた部分があったので、その点を解消するための自分なりのやり方をメモしました。
Promise を使った SharePoint REST API 呼び出しのサンプル
GET 処理
概ね以下のようなコードになるかと思います。 ちなみにこの例は、指定のリストの指定のアイテム ID のアイテムについて列を指定してデータを取得するものとなります。
SharePoint REST API の $select に指定する列名について
はじめに
SharePoint の REST API を使ってアイテムを取得する際に $select を付けて特定の列名のみピックアップすることができますが、$select に指定する列名を取得する方法についてまとめました。
$select に指定する列名
$select には、列のタイトルではなく内部名と言われるものを指定する必要があります。
列のタイトルと内部名はそれぞれ以下で確認可能です。
列のタイトル：リストのビューや設定ページに表示される列名（赤枠内）
列の内部名：リストのビューで列でフィルタやソートをした際のURLに含まれる値（赤字箇所）
https://[サイトのURL]/Lists/List1/AllItems.aspx?sortField=LinkTitle&isAscending=true&viewid=e1824b1e%2D97a3%2D4ea7%2D9524%2D1f088f5210a2
SharePoint 標準の列や自分で追加した英語名の列であれば上記の内部名を確認し $select に指定すればよいのですが、日本語名で列を作成した場合や極一部の標準の列は、以下の URL のように $select に内部名を指定してもエラーとなり列の値を取得することができません。
/_api/web/lists/getbytitle(‘お知らせ’)/items?$select=[日本語名で作成した列の内部名/極一部の標準の列の内部名]
リストの種類を表す「リストテンプレート ID」
はじめに
SharePoint Framework 拡張機能のコマンドセットを開発する際に、どのリストにカスタムアクションを紐づけるのかを elements.xml の RegistrationId 属性で指定します。 RegistrationId にはリストテンプレート ID を指定するのですが、このリストテンプレート ID とはいったい何者なのか、SharePoint オンプレ時代から SharePoint に関わっていない限り何だかよく分からないと思うので、この記事で簡単に解説します。
リストテンプレート ID とは
リストテンプレート ID は、SharePoint のリストの種類ごとに割り当てられた ID です。 この ID を見ることで、リストがどのテンプレートから作成されたのかを識別することができます。 既存リストの リストテンプレート ID は、プログラムを通じて確認することが可能です。 PowerShell の場合、以下のようなコードで確認できます。
SharePoint Web Service API の一部が廃止されます
はじめに
SharePoint Server の初期の頃から実装されていた、Web Service API の一部が遂に廃止されるようです。 既に大部分が移行済みかと思いますが、もしまだこの API を利用している場合は、移行が必要となります。 Microsoft 365 管理センターにアクセス可能な方は以下のリンクから公式メッセージを確認してください。 https://admin.microsoft.com/AdminPortal/Home#/messagecenter?id=MC221387&MCLinkSource=MajorUpdate
廃止される API
Microsoft.SharePoint.SoapServer.WebPartPagesWebService クラスの以下のメソッド
廃止時期
2020年10月初～中旬
SharePoint Framework で開発したアプリのバージョンアップ
はじめに
SharePoint Framework で開発した Web パーツなどのアプリのバージョンアップに伴う更新手順をまとめました。
バージョンアップの手順
/config/package-solution.json の書き換え
package-solution.json ファイルの 6 行目にある version 属性の値を新しいバージョン番号に変更します。 なお、バージョン番号は「メジャー.マイナー.リビジョン.ビルド」という 4 つのブロックで構成されています。 それぞれの数字が大きいほどバージョンが新しいということになります。
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "LinkListWebPart",
"id": "9bd62b12-131b-47e9-bdbb-426b48a5c004",
"version": "1.3.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": false,
/package.json の書き換え
package.json の 3 行目にある version 属性の値を新しいバージョン番号に変更します。 なお、package.json のバージョン番号は「メジャー.マイナー.リビジョン」の 3 つのブロックしかありません。 これら 3 つのブロックの値は、分かりやすさのためにも package-solution.json の version 属性の値と同じにすることをお勧めします。
SharePoint Framework Web パーツ開発 その３：デプロイ
はじめに
この記事では、開発環境にて SharePoint Framework で作成した Web パーツを本番環境にデプロイするための手順を説明します。 まだ SharePoint Framework で Web パーツを作成していない場合やビルドしていない場合は、以下の記事を参考に Web パーツを作ってください。
パッケージ作成手順
本番環境にデプロイするためには、SharePoint Framework で作成した Web パーツをデプロイするためのパッケージにまとめる必要があります。 パッケージファイルは、.sppkg というファイル拡張子の zip ファイルで、これを本番環境にデプロイすることになります。 ということで、まずはパッケージを作成する手順からです。
アプリカタログの作成
はじめに
SharePoint Framework で開発したアプリをテナント内で利用するためには、「アプリカタログ」と呼ばれる場所にアプリのパッケージファイルをアップロードする必要があります。 この記事では、この「アプリカタログ」を作成するための手順を紹介します。
アプリカタログの種類
テナントアプリカタログ
テナント全体で使用するアプリを登録するためのアプリカタログです。 テナントアプリカタログに登録されたアプリは、テナント内のすべてのサイトコレクションに展開可能となり、特定のサイトコレクションに限定して展開することはできません。
サイトコレクションアプリカタログ
サイトコレクションごとの個別のアプリカタログです。 サイトコレクション管理者は自身が管理するサイトコレクションにのみアプリを展開することができます。
アプリカタログ作成手順
テナントアプリカタログ
テナントアプリカタログは Microsoft 365 管理センターから作成します。
① Microsoft 365 管理センターにアクセスし、SharePoint 管理センターを開く。
② メニューから [その他の機能] をクリック、右ペインの [アプリ] の下の [開く] をクリックする。
③ [アプリ カタログ] をクリックする。
④ [新しいアプリ カタログ サイトを作成する] をクリックする。
⑤ アプリカタログを作成する。
必要事項を入力し、[OK] ボタンをクリックすると、アプリカタログのサイトコレクションが作成されます。
⑥ アプリカタログを開く。
アプリカタログはサイトコレクションなので、⑤で決めた URL にアクセスすると通常のサイトと同様に開くことができます。
gulp serve でエラーが出た時の対応
最終更新日：2020/07/26
はじめに
SharePoint Framework 開発中、gulp serve でエラーが発生することがありますが、実際に発生したエラーと対処法をこの記事にまとめていきたいと思います。
エラーケース
ケース１：dist フォルダの権限エラー
**■エラーメッセージ（下線箇所は状況により異なります）**Error - Unknown EPERM: operation not permitted, chmod ‘/usr/app/spfx/dist/link-list-web-part-web-part.js’ ■対処法/usr/app/spfx/dist フォルダにあるファイルへのアクセスができないために発生しているものと思われます。 プロジェクト作業フォルダ内の dist フォルダを削除して再度 gulp serve を実施してください。