これは何か
記事やウェブページ、またはコンテンツデータのデータとMTMLのテンプレートから画像を生成することができるようになるMovable Typeのプラグインです。主にog:imageやアイキャッチの画像を生成するユースケースを想定しています。
以下が簡単な出力例で、「記事内の画像を背景にして、ウェブサイトのテーマカラーで縁取りして、タイトルと執筆者情報を入れる」という画像です。
どのような問題を解決するか
og:imageやアイキャッチ画像は、記事ごとにデザイナーさんに作成してもらうことができるのであれば、それがベストだと思っています。そのようにして作られた画像は目を引くうえに、内容も上手に凝縮して詰め込まれていて素晴らしいです。
ただ現実問題としてそこまで整えることのできないことも多く、そういう環境で記事の作成者が画像を用意するとなると、統一感のある画像を用意するのはなかなか難しいのではないかと思っています。このプラグインではそいう環境で作業者に時間やスキルがない場合にも、「あらかじめデザイナーさんにテンプレートを用意してもらう」ことにより、一定の品質で統一感のある画像を用意できるようになるというところを目指しています。
デモ
使い方
インストール後に、SVGのデータを出力するテンプレートを作成すると使えるようになります。記事やウェブページとの関連付けはテンプレート名で行います。それぞれ以下の名前で作成してください。
記事
image_template_entry_並び順（数字）_表示名
ウェブページ
image_template_page_並び順（数字）_表示名
コンテンツデータ
image_template_content_data_コンテンツタイプのID_並び順（数字）_表示名
テンプレートの例
デモのために作成したテンプレートです。いろいろと決めうちで品質はよくないですが、雰囲気は伝わるかと思います。ルート要素に指定したwidthとheightが、出力される画像のサイズになります。
TODOリスト
- SVGでなくて、HTMLで書くこともできるようにする
- 現在は「埋め込める画像はjpegのみ」「出力できる画像はpngのみ」なので、ちゃんと他のフォーマットも扱えるようにする
- JavaScriptで、SVGの要素を調整して、その結果を出力できるようにする
- 管理画面で関連付けや並べ替えができるようにする
- その他、たくさんあります。
この記事について
この記事は Movable Type Advent Calendar 2022 の25日目の記事です。皆様お疲れさまでした。それでは良いお年を！