電電高専生日記

記事のキャプチャをTwitterカードとして動的に生成する方法

2021/10/03 23:07

1.目的

 記事のキャプチャをTwitterカードの動的生成する方法をまとめます。単に任意の画像をカードとして指定するのではなく、対象ページの閲覧画面をTwitterカードにすることを目的とします。例として、この記事に対しては、以下のようなTwitterカードを動的生成します。(あまり興味を引くようなカードではないですが…)

2.方法

環境は、以下の通り。

  • Twitterアカウント
  • FC2ブログ(Twitterに紐づけ)
  • レンタルサーバー(PHP必須)
  • screenshotlayer(WEBキャプチャサービス。Free Planで十分)

では、まずシステムの概略図を示します。UMLとかじゃないラクガキですが。。

①から順に説明していきます~

2.①TwitterカードURLの参照

まず、ブログの設定を行います。Headerに以下のようなmetaタグを挿入。




  
     

 タイトルや説明の部分はTwitterカードで表示される部分になるので、必要に応じて動的に指定しましょう。FC2ブログの場合はテンプレート変数を使うと便利。
 twitter:imageには、レンタルサーバーに設置するTwitterカード動的生成システムのURLを指定します。ここでは仮に twitter_card_maker.php としておきます。中身は後述。このPHPファイルへのパラメータとして記事のURLを渡します。もちろんこのURLパラメータも動的に渡します。FC2ブログテンプレート変数だと、<%topentry_original_link> とかですかね。

2.②新規記事投稿の情報を送信

これは、FC2ブログとTwitterアカウントの連携をするです。これにより連携したTwitterアカウントは、新規記事を投稿したときに自動で記事のツイートを投稿します。
連携はこちらからー。

2.③Twitterカードを要求

 ここはTwitterが勝手に行います。特に自分で作るものはないです。
流れは、②のプロセスにより記事のURLを含むツイートが投稿されると、TwitterはそのURL先のコンテンツからTwitterカードURLを取得します。これが①で指定したレンタルサーバーのアドレス(twitter_card_maker.php)です。ここで指定したPHPファイルにリクエストが飛びます。

2.④記事画像を要求

 ここが核になります。といってもPHPファイル一つで済むので、ここはコード示して終わりにします。Twitterからリクエストの飛ぶファイル twitter_card_maker.php で、画面キャプチャを用意して返してやります。コードは以下になります。

header('Content-type: image/png');
    
//screenshotlayer.com のAPIキー
$API_KEY = "******************************";

//個別記事なら…
if ( preg_match("/blog-entry/", $_GET["url"]) ){

    //記事番号取得
    preg_match("/blog-entry-(\d{1,})\.html/", $_GET["url"], $matches);
    $article_number = (int)$matches[1];
    //スクショ画像のパス作成
    $orig_path = "img/orig-".(string)$article_number.".png";
    //カード画像のパス作成
    $card_path = "img/card-".(string)$article_number.".png";

    //既にカードがあれば…
    if (file_exists($card_path) == true){
        //読み込んで出力
        $data = file_get_contents($card_path);
        echo $data;

    //カードが無ければ…
    } else {
        $api_url = "http://api.screenshotlayer.com/api/capture";

        $api_url .= "?access_key=" . $API_KEY;
        $api_url .= "&url=http://elkosendiary.com/blog-entry-".(string)$article_number.".html";
        $api_url .= "&viewport=1440x900";
        $api_url .= "&width=1440";

        //apiから画像保存(orig)
        copy($api_url, $orig_path);
        
        //保存したスクショ(orig)からトリムしてカード作成
        $imagick = new \Imagick(realpath($orig_path));
        $imagick->cropImage(600, 314, 285, 510);
        $imagick->writeImage($card_path);

        //読み込んで出力
        $data = file_get_contents($card_path);
        echo $data;
    }

//個別記事以外なら…
} else {
    //共通出力
    $data = file_get_contents("img/card-common.png");
    echo $data;
}

まーかなり汚いコードなんですが。要は、1回画像取得済みのURLならば保存済みの画像を、初めてのURLならばscreenshotlayer.comで画面キャプチャを要求して保存、という形ですね。

2.⑤記事を要求

 API呼び出しを受けたscreenshotlayerが、指定通りに画面キャプチャをして画像を返します。ま、ここは登録するだけですね。
screenshotlayer.com
 完全無料のFree Planでは月に100件まで画面キャプチャを取れます。1日3件の記事を書いても大丈夫なので、まぁほとんどの人はFFree Planで十分ではないでしょうか。それ以上は有料プランを使いましょう。

3.結果

 以上で完成です~。あとは記事投稿するだけで、自動的に記事の画面キャプチャをTwitterカードにしたツイートが投稿されるはずです。
 ちなみにこれ、別のブログ用に作ったシステムなんですよ。なのでこのブログには適用しません。なのでインチキですが、「こうなりますよ」という結果だけ以下に示します。実際にシステムを適用させたわけじゃなく、metaタグで直接指定してます↓

4.課題、考察、感想

 画面キャプチャを取るのを自前でやれば色々楽なんですが、レンタルサーバーでは難しいのでね。Phantom JSとかいうのもヒットしたんですけど。さくらのレンサバでは無理なのでね。
 てか、久々に記事書いた!この画面キャプチャ連携を作るよりも、記事書く方が疲れた。でも今後も、何か取り組んだことは報告書形式でまとめていきたいと思ってます。自分でやったことを忘れちゃったら勿体ないし、あわよくば誰かの役に立てば嬉しい。

  • このエントリーをはてなブックマークに追加

最新記事

コメント(0)





プロフィール

名前:エルコ
性別:男
生年:1995年

職業は組み込み系。

2011年4月 高専入学
2016年3月 高専卒業
2016年4月 大学編入学
2018年3月 大学卒業
2018年4月 就職

カテゴリ
Adsense
月別アーカイブ
ブログ内検索

アクセス

昨日のPV数:
全期間PV数:

おすすめ記事

「高専大学編入ログ」を作成しました

自作ゲーム「Defend PortMoresby!」バージョン3

記事のキャプチャをTwitterカードとして動的に生成する方法