PowerAppsだけで画像をメール本文に簡単に貼り付ける方法（HTMLテキストコントロール）

2023

10/08

Updated

2024.09.04

2023

10/08

Published

2023.10.08

/ Mike

　 　　

\ この記事を共有 /

B!

リンクをコピーする

PowerAppsだけで画像をメール本文に簡単に貼り付ける方法（HTML...

Mike

B!

リンクをコピーする

PowerAppsでPower Automate無しで、簡単にメール本文に画像を挿入してメールを送信するやり方をご紹介してます。

（動画時間：9:34）

動画の最後で「接続権限は考えなくてもよくなり、、、」と言っていますが、実は関係ありました。SPリストの共有設定で「全てのユーザー」にする必要があります。

メール受信者が画像を直ぐに見える様にメール本文に挿入する

こんにちは、リーンシグマブラックベルトのマイク根上です。
業務改善コンサルをしています。

今開発している案件で、
SharePointリストの添付ファイル列に保存されている画像を、
メールで送りたい状況が出てきました。

その画像ファイルをメールに添付するのではなく、
受信者がその画像を直ぐに見える様に
メール本文に挿入するのを実現するのに沢山の試行錯誤をしました。

AI（Bing Chat）を使った問題解決方法の見つけ方

この様な場合、僕はまずはAIに聞きます。
皆さん、AIを活用していますか？
以前、この件についての動画を作りましたので上のリンクからご覧下さい。
Microsoft Edgeブラウザで無料で使い始める事ができます。
⇒「IT関係者必見！ChatGPTがまだの方、Bing AIでAIの凄さを直ぐにお知り下さい。」

上図の様にまずEdgeブラウザを立ち上げ、
画面右上の「b」のアイコンが「Bing Chat」で、
そこにマウスを移動します（①）。
すると、Bing Chatの小さい画面が開きます。
②のアイコンをクリックすると、画面全体で使える様になります。

質問の仕方に慣れが必要ですが、今回の場合ですと、
「PowerAppsでSharePointリストの
添付ファイル列に保存されている画像を
メール本文に挿入する方法を教えて下さい。」
みたいに聞きたい事をそのままタイプしてみて下さい。
多くの場合、一発で必要な情報が得られます。

なんと、今回、AIは僕のeconoshift.comからの情報を
無断で使ってました（笑）。
これで閲覧者は僕のサイトに
来ないまま僕の情報が使われていて、
情報発信者が報われなくなる問題はあります。

まぁ、それはいいとして、
AIはPower Automateを使うやり方を提示していますが、
僕はそれを使わない方法を探しています。
どうやら日本語で検索すると
日本語の情報の結果しか得られないみたいです。

そこで翻訳サイトで質問を英語にして、検索をし直してみます。
するともっと多くの情報が得られました。
必要であればその返答を日本語に翻訳してみて下さい。

画像が挿入されたメールの完成デモ

今回メール本文に直接画像を挿入する方法を
この方法で完成させたのです。
まずは完成した動きを見てみましょう。

上図は以前の動画で作った、フォームコントロールを使って
画像を選択、クラウド保存ができるアプリです。
⇒「Power AppsだけでどんなファイルもSharePointに保存する方法（Power Automate無しで）【添付コントロール】」

画像一覧画面はギャラリーで表示させていて、
その中にメールアイコンを入れてあり、
それを押すとメールが送信されます。

すると上図の様なその画像が挿入されたメールが送られるのです。
勿論、送信先、件名、本文は
テキストボックスを使ったりデータベースから取得して、
時と場合により変えられる様にする事もできます。
今日はそれらの説明は割愛して、この画像の挿入方法をご説明します。

Office365OutlookコネクターのSendEmailV2関数の使い方

Power Appsでメールを送る方法はいくつかありますが、
一番簡単なのはLaunch関数を使う事です。
これは以前の動画で詳しく説明しました。
⇒「PowerAppsのLaunch関数でアプリから直接、メール、テキスト、通話をし、Webページを開く」

しかし、それでは今回の機能は作れません。
そこで今回は「Office365Outlookコネクター」を使います。
これでメールの送信以外にも
Outlookの様々な機能の制御ができるのです。

それを使うためには最初にそのコネクターの追加が必要です。
画面左のデータアイコンから、
「データの追加」の検索ボックスで「office」で検索すると、
その「Office365Outlook」が出てくるので、それを選びます。

