2018年1月17日

AMP URL APIでAMPページへの導線を作る

UI開発者木村

AMP URL APIでAMPページへの導線を作る

先月Twitterは、開発者ブログの「Announcing support for AMP article analytics on Twitter」という記事でAMPのサポートを発表しました。サポートの内容は主に、ユーザーがシェアしたURLを解析し、AMP対応がされていたら優先的にAMPページに遷移させる仕組みを導入したとのことです。

一般的にAMP対応といえば、記事ページや商品ページといったコンテンツページの表示速度を高速化するためのものというイメージが強いと思いますが、SNS等の投稿サイトやメディアサイトのようなWebサービス側がAMPをサポートすることでもメリットはあります。

Webサービス自体がAMP対応をしていなくても、Webサービスから遷移するページがAMPページであれば、ユーザーはそのWebサービスを経由して素早く外部サイトのページを表示できるため、ユーザーの満足度向上につながります。

ただし、AMP Projectは「Improving URLs for AMP pages」という記事で発表している通り、2018年1月現在でAMP CacheにキャッシュされたURL（以後AMP Cache URL）の改善が予定されています。AMP Cache URLのフォーマットは、ニーズや技術の発展に応じて変更する可能性があるため、その都度URLを修正しようとするとコストがかかってしまいます。

そこで今回は、AMPをサポートする手助けとなる、Accelerated Mobile Pages (AMP) URL API（以後AMP URL API）の概要と基本的な使用方法をご紹介します。

AMP URL APIとは

AMP URL APIはGoogleの提供するGoogle Cloud Platformというサービスの機能の1つとして公開されているREST APIです。

AMP URL APIの機能はシンプルで、対象となるページのURLをAMP URL APIのエンドポイントに送信することによって、AMPページのURLとAMP Cache URLを取得できます。1度に最大で50ページ分のURLを送信できるため、公開後の検証用にAMP Cache URLの一覧を作成するといった使い方もできます。

AMP URL APIを使用するためにはGoogleアカウントを用意し、Google Cloud Platformのプロジェクトの作成とAPIキーを取得する必要があります。

AMP URL APIの使用方法

実際にNode.jsでAMP URL APIを使い、レスポンスを受け取るまでのフローを確認します。

今回は公開済みのURLからAMP Cache URLを取得し、キャッシュされているかを確認します。URLは簡易的に外部のテキストファイルに記載します。

urls.txt

スタンドアロンAMPで作成されていない限りは、非AMPページのURLを記述します。実装方法次第で.csvや.xlsxなど様々な形式で対応可能です。

https://www.mitsue.co.jp/knowledge/blog/frontend/201712/08_1412.html
https://www.mitsue.co.jp/knowledge/blog/frontend/201711/02_1229.html
https://www.mitsue.co.jp/knowledge/blog/frontend/201710/02_1344.html

index.js

次がテキストファイルからAMP Cache URLを取得するサンプルソースです。

const request = require('request');
const fs = require('fs');
const GOOGLE_API_KEY = 'XXXXXXXXXXXXXXXXXXX'; // 取得したAPIキーを記述します

fs.readFile('urls.txt', (error, data) => {
    if (error) {
        console.error(error);

        return;
    }

    let urls = data.toString().split(/\r\n|\r|\n/);

    getAmpCacheUrl(urls, (error, result) => {
        fs.writeFile('amp-urls.json', JSON.stringify(result, null , '  '));
    })
});

function getAmpCacheUrl(urls, callback) {
    let option = {
        url: 'https://acceleratedmobilepageurl.googleapis.com/v1/ampUrls:batchGet',
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Goog-Api-Key': GOOGLE_API_KEY
        },
        json: {
            'urls': urls
        }
    };

    request(option, (error, response, body) => {
        if (callback) {
            callback(error, body);
        }
    });
}

「urls.txt」から読み込んだURLをAMP URL APIに送信し、そのレスポンスを「amp-urls.json」というJSONファイルで書き出すように実装されています。

あとは、ターミナルで以下のコマンドを実行すると処理が実行されます。

npm init
npm install --save request
node index.js

実行後、以下のソースが「amp-urls.json」というファイル名のJSONファイルが生成されます。

{
  "ampUrls": [
    {
      "originalUrl": "https://www.mitsue.co.jp/knowledge/blog/frontend/201710/02_1344.html",
      "ampUrl": "https://www.mitsue.co.jp/knowledge/blog/frontend/201710/02_1344_amp.html",
      "cdnAmpUrl": "https://www-mitsue-co-jp.cdn.ampproject.org/c/s/www.mitsue.co.jp/knowledge/blog/frontend/201710/02_1344_amp.html"
    },
    {
      "originalUrl": "https://www.mitsue.co.jp/knowledge/blog/frontend/201711/02_1229.html",
      "ampUrl": "https://www.mitsue.co.jp/knowledge/blog/frontend/201711/02_1229_amp.html",
      "cdnAmpUrl": "https://www-mitsue-co-jp.cdn.ampproject.org/c/s/www.mitsue.co.jp/knowledge/blog/frontend/201711/02_1229_amp.html"
    },
    {
      "originalUrl": "https://www.mitsue.co.jp/knowledge/blog/frontend/201712/08_1412.html",
      "ampUrl": "https://www.mitsue.co.jp/knowledge/blog/frontend/201712/08_1412_amp.html",
      "cdnAmpUrl": "https://www-mitsue-co-jp.cdn.ampproject.org/c/s/www.mitsue.co.jp/knowledge/blog/frontend/201712/08_1412_amp.html"
    }
  ]
}

中身を確認すると、次のような3つのURLが取得できています。

originalUrl：AMP URL APIに送信した元ページのURL
ampUrl：originalUrlのlink[rel="amphtml"]で紐づけられたページのURL
cdnAmpUrl： AMP Cache URL

取得した内のcdnAmpUrlにユーザーを遷移させることで表示速度を向上させることができます。

対象のページにキャッシュされていないページが含まれている場合は次のように、キャッシュされていない理由とoriginalUrlが返ってきます。

{
  "ampUrls": [
    ...
  ],
  "urlErrors": [
    {
      "errorCode": "URL_IS_INVALID_AMP",
      "errorMessage": "Request URL is an invalid AMP URL.",
      "originalUrl": "https://example.com/hoge.html"
    }
  ]
}

このようにAMP URL APIを使うことで、キャッシュされているページはAMP Cache URLに、キャッシュされていないページは通常のURLにユーザーを遷移させることが可能になります。ただし注意点として、すべてのユーザーがAMPページを訪問したいとは限らず、表示速度よりもリッチコンテンツを求めるユーザーもいます。そのためAMP Projectは、サービスの設定等で通常のURLとAMP Cache URLを切り替えられるようにすることを推奨しています。

AMPはこの数年で広く普及してきているので、これからは優先的にAMPページへ遷移させることで高速化を感じられるようなサービスも増えてくるのではないでしょうか。またAMPページへの導線が増えるほど、AMP対応によるユーザーの獲得はより効果的なものになると思います。

2018年の記事一覧に戻る