タイトルからサムネイル画像を作れる機能を解説

こんにちは。田村です。

以前a-blog cmsで「タイトルからサムネイル画像を作れる機能です」ということでタイトルからサムネイルを作成する仕組みを投稿しました。

今回は、作り方を説明したいと思います。
ほとんどそのまま使用できるコードをダウンロードできるように準備していますので良かった試してみてください。

解説

まず、タイトルから入力された値をリアルタイムで取得して、画像として利用する領域に表示させています。

次に、画像はシェア用に「OGImage」、サマリー用に「4:3」を準備しました。この部分は、a-blog cmsのカスタムフィールドメーカーで作成したラジオボタンを改良しています。

最後に、表示領域と保存領域をCSSで調整し、「画像を保存」ボタンを押すとダウンロードされる仕組みです。
また、html2canvasというブラウザのスクリーンショットを取るライブラリを使用しています。

それでは、コードを見てみましょう。

コード

「html2canvas.min.js」以外のファイルをダウンロードできるように準備しました。
冒頭のZipファイルをダウンロードします。
html2canvasについては、公式サイトから取得してください。
https://html2canvas.hertzen.com/

次のようなファイル構成になっています。
また、ベースの画像は必要に応じて使用したいものに変更してください。

og-image-generator
├── base-image1.png 「ogImageの画像」
├── base-image2.png 「4:3の画像」
├── field-generator.html 「ラジオボタンと画像表示のところ」
├── generator.css 「画像表示のCSS」
└── generator.js 「タイトルをとったりhtml2canvasを呼び出したり」
+ 
└── html2canvas.min.js 「スクリーンショットのライブラリ：ご自身でダウンロード」

html2canvasの書き出しのや見出しの位置などCSSを調整をしたい場合は、generator.jsの中の「html2canvas()」あたりやgenerator.cssを調整してください。

詳細な設定については、html2canvasの公式サイトを参照してください。
https://html2canvas.hertzen.com/configuration

ZIPファイルの中身とhtml2canvasを合わせて、次のような形でadminディレクトリに配置してください。

最後に、エントリーのフィールドで表示できるように読み込みます。
例えばルートカテゴリーが「blog」の場合のみ読み込みたい場合は「myTheme/admin/entry/field.html」に下記を貼り付けます。

<!-- BEGIN_IF [%{RCCD}/eq/blog] -->
@include("/admin/entry/og-image-generator/field-generator.html")
<!-- END_IF -->

次のような入力画面が表示されると完成です。
タイトルを入力して画像を保存してみてください。

終わりに

html2canvasはちょっと古いライブラリですが、既存のCMSなどにサクッと追加したい場合には便利かなと思います。
JSXが使える環境なであればsatoriなど別のライブラリも検討された方が良いかもです。

html2canvasの注意点として、ブラウザとは別で独自にDOM解析やレンダリングを行って生成しているとのことですので生成される画像は、実際に表示している状態が異なる場合があります。

保存した画像の文字が意図せずズレた場合は、画像として保存する場合だけ、少しタイトルを変えるなど調整してもらうと良いかもです。

a-blog cmsに組み込んでいますが仕組みとしては、CMS関係なく使用できると思いますので参考にしてみてください。

役に立った！と思いましたら
弊社の焼き菓子「あしかクッキー」の商品をポチ、もしくはシェアしてもらえると喜びます^^
ただいま「区ッキー」がイチオシですのでよろしくお願いいたします！