【GAS】モバイルフレンドリーテストAPIを利用する

スマホの普及に伴って、
Webページをスマホで見る人が多くなりました。

そのような背景もあり、
スマホのように小さい画面でのタッチ操作を前提として
Webページを作るモバイルフレンドリーという考え方が生まれてきました。

近年では、Googleなどの検索エンジンも
スマホ対応のサイトを優先的に上位に表示するなど、
モバイルフレンドリーを重要視する傾向にあります。

そんなGoogle自身は
モバイルフレンドリーであるか否かを判定するツールを公開しており、
APIから利用することができます。

ここでは、GASを使って
モバイルフレンドリーテストAPIを利用する方法を紹介します。

準備

APIを利用するための準備として、
APIキーを取得する必要があります。

以下の手順に沿ってAPIキーを取得しましょう。

1. プロジェクトを作成する

GoogleではAPIの管理は「プロジェクト」単位で行います。
下の記事の「プロジェクトを作成する」を参考にプロジェクトを作成しましょう。

clean-copy-of-onenote.hatenablog.com

2. APIを有効にする

モバイルフレンドリーテストに利用するAPIは
「Google Search Console URL Testing Tools API」です。
これを有効にする必要があります。

Google APIコンソールの検索ウィンドウに「URL testing」等を入力し、
「Google Search Console URL Testing Tools API」を選択します。

APIの検索

そして、「APIを有効にする」をクリックします。

3. APIキーを取得する

そのまま、左側のメニューから「認証情報」を選択し、
APIキーを作成します。

認証情報

作成したAPIキーは後ほど利用するのでひかえておきましょう。

GASからAPIを呼び出す

APIキーの準備ができたら、
あとはAPIを叩くだけです。

動作としては、APIエンドポイントに対して、
ペイロードにテストを実行したいサイトのURLを記載して
POSTリクエストを送ります。

すると、テストが実行されて、
実行結果が返ってきます。

モバイルフレンドリーテストを実行する関数

下がGASでAPIを利用してモバイルフレンドリーテスト実行する関数です。

API_KEYには、準備で取得したAPIキーを入力します。

var API_KEY = "**********"
function checkMobileFriendly(url){  
  var headers = {
    "Content-Type": "application/json"
  }
  var data = {url: url}
  var options = {
    method:"post",
    headers:headers,
    payload:JSON.stringify(data),
    muteHttpExceptions: true
  }
  var res = UrlFetchApp.fetch(
  "https://searchconsole.googleapis.com/v1/urlTestingTools/mobileFriendlyTest:run?key="
    +API_KEY, options)
  return(res)
}

ペイロードは、JSON.stringifyで文字列化したものを指定します。

テスト結果

上の関数では、実行結果をそのまま文字列として返しますが、
結果はJSON形式で書かれているので、
JSON.parseを使って結果を読むと便利です。

var url = "https://*********"
var res = JSON.parse(checkMobileFriendly(url))
Logger.log(res.mobileFriendliness)

res.mobileFriendlinessにテスト結果が格納されていて、

• MOBILE_FRIENDLY
• NOT_MOBILE_FRIENDLY

のどちらかで結果が返されます。

まとめ

モバイルフレンドリーテストAPIをGASから利用する方法を紹介しました。

つまづきポイントとしては、payloadだけは文字列で与えるという点ですね。
他のAPI利用の場合も、ここでつまづいている人がいるようなので、
気づくまでが辛いポイントです。