🗒️
ブログカードを自作する方法について色々調べた
今回の記事は経緯と調査まで。
実装はこちらの記事へ
ブログカードを作りたい
はてブ とかWordPressのモダンなテーマとかだと外部リンクをカード表示にしてくれる。
最近のブログサービスにはよくある機能だ。
↑こういうの。
これは画像です。が、クリックしたくなるでしょ？
カード表示にしてくれるサービスを使えばいいんだけど、
諸事情あって自作することになったので色々調べた
いろんなブログカード
- 内部リンクを効果的に！Bloggerで使えるブログカード4選 - ウラの裏
- Bloggerでブログカードを表示させる方法あれこれ - Cottpic
- ルクセリタスのブログカードを利用してAmazon用のカードを使い分ける - Web構築の備忘録と本探し
- ブログカードのCSS参考
- https://ayaito.net/luxelitas/l_customize/14744/
なるほど、はてブのブログカードをiframeで出すという強引な技(?)から
embed.ly や EMBED BOOKMARKLET といった
ブログカード的なものを生成してくれるサービスがあるのか。
ただ、外部サービスを使うのはサイトのコードが汚くなるし
何よりパフォーマンスがイマイチだな〜
というわけで自作することにした
最終的にはリンクを貼り付けた時に
そのアドレスにリクエストを送って得られたDOMを解析して……とかやればいいんだけど
フロント側からXMLHTTPRequestでやろうとするとCORSでつまづきそうなので
まずはブックマークレットとしてリンク先で実行すれば
ブログカードとして貼り付けられるDOMを生成、
そのDOMに対するCSSはサイト側にもつ、という構成にしよう
つくるブックマークレットのイメージ
- リンク先側のDOMを解析
- タイトル、ブログカードに表示したい文言を取得
- 表示しているURLを取得
- 標準URL（canonical link）がヘッダに指定されていればそれを取得
- ブログカードに表示したい画像をDOMから取得
- ブログカードに表示したい画像を縮小、base64に変換
- 画像を直リンクするのは嫌
- かといって都度こちらのサービスにアップロードするのも嫌
- なのでbase64エンコードして構築するDOMに埋め込んじゃおう
- ブログカードに表示したいものを詰め込んだDOMを生成
- クリップボードにコピー
こんな感じでいいだろう。
つくるブックマークレットの参考になりそうなサイト
- Bookmarkletを作ろう(準備編） - Qiita
- https://qiita.com/kanaxx/items/63debe502aacd73c3cb8
- bookmarklet の基礎
- Google Closure Compiler
- https://closure-compiler.appspot.com/home
- 上の記事にもあるように、ここでコンパイル&minifyかけてからbookmarkletにするといい感じ
- JavaScriptで画像をリサイズ（拡大／縮小）する - IT二刀流
-
https://tech-it.r-net.info/program/javascript/265/
- How can I convert an image into Base64 string using JavaScript? - stackoverflow
- 今回のとは関係薄いけど画像をアップロードしてやるときはこのやり方が使えそう
-
https://tech-it.r-net.info/program/javascript/265/
- HTML5 の canvas 要素を base64 文字列化し画像として保存する方法まとめ - Qiita
- https://qiita.com/clockmaker/items/924b5b4228484e7a09f0
-
canvas.toDataURL("image/jpeg");でjpegでbase64化
- [JavaScript]外部URLから画像を読み込んで表示する（+クロスドメインを突破する） - black everyday
- https://kuroeveryday.blogspot.com/2017/05/getting-image-from-url.html
- たとえ同一サイト内で画像縮小のためにJavaScriptでimgタグからcanvasに描画し直しても
-
Tainted canvases may not be exported.エラーが発生する - なので
image.crossOrigin = "anonymous";してやる必要がある
- JavaScriptを使用した標準URLの取得 - 366service
- http://www.366service.com/jp/qa/7d100b9aba34e2e9a4f60f65bccd8fc0
- canonical link の取得
- JavaScriptでiframe内のDOM要素を取得したり操作する - Ownedmedia
- https://designsupply-web.com/media/knowledgeside/4823/
- 解析する先の情報にiframeがあった時の場合
- [HTML] Aタグにおけるrel属性の意味と効果について - WEBTECNOTE
- https://tenderfeel.xsrv.jp/html-xhtml/4056/
- アンカータグには rel をつけておくのが今風
- Base64→画像デコード
- https://rakko.tools/tools/71/
- base64変換した画像がちゃんと変換できているかの確認に使える
今回はここまで。
Discussion