他のサイトのお知らせを自サイトに表示させる。

お知らせを読み込む側のindex.html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  let lastContent = "";

  function updateBanner() {
  $.ajax({
    url: "proxy.php",
    type: "GET",
    dataType: "json",
    success: function (data) {
  if (!data.banner) {
    return;
  }
  let bannerHtml = data.banner;
  let bannerElement = $(bannerHtml);

  let title = bannerElement.find(".update--title").text();
  let date = bannerElement.find(".update--date").text().replace("UPDATE", "").trim();
  let href = bannerElement.find("a").attr("href");
  let thumbnailUrl = bannerElement.find(".eyecatch img").attr("src");

  let combinedContent = `<dl><dt>${date}</dt><dd><a href="${href}" target="_blank"><img src="${thumbnailUrl}" alt="thumbnail" style="width: 100px; height: auto;">${title}</a></dd></dl>`;

  if (lastContent !== combinedContent) {
    lastContent = combinedContent;
    $("#targetElement").html(combinedContent);
  }
},
    error: function (error) {
      console.log("Error: ", error);
    },
    complete: function () {
      setTimeout(updateBanner, 60000); // 1分ごとに更新をチェック
    },
  });
}


  $(document).ready(function () {
    updateBanner();
  });
</script>

このHTMLファイルには、ウェブページ上でバナー情報を取得して表示するためのJavaScriptコードが含まれています。JavaScriptコードは以下の処理を行います。

• AJAXのGETリクエストを使ってproxy.phpスクリプトからデータを取得するupdateBanner()という関数を定義します。

• 取得したデータを解析し、必要な情報（タイトル、日付、リンク、サムネイル）を抽出し、その情報を含む新しいHTML要素を構築します。

• 新しく構築されたコンテンツと最後に取得したコンテンツを比較します。違いがあれば、新しいデータでページのコンテンツを更新します。

• 更新をチェックするために、1分ごとにupdateBanner()関数を呼び出すタイマーを設定します。

• ドキュメントが読み込まれたらupdateBanner()関数を呼び出します。

他のウェブサイトからデータを取得し、クロスドメインの制約を回避するプロキシとして機能するスクリプト（proxy.php）

<?php
header("Content-Type: text/html; charset=utf-8");
header("Access-Control-Allow-Origin: *");

$url = "記事を読み込む先のサイトＵＲＬ";
$content = file_get_contents($url);

$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
libxml_clear_errors();

$xpath = new DOMXPath($dom);
$banner = $xpath->query('//div[contains(@class, "update--banner")]')->item(0);

$json_data = json_encode([
  'banner' => $banner ? $dom->saveHTML($banner) : '',
]);

echo $json_data;
?>

このPHPスクリプトは、他のウェブサイトからデータを取得し、クロスドメインの制約を回避するプロキシとして機能します。以下の処理を行います。

• 文字エンコーディングとヘッダーを設定して、他のオリジンからのアクセスを許可します。

• 他のウェブサイトのコンテンツを取得します。

• 取得したコンテンツをDOMにロードし、XPathを使ってバナー情報を検索します。

• バナー情報をJSON形式に変換し、index.htmlのJavaScriptコードに返します。

これらのプログラムが連携して、他のウェブサイトのお知らせを自分のウェブサイトに表示できるようになります。index.htmlのJavaScriptコードは、proxy.phpから取得したデータを使って、お知らせのコンテンツを作成・表示します。proxy.phpは、他のウェブサイトからデータを取得し、クロスドメインの問題を回避するためのプロキシとして機能します。これにより、他のサイトのお知らせを簡単に自サイトに表示させることができます。