AMP（Accelerated Mobile Pages）入門 - Qiita
概要 こんにちは、都内でフロントエンドエンジニアをしているかめぽんです。最近、Next.jsのバージョンアップにて対応したことで一層話題になっているAMPですが、僕自身AMPのことをそこまで注目していなくてたまたま調べてみたら割とおもしろうそうだったので、インプットした内容をまとめてみました。サンプルコードなども載せていますので、AMPの基礎的な情報の参考にしていただければと思います。 本題 AMPとは、メリット AMPとはAccelerated Mobile Pagesの略で、GoogleとTwitterが発足したモバイルページを高速に表示させるためのプロジェクト、またはAMP HTMLというフレームワークのことを指します。 AMP自体は以下の構成要素で成り立っています。 AMP HTML Custom Styling(CSS) AMP js AMP Cache(CDN) 静的なHTML
『おすすめのAMP対応ワードプレス無料テーマ 8選』
GoogleがAMPを推奨しているのですが、ワードプレスのテーマで対応しているテーマがどのくらいあるのか？ テーマで対応する方法とプラグインを使って対応する方法の２通りが簡単な方法としてあるのですが・・・ 詳しくない方や使い始めたばかりの方はテーマで対応する方が簡単で無難だと思います。 今回は、おすすめのAMP対応テーマを紹介します。 Cocoon／Simplicity2 Cocoon CocoonはSimplicityの正統進化版とも言うべきもので、非常に高速な処理と多機能を実現しています。 Simplicity2 AMP対応テーマの先駆けとなったSimplicity2は、余分な飾り気をすべて取り除き、ユーザーが自ら自由なスタイルで後からカスタマイズしやすい土台となるように考えて作られています。 Luxeritas Luxeritas Luxeritas(ルクセリタス)は、最近注目を集め
AMPのライブラリをjQueryの代わりに使う - Qiita
みなさん、jQuery、使っていますか？ 先日ウェブサイトの制作をある会社さんに発注したところ、jQuery満載のコードが納品されました。 「うわぁ…」ってなったんですけど、（主に発注ノウハウの）のいい勉強だなあと思ってjQuery排除のリファクタリングをしました。 リファクタリングしている中で、AMPのライブラリ便利だなあって思ったのでここにまとめます。 AMPとは？ Googleが推進している高速なWEBサイト表示技術です。 詳しくはこちらをどうぞ。 https://www.ampproject.org/ AMPのUIライブラリは非AMPページでも使える AMPに対応するためにはいろいろ規則を守らなければなりませんが、それを守っていられない案件もあるでしょう。 しかし、AMPのための公式JavaScriptライブラリは、非AMP対応ページでももちろん使用可能です。 基本はこれだけです。
WordPressブログをAMP対応させる公式プラグインのバージョン1.0ベータ版が公開。“ネイティブAMP”が実現
[レベル: 上級] WordPress ブログを AMP 対応する公式プラグインの v1.0 ベータ1がリリースされました。 今までのバージョンは、0.x であり、1.0 にすら到達していませんでした。 バージョン 1 の最大の特徴は “Native AMP”（ネイティブ AMP）の実現です。 通常ページと同一のネイティブ AMP 正式版として現在インストールできる AMP プラグインは、デザインや機能が通常のモバイルサイトとは完全に一致していません。 一般的に、デザインは簡素になるし、メニュー表示やコメント投稿などの機能が使えなくなる場合も少なくありません。 しかし、ネイティブ AMP では通常のモバイルサイトとほぼ100%同一のデザイン、機能をプラグインで変換された AMP ページでも実現します。 左が通常のモバイル版ページです。 右が v1.0 ベータ1 プラグインで変換した AMP
更新が頻繁なコンテンツのAMP対応ベストプラクティス
[レベル: 上級] 高速な表示を実現するために AMP ではキャッシュモデルを利用します。 僕たちのウェブサーバーからではなく AMP の CDN サーバーからキャッシュという形でコンテンツがユーザーに配信されます。 キャッシュなので、常に最新の情報とは限りません。 オリジナルのコンテンツは更新されているのに、キャッシュは古いままという状況がありえます。 ユーザーには古くなった情報を返してしまいます。 更新が頻繁なページでは問題になるかもしれせん。 更新が頻繁なページの AMP 対応のベストプラクティスをセミナー参加者に先日質問され、その場では完全な回答を提供できず、その後 AMP に詳しい方に教えていただいたのでこの記事で共有します。 2つの方法が考えられます。 何もしない <amp-list> を使う 何もしない AMP キャッシュの仕組みをこのブログで以前に詳細に解説しました。 オリ
AMPサイトにおける動画トラッキングの実装方法 | 株式会社プリンシプル
本記事で触れているGoogleアナリティクスは、ユニバーサルアナリティクス（UA）を前提としています。 GA4を対象とした記事ではございませんので、ご注意ください。 目次 AMPとは？ AMPページにおける動画の貼り付け方 Youtubeにホスティングされている動画を読み込む場合 自身のサーバー上に動画をホスティングしている場合 amp-analyticsでの動画計測の方法 対応している動画サイト トラッキングコード(JSON版) イベント計測コードのフォーマット video-seconds-playedで指定するオプション 実際にやってみよう テストに使用したAMP HTML テストに使用したAMP Analyticsの計測コード Tips 計測されたレポート画面サンプル 他にもできるAMPでの計測カスタマイズ まとめ AMPとは？ AMP（Accelerated Mobile Page
AMPページをGoogleアナリティクスで計測するベストプラクティス( 2017.11更新版 ） | アユダンテ株式会社
AMPページをGoogleアナリティクスで計測するベストプラクティス 本記事は2017年8月21日に公開されましたが、2017年11月現在の状況に即した内容に更新いたしました。 GoogleやTwitterが共同でAMPに注力したことで、ウェブサイト内にAMPページをもつサイトも増えつつあります。今回はAMPページにおける計測のベストプラクティスを紹介します。 Webサイト内の1つのコンテンツに対してAMPページのみの運用も可能ですが、基本的にはスマートフォンでの閲覧に最適化されたページがセットとなります。 そうなると運用工数的には別リソースとなりますので、それぞれのリソースに対してAMPページと非AMPページがユーザーにどのように扱われているのか、その成果を正確に計測できる環境を用意する必要があります。 計測する仕組みとして2017年10月6日にGoogleアナリティクス公式ブログで下記
Google アナリティクス、AMPキャッシュ計測の問題を解決。AMP Client ID APIのオプトインで正確なアクセス解析が可能に
[レベル: 上級] AMP キャッシュへのアクセスとオリジナルのページ（AMP含む）へのアクセスを同一認識できない問題を解決する手段を Google アナリティクスが提供しました。 AMP アクセス解析が抱えていた問題 Cookie を引き継ぐことができないため、同じユーザーであっても AMP ページに訪問したユーザーと通常のページ（非 AMPページ）に訪問したユーザーを異なるユーザーとして認識してしまう問題を、Google アナリティクスを含む AMP 対応しているすべてのアクセス解析ツールは抱えていました。 Google アナリティクスは、AMP ページ本体へのアクセスと通常ページ向けページのアクセスを同一視できるように5月に改善を加えました。 しかしながら、AMP キャッシュのアクセスは依然として異なるユーザーとして認識されたままでした。 ですが、AMP キャッシュへのアクセスであっ
AMP（Accelerated Mobile Pages）とは？今から導入するための基礎知識と手順書マニュアル
*AMP（アンプ）*とは、「Accelerated Mobile Pages」を略したもので、Googleが推奨するモバイルページの表示速度を高速化してユーザー満足度を高める手法のことです。2016年、アメリカで先立って始まったAMPは、6月20日に日本でも対応開始。今では数多くのWebページがAMPに対応しています。 今回は、AMPの基礎知識や導入方法について解説していきます。 目次 AMPとは AMPに対する各プラットフォームの現状 Google Yahoo はてなブックマーク AMPが速くなる仕組み プリレンダリングに最適化 JavaScriptが使えない ローディングに優先順位がある AMPを構成する3要素 AMP HTML AMP CDN AMP JS AMPを利用するメリット コンテンツが高速表示される 通常検索結果枠とは別の枠で表示される ユーザーのストレスを軽減できる 検索
WordPressをマジメにAMP（Accelerated Mobile Pages）対応させた話 #AMPlify | PSYENCE:MEDIA
WordPressをマジメにAMP（Accelerated Mobile Pages）対応させた話 #AMPlify ku-suke 2016.10.06 474 6616395150 こんにちは、2016年中途入社のku-sukeです。現在はkidslyという保育園むけサービスのプロダクトオーナーを担当しています。今回は個人的にも注目しているAMP（Accelerated Mobile Pages）をこのテックブログに実装した話を書きたいと思います。特に、WordPressプラグインを入れるだけの簡易対応ではなく、フッターまわりやデザインの調整などをまじめに対応させたので、企業をはじめメディア運営をWordPressで運用されている方のお役に立てば幸いです。 事業サイドがAMPに乗っかるか考える事 - ku-sukeのブログ AMPとは？ AMPとはAccelerated Mobile
amp-analytics コンポーネントを使用した AMP HTML への Google Analytics 導入方法
amp-analytics コンポーネントを使用した AMP （Accelerated Mobile Pages） 用 Google Analytics トラッキングコードの設定方法について、サンプルコードと共に簡単にまとめました。 AMP （Accelerated Mobile Pages） のアクセス解析に関しては、コアコンポーネントとして用意されている amp-pixel を使用したトラッキングコードの挿入方法があって、以前、AMP HTML の出力方法についてまとめた記事を書いた際にも触れました （下記参照）。 AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話 -> 広告表示やアクセス解析セクション で、もう一方で拡張コンポーネントとして amp-analytics も用意されていて、そちらを利用する方法もあるので
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AMP ⚡ ジェネレーター | アイスリーデザイン
検索順位が1位から圏外に下落したらどうすればいいの? -事例をご紹介 | プロモニスタ