やりたかったこと

• サイト独自のタイトル名を含んだOGP画像の作成
• iA Writerで書いたドラフト原稿を、できる限り手間なくa-blog cmsのエントリーにする

実際の操作画面

YouTubeに動画を作成（3分）しました。

YouTube内では画像の挿入に最初手こずっていますが、こちらも手順が整えば、数秒で画像を差し替え可能です。

解決方法

独自のOGP画像の作成

FileMakerとMBSプラグインを利用して解決しました。

• Adobe IllustratorでベースとなるOGP画像を作成
• 上記画像を背景としたhtmlを作成。タイトルの変更部分をテキストで実装
  • フォントについてはAdobe FontのWebフォント埋め込みを利用
• FileMakerのWebビューア内に上記HTMlを実装。画像用タイトルのフィールドを用意し、入力した内容が反映するように実装
• フォントサイズを変更できるように実装を追加
• 文字数や改行にあわせて、適切と思われるサイズを算出し、自動でフォントサイズに挿入するような補助機能を実装
• MBSプラグインでボタン一つで画像を作成

iA Writerで書いたドラフト原稿を、できる限り手間なくa-blog cmsのエントリーにする

iA Writerの原稿をFileMakerで自動処理、操作することで解決しました。

• iA Writerのhtmlプレビューが、a-blog cmsのリッチエディターにそのまま貼り付けすることができる。
• 画像部分も写真ブロックとして理解されるため、写真をアップロードするだけで下書きの内容を再現可能

最後のリッチエディターとの相性を発見したことで、今回のプロジェクトが前に進みました。

FileMakerを基準にして、

• iA Writerの原稿を加工し
• タイトル画像を数秒で作成
• エントリー作成画面が表示されるので
• 自動的に開かれたファイルをOGPとして挿入し、
• 自動的に開かれた入力用のリッチテキストを、リッチエディターにコピー＆ペースト
• 画像がある場合は、その部分をクリックして画像をドロップ

という手順でエントリーを作成可能になりました。

システムを構築したメリット

• 丁寧なOGP画像を作成可能
  • 背景画像を含め、自社でカスタマイズ可能です。
• iA Writerでの細かな操作が不要に
  • 一行目のタイトルを、a-blog cmsのタイトル欄に貼り付ける。タグ部分も取り除いた部分を選択しる。という手間がなくなりました。
  • 該当部分を選んで、⌘＋A、⌘＋Cで作業が完了
• タイトルの自動挿入が可能に
• FileMakerのWebビューアのログインセッションが切れている場合は、自動的に再ログインするため、操作が途切れることがない

タイトルをOGP画像にするのは、noteやZennなどが実装しており、SNS上でもみやすくクリック率に貢献していました。

その画像を手間なく作成できるようになったのも非常に良かったです。

ご興味ある方は、お気軽にご相談ください。

こちらのシステムは、FileMakerとiA Writerが必要になりますが、調整することで既存のa-blog cmsで構築されたサイトにも応用が可能です。

ご興味ある方は、お気軽にご相談ください。