JS memo

お洒落にJavaScript。

2019年3月12日21:14

【javascript】地域指定でGoogle検索して比較するアプリ作成

メインビジュアル

【javascript】地域指定でGoogle検索して比較するアプリ作成

SEOに詳しい方はご存知かもしれませんが、Google検索の検索結果は検索するキーワードによって異なることがあります。

例えば、近くの居酒屋を探していた場合、居酒屋と検索した時に出来るだけ近くの良い居酒屋を見つけたいですよね。

特に居酒屋のような探しているものが地域に依存しているものは、検索結果で順位変動が起こりやすいです。

そこで!今回はGoogle検索エンジンで色々地域を設定して、検索した結果を地域別に比較するアプリをjavascriptのajaxで作成する方法をご紹介します。

    目次

  1. 作成するアプリの概要
  2. 作成手順
  3. まとめ

作成するアプリの概要

今回javascriptで作成するアプリの動画です。

デモページ

Google拡張機能でCORSの許可を行わないとエラーになります。※以下参照
CORSのGoogle拡張機能

挙動は以下のようになります。

  • 検索ボックスに検索したいキーワードを入力
  • 大阪、東京、北海道の3地域ごとにキーワードを検索
  • 一ページ目の検索結果のページタイトルを順に表示

作成手順

まず簡単に手順を説明します。

  • htmlで検索ボックスと検索結果を表示させる枠を各地域設定
  • Google検索のURLに地域設定をするパラメーターをつけたURLを大阪、東京、北海道の3つを作成
  • jQueyのajaxでそれぞれのURLのリソースを取得し、結果に表示されたページのタイトルを取得
  • htmlで設定した枠に各地域の取得したページタイトルを順に表示

GitHubのリポジトリにコードを公開しています。

参考コード(github)

それでは実際にコードを書いて行きましょう。

htmlに検索ボックスと結果表示枠を設定

html

<h1>地域別のキーワード検索</h1>
  <!--検索ボックス-->
  <div id="search-box">
    <input id="hako" type="text" />
    <input id="button" type="button" value="検索" />
  </div>
  <!--検索ボックス-->
  <!--検索結果の表示をする枠-->
  <div id="result">
    <div class="ex">
      <h2>大阪</h2>
    </div>
    <div class="ex">
      <h2>東京</h2>
    </div>
    <div class="ex">
      <h2>北海道</h2>
    </div>
  </div>
  <!--検索結果の表示をする枠-->

検索ボックスについては以下のページで詳しく説明しています。

JavaScriptでサイト内検索ボックスの作り方

検索結果は各地域のdivのクラス名exを親要素としてappendします。

今回cssは割愛しますが、デモのようなデザインはGitHubかデモページのソースコードを参照してください。

Google検索のURLを作成

以下のようにキーワードのパラメーターがついたGoogle検索のURLに地域を指定するパラメーターを付加させることで、地域を指定したURLを作成することができます。

"https://www.google.com/search?q=キーワード" + パラメーター

パラメーターの作り方は以下のページがとても分かりやすかったです。

任意の位置情報によるGoogle検索結果を取得するサービスを作ってみた

上記で各地域のパラメーター(例:大阪 uule=w+CAIQICILT3Nha2EsSmFwYW4=)を作成します。

地域が設定されているかどうかは検索結果ページ下部のGoooooogleの下で確認できます。

地域設定確認

各地域の検索結果ページのリソースを取得して検索結果に表示

Javascript

// DOM構築が終わるまで待機
window.addEventListener('DOMContentLoaded', () => {
  // 地域を指定するパラメーター
  let tags = ["LT3Nha2EsSmFwYW4=","LVG9reW8sSmFwYW4=","OSG9ra2FpZG8sSmFwYW4="];
  // 各地域のURL作成
  // キーワードが検索された時(一回だけ実行)
  $("#button").one('click',function () {
    // キーワードを取得
    let keyword = encodeURI($("#hako").val());
    // キーワードと各地域のパラメーターをつけたURLの配列を作成
    tags = tags.map(x => "https://www.google.com/search?q=" + keyword + "&uule=w+CAIQICI" + x);
    // 各地域のURLのリソースをループで取得
    $.each(tags, function(i){ 
      $.ajax({
        url : tags[i],
        dataType : 'html',
        success : function(data){
          // 検索結果ページのリソースから各ページのタイトルを取得
          let h = $(data).find(".LC20lb");
          // htmlの検索結果枠にページタイトルを表示
          $(".ex").eq(i).append(h);
        },
        error: function(data){
          // リソースを取得できなかった時
          console.log("error")
        }
      });
    });
  });
});

フローとしては

  • 各地域のパラメーターを配列に格納
  • キーワードが検索された時にキーワードの値を取得
  • キーワードと各地域を指定したURLを作成
  • Javascriptのajax(jQuery)で検索されたページのタイトル(<h3 class="".LC20lb"></h3>)を取得
  • 検索結果の表示枠にタイトルを順に表示

となります。

XHRやFetchをループで複数回使用すると前のループの内容が上書きされてしまうため、上手く実行できないので今回はjQueryのajaxを使用することをおすすめします。

これで完成!

まとめ

今回はフロントエンドで作成したので、またNode.jsやPythonなどバックエンドでも作成する方法をご紹介します。