Qiita風のOGPをPHPで生成してみました。

エンジニアの99%が利用しているとも言われる(言われてない)プログラミングの情報共有サイト、QiitaのOGPを真似してみたい!と思い、PHPで生成プログラムを作ってみました。

 

そもそもOGPって?

よく、SNS等でURLを送信/投稿した際に表示されるサムネイル画像のことです。

Twitterスクショ

↑こんな感じ

本ブログのOGPは毎回Photoshopで作っているのですが、Qiitaの場合はタイトルとIDを元に記事毎に自動で生成されています。

今回は生成部分をPHPで再現してみました。

 

コード

今回のコードはGitHubに上がっています。

→【GitHub】OGP-GENERATOR

 

QiitaのOGP分析

まずは今回の目標であるQiitaのOGPを分析します。

OGP

本家とそっくりに作った今回の完成物を元に説明します。

まず、タイトル部分は文字数制限があり、

  • 1行あたり全角にして14文字、半角にして28文字まで
  • 4行まで表示できる
  • それ以降は省略される

という制限があります。

尚、タイトル部分は上下左右の中央に配置され、文字も中央揃えです

ID部分は右下になり、右揃えのため右側を基準に配置する必要があります。

サイズはOGPの一般的なサイズとされる1,200px × 630pxです。

 

作る上での課題

今回、私の中での課題は2個ありました。

1.文字数毎に切り出す関数は存在するが、半角全角両方とも1文字とカウントされてしまう。

2.画像に文字を合成する関数は存在するが、位置は数字でしか指定できず、テキストの水平方向への配置を指定するオプションも存在しない。

ということで、要は

  • 1行あたり全角にして14文字、半角にして28文字までの文字制限
  • 文字列の中央配置
  • 文字の中央揃え

などが標準の関数では不可能である。

そのため、それらの課題を解決する関数を作成しました。

詳しくはそれぞれ以下の記事で紹介しています。

→【PHP】画像に文字を配置を指定して書き込みをする自作関数

→【PHP】全角と半角を区別して文字列を指定文字数分切り出す

実際にできた関数の使い方

以下が呼び出し例

  • 第一引数にタイトルを渡してください。
  • 第二引数にユーザIDを渡してください(@は不要です)

 

尚、背景画像の変更は

  1. src/ogback.jpgを使用したい画像に変更する
  2.  ogp_generator.phpの15行目の画像パスを書き換える

の2つの方法で出来ます。

 

今回のブログ曲

今回投稿中に聴いていた曲はこちら

カテゴリー: PHP

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です