リンクカードをjQueryでリアルタイムで生成する

2021-01-27
リンクカードをいちいちタグ打ちするのが面倒なのでリンクタグをとってきて整形して表示してしまおう！って話です。
bootstrapのcardを前提にしているので必要に応じてタグやcssは書き換えてくださいませ。

---

処理の流れ

ザクっとこんな感じで動作します。

• .bard-bodyの中に a class="linkcard" があったら
• jQueryで勝手に認識して
• gethtmlcontents.phpにURLを渡して
• 戻り値（htmlタグ）から
• ogタグとかを使ってリンクカードのhtmlを生成して
• 元のリンクタグを置き換える

完成コード

以下の2行だけのPHPファイルを作ってサーバにアップする。
ここでは/path/to/gethtmlcontents.phpとする。

<?php
echo file_get_contents($_GET['url']);

以下を /body の直前とかに追記する。
PHPファイル設置場所に合わせてのパスを変更する。

<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
  if ($(".card-body > a.linkcard").length) {
    $(".card-body > a.linkcard").each(function(){
      $.ajax({
        url: `/path/to/gethtmlcontents.php?url=`+$(this).attr('href'),
        type: 'GET',
        dataType: 'html',
        cache: false,
        context: this
      })
      .then(
        function (data) {
          const url = $(data).filter("meta[property='og:url']").attr("content");
          const title = $(data).filter("meta[property='og:title']").attr("content");
          const description = $(data).filter("meta[property='og:description']").attr("content");
          const site_name = $(data).filter("meta[property='og:site_name']").attr("content");
          const image = $(data).filter("meta[property='og:image']").attr("content");
          const htmltag =
            '<div class="card mb-3">' +
            '  <div class="row">' +
            '  <div class="col-md-8">'+
            '   <div class="card-body">'+
            '    <a href="'+url+'" target="_blank" class="link-title">'+title+'</a><br>'+
            '    <p class="link-description">'+description+'</p>'+
            '   </div>'+
            '  </div>'+
            '  <div class="col-md-4">'+
            '   <div class="card-body">'+
            '    <a href="'+url+'" target="_blank" class="link-title">'+
            '      <img src="'+image+'" class="linkcover">' +
            '    </div>'+
            '   </div>'+
            '  </div>'+
            '  </div>'+
            '</div>';
          $(this).replaceWith(htmltag);
        },
        function () {
          console.log("errror");
        }
      );
    });
  }
});
</script>

解説：なぜPHPファイルが必要なのか？

クロスサイトスクリプティング（XSS）の制限があるためajaxから自分のドメイン名以外のページを呼び出すことができない。
ザクっと言うと「危ないからjavascriptから外部サイトのデータを扱えないよ」という事だ。 なので、自分のサイトにPHPを設置してHTMLコンテンツを持ってくる必要があるのだ。
クロスサイトスクリプティング（XSS）とは？Webアプリにおける対策方法について

最近のサイトってOGPタグは普通にあるでしょ！

ogタグって言っている物の正体はOGP、OGPタグと言うやつだ。 最近の気の利いたブログやページのほとんどはOGPタグがあるのでこのスクリプトで表示できるけど、wikipediaとか古いサイトってogタグないよね？って場合はfilterあたりを工夫してくださいませ。

OGPタグって何？って人はここを読むと幸せになれるかも。
OGPとは？OGPの基本からOGP画像のサイズや設定方法を分かりやすく解説

---

イラスト：Loose Drawing
イラスト：Loose Drawing