銀行員からのRailsエンジニア

銀行員からのRailsエンジニア

銀行員から転身したサービス作りが大好きなRailsエンジニアのブログです。個人で開発したサービスをいくつか運営しており、今も新しいサービスを開発しています。転職して日々感じていること、個人開発サービス運営のことなどを等身大で書いていきます。

AMP Conf 2019に行ってきました!印象に残ったセッションなどまとめ

4/17(水)、18(木)に、六本木ヒルズで行われたAMP Conf 2019に参加してきました!

参加する前は、AMPについてほとんど何も知らない状態だったのですが、2日間でAMPすげー!となったので、印象に残ったセッションなどについて書いてみます。

AMPについて知らなかった方最近のAMPについて興味がある方の参考になれば嬉しいです。f:id:ysk_pro:20190421145044j:plain

AMPとは

AMP(Accelerated Mobile Pages)は、モバイルページを高速で表示させる技術で、2015/10にGoogleTwitterオープンソースプロジェクトとしてスタートしました。

スマホGoogle検索した時に、こちらの画像のようにカミナリマーク(⚡️)がついているのがAMP対応ページで、クリックしてみると爆速で表示されるのが分かります。ほんとにビックリするくらい爆速です。

f:id:ysk_pro:20190421131912p:plain

f:id:ysk_pro:20190423155212g:plain

(こちらは「ラクマ スマブラ」と検索した結果で、1ページ目に表示されていました)

読み込めるJavaScriptや、CSSの容量に制限を設けることで読み込みにかかる時間を減らし、さらにGoogleがコンテンツをキャッシュしていることなどによって、このスピードを実現しています。

こちらのAMP Confのオープニング動画(4分くらい)が分かりやすく、そして面白くAMPについての概要を解説してくれているので是非ご覧ください。

youtu.be

(よくありがちな、会場への道中で色々説明していって、最後に本当に会場に登場するやつです 笑)

 

AMP Confとは

年に一回開催される、開発者の開発者による開発者のための AMP の技術祭典を、今年は東京で行います。(公式ページより) 

公式ページはこちらです(もちろんAMP対応しています)

2018年はオランダのアムステルダム、2017年はニューヨークで開催されており、懇親会で話を聞くと、このイベントのためにブラジルやカナダから来た人もいるような世界的なイベントです。

 

印象に残ったセッション

全てのセッションYouTubeこちらに公開されています(YouTubeの自動翻訳が使えるので英語が分からなくても安心!)

amp.dev live!

2人のGoogleのエンジニアが、30分でAMPページをライブコーディングするセッションです。

作ったAMPページの画像は以下で、次の機能を備えています。

  • 下タブでコンテンツを切り替えられる機能
  • 下スクロールでナビゲーションバーが隠れて、上スクロールで表示される機能
  • ツイートを15秒ごとに自動で取得する機能
  • 無限スクロール機能

f:id:ysk_pro:20190421134222p:plain
AMPページは、用意されているコンポーネントを組み合わせて作ることが多いようです。このライブコーディングを通じて、実装のイメージが湧いたのでとても良かったです。

そしてGoogleのエンジニアかっこいいなぁ。

youtu.be

 

AMP Stories: The Story so far

AMPでこんな感じのストーリー機能が実装できます。おしゃれ!

f:id:ysk_pro:20190421143207p:plain

また、検索結果にAMPストーリーを表示する専用の箇所を作ることを検討しているようなので、今のうちにAMPストーリーを作っておくといいかも。

f:id:ysk_pro:20190421143300p:plain 

簡単に綺麗なストーリーが作れるようなので、是非作ってみたい...!

youtu.be

 

AMP for Email: pushing the boundaries of email with AMP

Emailは基本的に、テキストかシンプルなhtmlで構成されていると思います。

しかし、AMP for Emailを使えばこのようにインタラクティブなコンテンツを提供することができます。

f:id:ysk_pro:20190421144059p:plain

↓これが分かりやすいです(セッション動画を該当箇所から再生するようにしています)

Email上で申し込みや購入までできたりするの、とてもいいですよね。

現在はGmailのみが対応しているそうですが、今後他のメールクライアントでも対応予定だそうです。

このセクションの中では実際の実装方法も詳しく解説されており、通常のAMPページ同様にシンプルに実装できそうだったので、試してみようと思っています。

youtu.be

 

懇親会

1日目の夜にパーティーがあり、参加者やGoogleの方などとお話しすることができました。

DJがいて、ご飯も美味しくて楽しかったー。

f:id:ysk_pro:20190421145023j:plain

f:id:ysk_pro:20190421145034j:plain

寿司!! 

 

おわりに

AMPについてほとんど何も知らない状態で参加しましたが、2日間を通じてAMPのファンになりました。

業務扱いで参加させてもらったので自社プロダクトのAMPページを改修するのはもちろん、個人で作るサービスでも使ってみようと思いました。

最初にも書きましたが、全セッションはYouTubeで公開されているので、気になった方は是非ご覧くださいー!