スクリーンショット_2020-03-04_11.41.00

【無料公開】Googleの関連検索ワードツールをつくってみる(01.キーワード取得編:PHP)

皆様こんにちは。ヒデと申します。
普段はエンジニア・会社役員をやりながら、これまで教育業界で1000人以上プログラミングを教えてきた経験を活かして、脳の仕組みを理解して学習効率を上げるプログラミングのメンターを行なっております。

こんな人に読んでほしい

効率よくツール開発、プログラミングによる自動化の基礎が学びたい方
ブログとプログラミングを本気で取り組んでいる方
将来的に自分なりにカスタマイズしたツールを開発したい方

こんな人には向いていないかも

他の人が作ったツールに依存することで十分という方
プログラミングの勉強はもうちょっと後でもいいかなという方

この記事含め、将来的に公開される記事を全て実装していくと以下のサービスが出来上がります。

UnitSearch | 関連検索キーワードツール(Google, YouTube対応)

コンテンツの流れ

完成像をイメージする
処理の流れのアウトラインをつくる
キーワードを取得してみる
キーワードをもっと取得してみる
フォームからキーワードを指定できるようにする

今回はキーワードを取得するところまでです。詳細のデザインやリンクの設計などは別コンテンツにしていきますのでお待ちください。

最新情報はTwitter:https://twitter.com/hide_stark
にて公開していきます。

PHPのコードを動かすこと自体が初めてという方は
【無料公開】Googleの関連検索ワードツールをつくってみる(00.PHP準備編)
をまずはご覧ください。

それでは早速やっていきましょう!

①完成像をイメージする

まずは完成したときをイメージしていきましょう。

今回の範囲で必要な機能は

①キーワードを入力する
②キーワードに応じた関連検索ワードの結果が表示される

の2つだけです。

そのため

・キーワードを入れる入力フォーム
・キーワードを表示するエリア

の二つを実装していきます。

②処理の流れのアウトラインをつくる

プログラミングで大事なのはいきなり書き始めることではなくで、箇条書きでもいいのでアウトラインを作ってそれに沿って構築していくことです。

今回のプログラムの処理の流れを一覧にしてみます。

①キーワードを入力する
②入力されたキーワードをGoogleのURLにつける
③出来上がったURLにアクセスしてデータを取得する
④取得したデータから関連キーワードを抜き出す
⑤抜き出した関連キーワードでさらに検索する(数を増やすため)
⑥抜き出した関連キーワードを表示する

文字だけだとイメージがわかない方もいるかもしれませんので、図式化してみました。

スクリーンショット 2020-03-04 10.06.57

どんなプログラミングでも図式化してみるとかなり効率が上がるので、本や動画で勉強されている方も一度トライしてみるのがおすすめです。

③キーワードを取得してみる

それでは早速データを取得してみましょう。

3-1. フォームと表示エリアを作成

まずは入力フォームとキーワードを表示するエリアを作ります。
(今回は簡易版のためHTML全体は実装しません。とりあえず動く状態まで持っていきます)

<?php

 //取得したキーワードを変数に入れる
 $input_query = $_GET["query"];

 //結果表示用の変数
 $result = "";

 // [TEST]キーワードを表示する
 $result = $input_query;

?>

<!-- 入力フォーム -->
<form method="GET" action="<?=$_SERVER["PHP_SELF"]?>">
 <input type="text" name="query" value="<?=$_GET["query"]?>">
 <input type="submit">
</form>

<!-- 結果表示エリア -->
<div id="result">
 <?=$result?>
</div>

ここまで書いたらとりあえず動かしてみましょう。
任意のファイル名で保存してMAMPなどの環境で動かします。
(MAMPの設定についてはMAMP準備編を参照してみてください。)

スクリーンショット 2020-03-04 10.23.07

キーワード入力してボタンを押したら入力したキーワードが表示されたでしょうか?

3-2. GoogleへアクセスするURLを作成し、アクセス

Googleにアクセスをしてデータを取得します。
データを取得するためにはGoogleアクセス用のURLに入力されたキーワードをつけて通信します。

<?php

 //取得したキーワードを変数に入れる
 $input_query = $_GET["query"];

 //結果表示用の変数
 $result = "";

 //GoogleへアクセスするURL
 $url = "http://www.google.com/complete/search?hl=ja&output=toolbar&q=".rawurlencode($input_query);

 //Googleからデータをとってきます
 $xml = file_get_contents($url);

 //文字化けしないように文字のコードを変更します
 $xml = mb_convert_encoding($xml, "utf-8", "sjis");

 // [TEST]取得したデータを表示してみる
 $result = $xml;

?>

<!-- 入力フォーム -->
<form method="GET" action="<?=$_SERVER["PHP_SELF"]?>">
 <input type="text" name="query" value="<?=$_GET["query"]?>">
 <input type="submit">
