BETA

ブログカードを自作する方法について色々調べた

投稿日:2020-09-15
最終更新:2020-09-20

今回の記事は経緯と調査まで。
続きはこちら
https://qrunch.net/@junki555/entries/eNBwPtQ1VR7aemUl


ブログカードを作りたい

はてブ とかWordPressのモダンなテーマとかだと外部リンクをカード表示にしてくれる。
最近のブログサービスにはよくある機能だ。

↑こういうの。
これは画像です。が、クリックしたくなるでしょ?

カード表示にしてくれるサービスを使えばいいんだけど、
諸事情あって自作することになったので色々調べた

いろんなブログカード

なるほど、はてブのブログカードをiframeで出すという強引な技(?)から
embed.ly や EMBED BOOKMARKLET といった
ブログカード的なものを生成してくれるサービスがあるのか。
ただ、外部サービスを使うのはサイトのコードが汚くなるし
何よりパフォーマンスがイマイチだな〜

というわけで自作することにした

最終的にはリンクを貼り付けた時に
そのアドレスにリクエストを送って得られたDOMを解析して……とかやればいいんだけど
フロント側からXMLHTTPRequestでやろうとするとCORSでつまづきそうなので
まずはブックマークレットとしてリンク先で実行すれば
ブログカードとして貼り付けられるDOMを生成、
そのDOMに対するCSSはサイト側にもつ、という構成にしよう

つくるブックマークレットのイメージ

  • リンク先側のDOMを解析
    • タイトル、ブログカードに表示したい文言を取得
    • 表示しているURLを取得
    • 標準URL(canonical link)がヘッダに指定されていればそれを取得
    • ブログカードに表示したい画像をDOMから取得
  • ブログカードに表示したい画像を縮小、base64に変換
    • 画像を直リンクするのは嫌
    • かといって都度こちらのサービスにアップロードするのも嫌
    • なのでbase64エンコードして構築するDOMに埋め込んじゃおう
  • ブログカードに表示したいものを詰め込んだDOMを生成
  • クリップボードにコピー

こんな感じでいいだろう。

つくるブックマークレットの参考になりそうなサイト


今回はここまで。
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@JUNKI555の技術ブログ

よく一緒に読まれる記事

2件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
09/15 17:05

ちょうど似たようなものを作ろうと思っていたので、大変参考になりました。

09/17 16:05

@0000 ありがとうございます〜 実装してみたものをこちらに記事として上げました https://qrunch.net/@junki555/entries/GaNqMTOEHIYiAtwQ