はじめに
Power Automate クラウドフローでは、SPOリストのアイテムへの動的なリンクを作成する方法として、HTML形式で記載して作成することができます。
その①では、クラシックエディターでメール本文にHTML形式で動的にSPOアイテムへのリンク作成方法と、その際に壊れないようにする調整についてご紹介しました。
本記事その②では、モダンエディターだとタグの付き方が異なっている点とHTMLが壊れるのが解消されていた点などをご紹介します。
その①
その①で今回サンプルで利用しているメール本文をご紹介しています。こちらも併せてご参照ください。
はじめに Power Automate クラウドフローでは、SPOリストのアイテムへの動的なリンクを作成する方法として、HTML形式で記載して作成することができます。以前からある方法ですが、クラシックエディタの場合に表示が壊れ（触らなければ大丈夫）、中身を触って保存すると内容も壊れてしまうと...
モダンデザイナーでのHTMLの表示（aタグあっても壊れない）
以下、その①で作った本文（aタグでのアイテムリンクあり、Pタグあり版）のクラシック表示です。
モダンエディターで同じものを開いても通常モードで表示されリンク部分は壊れていません。
（クラシックだとPタグを除去したりしてHTML形式固定にしないと壊れる）
モダンエディターで保存してメール送信しても正常な内容で送信されます。
そのため動的なリンクであればモダンエディターで作ればよさそうです。ただクラシックにするとまた壊れて表示されるのでここを触る場合はモダンかクラシックどちらかで統一するほうがよさそうです。
HTML形式で開くとPタグにclass＝”editor-paragraph”
HTML形式で開くと以下のように、Pタグにclass=”editor-paragraph”が付いています。
また、改行の<br>タグがなくそのまま改行されていて、リンクのaタグにはeditor-linkというのが付いています。
このクラスが書式を調整してくれているようで、改行で書いたらそのまま反映してくれるようでした。
クラス：editor-paragraphって？
上記クラスについて調べましたが公開情報は特に見つけれませんでした。
Copilotに聞いた情報だと、WordPressのブロックエディター（Gutenberg）などのモダンなエディターで生成された段落（<p>タグ）に自動的に付与されるCSSクラスの一つ。のようです。（正確性は不明確です。すいません）
Power Automateのモダンのリッチテキストエディターも同様にこのクラスを使って改行などを表現しているようですね。
消しても復活する。クラシック表示にすれば削除もできる
このタグですが、HTML形式で表示してタグを削除しても保存時に通常モードに戻り復活しています。
消したい場合は一旦モダンで保存後にクラシックで表示しＰタグを削除すれば消せます。
モダンエディターとクラシックエディターのHTML本文の違い
上記の内容ですが、モダンエディターで保存した内容とクラシックで保存していた内容とでメール本文のHTMLを見てみます。
モダンエディターで保存したものは、Pタグにクラスが指定されていて、改行のbrタグがリッチテキストエディターで書いた場所に追加されています。※クラス名は元の内容から変換されている
Pタグのクラス以外にもリンク部分のaタグにはx_editor-linkが付いています。
→モダンエディターのほうだとクラス：editor-paragraphが改行をbrタグにしてHTMLを生成する動きのようですね。
クラシックエディターで保存（かつPタグを除去したもの）はPタグや上記のクラスはなくなっています。brタグもHTMLで書いたままの内容となっています。
最後に触ったり修正してから保存したほうで保持されるようなので、本文が前と変わってしまった。。というようなことがあればモダン⇔クラシックで切り替えて内容を確認、調整するのがよさそうです。
通常モードで動的リンクを作る場合
その①、その②でHTMLに切り替えての動的リンク作成方法をお伝えしましたが、動的なアイテムを直接エディターのリンク設定部分に入れれば作ることも可能です。
以下のように変数や動的コンテンツを式で表した内容をリンクターゲットに指定する感じです。
ただ、HTML形式で書いたほうが分かりやすいかと思います。
Code//今回のケースのサンプル
@{variables(‘アイテムリンク用URL’)}@{triggerOutputs()?[‘body/ID’]}
エディター上でリンククリックするとエラー画面に飛ぶので注意
動的なコンテンツを含んだリンクの場合にリンク部分をクリックすると以下のような画面になったり
エラー画面になったりします。（再度開きなおせば問題はなし）
NOTEエディター上ではリンククリックしないように注意しましょう（モダン・クラシック共通）
おわりに
その①、その②にわたりPower Automate クラウドフローのメール本文でリンク作成やエディター、Ｐタグの違いなどご紹介しました。
モダンエディターが主流になってきていると思いますが、このあたりの違いがあったりクラシックでないとうまくいかないケースがあったりなので、現状はまだ使い分けて調整する感じになるかなーと思います。
サンプルでご紹介した内容をもとにご自身の内容に置き換えて参考にしていただければと思います。それでは！
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント