hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

昔に貼ったinstagramの写真が見えなくなっていることが多かったので、無理やりJSを書いてなんとかした

昔に貼ったinstagramの写真が見えなくなっていることが多かったので、無理やりJSを書いてなんとかした。
instagram.com/p/以下に貼り付け用のURLが用意されていたのだけど、いまは滅びているようで、iframeを貼るようなマークアップにその場で変換している。

<script>
(() => {
  const knownPhotoIds = {};
  setInterval(() => {
    const instagramAnchors = document.querySelectorAll('img[src*="instagram.com/p/"]');
    [...instagramAnchors].forEach(img => {
      if (img.naturalWidth > 0 || img.naturalHeight > 0) return;
      const photoId = img.src.match(/\/p\/([^/]+)\//)[1];
      if (knownPhotoIds[photoId]) return;
      knownPhotoIds[photoId] = true;
      const iframe = document.createElement('iframe');
      iframe.src=`https://instagram.com/p/${photoId}/embed/`;
      iframe.setAttribute("allowtransparency", "true");
      iframe.setAttribute("allowfullscreen","true");
      iframe.setAttribute("frameborder", 0);
      iframe.height="600";
      iframe.width = '500';
      img.parentElement.insertBefore(iframe, img);
      img.remove();
    });
  }, 1000);
})();

信じられないほどに雑だけど、とりあえず見えるようになった。
10年前にリュックで首吊ってたって話を読みたい人はいないと思うし、データベースにはこの記事が保存されているものの、実際に呼び出される機会はもうないだろう。それでinstagram側のデータも残っているのに、リンクが切れている、というのは寂しいことだと思う。
blog.sushi.money


もっと古いのだと、Amazon S3のURLが直接指定されていたりして、こちらの対応もするのはもうちょっとめんどくさそう。
aタグで囲われてたら、そこからIDを探したりすることもできそう。