はじめに

個人開発のバイクポータルサイト MotoHub では、X（Twitter）BOTで中古バイクのお買い得情報を自動投稿しています。テキストだけの投稿からグラフ付きダッシュボード画像に進化させた過程で、Browsershotの挫折、QuickChart APIの活用、Nginx設定ミスによるサイトダウンなど、様々な学びがありました。

BOT投稿の全体像

MotoHubでは1日6回、4種類のBOT投稿を行っています。

08:00  お買い得車両（ダッシュボードグラフ付き）
10:00  新着入荷まとめ
12:00  お買い得車両（2回目）
14:00  新着レビュー紹介
20:00  お買い得車両（3回目）
日曜11:00  週間トレンド

Browsershotを断念した理由

最初はBrowseshotでHTMLをレンダリングしてスクリーンショットを撮る方針でした。しかしDocker環境（Alpine/Ubuntu）でChromeを動かすのは茨の道でした。

❌ libXfixes.so.3 が見つからない
❌ crashpad_handler が起動しない
❌ --no-sandbox でも権限エラー
❌ puppeteer用のchromiumも同様

Docker内でヘッドレスChromeを安定稼働させるには、かなりのシステムパッケージが必要で、VPSのリソースも圧迫します。

結論: 画像生成のためだけにChrome環境を整備するのは割に合わない。

QuickChart APIで解決

QuickChart.io はChart.jsの構文でグラフ画像をAPI生成できるサービスです。

$chartConfig = [
    'type' => 'line',
    'data' => [
        'labels' => ['1月', '2月', '3月', '4月', '5月', '6月'],
        'datasets' => [[
            'label' => '相場推移',
            'data' => [45, 42, 48, 44, 46, 43],
            'backgroundColor' => 'rgba(59,130,246,0.3)',
            'borderColor' => '#3b82f6',
            'fill' => true,
        ]],
    ],
    'options' => [
        'plugins' => ['legend' => ['display' => false]],
    ],
];

$response = Http::post('https://quickchart.io/chart', [
    'chart' => json_encode($chartConfig),
    'width' => 600,
    'height' => 400,
    'devicePixelRatio' => 2,
    'backgroundColor' => '#0f172a',
]);

$chartImage = $response->body(); // PNG画像

注意点: Chart.js v2.9.4互換

QuickChartはChart.js v2.9.4 がデフォルトです。v3/v4の構文とは微妙に異なるので注意。

// ❌ v3構文（QuickChartで動かない）
options: { plugins: { legend: { display: false } } }

// ✅ v2構文（QuickChartで動く）
options: { legend: { display: false } }

callbackの書き方

Y軸に「万円」を表示するなど、callbackを使いたい場合はJS文字列リテラルで渡します。

// ❌ PHP配列 → json_encode（callbackが文字列化されない）
'callback' => function($value) { return $value + '万円'; }

// ✅ JS文字列として直接記述
'ticks' => [
    'callback' => 'function(value) { return value + "万円"; }',
],

4種類のダッシュボード画像

1. お買い得車両（TweetBargains）

QuickChartで4枚のグラフを生成し、Intervention Imageで1枚に合成します。

// 4枚のチャート画像を生成
$charts = [
    $this->generatePriceTrend($model),      // 左上: 相場推移（面グラフ）
    $this->generatePriceDistribution($model), // 右上: 価格帯分布（横棒）
    $this->generateRegionStock($model),      // 左下: 地域別在庫TOP5（横棒）
    $this->generateYearDistribution($model), // 右下: 年式分布（縦棒）
];

// 1200x630の背景に4枚を配置
$canvas = Image::canvas(1200, 630, '#0f172a');
$canvas->insert($charts[0], 'top-left', 20, 80);
$canvas->insert($charts[1], 'top-right', 20, 80);
$canvas->insert($charts[2], 'bottom-left', 20, 20);
$canvas->insert($charts[3], 'bottom-right', 20, 20);

2. 新着入荷（TweetNewStock）

メーカー別・価格帯別・車種別・入荷推移の4グラフ。新着データを毎朝集計して投稿します。

3. レビュー紹介（TweetReviews）

5項目評価のレーダーチャートと販売KPIを組み合わせた画像。

4. 週間トレンド（TweetTrending）

TOP5車種の販売台数を横棒グラフで表示。1位金色・2位銀色・3位銅色のメダルカラー。

OGPエンドポイント: `/bikes/{listing}/ogp.png`

BOT投稿だけでなく、車両ページ自体のOGP画像も動的生成しています。

// DealOgpController.php
public function show(Listing $listing)
{
    $chartImage = $this->chartService->generatePriceChart($listing);

    return response($chartImage)
        ->header('Content-Type', 'image/png')
        ->header('Cache-Control', 'public, max-age=86400');
}

Nginx設定の罠

OGP画像のURLパターン（/bikes/{id}/ogp.png）をNginxでfastcgiに通す設定を追加した際、うっかりdefault.prod.confをdefault.confで上書きしてサイトがダウンしました。

# 本番: default.prod.conf（SSL付き）
# ローカル: default.conf（SSL無し）

# ❌ ローカル用設定で本番を上書き → SSL消失 → Cloudflare 521エラー

教訓: 本番のNginx設定ファイルはdefault.prod.conf。絶対にdefault.confで上書きしない。docker-compose.ymlのNGINX_CONF環境変数で切り替える。

LaravelのDB::avg()がstringを返す問題

// avg()の戻り値はstring
$avgPrice = DB::table('listings')->avg('total_price');
// → "478000" (string型)

// Cache::remember経由でもstring
$cached = Cache::remember('avg', 3600, fn() => DB::table('listings')->avg('total_price'));
// → "478000" (string型のまま)

// 数値として使うなら明示的にキャスト
$avgPrice = (float) Cache::remember('avg', 3600, fn() => ...);

QuickChart APIの制限と対策

項目	制限
無料枠	月500リクエスト
画像サイズ	最大500KB
タイムアウト	10秒

月500リクエストは、6投稿/日 × 30日 = 180リクエスト + OGP生成で十分収まります。有料プランは月$40〜ですが、個人開発なら無料枠で十分です。

まとめ

Docker環境でのBrowseshotは茨の道。QuickChart APIが個人開発には最適解
Chart.js v2互換であることを忘れずに
OGP画像のNginx設定変更は本番設定ファイルの取り扱いに細心の注意
DB::avg()の戻り値はstring。キャスト忘れに注意
Intervention Imageで複数チャートを合成すれば、リッチなダッシュボード画像が作れる