AMPとは何か、AMPを使ってモバイルデバイス向けにウェブサイトを最適化する方法をご紹介します。
本ブログは英語版からの翻訳です。オリジナルはこちらからご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。
Alibaba Cloud Tech Share 執筆、Sai Sarath Chandra。
今やインターネットはどこにでもあります。この「デジタル情報化時代」では、情報伝達は瞬時にユビキタス化し、金融や医療などの保守的な業界にも浸透しています。ハードウェアの革新のおかげで、デバイスも小型化され、モバイル化が進んでいます。実際、モバイル技術は多くの従来のソリューションを追い越して（あるいは少なくとも同等に）きています。
Statistaによると、「世界の携帯電話ユーザー数は、2019年までに50億人を突破すると予想されています。2016年には、世界人口の推定62.9％がすでに携帯電話を所有していました。携帯電話の普及率は上昇を続け、2019年には67％に、2017年の中国の携帯電話接続数は14億人強、インドは10億人強に達すると予測され、2019年には、中国は15億近く、インドは11億近くのモバイル接続数に達すると言われていました。
これらの数字をまとめると以下のようになります。
- 世界人口の半数以上がスマートフォンを利用している。
- 世界人口のほぼ3分の2が携帯電話を持っている。
- 世界のウェブトラフィックの半分以上が携帯電話から発信されている。
ページの読み込み時間を短縮するための新しいアプローチ
モバイル技術の急速な発展にもかかわらず、ページの読み込み時間という未解決の問題がありました。派手なUXとUIデザインでは、ウェブページは最高のユーザー体験を提供するために、カスタムJavaScript、CSS、HTMLコードを多数使用してロードされます。しかし、これがページの読み込み時間に影響します。この問題の回避策は、これらのページをキャッシュすることですが、キャッシュは初回のアクセスには役立ちません。
スピードはウェブページをデザインする上で不可欠な要素です。KISSmetricsのデータによると、"ロードに3秒以上かかるウェブページは、約40%の人が放棄する "という結果が出ています。さらに、オンラインショッピングサイトが1日10万ドルの売り上げを上げている場合、1秒のページ遅延は、毎年250万ドルの売上損失をもたらす可能性があります。この問題を解決するために、"AMP "と呼ばれる興味深いオープンソースプロジェクトがあります。
Accelerated Mobile Pagesは、モバイルページの最適化と高速化を目的としたオープンソースのイニシアチブプロジェクトです。これは、すでにモバイルフレンドリーなページを基本的な部分まで分解して読み込みを速くするようなものです。すべてのモバイルサイトがAMPを使用しているわけではありませんが、急速に勢いを増しています。
"Accelerated Mobile Pages（AMP）は、パブリッシャーがモバイルコンテンツページの速度と読みやすさを向上させることを支援することを目的としたオープンソースのイニシアチブプロジェクト/プラットフォームです。”AMPの公式サイトから引用。
より速いモバイルページ+読みやすいコンテンツ=より良いユーザー体験
AMPはどのようにしてより速く、よりスムーズなページ体験を提供するのでしょうか？簡単に言えば、AMPフレームワークは、モバイルページを開発する際に制限を設けることで、これを実現しています。
しかし、AMPは万人向けではありません。アプリケーションのためにAMPを検討する際には、以下の制限事項に注意する必要があります。
- 既製のAMPライブラリ以外のJavaScriptは許可されません。
- 画像は、下にスクロールしたときにのみ読み込まれます（遅延ロード機能）。
- CSS のスリム化バージョンが必要になります。
サイトのほとんどが静的なコンテンツを提供している場合、AMP フレームワークの利点を直接活用することができます。動的コンテンツにもAMPを使用できる回避策もあります。しかし、動的な HTML を持つサイトを考えているのであれば、AMP は適していないかもしれません。
AMPのメリット
バウンス率の低下：
サイトスピード、ページビュー、検索エンジンランキングの相関関係は非常に重要です。ウェブページの読み込みが非常に速いと、ユーザーはサイト上でより多くのページを見るようになり、バウンス率が減少します。実際には、よく構築されたAMPページは、一般的に非AMPページよりも検索エンジンで上位にランクされます。
モバイルブラウザでの視認性の向上：
多くの検索エンジンは、AMPを搭載したページを検索結果に表示するようになり、サイトの信頼性が高まり、AMPページのクリックスルー率が向上しました。これにより、サイトの信頼性が高まり、AMPページのクリックスルー率が向上します。その結果、検索エンジンのユーザーは、AMPプラグインページを探すようになります。
柔軟な広告対応が可能です：
主に収益を広告に依存しているウェブサイトは、AMPを統合することで利益を得ることができます。その理由は、すべての HTML コードタグが実行されるわけではなく、CSS の合理化されたバージョンのみが使用され、JavaScript は（ほとんどの場合）問題外となるからです。また、コードが約6倍軽くなります。また、AMPはほとんどの主要な広告プラットフォームをサポートしているため、広告プロバイダーとの互換性を心配する必要がありません。
AMPの基本的な構成要素
AMPフレームワークはウェブマスターや開発者のためにシンプルに設計されています。3つのハイレベルなビルディングブロックがあります。
-
AMP HTML：HTMLのサブセットであるこのマークアップ言語には、いくつかのカスタムタグやプロパティ、多くの制限があります。しかし、通常のHTMLに慣れていれば、既存のページをAMP HTMLに適応させるのに苦労することはありません。基本的な HTML との違いの詳細については、AMP プロジェクトの AMP HTML ページが「必ず」持つ必要なマークアップのリストをチェックしてください。
-
AMP JS：モバイルページ向けのJavaScriptフレームワーク。ほとんどの場合、リソースの処理と非同期読み込みを管理します。サードパーティのJavaScriptはAMPでは許可されていないことに注意が必要です。
-
AMP キャッシュ：オプションのコンテンツ配信ネットワークで、AMP対応ページをキャッシュし、パフォーマンスの最適化を自動的に行います。
既存のサイトにAMPを統合する方法
WordPress などの CMS を使用している場合は、AMP プラグインがほとんどの作業を代行してくれます。しかし、他のCMSを使用している場合や、自分でカスタムCMSを作成している場合は、AMPページの作成を自分で行う必要があります。
初心者の方は上記のような基本的な設定をすることになります。AMPに慣れるためには、従来のHTMLページとAMPページの両方を設定することをお勧めします。AMPページが別のURLで配信されていることを確認してください。慣れてきたら、メインサイトとしてAMPページを作成することができます。
AMPはカスタムJavaScriptやカスタムフォームを許可していないので、リードフォームがない場合があります。これらの制限に対応するために、サイトのテンプレートを書き換える必要があるかもしれません。AMPはCSSをインラインにして、合計サイズを50KB以下にする必要があります。カスタムフォントは、特別な amp-font extension を使用して読み込む必要があります。
AMPとアナリティクスの統合
複数のアナリティクスのトラッキングによるサイトの速度低下を防ぐために、AMPは "一度は測定し、多くの人に報告する "という哲学を実装しました。ウェブサイトにAMPでアナリティクス機能を有効にするには、2つのパスがあります。
- AMP-Pixel Element：これは、GETリクエストを使用して、一般的なトラッキングピクセルと同様にページビューをカウントするために使用できるシンプルなタグです。DOCUMENT_REFERRERやTitleなど、それを通過させることができる変数がいくつかあります。
- Amp-Analytics拡張コンポーネント：これはamp-pixelよりも少し高度なものです。アナリティクスインタラクションの設定レベルを上げることができるので、サイトにアナリティクスを実装するために使用するものです。
Googleアナリティクスを動作させようとしていないのであれば、amp-analyticsを利用するのが良いでしょう。JavaScript ライブラリを追加する必要があります。
そして、あなたのページのボディセクションのJSONマークアップを介してそれを設定します。
ではレガシーページを注入/参照したい場合はどうすればいいでしょうか？
AMP ページへのレガシーページの注入/参照
AMPは、iframeを使ってレガシーページ（非AMPページ）をAMPページに注入する方法を提供していますが、途中で発生する制限に注意しなければなりません。イフラメは非常に低い優先度を与えられており、ページの最後に向かって、または少なくともページの75%の後に表示されなければなりません。これを行う目的は、iframeがページの読み込み速度を遅くしないようにすることであり、その結果、ユーザー体験に影響を与えます。
注意：グローバルDOMはiframeでは利用できません。この記事を書いている時点では、AMP PagesのGlobal DOMにアクセスするためのカスタムJavaScriptをiframe内で作成することはできません。
AMPによる魅力的なUIとUXのオプション
多くの人は、このような制約があると、UI/UXデザインに妥協しなければならないと考えています。それどころか、AMP HTMLには、あなたのウェブサイトを魅力的にするためのコンポーネントがたくさん用意されています。リストが長すぎて、おそらく全部を見て回ることはできないと思いますが、すべてのコンポーネントは3つのタイプに分類されています。
- Built-In : ベースライブラリに含まれるコンポーネント。
- Extended : カスタム要素としてドキュメントに明示的に含まれている必要があるベースライブラリの拡張。
- Experimental : リリースはされているが、まだ広く使用する準備ができていないコンポーネント。
AMPのコンポーネントは、タイプによる分類の他に、以下のように分類することができます。
- 広告とアナリティクス
- 動的コンテンツ
- レイアウト
- メディア
- プレゼンテーション
- ソーシャル
これについて詳しく知りたい場合は、AMPの公式ドキュメントを参照してください。
AMPは開発者が美しく見えるブログやウェブサイトを作成するのに十分なツールキットを提供しています。AMP CSS は 50 KB のインライン CSS を義務付けていますが、これは実際にはほとんどのウェブサイトには十分な量です。さらに、scssでCSSを最適化して圧縮することで、開発者がより多くのCSS属性に対応できる余地が生まれます。
しかし、この制限のため、追加のCSS属性を使用することはありません。そうすることで、私たちは本質的に突然の不意打ちを防ぎ、バグだけでなくテスト時間も短縮します。ページに加えられたすべての変更は、その特定のページに限定され、変更が他のページに影響を与えないことを確認します。
サードパーティのJavaScriptソフトウェアは、通常、JSの同期読み込みを使用します。それらのほとんどはまた、より多くの同期スクリプトを書くためにdocument.writeで構成されています。しかし、これはあなたのページを遅くすることができます。たとえば、あなたのページに5つの広告を持っている場合、それらのそれぞれが3つの同期ロードを引き起こし、それぞれ1秒の遅延接続で、ちょうどJSの読み込みのためのロード時間が15秒になります。
AMP ページはサードパーティの JavaScript を許可していますが、サンドボックス化された iframe でのみ許可しています。iframeに制限することで、メインページの実行をブロックすることはできません。たとえ複数のスタイル再計算をトリガーしたとしても、その小さなiframeにはDocument Object Models (DOM)がほとんどありません。
スタイルの再計算とレイアウトを行うのにかかる時間は、DOMサイズによって制限されているため、iframeの再計算は、ページのスタイルとレイアウトを再計算するのに比べて非常に高速です。
AMPで機能的なモバイルサイトを作成する
以前、我々は彼らが任意のカスタムJavaScriptを関与しないので、AMPは静的なコンテンツのために非常に優れていることを説明しました。そしてこの驚くべき技術が、ウェブサイトの速度を向上させるために電子商取引のウェブサイトに使用することができることが判明しました。うまくいけば、これはクリック率と売上の増加につながるでしょう。
さらに、モバイルデバイス用に最適化されたEコマースアプリケーションをデザインします。AMPの利点を活用して、レスポンシブ、高速ロード、キャッシュ対応のEコマースストアを提供します。eコマース・モバイル・アプリケーションは、3つのステップで構築され、それぞれが個別のチュートリアルとして提示されます。
1、AMPを使った基本的なビルディングブロックとUI
このセクションでは、Eコマースストアのユーザーインターフェースの作成について説明します。我々はこれを達成するためにAMPコンポーネントを使用します。ここでは、AMP HTML コンポーネントと AMP JS に深く飛び込んでいきます。
2、Alibaba Cloud ApsaraDB for MongoDBでバックエンドを作成する
今回は、ApsaraDB for MongoDBの製品について詳しく見ていきます。Alibaba Cloudが提供するApsaraDB for MongoDBは、私たちのアプリケーションのバックエンドとなります。ある種の制限があるため、アプリケーションをMongo DBで動作させるための小さなアーキテクチャソリューションを作成します。アーキテクチャーソリューションを作成することは、記事に沿って進めていけば非常に簡単です。
3、アプリケーション全体をAlibaba Cloud ApsaraDB for MongoDBで統合する
この部分では、ApsaraDB上で作成したバックエンドと一緒に、MongoDB用にUIを統合していきます。このセクションでは、アプリケーションを統合してコア機能を作成しようとしているので、非常に重要です。また、アプリケーションの全体的な機能についてもお話します。
これらのチュートリアルについては、Alibaba Cloud Blogにご期待ください。
アリババクラウドは日本に２つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
アリババクラウドジャパン公式ページ