次に使いたいボタンやアイコンの「OnSelect」属性で、
「office」とタイプするとこのコネクターの様々な関数が使える様になります。
その中の「Office365Outlook.SendEmailV2」で
基本機能以上のメールを送信する事ができるのです。

上図の様に数式バーの上にその関数の引数の構造が出てきます。
最初は、「To」で「送信先」です。
次が「Subject」で「件名」、
「Body」で「本文」です。

ここまでならLaunch関数と全く同じ機能ですが、
ここから更にカギ括弧（{}）を使って、
CCやBcc、添付ファイルを添付したり、
重要度を設定したりもできます。

高度な書式や画像の挿入ができる「HTMLテキスト」コントロール

しかし残念ながらこのままでは今日の目的の
画像の本文への挿入ができません。
それに必要なのが、メニューバーの「挿入」、
「ディスプレイ」からの「HTMLテキスト」コントロールです。（下図参照）

HTMLはウェブサイトなどを作るコンピュータ言語です。
このコントロール内でHTMLを使って、
Webサイトで使うような書式や機能の実装ができ、
それで画像の挿入もできるのです。

その「HtmlText」属性に、次の式をコピペします。

“挨拶文, <br> <br>
本文<br><br>
<img src=””” & First(ThisItem.添付ファイル).AbsoluteUri & “””>”

これにより下図の様に「挨拶文」、「本文」
そして添付ファイル列にある最初の画像が表示されます。
数式内の普通のテキストはその通りに表示されるのが分かります。

他のHTMLタグを使って色んな書式を
加える事もできますが、
その説明は今回割愛します。

さっきの式を再掲します：

“挨拶文, <br> <br>
本文<br><br>
<img src=””” & First(ThisItem.添付ファイル).AbsoluteUri & “””>”

数式内の不等号で挟んだ「<br>」は改行です。
それを二つ使って一行の空欄を作っています。

そして「<img src=」と、
その後に画像が保存されているURL、
そして最後にまた不等号で閉めています。

SharePointリストの添付ファイル列には
複数のファイルを保存する事ができるので、
何番目のファイルを挿入したいかを指定する必要があります。
ここではFirst関数を使って一番最初のファイルを指定しています。

そして、その「AbsoluteUri」属性を使って、
そのURLを当てています。

挿入画像の大きさの変更をし、メールを送るやり方

ここで画像の大きさを変えたいとしましょう。
このURLの後の式を変更した次の式に変えて変更ができます。
数字の部分を変えて大きさを調整してみて下さい。

“挨拶文, <br> <br>
本文<br><br>
<img src=””” & First(ThisItem.添付ファイル).AbsoluteUri & “”” width=””200″” height=””200″”>”

ここでダブルコーテーションが沢山ある事が分かりますね。
この式を普通のテキストラベルで見ると下記の様になります。

挨拶文, <br> <br>
本文<br><br>
<img src=”htps://*****sharepoint.com/sites/econoshift/Lists/D01Tbl_Modification_Records/Attachments/1/GoogleとMSのユーザー数比較画像.JPG” width=”200″ height=”200″>

それで比べるとダブルコーテーション二つで
一つのダブルコーテーションを表しています。
普通のHTMLでダブルコーテーションが必要な場合、
このコントロールの中ではダブルコーテーションを
二つにする必要がある事を覚えて下さい。

そしてこの内容がメールの本文になりますので、
メールボタンの「OnSelect」属性の式の
「“本文”」の第三引数にこのHtmlTextコントロールの
「HtmlText」属性を指定するのです。

これによりPower Automateを使わずに
本文に画像を挿入したメールを送信する事ができるのです。
このHTMLテキストコントロールがユーザーには必要がなければ
非表示にしておくと良いでしょう。

このやり方ですと受信者は
添付ファイルを開けずに画像が見えるので
より画像への注意を引く事ができます。

もし、社外のお客さんとかにもこの画像付きのメールを送る場合は
SharePointリストの共有設定で「全てのユーザー」にする必要があります。

その理由からこの手法を探していました。
皆さんもぜひ活用してみて下さい。

「こちらの記事も読まれてます

• IT関係者必見！ChatGPTがまだの方、Bing AIでAIの凄さを直ぐにお知り下さい。
• Power AppsだけでどんなファイルもSharePointに保存する方法（Power Automate無しで）【添付コントロール】
• PowerAppsのLaunch関数でアプリから直接、メール、テキスト、通話をし、Webページを開く