</form>

<!-- 結果表示エリア -->
<div id="result">
 <?=$result?>
</div>
//GoogleへアクセスするURL
$url = "http://www.google.com/complete/search?hl=ja&output=toolbar&q=".rawurlencode($input_query);

の部分ですが、PHPでは文字列の連結を「.(ピリオド)」で繋げます。また、入力されたデータを安全に処理できるように「rawurlencode」という関数を入れています。

上記保存したら実行してみましょう。

スクリーンショット 2020-03-04 10.34.05

ページには何も表示されなくなりました。ただ、右クリックで「ページのソースを表示」をクリックするとページ内部には取得したキーワードが表示されています。

スクリーンショット 2020-03-04 10.34.13

スクリーンショット 2020-03-04 10.34.34


この中身を抜き出してページ内に表示してみます。

④キーワードを抜き出して表示してみる

前のステップではGoogleから関連キーワードが取得できていることがわかりました。

通信で取得できるデータの形式はいくつかありますが、今回の形式は「XML」という構造化ファイルです。タグ(HTMLでもお馴染みの「<>(カギかっこ)」で囲われたもの)で階層構造を表現するものです。

スクリーンショット 2020-03-04 10.38.49

PHPでXMLファイルを抜き出すためには以下の構文を使います

//XMLデータをパースする
new SimpleXMLElement($xml);

プログラミングでは特定のデータをそのフォーマットに沿って処理できる状態にすることを「パースする」と言います。

データをフォーマットに合わせて処理できる状態=まだ具体的なデータを抜き出す処理はしていない状態ですので、そこからさらにデータを抜き出す処理を書きます。

入っている項目は複数ありますのでそれぞれを処理できるように「ループ(foreach)」を利用します。また、出てきたデータは複数あるので配列に入れてあげます。

<?php

 //取得したキーワードを変数に入れる
 $input_query = $_GET["query"];

 //結果表示用の変数
 $result = "";

 //GoogleへアクセスするURL
 $url = "http://www.google.com/complete/search?hl=ja&output=toolbar&q=".rawurlencode($input_query);

 //Googleからデータをとってきます
 $xml = file_get_contents($url);

 //文字化けしないように文字のコードを変更します
 $xml = mb_convert_encoding($xml, "utf-8", "sjis");

 //XMLデータをパース(処理できるようにする)する
 $result_xml = new SimpleXMLElement($xml);

 //キーワードを入れる箱(配列)を用意する
 $related_kws = [];

 //複数の要素それぞれを取得して配列に入れる
 foreach($result_xml->CompleteSuggestion as $keyword) {
   array_push($related_kws, $keyword->suggestion['data']);
 };

 // [TEST]取得したデータを表示してみる
 //配列に入っているのでループで取得
 foreach($related_kws as $kw){
   // 「.=」で追記。ピリオドを忘れないように
   // 「."<br />\n"」は改行
   $result .= $kw."<br />\n";
 }

?>

<!-- 入力フォーム -->
<form method="GET" action="<?=$_SERVER["PHP_SELF"]?>">
 <input type="text" name="query" value="<?=$_GET["query"]?>">
 <input type="submit">
</form>

<!-- 結果表示エリア -->
<div id="result">
 <?=$result?>
</div>

データが表示されたでしょうか?

スクリーンショット 2020-03-04 10.51.42

⑤キーワードをもっと取得してみる

一度に取得できるキーワードは10個までです。
そのため取得したキーワードを利用してさらに検索することで最大100個のデータにします。(何度も繰り返せばもっと取得可能ですが、ここでは2回までとします。)

どのような仕組みで実装すればいいでしょうか?

最もシンプルな方法は、今回の処理を「関数」としてまとめ、繰り返し実行することです。

関連キーワードを取得

関連キーワード一つ一つで関連キーワードを取得

全部のデータを一つの配列に入れる

まずはこれまで書いてきた処理を関数にまとめましょう。

function get_related_kwds($input_query){
 ・・・
 return $related_kws;
}

で特定のコードを括ります。このカッコの中の「$input_query」は引数(ひきすう:関数の中で使うために渡すデータ)、returnのあとの「$related_kws」は「戻り値(もどりち:関数で処理した結果を外部に渡すためのデータ)」です。

また、関数は書いただけでは実行されず、呼び出しを行なって初めて実行されるので、まずは関数の設置と呼び出しをしてみましょう。

<?php

 //取得したキーワードを変数に入れる
 $input_query = $_GET["query"];

 //結果表示用の変数
 $result = "";

