amp-analyticsの基本からクリックイベント・スクロール量の計測を行うサンプルコードまで – AMP HTML入門

記事修正日

記事投稿日

去年2015年10月のAMP発表当時はGoogle Analyticsでのトラッキングのためにamp-pixelを使う必要がありましたが、amp-analyticsコンポーネントの導入によって簡単にトラッキングコードを作成することができるようになりました。2016年10月にはGoogle Tag ManagerでもAMPがサポートされるようになり、ますますAMPの環境が整ってきたという印象です。ということでここではGoogle Analyticsの基本からamp-analyticsの説明、ページビューのトラッキング、クリックイベントのトラッキング、スクロール量の計測を行うためのコードを紹介します。... 続きを読む

Facebookの投稿Feedを取得してAMP HTMLのamp-facebookで表示させる手順のまとめ

記事修正日

記事投稿日

APIがコロコロ変わって何かと面倒で有名なFacebookですが、投稿フィードを取得してAMP HTMLのamp-facebookを使ってページに埋めこむWordPressのプラグインを作成したので、その際に必要となった手順をまとめました。APIのバージョンは2016年10月現在最新のv2.8です。... 続きを読む

AMP Projectが広告表示を高速化させたAMP4ADSの準備を進めている件

記事修正日

記事投稿日

WordPressでプラグインを入れたりしてAMP対応している方はご存知だと思いますが、Search Consoleの「検索での見え方」→「Accelerated Mobile Pages」でAMPで作ったページのエラーを確認することができます。ここでエラーのあるページがあると「検証ツールを実行」というボタンからAMP検証ツールへ飛ぶことができます。先日これを見ると、HTML Formatのところに『AMP』と『AMP4ADS』というのが選択できるようになっていました。これはなんだ?と思ってググってみると、どうやらAMPのサブセットとしてAMP4ADSというのが準備されているようなので、今更ですがその概要をまとめて見ました。... 続きを読む

WordPressに移行してAMP HTMLでテーマ「Amplified」を自作しました

記事修正日

記事投稿日

これまでHexoを使ってブログを書いていましたが、毎回コマンドラインからビルドしないといけないのと、ブログ更新の間隔が空いた期間にnpmをアップデートしたらHexoがこけたりするようになってうんざりしたので、WordPressへと移行しました。使用するテーマは一からAMP HTMLで書いています。テーマ名は「Amplified」にしてます。WordPressではAMP対応するプラグインがありますが、そちらではAMP用のページを別途吐き出すようになっているだけで、AMP自体の機能を色々使ったりという感じにはなっていません。自作テーマではAMPページしかないので、ちょっとしたことでもAMPコンポーネントを使っていたりします。そのうちちゃんと整理してリリースできるようにしたいです。ということで、以下AMP HTMLに関する雑記です。... 続きを読む

AMP (Accelerated Mobile Pages) プロジェクト入門:新しいフレームワークとしてのAMP HTMLを用いてWebサイトを制作する

記事修正日

記事投稿日

モバイルでのWebページの高速表示を可能にしてくれるGoogleのAMP (Accelerated Mobile Pages)プロジェクト。これはAMP HTMLというオープンソースのフレームワークを用いて実現されます。これまでWebサイトのコーディングといえば、HTMLを書いてCSSを書いて(場合によってはBootstrap等のフレームワークを用いて)、jQueryのプラグインとかを突っ込んで動きをつける、みたいな感じだったと思います。今回はこの新しいフレームワークであるAMP HTMLを、従来のWebサイト制作に置き換えるものにできるのかを試してみました。以下で作ったサンプルは2016年1月1日現在でAMP HTMLのValidatorをパスしていますが、今後の仕様変更によっては書き換えが必要な場合もあるので注意してください。... 続きを読む

2015年も暮れようとようとしているのにいまだにCSSを外部ファイルとして読み込んでるの?

記事修正日

記事投稿日

釣りっぽいタイトルの記事を書いてみたかったのでやってみました。内容としてはCSSファイルを<link rel=stylesheet...で外部スタイルシートとして読み込むんじゃなくて、style要素にベタ書きしようよという話です。AMP (Accelerated Mobile Pages)の話につながります。... 続きを読む

AMP対応のHexoテーマを自作する:(1)制作手順とブログの構成

記事修正日

記事投稿日

以前WordPress用のテーマを作るぞって張り切って記事を書いたんですが、結局2, 3記事書いてほったらかしになりました。でも今回サーバを変えたのを機にブログも一新しようと思い、Hexoのテーマを自作してみることにしてみました。テーマ名はYamashinaでいきます。うちのブログはPCからのアクセスがほとんですが、せっかくテーマにするんだから、2016年からGoogleが本腰をあげるAMPにも対応したものにしていきます。もちろん最低限のSEO対策(自分の知識の範囲内で)もします。... 続きを読む