Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@safetyinternet

Twitter カードの画像(OGP)を PHP で動的に変更する

やりたいこと

自分のホームページ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 validatorhttp://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 で宣伝できるようになりました。

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
safetyinternet
インターネットを安全に楽しむ方法を布教しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?