bookarchivesTwitterFacebookinstagramwebampAMPを実装するときに、知っておくと便利なことをまとめる2019-05-11これまでこのブログでは、AMPを導入する際の注意点や意見、概念などを書いてきました。今回の記事では、AMPを実装をスムーズに行うための、Tipsをまとめてみました。実践的な内容になっています。していますが、読んでいただければ、煩わしい初期の設定や、注意事項を理解できて、コンテンツ制作に集中できるかと思います。Startもしも、AMPサイトを素早く立ち上げたい、あるいはサンプルのソースで実装を学びたい場合には、まずここを見ると良いです。色々なサイト・テンプレートが紹介されています。Templates実際に機能が実装されたテンプレートが、ダウンロードが可能です。JSONを使った動的なコンテンツの表示なども実装されているので、AMPの理解を容易にしてくれます。(テンプレートで使用しているCSSフレームワークを解説)AMPの仕様による制限のポイントをまとめる実装においては、いくつか制限があります。制限についての考え方は、AMPが高速化にこだわっていることを理解すると納得できます。高速化に悪影響を与える可能性がある要素を、徹底的に排除するためにしよう不可にしているものがほとんどです。JS独自に書いたjsの関数などは使えません。ほとんどのライブラリやそれに依存したプラグインなどは利用できないと思った方が良いです。その代わりに、AMPコンポーネントを利用することで、同等の機能を簡単に実装することが可能です。カルーセルやパララックスなど。CSSでなければいけないCSSの記述は50kbまで!importantは使えない不用意にCSSフレームワークを導入してしまうと、これらの部分で手こずります。AMPスタートのテンプレートでは、Normalize.cssとBasscssを使用しています。Basscssでは!importantを使用している箇所もあるので、その部分だけ削除して使用しているそうです。HTMLを生成してくれます。https://ampbyexample.com/boilerplate/フォームに自身のサイトに必要な項目を設定するだけで、必要なコードのテンプレートを作ってくれます。コンテンツ制作にすぐに移れますね。ブラウザのconsoleでAMPバリデーションChromeのdeveloperツールを利用すれば、簡単にバリデーションが可能です。HTMLが正しい記述となっているか確認できます。successful.と表示され、問題があれば、その問題を指摘してくれます。無事にバリデーションが通っていれば、AMPキャッシュが利用できます。https://developers.google.com/amp/cache/?hl=ja実際にキャッシュされているのかをURLで確認できます。海外SEO情報ブログ特定のルールがあるようですが、自分で生成するのは面倒なので、このオフィシャルのCDNのURL生成ツールを利用しましょう。Cacheここで生成されたURLにアクセスすると、ページを見ることができます。HTMLそのものを見ることはできましたが、画像だとダウンロードになってしまう・・・ちょっと確認しずらい・・・なぜか、イメージでも/c/が生成されてしまうので、一応ルールを知っておくと便利かもしれません。CDNのURLのルールCDNのURLは、以下のような組み合わせで生成されており、アクセスすることで確認することが可能です。確認したいファイルのパス(URL)コンテンツのタイプは、htmlなどのコンテンツは/c/画像類は/i/フォントなどのリソースは/r/で分類されています。SSLに対応していれば、/s/がつき、対応していなければつきません。:example.comhtmlhttps://example.com.cdn.ampproject.org/c/s/example.com/index.html画像類https://example.com.cdn.ampproject.org/i/s/example.com/img/image.jpgBasic認証環境では、AMPキャッシュが動かないテストサーバーで開発を進めていたのですが、問題があります。Basic認証をかけていると、AMPキャッシュに登録はされないようなのです。試しにBasic認証を解除してみたところ、無事に確認ができました。不便ですが、最終的な段階では機能するため、問題ないでしょう。ちなみに、lighthouseの総合的な数値が上昇しました。paintの数値に変化はありませんでした。スピードの測定はlighthouseで計測には、lighthouseを使います。chromeのdeveloperツールに実装されており、非常に気軽に利用できるところが良いです。Auditsのタブを開き、performanceにチェックをつけてrunで、OK。performance以外を計測すると、スピード以外の項目もスコアを出してくれます。表示までの時間は1秒以内を目指しましょう。厳しいハードルですが、AMPを実装する意義に関わってきますので、頑張りましょう。一つ、新しいブログを作っていますAMPでタグごとの記事リストを「動的に」切り替えるAMPバリデーションを自動化してサイト丸ごとチェックするNuxt2.9.1へのアップデートでAMPエラーが出た時に対応したことIFTTTの設定に満足できなくなったらZapierに乗り換えようサイトの表示スピードを改善する2つの方法AMPを実装するときに、知っておくと便利なことをまとめる【PWA】Nuxtで作ったAMPサイトでServiceworkerを使えるようにするPWAMP(AMPxPWA)でブログのプッシュ通知とオフラインのアクセスを実現する雑記か専門かなんてどうでもいい。ブログのテクニック依存から抜け出すことから始めよう記事ネタがないとか書き方が分からなくて筆が進まない時の対処法ブログは上手に書けてなくても「素人感」にこそ本当の価値があるブログ・サービス選びに悩む初心者へ送る定番からレアなサービスを紹介ブログを何から始めたらいいか分からない方へザックリと始め方の流れを説明するFirebaseHostingのストレージ上限エラーになった時の対応法ブログに興味があるけど始められない人はこんな感じなのかなAMP警告「推奨サイズより大きい画像を指定してください」が出たので対応するAMPでスクロール・インタラクションを実装したのでamp-position-observerについてまとめる。Nuxt.jsとAMPで作ったこのブログの構成要素をざっくりとまとめてみるブログの古い記事を見直したらアクセスが少しだけど上がりましたモバイルファーストインデックスが検索順位やgoogle登録に与える影響CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジサイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します静的なAMPのブログにコメント欄の設置を可能にするamp-facebook-commentsAMPで「ページトップへ遷移する」ボタンを設置する方法フェードやパララックスをAMPブログに実装できるamp-fx-collectionブログサービスの選び方。【PWA】Nuxtで作ったAMPサイトでServiceworkerを使えるようにするPWAMP(AMPxPWA)でブログのプッシュ通知とオフラインのアクセスを実現する雑記か専門かなんてどうでもいい。ブログのテクニック依存から抜け出すことから始めよう記事ネタがないとか書き方が分からなくて筆が進まない時の対処法ブログは上手に書けてなくても「素人感」にこそ本当の価値があるブログ・サービス選びに悩む初心者へ送る定番からレアなサービスを紹介ブログを何から始めたらいいか分からない方へザックリと始め方の流れを説明するFirebaseHostingのストレージ上限エラーになった時の対応法ブログに興味があるけど始められない人はこんな感じなのかなAMP警告「推奨サイズより大きい画像を指定してください」が出たので対応するAMPでスクロール・インタラクションを実装したのでamp-position-observerについてまとめる。Nuxt.jsとAMPで作ったこのブログの構成要素をざっくりとまとめてみるブログの古い記事を見直したらアクセスが少しだけど上がりましたモバイルファーストインデックスが検索順位やgoogle登録に与える影響CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジサイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します静的なAMPのブログにコメント欄の設置を可能にするamp-facebook-commentsAMPで「ページトップへ遷移する」ボタンを設置する方法フェードやパララックスをAMPブログに実装できるamp-fx-collectionブログサービスの選び方。コメントはtwitterでお気軽に。