カテゴリー：ampの記事リストです

AMPでタグごとの記事リストを「動的に」切り替える

amp-listを使ってjsonによる動的にタグ一覧ページを作成してみました。nuxtとの組み合わせは混乱を招きがちです・・・

AMPバリデーションを自動化してサイト丸ごとチェックする

ブラウザでチェックしていたAMPバリデーション。でもついつい抜けがちなので自動化してみました。

Nuxt2.9.1へのアップデートでAMPエラーが出た時に対応したこと

Nuxt2.0.0から2.9.1にアップデートしました。その影響で生成されるHTMLに影響があり、その対応の様子を書いていきます。

AMPを実装するときに、知っておくと便利なことをまとめる

AMPの概念を理解し、いざ実装という方に向けて、スムーズな導入をしていただけるように、ツールやルールをざっくりと説明していきます。

【PWA】Nuxtで作ったAMPサイトでServiceworkerを使えるようにする

AMPでもserviceworkerを使って「ホーム画面に追加」を実現します。オフラインでのアクセスも可能になり大幅にユーザー体験（UX）を改善できるチャンスです。

【PWA】webプッシュを使って、更新通知を行えるようにする

webプッシュの実装を試してみました・・・が、iOSが対応していないことに注意！実装したものの、一旦解除しています。

PWAMP(AMPxPWA)でブログのプッシュ通知とオフラインのアクセスを実現する

AMPで構築したブログをPWA化！超高速＆オフラインでもアクセスOK、さらにweb pushでプッシュ通知も実現します。エンジニアじゃなくても実装できることを信じて、レッツトライ！

AMP警告「推奨サイズより大きい画像を指定してください」が出たので対応する

googleのサーチコンソールで大量に出た警告は構造化データのimage属性の問題だった。すぐに対応する必要はないが、いずれ対応する必要があるので、対応策だけはしっかり考えておきたいですね。

amp-position-observerでスクロール・インタラクションを実装する

「スクロールで画面内にオブジェクトが入った瞬間に発火する」そんなアニメーションがAMPなら容易に実装できます。

サイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します

ブログやホームページのAMP化を考えている方々に、実際にAMPでブログを作ったぼくが伝える、AMP化する前に知ってほしいこと。AMPの導入を目的にしちゃいけないよっていう内容です。

静的なAMPのブログにコメント欄の設置を可能にするamp-facebook-comments

amp-facebook-commentsコンポーネントを使うことでfacebookコメントプラグインを超簡単に実装できます。AMPのコンポーネントは実装がとても簡単でありがたい！というのを実感できました。

AMPで「ページトップへ遷移する」ボタンを設置する方法

AMPで構成されたこのブログに、スクロールトップへ移動ボタンを実装してみました。コンポーネントが用意されているので、簡単に実現できてしまうのがAMPの素晴らしい利点の一つです。

フェードやパララックスをAMPブログに実装できるamp-fx-collection

AMPの為に用意されたコンポーネントを使用することで、フェードイン・アウトやパララックスなどのスクロール・エフェクトが簡単に実装できます。ここではその方法をサラリと紹介していきます。

構造化データ(JSON-LD)をAMPブログに設置する方法

AMPでつくったブログに構造化データ(JSON-LD)を設置してユーザーフレンドリーさを向上させます。SEOとしても注目されているので実装をしましょう。

「Google Fonts+日本語」をAMPサイトに導入する

AMPサイトで日本語フォントを導入するための方法とその所感をお伝えします。

AMPブログでGoogleAnalyticsの設置する方法

GoogleAnalyticsはAMPで構築したサイトにも設定することが可能です。専用に用意されたコンポーネント、amp-analyticsを使うことで簡単に利用できます。このページでは、そのamp-analyticsの設置手順を説明します。