やりたいこと
自分のホームページを Twitter で宣伝したい。
そのときに Twitter カードという形式で表示したい。
また、表示する画像を幾つか用意して、同じサイトでも違う画像で表示したい。
どうすれば良いのか？
まず、Twitter カードの設定が必要。
下記の meta タグを<head></head>のなかに入れます。
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@safetyinternetz" />
<meta property="og:url" content="http://safetyinternet001.ddns.net/" />
<meta property="og:title" content="安全にインターネットを楽しもう" />
<meta property="og:description" content="美少女の画像、動画を安全に楽しむ方法をお伝えします。" />
<meta property="og:image" content="http://safetyinternet001.ddns.net/images/card_images/001.jpg" />
一つ目が、大きなカードで表示。
二つ目が、自分の Twitter アカウント
三つ目が、ホームページのアドレス。
四つ目が、タイトル。
五つ目が、HPの要約。
六つ目が、Twitter にアドレスを貼ったときに表示される画像。この画像部分を動的に変更したい。
ちなみに画像のパスは、相対パスではなく絶対パスで記述する必要があります。ご注意を。
この情報が入ったホームページを作成し、Card validatorというサイトで登録してみましょう。URL を入れて、Preview cardを押すと、URL を貼ったときに、どのような画像が表示されるかがわかります。
で、画像が 1 つだけの場合はこれで良いんですけど、複数の画像をひとつのサイトにつけたいときに少々問題があるわけです。
もともと svelte でつくったサイトで、svelte で動的に変えてもダメでした。
仕方なく php で変更することに……。
PHP で何をすれば良いのか？
OGP は、同じ URL ではひとつの画像しか生成されません。
よって異なる URL として認識させた上で、その URL に応じて画像を設定できればいいわけです。
つまり、http://safetyinternet001.ddns.net/?id=001
このときに 001 の画像を表示し、http://safetyinternet001.ddns.net/?id=002
このときに 002 の画像を表示すればいいわけです。
冒頭に下記のようなコードを入れてみましょう。
<?php
if(!$_GET){
$id = '001';
} else {
$id = $_GET['id'];
}
?>
PHP には詳しくないので動くだけのソースですが、GET で ID のパラメータがなければ自動的に 001 を設定、もしパラメータがあれば$idという変数に 002 とか 003 の数値が入るわけです。
さらに、さきほどの head 部分を少し変えてみましょう。
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@safetyinternetz" />
<meta property="og:url" content="http://safetyinternet001.ddns.net/" />
<meta property="og:title" content="安全にインターネットを楽しもう" />
<meta property="og:description" content="美少女の画像、動画を安全に楽しむ方法をお伝えします。" />
<meta property="og:image" content="http://safetyinternet001.ddns.net/images/card_images/<?php echo "$id"?>.jpg" />
まあ画像のアドレスを id という変数にしただけです。
これで、さきほどのCard validatorでhttp://safetyinternet001.ddns.net/?id=201などを入れてみたら、201 の画像が表示されます。
あとは何かしらでhttp://safetyinternet001.ddns.net/?id=001～240とか、自分の用意した画像の分だけアドレスを作成し、BOT に突っ込めば URL を投稿したときに自動的に異なる画像が表示されるようになります。
僕が使っている BOT サービスはBot Birdです。
id=001とかの部分は、好きなようにつくっていいと思います。
僕は無骨に node.js で書いてみました。
const R = require("ramda");
const fs = require("fs");
const rangeArray = R.range(1, 243);
console.log(rangeArray);
const zeroPaddedArray = rangeArray.map((item) => item.toString().padStart(3, "0"));
const write = (item) => {
fs.appendFileSync(
"./out.text",
`http://safetyinternet001.ddns.net/?id=${item}` + "\n",
(err) => {
if (err) throw err;
console.log("text追記");
}
);
};
zeroPaddedArray.map((item) => write(item));
普通に画像の個数（今回は 243 個）分の配列を作成し、padStartでゼロ埋めをし、テキストファイルに書き出すだけです。
ここで 243 個と画像が決まっていれば、php のほうで 243 以上の数字、あとは他の文字列だったら 001 にするとか、そういう処理を入れてもいいかも。
そんな感じで、1 時間に 1 回、違う画像で自分のホームページを Twitter で宣伝できるようになりました。