【Power Automate】GoogleニュースRSSで取得した情報をメールで通知する方法【週1回まとめて通知】

「タイトル」「公開日時」に入力した関数の解説

▼タイトル

concat(
  '<a href="',
  　item()?['primaryLink'],
  　'" target="_blank">',
  　item()?['title'],
  '</a>'
)

1. HTMLリンクの開始タグの生成
   文字列 <a href=" を使用して、アンカータグ（aタグ）の開始部分を生成
2. リンクURLの挿入
   item()?['primaryLink'] で現在処理中のアイテム（たとえばリスト内の特定のアイテムやデータレコード）から primaryLink というキーに対応する値を取得し、これをリンク先のURLとして挿入
3. リンクターゲットの指定
   " target="_blank">を追加して、リンクが新しいタブまたはウィンドウで開かれるように設定
4. リンクテキストの挿入
   item()?['title'] で、リンクのテキストとして表示されるタイトルを現在のアイテムから取得して挿入
5. HTMLリンクの終了タグの生成
   </a>を使用して、アンカータグを閉じる

▼公開日時

convertFromUtc(
  item()?['publishDate'],
  'Tokyo Standard Time',
  'yyyy/MM/dd HH:mm'
)

1. 日時データの取得
   item()?['publishDate'] で、現在処理中のアイテムから publishDate というキーに対応する値を取得
2. タイムゾーンの指定
   Tokyo Standard Timeを指定して、UTCから東京の時間帯（日本標準時）へ変換
3. 日時フォーマットの指定
   yyyy/MM/dd HH:mmで変換後の日時がどのような形式で表示されるかを指定する。ここでは「年/月/日 時:分」を指定

「値」に入力した関数はこちら

replace(  replace(
    replace(
      body('HTML_テーブルの作成'), 
      '<', 
      '<'
    ), 
    '>', 
    '>'
  ), 
  '"', 
  '"'
)

1. HTMLコンテンツの取得
   HTML_テーブルの作成アクションの結果として得られたHTMLコンテンツを body 関数を使って取得
2. 小なり記号の置き換え
   HTMLエンティティ <を < に置換
3. 大なり記号の置き換え
   さらに、上記の置換結果に対して>を > に置換
4. ダブルクオートの置き換え
   さらに、二重引用符を表すHTMLエンティティ " を " に置換

「値」に入力するCSSスタイルはこちら

<style>
table {
  border-collapse: collapse;
  width: 100%;
  background-color: #FFFFFF; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

th, td {
  padding: 12px 15px; 
  text-align: left; 
  border-bottom: 1px solid #E0E0E0; 
}

th {
  color: #757575; 
  background-color: #FAFAFA; 
  font-size: 14px; 
}

tr:nth-child(even) {
  background-color: #F5F5F5; 
}

tr:hover {
  background-color: #E3F2FD; 
}
</style>

▼CSSスタイルの解説

• テーブルの基本設定（table）
  • background-color: #FFFFFF;　背景色を白
  • box-shadow: 0 2px 4px rgba(0,0,0,0.1);テーブルに軽い影をつけて立体感
• セルのスタイリング（th, td）
  • padding: 12px 15px;セル内のテキストスペースを調整
  • text-align: left;テキストの左揃え
  • border-bottom: 1px solid #E0E0E0;セルの下に薄いグレーの線
• ヘッダー行の特別なスタイリング（th）
  • color: #757575;文字色をダークグレー
  • background-color: #FAFAFA;ヘッダー行の背景色を薄いグレー
  • font-size: 14px;文字のサイズを調整
• 偶数行の背景色（tr:nth-child(even)）
  • background-color: #F5F5F5;偶数行に薄いグレーの背景色を設定
• 行ホバー時のスタイル（tr:hover）
  • background-color: #E3F2FD;マウスオーバー時に行の背景色を薄い青