昨年末に行われた Japan Power Platform Conference 2023 で登壇したセッションの録画が公開されています。
登壇資料は下記の通りです。
すべてのセッションの録画は下記の YouTube に公開されています!
Japan Power Platform Conference 2023 の全ての録画
カテゴリ「Power Automate」の28件の投稿 
2024年1月12日 (金)
2023年10月25日 (水)
Power Automate: Office 365 Outlook メール送信(V2)での文字化け
Power Automate の Office 365 Outlookコネクターのメール送信(V2)を使っていて文字化けに遭遇したので、なぜそれが起きたかの備忘録です。
🎃🦇🧛♀️🎃🦇🧛♀️🎃🦇🧛♀️🎃🦇🧛♀️🎃🦇🧛♀️
弊社では研修を行っていますが、お客様へ研修の申込などの連絡にところどころ Power Automate による自動メール送信を使っています。が、一部の方から文字化けしているとの連絡が。
普段 Outlook は Outlook on the web か iOS または iPadOSの Outlook を使っているので、気が付かなかったのですが、よくよくデスクトップ版のOutlookで確認すると確かにメールのフォントがおかしい。。。文字化けだから charset だろうということで確認してみると 「charset="gb2312"」となっている。これは簡体字中国語の文字コードです。
問題を切り分けていくために、改めてメール送信フローを作成して、非常に単純なメールを送信してみます。すると予想通り、「charset="iso-2022-jp"」です。
では、何が原因なんだろう。
そもそも Office 365 Outlook のメール送信アクションでは charset を指定することはできないため自動生成されるに任せるしかありません。
とにかく、問題を引き起こしているメールに使っているHTMLソースを調べようと、部分的に切り張りしながら確認していくと、、、あれ?? と気が付くことが。
「ハイフン」ですよ、ハイフン。よぉーーーくみると、なんか、変じゃない?
ここまでくるとお気づきの方もいると思いますが、そう、「en dash」になってしまっている。
メモ帳かなにかでソースを書いてからコピーしていたはずで、そのタイミングで意図せずハイフンが en dash に変換されてしまったのでしょう。
どうもこれがあると「charset="gb2312"」と中国語判定となってしまうよう。なぜかはわかりませんが、潜在的なバグですね。
この文字以外にも中国語として判定されるケースがあるかもしれませんが、その際にはここに追記していきます。
---------------------------------------------------
そして、研修にこれまで申し込みいただいていた皆さま、不具合を修正しました! しばらく気が付かないままでいてすみませんでした🙇♀️
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ではドキュメント自体を翻訳できるようになるようです。アクション数も格段に増えています。
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 !!
2022年11月12日 (土)
Power Apps + Power Automate で SharePoint リストの簡易管理アプリを作ろう!
2022年10月18日～20日まで開催されたコミュニティイベントである「Japan Power Platform Conference 2022」で登壇したときの動画が公開されましたので資料とともに共有します。
SharePoint リスト (=Microsoft Lists) の管理を行うためのアプリを40分強で Power Apps + Power Automate を使って作成しています。機能は次の通り。
- 任意のサイトのリスト一覧の取得
- リスト名の変更
- リストの説明の変更
- リストのURLの変更
- リストの列一覧 (内部列名の確認)
同じアプリを作ってみたい方は、まずはセッションの内容をビデオで確認していただき、そのうえですでに公開している PowerPoint の資料で補足してみてください。
ビデオは下記の通りです。
補足資料は下記に公開しています。
一通り同じものが作れるようになったら、リストだけでなくライブラリも含めて列一覧を取得したり、特定の列をフィルターできるようにしたりするなど、いろいろとアレンジしてみてくださいね。
イベントでのその他のビデオや資料は下記の通りです。