Miobiki

  1. HOME
  2. javascript
  3. OGP画像ジェネレーターを作った

OGP画像ジェネレーターを作った

目次

最初の方はOGP画像作成も少し頑張っていたのですが、すぐに面倒になったのでデフォルト画像で埋め尽くされるようになってしまいました。

なにより手順が面倒だなと。
Macを起動してIllustrator開いて、タイトル変えて、位置調整して…

簡単な画像を作るだけなのにMac起動から始まるのが最大の難関です。
そこまでモチベーションがない。でも、デフォルトで埋め尽くされるのも嫌だ。

ということで、iPhoneでも作れるようにOGP画像ジェネレーターを作ってみました🎉

公開先

url

https://miobiki-ogp-generator.netlify.com/

リポジトリ

https://github.com/nao5151/miobiki-ogp-generator

ブログと同様Netlifyでホスティングしてます。
GitHub Pagesでもいいかなと思ったのですが、ローカルでビルドしないといけないのでNetlifyで良かったと思います。
アカウントはすでに作ってあるので、リポジトリを選択してURLを設定するだけで完了でした。
あらためて便利さに感動しました!

iPhoneで作ってみたOGP画像

タイトルを入力して、フォントサイズをガイドラインに合うように調整するだけで作れるので楽です。

開発の話

ChromeやFirefoxでフォントが適用できてないのを確認しましたがスルーしました…
完全にプライベートユースなので、iPhone Safariだけ動作すればよし…描画に関連しないスタイルも関係なし…
ちょっとずつアップデートできればなと。

実装はSVG,React

プレビューとOGP画像の元になる部分はSVGで描画してます。ダウンロード時にちょこっとcanvasに描画してます。

SVGはプロパティの値を変えるだけで描画はブラウザ任せにできるのでReactやVue.jsには、かなり合っています。
canvasもPixiJSなどを使い、オブジェクトのパラメーターを同期すれば、描画は任せられるのでありです。

大したことはしないので、canvasではなくSVGにしました。

SVGのテキストのセンタリングで苦戦

開発中はタイトルのセンタリングがうまく実装できずにだいぶ苦戦しました。
text要素をくくったg要素にtransformで配置しようとして、いろいろ計算したりしてだいぶ時間をもっていかれたと思います。

いろいろググっては試していると、最終的に面倒な計算はなくなりました。
text要素のスタイルに text-anchor: middle; 、属性に x="50%" y="50%" を指定するとできます。(yはフォントによって調整が必要な場合があります)
それから行数によってdyでずらしてあげるとうまくタイトルのセンタリングができました。

コードにするとこんな感じです。

<svg style="text-anchor: middle;">
  <text x="50%" y="50%" dy="-.5em">Hello</text>
  <text x="50%" y="50%" dy=".5em">World</text>
</svg>

かなりシンプルです。もう少しでcanvasへ浮気をするところでした。

さいごに

機能としてはシンプルなものですが、なにより作れたので満足です。そのうちオフライン対応も試してみたいなと考えてます。

こうして自分で作ってみると、Photoshopなどはどうデータを保持して、どう配置してと実装されているのか気になってきますね。

今後はデフォルトのOGP画像がなくなる日がくればいいと思います!