ポンコツエンジニアのごじゃっぺ開発日記。

いろいろポンコツだけど、気にするな。エンジニアの日々の開発などの記録を残していきます。 自動で収入を得られるサービスやシステムを作ることが目標!!

【簡単】あなたのブログの検索ワードを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[2];
    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);

上でダウンロードしたファイルをdata.csvとして、上のスクリプトをapp.phpというファイルで保存します。

f:id:ponkotsu0605:20200117002840p:plain

このとき、同じディレクトリに入れるようにしてください。

そして、このPHPを実行します。

$ php app.php

ターミナルなどから実行する必要があります。もし需要があれば実行方法についても書きたいと思いますが、一旦スキップしておきます。

すると、result.csvというファイルが出力されます。

※出力されたCSVファイルは拡張子が.csvになっているが、区切り文字が;(セミコロン)になっておりますが、こちらは次に使用するサービスがこのフォーマットであるため、このようにしています。

出力されたCSVから画像を作成してみよう

とうとう最後のステップになります。 今回はWordArtというサービスを使用します。

wordart.com

このサイトでは、文字と文字サイズのセットで一覧を渡すと、それを元に画像を作成してくれます。

WORDSのImportから先程出力されたCSVファイルの中身を貼り付けます。(CSVファイルはテキストエディタなどで開けると思います)

f:id:ponkotsu0605:20200117003443p:plain

このとき、CSV formatにチェックを入れましょう。

そして、インポートして、赤いVisualizeというボタンを押してみましょう。無事画像が表示されるかと思います。

f:id:ponkotsu0605:20200117003654p:plain

上のようにpnktsという文字がくり抜かれているかと思いますが、これはSHAPESという項目で自分で作成した画像を元に作成してくれる機能になります。

f:id:ponkotsu0605:20200117003756j:plain

この画像をサイトにアップロードすることで適用することができます。

f:id:ponkotsu0605:20200117003841p:plain

また、デフォルトのフォントだと日本語の表示ができないため、日本語用のフォントを適用させないといけません。

自分の場合は、adobe-fontsが公開しているSource Han Code JP(源の角ゴシック Code JP)をダウンロードしてアップロードして適用してみました。

github.com

f:id:ponkotsu0605:20200117004054p:plain

その他にもスタイルの調整などができるので、いろいろ設定を変えてみてください。

完成

そして、完成したのがこちらになります。

f:id:ponkotsu0605:20200117001722p:plain

さいごに

このようにして、簡単にブログのキーワードをビジュアライズすることができました。 この画像をツイッターなどのSNSで紹介すれば、自分のブログの紹介を1枚の画像で行うことができるようになるかもですね!

お問い合わせプライバシーポリシー制作物