// ここから関数にまとめる
 function get_related_kwds($input_query) {
   //GoogleへアクセスするURL
   $url = "http://www.google.com/complete/search?hl=ja&output=toolbar&q=".rawurlencode($input_query);

   //Googleからデータをとってきます
   $xml = file_get_contents($url);

   //文字化けしないように文字のコードを変更します
   $xml = mb_convert_encoding($xml, "utf-8", "sjis");

   //XMLデータをパース(処理できるようにする)する
   $result_xml = new SimpleXMLElement($xml);

   //キーワードを入れる箱(配列)を用意する
   $related_kws = [];

   //複数の要素それぞれを取得して配列に入れる
   foreach($result_xml->CompleteSuggestion as $keyword) {
     array_push($related_kws, $keyword->suggestion['data']);
   };

   //関数のそとにデータを出すための記述
   return $related_kws;
 }
// ここまで関数にまとめる

 //関数は存在するだけでは実行されないので実行する→新しい変数「$result_kws_base」に代入
 $result_kws_base = get_related_kwds($input_query);

 // [TEST]取得したデータを表示してみる
 //配列に入っているのでループで取得
 foreach($result_kws_base as $kw){
   // 「.=」で追記。ピリオドを忘れないように
   // 「."<br />\n"」は改行
   $result .= $kw."<br />\n";
 }

?>

<!-- 入力フォーム -->
<form method="GET" action="<?=$_SERVER["PHP_SELF"]?>">
 <input type="text" name="query" value="<?=$_GET["query"]?>">
 <input type="submit">
</form>

<!-- 結果表示エリア -->
<div id="result">
 <?=$result?>
</div>

エラーが出ず同じ結果が出力されれば関数の実行はうまくいっています。表示されたらさらに検索する仕組みを実装してみましょう。

<?php

 //取得したキーワードを変数に入れる
 $input_query = $_GET["query"];

 //結果表示用の変数
 $result = "";

// ここから関数にまとめる
 function get_related_kwds($input_query) {
   //GoogleへアクセスするURL
   $url = "http://www.google.com/complete/search?hl=ja&output=toolbar&q=".rawurlencode($input_query);

   //Googleからデータをとってきます
   $xml = file_get_contents($url);

   //文字化けしないように文字のコードを変更します
   $xml = mb_convert_encoding($xml, "utf-8", "sjis");

   //XMLデータをパース(処理できるようにする)する
   $result_xml = new SimpleXMLElement($xml);

   //キーワードを入れる箱(配列)を用意する
   $related_kws = [];

   //複数の要素それぞれを取得して配列に入れる
   foreach($result_xml->CompleteSuggestion as $keyword) {
     array_push($related_kws, $keyword->suggestion['data']);
   };

   //関数のそとにデータを出すための記述
   return $related_kws;
 }
// ここまで関数にまとめる

 //関数は存在するだけでは実行されないので実行する→新しい変数「$result_kws_base」に代入
 $result_kws_base = get_related_kwds($input_query);

 //全てのキーワードを入れる箱(配列)を用意する
 $related_kws_all = [];

 //最初の関連キーワードをベースにさらに検索をかけていく
 //取得したデータは配列なので、配列の連結「array_merge」をかけていく
 foreach($result_kws_base as $kw) {
   $related_kws_all = array_merge($related_kws_all, get_related_kwds($kw));
 }

 // [TEST]取得したデータを表示してみる
 //配列に入っているのでループで取得
 foreach($related_kws_all as $kw){
   // 「.=」で追記。ピリオドを忘れないように
   // 「."<br />\n"」は改行
   $result .= $kw."<br />\n";
 }

?>

<!-- 入力フォーム -->
<form method="GET" action="<?=$_SERVER["PHP_SELF"]?>">
 <input type="text" name="query" value="<?=$_GET["query"]?>">
 <input type="submit">
</form>

<!-- 結果表示エリア -->
<div id="result">
 <?=$result?>
</div>

関数を作成後、

全てのキーワードを入れる配列(箱)を準備
ベースとなる初回検索のキーワードそれぞれで検索をかけて配列に追加

を実行しています。

スクリーンショット 2020-03-04 11.14.20

今回の実装はここまで
ーーーーーーーーーー

いかがだったでしょうか?
たった70行ほどで関連キーワードを取得するサービスがPHPで作成できました。デザインを整えたり、さらに検索するリンクを貼ったり、コピペ用のテキストエリアを作ったりは別のステップで実装していこうと思います。

このコースは皆さんのコメントや反応など見ながら随時アップデートしていきます。そのためしばらくは無料で配信していきます。自分が作りたいもの、自分が必要だな、と思っているものを自分の手で作っていけるようにコンテンツを随時増やしていこうと思っていますのでぜひTwitterなどで感想・ご意見などいただけたら嬉しいです。(もちろん、フォロー、いいね、RTなども大歓迎です!)

Twitter:https://twitter.com/hide_stark

この記事が気に入ったらサポートをしてみませんか?