昨年末に行われた Japan Power Platform Conference 2023 で登壇したセッションの録画が公開されています。
登壇資料は下記の通りです。
すべてのセッションの録画は下記の YouTube に公開されています!
Japan Power Platform Conference 2023 の全ての録画
カテゴリ「Power Apps」の27件の投稿 
2024年1月12日 (金)
2023年8月16日 (水)
[参考] Power Platform: Microsoft Translator V3 (preview)
Power Apps や Power Automate などでコンテンツの翻訳を行うには手軽に利用できるのが Microsoft Translator コネクターです。
Microsoft Translator の初期バージョンはすでに廃止になっており、2023年8月現在は Microsoft Translator V2 が主流ですが、Microsoft Translator V3 がプレビューとして登場しています。
ドキュメントでアクション一覧を確認してみると、V2では3つのアクションのみが提供されており、単純に文字列を翻訳するだけでした。
これに対してV3ではドキュメント自体を翻訳できるようになるようです。アクション数も格段に増えています。
2023年5月19日 (金)
Power Apps: レスポンシブデザイン対応の新しいプレビュー機能
Power Apps でキャンバスアプリを作成するときに、最初にタブレットか携帯かいずれかのレイアウトを選択しなくてはいけません。どちらの端末でも共通のアプリで対応したいと思うことは少なくないはずです。
そこで提供されているのが、コンテナコントロールでありこれを使うことでどの端末でもうまくレイアウトが適用されるように「レスポンシブ デザイン」を用いることができます。
詳しくは下記のリンク先を参照してください。
📝 レスポンシブなキャンバス アプリの構築 - Power Apps | Microsoft Learn
ただし、この記事を書いている2023年5月15日時点ではプレビューに難点があります。それは、タブレットや携帯画面をエミュレーションできないということ。ですが、これができる新しいプレビュー機能が利用できるようになります。一足早く試すには、現在、プラットフォームのバージョンが 3.23053.23 以降でないと試せません。
まずはアプリの設定を切り替えます。設定メニューから、[サポート]をクリックし作成バージョンを確認しておきましょう。この例では 3.23052.19 です。別バージョンに切り替えるためすぐ下の[編集]をクリックします。
これで作成バージョンを3.23053.23に切り替え、[再読み込みおよびバージョンの適用]ボタンをクリックします。
アプリが再開したら、プレビューしてみましょう。すると、タブレット、携帯、ブラウザー、向きを切り替えるメニューが表示されます。これでそれぞれの端末をエミュレートできるわけです。
この新しいプレビュー機能を使えば、レスポンシブ対応なキャンバスアプリ作成もスムーズに取り組めますね。
2023年5月 2日 (火)
Power Apps: SharePoint リストのカスタム フォームの作成先の既定環境を変更する
Power Apps を使ってSharePoint リストのカスタム フォームを作成するとき既定では「既定の環境」にフォームが作成されます。
Power Apps 管理用のPowerShellコマンドを使えば、任意の「運用環境」にカスタムフォームを作成できるようになります。SharePoint リストのカスタム フォームの作成環境とそれ以外を分けて容量の管理、ポリシー管理などを管理したいというようなケースではこうした設定も必要になるでしょう。
設定変更における注意点
カスタム フォームの作成先の既定の環境を変更するには、指定先は「運用環境」である必要があります。また、作成先環境を指定したとしても既存のカスタム フォームが新たな環境に移動されることはなく、そのままです。
また、新たに指定した環境をユーザーが利用できるように「環境作成者 (環境メーカー: Envrironment Maker)」の役割を各ユーザーに対して付与する必要があります。既定の環境のままであれば、この役割の付与はすべてのユーザーに対して自動的に行われますが、新規に指定する場合は自動では行われないため運用方法を考えないといけません。たとえば、新規に追加したユーザーアカウントに対して必ずこの環境のロールの追加もするといったようなルール策定です。 さらに、既定の環境の場合はそもそも環境の削除ができませんが、それ以外の環境の場合は環境は削除しようと思えばできてしまいます。この場合、当然、この環境に含まれるカスタム フォームも一緒に削除されます。
PowerShell コマンドで指定する
Power Apps の管理者用コマンドの基本的な利用方法は下記のリンク先を参照しましょう。
PowerShell のサポート - Power Platform | Microsoft Learn
では PowerShell コマンドに移りましょう。次のコマンドを実行して既定のカスタム フォームの作成環境を確認します。
Add-PowerAppsAccount
#SharePointカスタムフォームが作成される環境の取得
Get-AdminPowerAppSharepointFormEnvironment
これにより既定の環境を使っているかどうかがわかります。既定の環境名は Default- で始まります。
環境を変更するためのコマンドは Set-AdminPowerAppSharepointFormEnvironment を使用しますが、環境名を指定する必要があります。名前はGUIDで指定する必要があるため、まずは既存の環境の一覧を確認し目的の環境の名前を把握します。
Get-AdminPowerAppEnvironment コマンドを使用します。
#環境の一覧 (運用環境のみ)
Get-AdminPowerAppEnvironment | Where-Object {$_.EnvironmentType -eq 'Production'} | Select-Object -Property EnvironmentName, DisplayName, EnvironmentType
コマンドを実行すると、運用環境の情報が一覧できます。
設定を変更していきましょう。この例では5e0b10a0 で始まる環境を指定します。次のコマンドを実行します。
#既定のカスタムフォームの作成環境を指定する (ここでは環境名は伏せています)
Set-AdminPowerAppSharepointFormEnvironment -EnvironmentName '5e0b10a0-*************'
最後に既定のカスタムフォームの作成先の環境が変わったことを確認します。
設定が反映されるまで少し待ってから、新規に SharePoint リストのカスタム フォームを作成してみましょう。環境が既定の環境ではなくなっていることがわかります。
管理センターからも確認してみましょう。環境のリソースに保存した SharePoint リストのカスタムフォームがあることが確認できます。
元の状態に戻すには、次のコマンドを実行します。
#既定の環境に戻す
Reset-AdminPowerAppSharepointFormEnvironment
#SharePointカスタムフォームが作成される環境が既定の環境に戻ったことの確認
Get-AdminPowerAppSharepointFormEnvironment
2022年12月22日 (木)
Microsoft Graph Pages API: Power Apps (+Power Automate) から SharePoint ページを作成しよう
この記事は Microsoft Power Automate Advent Calendar 2022 に参加しています。2022/12/22 の分です。
🎄❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️🎅
今回は開発者寄りの記事です。難易度は高めですが、年末年始の時間のある時に是非チャレンジしてみてくださいね。
これまでも Microsoft Graph API には SharePoint ページを操作するための API (beta バージョンのみ) がありましたが、 2022年11月末に新しいペーター版がリリースされました。これによりこれまでできなかった、SharePoint モダンページおよびニュース投稿の取得、作成、管理ができます。既存の pages beta API は新しい API に置き換わることになります。
私にとっては待望の API で、これが正式にリリースされて充実してくると色々とできることが増えます。
2023年4月末までにGAが予定されています。公式情報は下記を参照してください。
🔗Announcing the new SharePoint Pages API in Microsoft Graph - Microsoft 365 Developer Blog
さて、今回はこの Graph API (Pages API) を使って、以前から試してみたかった Power Apps から SharePoint ページを作成して発行してみることにします。
ただし、細かいパラメータオプションや JSON などは1つのブログに収まりきる量ではないので、今回は「読者の方が頑張って自分でちょっと試してみることができる」よう情報を簡素化にしています。ヒントとなる情報はちりばめておきますので、詳細はご自身で頑張って学習を進めてみてください。
あとは弊社のオフィスアイ ラーニング ポータル(有料サービス) には、情報を整理して公開しています。ご興味があればこちらもどうぞ。
これができると定型的なページ作成が Power Apps や Power Automate で対応できるなぁという話です。
今回のベータ版リリースの範囲
このリリースでは次の機能が提供されます。
- ページおよびニュースコンテンツの取得
- ページおよびニュース投稿の作成
- ページおよびニュース投稿の削除
- ページの一覧の取得
- ページおよびニュースの投稿の発行
今回のスコープ外は次の通りとなっているので注意しましょう。
- 既存ページの編集
- ニュースリンクの生成
上記ビデオでは想定されるシナリオ例としては次のような内容を取り上げていました。
組織の CDN や Microsoft ストック画像、パブリックリソースにある画像とともにUX 内でページを作成して(要はどこからでも参照できる画像を使うこと)、ページの JSON を取得して、それをもとに異なるサイト間やテナント間で同じページを作成する
すべてのページの一覧を取得し、特定のプロパティでフィルターしたあとでそれらのページを一括削除する
Graph エクスプローラーを使ってサイトIDを取得する
Graph API を使うにはページを作成する先のサイトのIDを取得する必要があります。Graph エクスプローラーの基本的な使い方は下記のリンク先を参照してください。
🔗 Graph エクスプローラーを使用して Microsoft Graph API を試す - Microsoft Graph | Microsoft Learn
まず Graphエクスプローラーにアクセスします。
🔗 Graph Explorer | Try Microsoft Graph APIs - Microsoft Graph
右側の顔写真のところをクリックして、Microsoft 365 アカウントでサインインします。
始めてアクセスするときには Permissins requested のウィンドウが表示されますが、Accept ボタンをクリックします。
クエリを実行するために、次の操作をします。
- GET アクセスになっていることを確認する
- beta を指定する
- エンドポイントを指定する
- Run query ボタンをクリックする
3 のエンドポイントですが、サイトのIDを取得するには次のように指定します。
[ルートのサイトコレクションの場合]
https://graph.microsoft.com/beta/sites/root
[ルートのサイトコレクション以外]
https://graph.microsoft.com/beta/sites/root:<サイトの相対パス>
サイトの相対パスは /sites や /teams から始まるパスです。私の使っているサイトは相対パスが /sites/Labo-GraphAPI であるため、これを指定します。
クエリを実行した結果取得できる id をメモしておきます。後で Power Automate のフローから利用します。私のサイトの ID だと「
officeilearning.sharepoint.com,5de63e83-091f-42b2-90a2-2aeefe4ab9d7,342f6370-e776-4677-bf1e-dcc2d94985ed
」だということがわかります。
Power Apps のアプリを用意する
記事を投稿するためのアプリを用意します。この例ではキャンバスアプリでタブレットレイアウトで作成しています。
類似したアプリを作ってみてください。必要な項目は次の通りです。
- ページのタイトル
- ページのファイル名
あとは、ページ内に書き込みたい内容をこの例では次の項目をリッチテキストのコントロールで用意しています。
- 本文
- 備考
作りたいページのイメージを確認しよう
作りたいページのイメージは次の通りです。今回はタイトル領域の設定やクイックリンク Webパーツ、画像Webパーツは固定で、そのほかを適宜差し替えてページを新規に作り発行します。利用する画像はストック画像であるため、どのテナントでも共通して利用できます。
Power Automate フローを作る
では Power Apps 側からフローを作成しましょう。この記事ではある程度 フローも作れることを想定しているので、手順はさほど丁寧には説明しませんのであしからず。。。(ちなみに、弊社でも Power Automate のフローの研修もやってますので、もしよければそういったものもご利用ください)。
ということで、[フローを新規作成する]をクリックします。
トリガーを PowerApps (V2) に差し替え、次のように指定します。フロー名も任意に指定しておきましょう。
次のステップでは変数を用意します。この変数には後ほど作成したページのIDを格納します。
次のアクションに Office 365 Group コネクターの HTTP要求の送信アクションを追加します。これで Graph API を呼び出します。
URI には先ほど取得したサイトのIDを使って次のように指定します。
https://graph.microsoft.com/beta/sites/<サイトのID>/pages
メソッドは POST を指定しましょう。
さて、問題が本文です。ここに指定するJSONがページ情報を決めることになります。詳しい話は色々と盛りだくさんにあるのですが、今回は、私が用意したソースを写経してみてください。下記の通りです。
{
"name": ".aspx",
"title": "",
"pageLayout": "article",
"thumbnailWebUrl": "https://cdn.hubblecontent.osi.office.net/m365content/publish/4785e3b9-c5d0-4fac-813b-8cbc5e744eb4/thumbnails/large.jpg?file=dv735012.jpg",
"promotionKind": "page",
"showComments": true,
"showRecommendedPages": true,
"titleArea": {
"enableGradientEffect": true,
"imageWebUrl": "https://cdn.hubblecontent.osi.office.net/m365content/publish/4785e3b9-c5d0-4fac-813b-8cbc5e744eb4/dv735012.jpg",
"layout": "colorBlock",
"showAuthor": false,
"showPublishedDate": true,
"showTextBlockAboveTitle": true,
"textAboveTitle": "Advent Calendar 2022",
"textAlignment": "left",
"imageSourceType": 2,
"title": "Colone Page - 1",
"imgHeight": 1360,
"imgWidth": 2048,
"translateX": 49.26108374384236,
"translateY": 37.77777777777778,
"hasTitleBeenCommitted": true,
"serverProcessedContent": {
"htmlStrings": [],
"searchablePlainTexts": [],
"links": [],
"imageSources": [
{
"key": "imageSource",
"value": "https://cdn.hubblecontent.osi.office.net/m365content/publish/4785e3b9-c5d0-4fac-813b-8cbc5e744eb4/dv735012.jpg"
}
],
"customMetadata": [
{
"key": "imageSource",
"value": {
"width": 2048,
"height": 1360
}
}
]
}
},
"canvasLayout": {
"horizontalSections": [
{
"layout": "oneThirdRightColumn",
"id": "1",
"emphasis": "none",
"columns": [
{
"id": "1",
"width": 8,
"webparts": [
{
"@odata.type": "#microsoft.graph.textWebPart",
"innerHtml": "Body"
}
]
},
{
"id": "2",
"width": 4,
"webparts": [
{
"@odata.type": "#microsoft.graph.standardWebPart",
"webPartType": "c70391ea-0b10-4ee9-b2b4-006d3fcad0cd",
"data": {
"audiences": [],
"dataVersion": "2.2",
"description": "アイコン、画像、対象ユーザーのターゲット設定のオプションを使用して、ドキュメント、画像、ビデオなどのコンテンツへのリンクのコレクションをさまざまなレイアウトで表示します。",
"title": "クイック リンク",
"properties": {
"isMigrated": true,
"layoutId": "CompactCard",
"shouldShowThumbnail": true,
"imageWidth": 100,
"hideWebPartWhenEmpty": true,
"dataProviderId": "QuickLinks",
"items@odata.type": "#Collection(graph.Json)",
"items": [
{
"thumbnailType": 3,
"id": 1,
"description": "",
"altText": "",
"rawPreviewImageMinCanvasWidth": 32767,
"sourceItem": {
"@odata.type": "#graph.Json",
"itemType": 2,
"fileExtension": "",
"progId": ""
}
}
],
"listLayoutOptions": {
"@odata.type": "#graph.Json",
"showDescription": false,
"showIcon": true
},
"buttonLayoutOptions": {
"@odata.type": "#graph.Json",
"showDescription": false,
"buttonTreatment": 2,
"iconPositionType": 2,
"textAlignmentVertical": 2,
"textAlignmentHorizontal": 2,
"linesOfText": 2
},
"waffleLayoutOptions": {
"@odata.type": "#graph.Json",
"iconSize": 1,
"onlyShowThumbnail": false
}
},
"serverProcessedContent": {
"htmlStrings": [],
"searchablePlainTexts": [
{
"key": "title",
"value": "参考"
},
{
"key": "items[0].title",
"value": "ペンギン - Wikipedia"
}
],
"links": [
{
"key": "baseUrl",
"value": "/sites/Labo-GraphAPI"
},
{
"key": "items[0].sourceItem.url",
"value": "https://ja.wikipedia.org/wiki/%e3%83%9a%e3%83%b3%e3%82%ae%e3%83%b3"
}
],
"imageSources": [
{
"key": "items[0].rawPreviewImageUrl",
"value": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/African_Penguin_at_Boulders_Beach_1.jpg/1200px-African_Penguin_at_Boulders_Beach_1.jpg"
}
],
"componentDependencies": [
{
"key": "layoutComponentId",
"value": "706e33c8-af37-4e7b-9d22-6e5694d92a6f"
}
],
"customMetadata": [
{
"key": "items[0].rawPreviewImageUrl",
"value": {
"fixedwidth": "100",
"mincanvaswidth": "32767"
}
}
]
}
}
},
{
"@odata.type": "#microsoft.graph.standardWebPart",
"webPartType": "d1d91016-032f-456d-98a4-721247c305e8",
"data": {
"audiences": [],
"dataVersion": "1.11",
"description": "画像、ピクチャ、または写真をテキストを重ねたページに追加し、画像のトリミングやサイズ変更を行うことができます。",
"title": "画像",
"properties": {
"imageSourceType": 2,
"captionText": "",
"altText": "",
"linkUrl": "",
"overlayText": "",
"fileName": "崩落する氷山.jpg",
"imgWidth": 3015,
"imgHeight": 2410,
"alignment": "Center",
"fixAspectRatio": false,
"overlayTextStyles": {
"@odata.type": "#graph.Json",
"textColor": "light",
"isBold": false,
"isItalic": false,
"textBoxColor": "dark",
"textBoxOpacity": 0.54,
"overlayColor": "light",
"overlayTransparency": 0
}
},
"serverProcessedContent": {
"htmlStrings": [],
"searchablePlainTexts": [],
"links": [],
"imageSources": [
{
"key": "imageSource",
"value": "https://cdn.hubblecontent.osi.office.net/m365content/publish/e452fe45-b705-4a5a-aebd-e92f74c2553f/1152450154.jpg"
}
],
"customMetadata": [
{
"key": "imageSource",
"value": {
"width": "3015",
"height": "2410"
}
}
]
}
}
}
]
}
]
},
{
"layout": "oneColumn",
"id": "2",
"emphasis": "neutral",
"columns": [
{
"id": "1",
"width": 12,
"webparts":[
{
"@odata.type": "#microsoft.graph.textWebPart",
"innerHtml": "Notes"
}
]
}
]
}
]
}
}
name と title プロパティに動的なコンテンツを指定します。
次の図に示す"innerHtml"の値を Body から動的コンテンツ置き換えます。
クイックリンク Webパーツの部分のサイトの相対パスを自身のサイトのものに書き換えます。
下の方にある "innerHtml" のプロパティの値を Notes から動的コンテンツに書き換えます。
次のステップとして JSON の解析アクションを追加します。コンテンツに指定する「本文」はひとつ前のステップの出力結果です。
スキーマは下記の内容をコピーして貼り付けましょう。
{
"type": "object",
"properties": {
"@@odata.context": {
"type": "string"
},
"@@odata.etag": {
"type": "string"
},
"eTag": {
"type": "string"
},
"id": {
"type": "string"
},
"lastModifiedDateTime": {
"type": "string"
},
"name": {
"type": "string"
},
"webUrl": {
"type": "string"
},
"title": {
"type": "string"
},
"pageLayout": {
"type": "string"
},
"thumbnailWebUrl": {
"type": "string"
},
"promotionKind": {
"type": "string"
},
"showComments": {
"type": "boolean"
},
"showRecommendedPages": {
"type": "boolean"
},
"createdBy": {
"type": "object",
"properties": {
"user": {
"type": "object",
"properties": {
"displayName": {
"type": "string"
},
"email": {
"type": "string"
}
}
}
}
},
"lastModifiedBy": {
"type": "object",
"properties": {
"user": {
"type": "object",
"properties": {
"displayName": {
"type": "string"
},
"email": {
"type": "string"
}
}
}
}
},
"parentReference": {
"type": "object",
"properties": {
"siteId": {
"type": "string"
}
}
},
"contentType": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"name": {
"type": "string"
}
}
},
"publishingState": {
"type": "object",
"properties": {
"level": {
"type": "string"
},
"versionId": {
"type": "string"
}
}
},
"reactions": {
"type": "object",
"properties": {}
},
"titleArea": {
"type": "object",
"properties": {
"enableGradientEffect": {
"type": "boolean"
},
"imageWebUrl": {
"type": "string"
},
"layout": {
"type": "string"
},
"showAuthor": {
"type": "boolean"
},
"showPublishedDate": {
"type": "boolean"
},
"showTextBlockAboveTitle": {
"type": "boolean"
},
"textAboveTitle": {
"type": "string"
},
"textAlignment": {
"type": "string"
},
"title": {
"type": "string"
},
"authors@odata.type": {
"type": "string"
},
"authors": {
"type": "array"
},
"authorByline@odata.type": {
"type": "string"
},
"authorByline": {
"type": "array"
},
"imageSourceType": {
"type": "integer"
},
"imgHeight": {
"type": "integer"
},
"imgWidth": {
"type": "integer"
},
"translateX": {
"type": "number"
},
"translateY": {
"type": "number"
},
"hasTitleBeenCommitted": {
"type": "boolean"
},
"serverProcessedContent": {
"type": "object",
"properties": {
"htmlStrings": {
"type": "array"
},
"searchablePlainTexts": {
"type": "array"
},
"links": {
"type": "array"
},
"imageSources": {
"type": "array",
"items": {
"type": "object",
"properties": {
"key": {
"type": "string"
},
"value": {
"type": "string"
}
},
"required": [
"key",
"value"
]
}
},
"customMetadata": {
"type": "array",
"items": {
"type": "object",
"properties": {
"key": {
"type": "string"
},
"value": {
"type": "object",
"properties": {
"width": {
"type": "integer"
},
"height": {
"type": "integer"
}
}
}
},
"required": [
"key",
"value"
]
}
}
}
}
}
}
}
}
次のステップで pageId 変数に JSON解析の出力から id を設定します。
次のステップで再び Office 365 Group コネクターの HTTP要求アクションを追加します。これでページを発行します。URIは次の通りです。
https://graph.microsoft.com/beta/sites/<サイトのID>/pages/<ページのID>/publish
最後に Power Apps コネクターの応答アクションを追加しておきます。
Power Apps からフローを呼び出す
Power Apps アプリ内に用意しておいたボタンコントロールからフローを呼び出します。OnSelect プロパティには例えば次のように指定します。
UpdateContext({Result:'ページ作成(PagesAPIprev)'.Run(TextInput_Page_Title.Text,TextInput_Page_Name.Text,
RichTextEditor_Body.HtmlText,RichTextEditor_Notes.HtmlText).response});
Notify(Result,NotificationType.Success)
動作を確認する
アプリをプレビュー実行して動作を確認しましょう。
それでは、Happy Holidays !!