はじめに
定期的にテーブルを作成したくなる。
それが私です。
Qiita Engineer Festa 2024が始まってからPower AppsやPower Automateで、HTMLを駆使したテーブル作成してきました。
今回はSharePoint Lists（画像あり）から画像込みのHTMLテーブルを作成します。
ニーズは鑑みておりません。プレミアムコネクタなしで使える技です。
SharePoint Lists（画像あり）は下記を利用します。
列は下記に絞りました。
- Title
- Artist
- Country
- Art(画像列)
上記でHTMLを作成します。
列を限定している理由は単純に多いと手間も比例することからです。
アプローチ
今回は実験のためSharePoint Lists to HTMLファイルで実験します。
■ 手順
- 変数を初期化する
HTML文字列を格納する変数 -
複数の項目の取得
SharePoint -
For each- SharePoint に HTTP 要求を送信します 画像列情報を取得
- 3-1でJSON の解析
- 3-2の
画像列からJSON の解析 - 3-3をもとにパスによるファイル コンテンツの取得
-
<td>などタグ文字を含めて、1の文字列変数に追加
-
</table>を追加文字列変数に追加 -
ファイルの作成
SharePoint
このアプローチではSharePointにHTMLファイルを作成しています。
OneDrive for Businessを使えば、ファイルの変換アクションで画像やPDFに変換することも可能です。
1. 変数を初期化
まずはHTMLを追加していくための変数を用意します。
変数を初期化する HTML
<table border="1" cellpadding="10" cellspacing="0"><tr><th>Title</th><th>Artist</th><th>Country</th><th>Image</th></tr>
セルのパディングとヘッダーをここで決め打ちしてしまっています。
列数を増やす場合は、ここで既定してください。
動的な対処もできそうですが、今回は割愛で！
2. 複数の項目の取得から繰り返し処理
特にフィルタークエリを決めずに複数の項目の取得を実行します。
この時のポイントですが、このアクションで画像列の情報は取得できません。
添付ファイルであれば、別のアクションで取得することができます。
- 画像の
ファイル コンテンツ - 画像の
ソース
上記のいずれかがないと実行できないアクションになります。
3~. 繰り返し処理で画像をbase64文字列で取得、HTML文字列に追加
まずはファイルコンテンツを取得するために、画像列の詳細が必要になります。
そのため、(2)で取得したListのIDからSharePoint に HTTP 要求を送信します 画像列情報を取得しましょう
- サイトのアドレス
ListがあるSharePoint Site - 方法
Get
URI
_api/web/lists/GetByTitle('{SharePoint Listsの名前}')/items(@{items('For_each')?['ID']})
こちらで画像列を含めた情報が返ってきます。
JSON の解析を実行すると私の場合、下記のスキーマになります。
長いので折りたたみ
schema
{
"type": "object",
"properties": {
"statusCode": {
"type": "integer"
},
"headers": {
"type": "object",
"properties": {
"Cache-Control": {
"type": "string"
},
"Transfer-Encoding": {
"type": "string"
},
"ETag": {
"type": "string"
},
"Vary": {
"type": "string"
},
"Set-Cookie": {
"type": "string"
},
"Strict-Transport-Security": {
"type": "string"
},
"X-NetworkStatistics": {
"type": "string"
},
"X-SharePointHealthScore": {
"type": "string"
},
"X-SP-SERVERSTATE": {
"type": "string"
},
"DATASERVICEVERSION": {
"type": "string"
},
"SPClientServiceRequestDuration": {
"type": "string"
},
"SPRequestDuration": {
"type": "string"
},
"X-DataBoundary": {
"type": "string"
},
"X-1DSCollectorUrl": {
"type": "string"
},
"X-AriaCollectorURL": {
"type": "string"
},
"SPRequestGuid": {
"type": "string"
},
"Request-Id": {
"type": "string"
},
"MS-CV": {
"type": "string"
},
"X-Frame-Options": {
"type": "string"
},
"Content-Security-Policy": {
"type": "string"
},
"MicrosoftSharePointTeamServices": {
"type": "string"
},
"X-Content-Type-Options": {
"type": "string"
},
"X-MS-InvokeApp": {
"type": "string"
},
"P3P": {
"type": "string"
},
"X-AspNet-Version": {
"type": "string"
},
"X-Powered-By": {
"type": "string"
},
"x-ms-request-id": {
"type": "string"
},
"Timing-Allow-Origin": {
"type": "string"
},
"x-ms-apihub-cached-response": {
"type": "string"
},
"x-ms-apihub-obo": {
"type": "string"
},
"Date": {
"type": "string"
},
"Content-Type": {
"type": "string"
},
"Content-Length": {
"type": "string"
},
"Expires": {
"type": "string"
},
"Last-Modified": {
"type": "string"
}
}
},
"body": {
"type": "object",
"properties": {
"d": {
"type": "object",
"properties": {
"__metadata": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"uri": {
"type": "string"
},
"etag": {
"type": "string"
},
"type": {
"type": "string"
}
}
},
"FirstUniqueAncestorSecurableObject": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"RoleAssignments": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"AttachmentFiles": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"ContentType": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"GetDlpPolicyTip": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"FieldValuesAsHtml": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"FieldValuesAsText": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"FieldValuesForEdit": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"File": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"Folder": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"LikedByInformation": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"ParentList": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"Properties": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"Versions": {
"type": "object",
"properties": {
"__deferred": {
"type": "object",
"properties": {
"uri": {
"type": "string"
}
}
}
}
},
"FileSystemObjectType": {
"type": "integer"
},
"Id": {
"type": "integer"
},
"ServerRedirectedEmbedUri": {},
"ServerRedirectedEmbedUrl": {
"type": "string"
},
"ContentTypeId": {
"type": "string"
},
"Title": {
"type": "string"
},
"OData__ColorTag": {},
"ComplianceAssetId": {},
"field_1": {
"type": "string"
},
"field_2": {
"type": "string"
},
"field_3": {
"type": "string"
},
"field_4": {
"type": "string"
},
"field_5": {
"type": "string"
},
"field_6": {
"type": "string"
},
"field_7": {
"type": "string"
},
"field_8": {
"type": "string"
},
"field_9": {
"type": "string"
},
"Art": {
"type": "string"
},
"ID": {
"type": "integer"
},
"Modified": {
"type": "string"
},
"Created": {
"type": "string"
},
"AuthorId": {
"type": "integer"
},
"EditorId": {
"type": "integer"
},
"OData__UIVersionString": {
"type": "string"
},
"Attachments": {
"type": "boolean"
},
"GUID": {
"type": "string"
}
}
}
}
}
}
}
このうち画像列であるArtは入れ子になったJSON文字列です。
そのため、画像列を抜き出し、改めてJSON の解析を実行します。
- Content
body('JSON_の解析_本文')?['d']?['Art']
スキーマはコチラ。
schema
{
"type": "object",
"properties": {
"type": {
"type": "string"
},
"fileName": {
"type": "string"
},
"nativeFile": {
"type": "object",
"properties": {}
},
"fieldName": {
"type": "string"
},
"serverUrl": {
"type": "string"
},
"fieldId": {
"type": "string"
},
"serverRelativeUrl": {
"type": "string"
},
"id": {
"type": "string"
}
}
}
ここにserverUrlとserverRelativeUrlが書かれているため、画像列のパスが取得できます。
ここからパスによるファイル コンテンツの取得を実行すると画像のファイル コンテンツを取得することまでできます。
パスはserverUrlとserverRelativeUrlを結合すると完全パスになります。
あとはHTML文字列に追加するだけです。
HTML文字列に追加する場合は、base64文字列で値を設定します。
文字列変数に追加
<tr><td>@{item()?['Title']}</td><td>@{item()?['field_1']}</td><td>@{item()?['field_8']}</td><td><img src="data:image/jpeg;base64,@{base64(body('パスによるファイル_コンテンツの取得'))}"</td></tr>
リストの列名はテキトウになってしまいました💦
こちらで文字列による画像の表現をする準備ができました。
</table>でタグを閉じて
準備した文字列をもとにファイルの作成 を実行すると
SharePoint ListsからHTMLファイルに画像を起こせます🙌
見づらい💦
この方法を応用すると画像やPDFに情報の変換まで見込めます。
どこで使うかわからないですが、base64文字列ってこんなことにも使えるのか・・・と覚えておくことにしましょう。
今回もお付き合いいただきありがとうございました！