【簡単】あなたのブログの検索ワードを1枚の画像で表現してみよう！ - ポンコツエンジニアのごじゃっぺ開発日記。

ブログの検索ワードを一枚の画像で表示してみたいと思いませんか？例えばこのブログの場合はこのような感じです。 f:id:ponkotsu0605:20200117001722p:plain

このように画像化することで、このブログで書かれているものをパッと見ただけでわかるかと思います。今回の記事では、この画像の作成方法について紹介したいと思います。

ざっくりとした仕組み
実際に作成してみる
さいごに

ざっくりとした仕組み

さて、上の画像では、より検索されているワードほど大きなフォントサイズとして表示されています。そのため、Search Consoleから検索されているワードを取得し、その表示回数(またはクリック数)を単語ごとに求めることで、どのくらいのサイズで表示するべきかを求めることができます。それを画像として出力するだけです。

実際に作成してみる

それでは作業に取りかかっていきます。

Search Consoleからデータをダウンロード

まずは、Google Search Consoleを開きます。検索パフォーマンスのページで対象の期間などの条件を指定します。

f:id:ponkotsu0605:20200117002328p:plain

そして、検索キーワードの一覧が表示されている右のところのダウンロードのアイコンをクリックしましょう。

f:id:ponkotsu0605:20200117002433p:plain

CSVをダウンロードというものが表示されるのでそれを選択します。するとCSVをダウンロードすることができます。

CSVデータの整形を行う

次に、ダウンロードしたファイルの形式をいい感じのフォーマットを行います。ここでは、集計に加えて、この次のステップで使用するサービスに向けて適切なフォーマットに変換しております。

ここに関しては、プログラムを書いて変換するスクリプトを書いてしまいました。PHPのスクリプトを用いて、データを集計・整形しております。

<?php

if (($handle = fopen("data.csv", "r")) === FALSE) {
    echo 'ファイルが開けません';
    return;
}
$scores = [];
while (($data = fgetcsv($handle))) {
    if (!is_numeric($data[2])) continue; // 最初の行をスキップする
    $words = explode(" ", $data[0]);
    $score = $data[1];
    foreach($words as $word) {
        $scores[trim($word)] += $score;
    }
}
fclose($handle);

arsort($scores);

$fp = fopen("result.csv", "w");
foreach($scores as $word => $score) {
    fputcsv($fp, [$word, $score], ';');
}
fclose($fp);