5log

日々の仕事の備忘録

AMP Conf 2019 1日目のセッション振り返り（新技術系情報を中心に）

AMP コーディング

4/17、18の二日間、六本木アカデミーヒルズでAMP Conf 2019が開催されており、私も休暇をいただいてこのイベントに参加しています。

どのセッションも非常に学びの多い内容でしたが、頭の整理も兼ねてセッション全体の中から、AMPの新技術系に関する情報を記事化してまとめておきたいと思います。

はじめに：「AMP Conf 2019」って何？

amp.dev

公式サイトの説明の通りですが、年に１度開催されるAMPの技術祭典との事で、初回がアメリカのニューヨーク、2回目がオランダのアムステルダム、そして3回目となる今年は日本のTokyoで開催される事となったようです。

講演はすべて日本語の同時通訳があり、さらにライブストリーム動画がYoutubeにもアップされているため、詳しく見たい方はこの動画を見るとよいと思います。

AMP Conf 2019 - 第１日目 ライブ配信 (Japanese) - YouTube

よって今回は1日目の講演の中から気になった情報についてピックアップで紹介していきたいと思います。

amp-scriptによるカスタムJSの実装のトライアルがスタート

これまでAMPページではAMPが用意したコンポーネントのみしか使えず、自作のJavaScriptのプログラムは反映できませんでした。

しかし、amp-scriptコンポーネント実装により、ユーザーが作成したJavascriptをAMPページで動かせるようになるようです。

これだけ聞くと嬉しいのですが、一方でamp-scriptには下記の制約があるようです。CSSもそうですが、容量制限がなかなか厳しい...

  • Javascriptのサイズはトータル150KB以内（未圧縮の状態で）
  • ユーザーがページ内で何らかのアクションをしない限り、scriptは動作しない
  • Javascriptによるアクションはユーザーが操作してから5秒間

実際の利用にあたっては、仕様の詳細については、githubの説明を読み込んだほうが良さそうです。

github.com

また、amp-scriptの導入に関して＠mizchiさんがQiitaに記事をアップしているようでしたので、試してみたいと思います。

qiita.com

AMP Storiesの機能拡張と、検索エンジンの結果表示

AMP Stories自体は去年のAMP Roadshow 2018でも紹介されていた機能となりますが、2019年はさらにアップデートされました。

  • ローカライズ（21言語をサポート）
  • デスクトップ対応（横長ディスプレイにも対応、背景画像のポジション指定のサポートはこれから）
  • サイドバー実装
  • アタッチメント（ページに付随する情報をスクロールで表示させたりできる）
  • 埋め込み（AMP Stories notTwitterコメント、GoogleMap、Youtube動画など埋め込みできる、今後さらに増えていく予定）

また、AMP Storiesは今後Googleの検索結果の上部（カルーセルエリアの直下）に表示されたり、Google Discover（Googleの検索結果下に表示される、ユーザーの興味や嗜好に関連する情報を入れたカード）などにも表示されるようになっていく、との事です。

今も、AMPページがSEO的な文脈でクライアント企業に提案する、といった動きは多いですが、AMP Storiesが検索表示で上位表示されやすくなる、という効果があればSEO目的でAMP Storiesを導入する企業が増えてくるんでしょうか？

なお、AMP Storiesはプログラム不要で作成可能なサービスが色々あるようです。「MakeStories」などは休み時間の間に会員登録して使ってみましたが、パワポやKeynote感覚でAMP Storiesが作れて面白いですね。週末にもう少し触ってみたいと思います。

makestories.io

「amp.dev live!」で出てきた便利なコンポーネントたち

このセッションではGoogleの人がAライブコーディングでAMPページを作るという贅沢なイベントでした。そのセッションでは、私が今まで知らなかったAMPのコンポーネントなども使われており、衝撃を受けたので、それらを紹介したいと思います。（新技術という訳でも無いのですが）

amp-fx-collection

フェードインやパララックスなどのアニメーションが簡単につけられるコンポーネントのようです。AMPページで動きのある表現をするにはamp-bindしか無いと思っていましたが、こういう便利なものがあったんですね。。

amp.dev

amp-live-list

ページの情報をリアルタイムで更新してくれるコンポーネントのようです。セッションではハッシュタグ付きのTwitterのコメントを表示させる機能を実装していました。

以前AMPページでTwitterのタイムラインを実装するためにamp-twitterのコンポーネントを使った際は高さ表示を制御する術が見つからず実装を見送ったのですが、amp-live-listならその辺調整可能なのでしょうか。今後検証してみます。

amp.dev

まとめ

という訳で、AMPの最新技術にピックアップして紹介していきました。

イベントでは他にも良いセッションが多く、Washington Postの方が話したAMPを取り入れる際のマインドセットに関する話や、紛争地域の「app gap」の問題に対するAMPのアプローチなど盛りだくさんな内容でした。時間に余裕がある方はYoutubeでセッションを見ていただくことをオススメします。

ちなみにセッションの後の懇親会も楽しかったです。普段はAMPの事を話せるメンバーが会社内にいないのですが、他社のエンジニアの人とAMPの話をして、「やっぱり、どこの会社でも苦労してるんだなー」と知ることができたのが良かったです。

2日目もAMP for EmailやSigned HTTP Exchangesのセッションなどがあり、とてもワクワクしています！明日も引き続き楽しんできたいと思います！