AMP by ExampleComponents Create every content, layout and feature on your website with an AMP component.
AMP Showcase at Ameba | CyberAgent Developers Blog
アメブロでは2016年2月にAMPページの提供を開始し、リリース以降いくつかの改善を重ねてきました。そして2017年、できるだけオリジナルサイトのユーザー体験を再現できるようにAMPページをアップデートしました。本記事ではその一例をご紹介します。 LazyLoad With <amp-list> オリジナルサイトではブログ本文に関係ないページ下部の要素をLazyLoadし、表示速度を改善しています。AMPページでは<amp-list>を使用して同様のことを実現しています。 <amp-list>ではXHRでデータを取得し、描画します。他の多くのAMPエレメントと同じように、スクロールに応じて画面表示領域に近付いた時にデータ取得・表示処理をおこなうので、LazyLoadを簡単に実装できます。 ページ下部のモジュール群はスクロールに応じて遅延表示されます。 <amp-list>のsrc属性には、
リアルガチにヤバいAMP Start - Qiita
AMP(Accelerated Mobile Pages)がGoogle検索の仕様に加わってからひさしくなりますが、さらなる広がりの予感をAMP Projectがみせております。 ウェブデザインが収束の方向に向かっている BootstrapやMaterial design、Reactなどコンポーネント単位でウェブモジュールをつくっていこうという動きがあります。これは当たり前です。たとえ、オリジナルデザインでウェブサイトを作ろうとしても、パーツの再利用性などを考えることは効率やブランディングの観点からも正しく、みんなそうしてウェブサイトを作ってきたと思います。 2017年現在の現状を俯瞰的にみてみると、仕組みが出来てきたというフェーズに入ってきたのだと思います。 それによって、起こる現象はおそらく２つ。 1. ウェブデザインの２極化が起こる これは安易に想像がつきますね。一つの流れとしては、
Google Drive: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
AMPの対応方法まとめ
Googleが「Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)」という目的で始めたAMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。 Q&A対応するとどうなるの？カルーセルに掲載されるモバイルでのGoogleの検索結果にカルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。 AMPのマークが付くモバイルでのGoogleの検索結果に雷のマークが付きます。そして検索結果からのアクセスは全てAMPのページになります。開発者もユーザーも、通常のページかAMPのページかを選択することができません。 アクセスは増える？増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その
【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順
プラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。 AMPをプラグインを使わず自分で対応したい 上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。今から数年前にスマホサイト対応でWPtouch Mobile Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。 というわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。 https://c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google AMPに関する手紙
Templates