一休.comにおけるAMP導入と今について

本記事は、一休.com Advent Calendar 2018の16日目の記事です。

qiita.com

デジタルマーケティング部で主に宿泊サイトを担当している田中(id:yakisoba6318)です。

今回は今年2月に導入したAMPについて導入時と今について紹介したいと思います。内容に関しては主に宿泊サイトの話となります。

AMPとは？

AMPとは、Accelerated Mobile Pages （アクセラレイティッド・モバイル・ページ）と言い、主にGoogleが提唱しているモバイルウェブ高速化を目的としたプロジェクトです。

ここではそのAMPプロジェクトのオープンソースフレームワーク（AMP HTML）を指してAMPと言います。

www.ampproject.org

一休.comにおけるAMP導入動機

ランディングページのスピード改善
速度改善による流入の増加
ユーザ体験向上

などいろいろありますが

簡潔に言うと ランディングページの最適化 です。

Choose a structured data feature | Search | Google Developers

一休.comのAMPページの紹介

現在一休で公開しているAMP対応ページとポイントを紹介します。

f:id:yakisoba6318:20181213171024p:plain — 左からレストラン店舗ページ、宿泊施設ページ、宿泊観光ページ、宿泊特集ページ

レストラン店舗ページAMP

リッチカード x AMPで流入増
amp-list でプラン情報、割引率を動的表示

ランチ - ザ・ロビー - ザ・ペニンシュラ東京/コンチネンタルダイニング [一休.comレストラン]
＊スマホからのみ確認できます

宿泊施設ページAMP

amp-list プラン情報・クチコミ表示
amp-access でクーポン表示

ザ・プリンスパークタワー東京 - 宿泊予約は[一休.com]
＊スマホからのみ確認できます

宿泊観光ページAMP

レスポンシブ(Canonical / Responsive AMP )
amp-toolbox-optimizerを使ったページの最適化
まだまだ試験的なページで今は京都、金沢、箱根や一部温泉地のみですがこれからエリアを拡大予定

京都観光で行きたい名所！京都旅行におすすめ人気スポットランキング 19選【2018年】 - [一休.com]
＊レスポンシブ対応のためPC・スマホどちらでも確認できます

宿泊特集ページ

amp-story実験的に公開中
高級宿の素材をリッチに表示できるページ
ただ、日本では検索でAMPViewとしての表示はまだ出来てない
今後の展開を期待

ジ・ウザテラスビーチクラブヴィラズ新規開業[一休.com]
＊amp-storyがPC表示に対応しているためPC・スマホどちらでも確認できます

AMPコンポーネントの活用例

AMPページを作るにあたって欠かせないのが公開されてるコンポーネントです。日々いろんなコンポートの開発が進んでいてAMPで出来ることが増えてきています。今回はその一部を使った利用例を紹介します。

www.ampproject.org

動的なカルーセルを出したい

<amp-list 
    src="フォトギャラリーAPI"
    height=”254”
    layout=”fixed-height”
    single-item>
    <template type="amp-mustache">
      <amp-carousel
                    controls
                    loop
                    height="254"
                    layout="fixed-height"
                    type="slides">
        {{#photos}}
        <div>
          <amp-img src="{{ImageUrl}}"
                   layout="fill"
                   alt="{{ImageAlt}}"></amp-img>
        </div> 
        {{/photos}}
      </amp-carousel>
    </template>
</amp-list>

amp-listはamp上でxhrできるのでAPIからリスト取得、受け取ったリストをmustache形式でループさせて画像を動的に生成することができます。

https://www.ampproject.org/docs/reference/components/amp-list https://www.ampproject.org/docs/reference/components/amp-mustache

カルーセルの画像枚数を表示させたい

<amp-state id="GuideTopPhotoUrl" src="フォトギャラリーAPI"></amp-state>
<amp-carousel
    controls
    loop
    height="254"
    layout="fixed-height"
    type="slides"
    on="slideChange:AMP.setState({
      GuideState: {
        header: {
          selectedSlide:event.index,
          Is_slide:true
        }
      }
    })">
<!-- 略 -->
</amp-carousel>
<div>
    <span
    [text]="!GuideState.header.is_slide ? '' : 
(GuideState.header.selectedSlide + 1)  +
 '/' +
(GuideTopPhotoUrl.items.photos.length + 1) ">
    </span>
</div>