AMPキャッシュのURL問題を解決するSigned HTTP Exchangeの試験運用をGoogleが開始
[レベル: 上級] Google は、Signed HTTP Exchanges のオリジン トライアル（試験運用）を開始しました。 AMP が抱える問題を解決する Signed HTTP Exchanges 高速化のためにキャッシュを配信する AMP には、たとえば次のような問題が依然として残っています。 AMP キャッシュを表示した場合はオリジンのドメイン名ではなく AMP CDN キャッシュサーバーのドメイン名を使った URL が表示される キャッシュ CDN サーバーからコンテンツが配信されるため Cookie の受け渡しに支障があり、正確なアクセス解析を難しくする Signed HTTP Exchanges を実装すると、たとえキャッシュであったとしてもオリジンのドメイン名から配信したコンテンツであるかのように扱うことができます。 上で挙げたような問題を根本から解決できます。 U
WordPressをPWA対応させる公式プラグインがリリース（が、まだ使える状態ではない）
[レベル: 上級] WordPress サイトを PWA 対応させるプラグインがプラグインディレクトリに公開されました。 このプラグインは、WordPress の VIP パートナーである XWP が中心となって開発し、加えて WordPress 本体の開発元である Automattic とさらには PWA 発展の旗振り役でもある Google が関わっています。 WordPress を PWA 化するプラグインはすでにたくさん公開されていますが、3社がタッグを組んでいるという点でこのプラグインはPWA対応のための公式プラグインと言ってもいいのではないでしょうか。 Service Worker, Web App Manifest, HTTPS PWA対応の公式プラグインと聞くとワクワクしますが、できることは非常に限られています。 現状では次の機能をサポートできています。 Service W
AMPストーリーv1.0が公開。すべての開発者が申請不要で利用可能に。
[レベル: 上級] AMP Stories (AMP ストーリー) の v1.0 が公開され、すべての開発者が利用できるようになりました。 これまでは、申請してホワイトリストに登録してもらう必要がありました。 通常の検索での AMP ストーリー AMP ストーリーは、本をパラパラとめくるようにして物語風に一連の情報を閲覧できる AMP の機能です。 文字ではなく、画像や動画をふんだんに使ったビジュアルさに特徴があります。 AMP ストーリーは、試験用の Google 検索でしか見ることができませんでしたが、今は通常の検索で見ることができます。 こちらは Washington Post（ワシントン・ポスト）の AMP ストーリーです（“Washington Post” でモバイル検索すると、AMP ストーリーのカルーセルが出てきます）。 AMP ストーリーのもう少し詳しい解説は、Web担当者
AMPページでユーザーの同意・承諾を求めるコンポーネント、<amp-consent> が利用可能に
[レベル: 上級] ユーザーの同意や承諾を AMP ページで求めることができるコンポーネントとして、<amp-consent> を AMP プロジェクトが公開しました。 同意・承諾で制御 サイトの利用に際してユーザーの承諾が必要だったり法的な自由でユーザーの同意が必要だったりすることがあります。 <amp-consent> を使うとこうしたことが AMP ページで実装できます。 具体的には次の3つを構成できます。 ユーザーに同意・承諾を選択させる 選択した状態を保持する 選択した状態に応じて、ページで表示する内容や利用できる機能を制御する 3パターンの <amp-consent> があります。 許可・拒否 許可するか、拒否するかをユーザーに選択させることができます。 たとえば、ユーザーに関する何らかの情報をウェブサイトが取得してもいいかどうかを確認するときがありますね。 選択 選択肢を提供
複数ステップをページ移動することなくAMPで実装する方法が公開
[レベル: 上級] 同じ AMP ページ内で複数のステップを進行する仕組みが AMP by Example に公開されました。 購入プロセスや、ログインページ、オンラインアンケートなどで効果的に利用できそうです。 AMP で実現するマルチステップ フロー ここで紹介する仕組みを実装すると、入力・選択を必要とする複数のステップを次のページに移動することなく、同一ページ内でダイアログ形式で流れるようにして完了することができます。 具体的にどのように動くのかをデモページで見てみましょう。 まず、縦に展開して進む選択型の複数ステップです。 次のような順番で進んでいます。 好きな動物 (Animal) を選択 好きな色 (Color) を選択 好きな果物 (Fruit) を選択 そのあとは、スライド形式で横に進む入力型の複数ステップです。 メールアドレスを入力 パスワードを入力 完了 通常のページと
ダイナミックな機能をAMPで提供できるamp-bind、Googleがorigin trial参加サイトを募集中
[レベル: 上級] AMP プロジェクトは、amp-bind の origin trial の申し込みを募集しています。 amp-bind とは amp-bind とは簡単にいうと、AMP ページでインタラクティブな表現を可能にする AMP のコンポーネントです。 AMP では、 JavaScript をはじめとした動的な仕組みを提供する機能の使用が厳しく制限されています。 しかし、amp-bind を構成すれば、まるで JS を使ったかのようなダイナミックな機能を提供できます。 こちらは、amp-bind を構成した AMP ページの例です。 EC サイトの商品ページを想定していて、カラーと個数、サイズを選択できます。 選択したカラーに応じて、商品画像が切り替わり、カルーセル形式で閲覧できます。 アニメーションには映っていませんが、カートへの追加もできます。 デモなので動きとしては非常に
AMP Start、レスポンシブウェブデザインのAMPサイトを簡単に構築できるテンプレートを公開
[レベル: 中級] AMP プロジェクトは、AMP HTML で構成したウェブサイトを簡単に作成するためのテンプレートの提供を始めました。 AMP Start という名称のサイトで公開しています。 まずは2種類のテンプレートを配布 AMP Start で公開されているテンプレートを使えば、AMP に対応したサイトをゼロから構築する必要はありません。 テンプレートはデザイン的に洗練されており、たいていのサイトに必要な要素を備えています。 現在公開されているテンプレートは、次の2種類です。 記事用 ブログ用 記事もブログも大差ないように思いますが、ナビゲーションメニューやソーシャルボタンなどの要素に多少の違いがあります。 “COMING SOON”とあるので、もう1種類のテンプレートが近々公開されると思われます。 RWD + AMP HTML どちらのテンプレートも、レスポンシブ ウェブ デザ
Google+アプリがAMPをサポート、G+アプリユーザーも高速表示を体験できるように
[レベル: 上級] Android版のGoogle+アプリがAMPをサポートするようになりました。 ウェブ版のGoogle+は約1か月前からAMPをサポートしていました。 アプリはバージョン9.2からAMPを利用できます。 GoogleアプリからAMPページへ AMPに対応したページがGoogle+アプリで共有されると、おなじみの⚡AMPマークが投稿に付きます。 タップすると、AMP CDNからキャッシュが返されます。 表示中ページのドメイン名が www.google.com になっていますね。 そのサイト本来のドメイン名もきちんと表示しているのが親切です。 スクリーンショットはGoogle+の内部アプリでの閲覧状況ですが、外部ブラウザで開く設定にしていても同じようにAMPページをキャッシュから表示します。 Google+ユーザーは、ウェブ版よりもアプリ版を普段は使っているはずです。 Go
AMP CDNのキャッシュURL構成をGoogleが更新、専用のサブドメインを各サイトに割り当て
[レベル: 上級] Googleは、AMPキャッシュのURL構成を近いうちに更新することを開発者向けブログでアナウンスしました。 セキュリティを高めることが狙いです。 一部のサイトを除く、ほとんどのサイトでは特別な対応は不要です。 AMP CDNドメインのサブドメインを各サイトに割り当て 今後は、Googleが提供するAMP CDNが使用しているドメイン名のサブドメインが、各サイトに割り当てられます。 たとえば現状では、この記事のAMPキャッシュURLは次のようになります。 https://cdn.ampproject.org/c/s/www.suzukikenichi.com/blog/google-updates-url-scheme-for-amp-cache/amp/ 今後は、僕のブログ専用のサブドメインが割り当てられ、次のように変わります。 https://www-suzukik
AMPがフォームをサポート、amp-formの実装でメールアドレス登録やECサイトのカラー選択などが可能に
[レベル: 上級] AMPが正式にフォームをサポートしました。 <form> 要素と <input> 要素を使用したフォーム機能がAMPページでも利用できます。 フォームを利用するとたとえば、メールアドレス登録やサイト内検索、ECサイトでのカラー選択などユーザーからのアクションに応じた操作が可能になります。 amp-formでフォームを実装 AMPページでフォームを実装するためには、<amp-form> 拡張を使います。 コードの例です。 <form method="post" action-xhr="https://example.com/subscribe" target="_blank"> <fieldset> <label> <span>Your name</span> <input type="text" name="name" required> </label> <label
AMP特集：AMPに対応するには? ランキング要因なの? アノテーションは? などSEO記事まとめ11+2本 | 海外&国内SEO情報ウォッチ
AMPに対応するには？ 日本語の説明×3 ★★★★☆ 日本語で書かれているのが嬉しい （YAMAGUCHI::weblog）まず、AMP対応ページを実際に作る際のやり方や、技術的なことを解説した記事を3本紹介する。 1つ目の記事は、グーグルでAMPの開発にあたっている山口氏が個人ブログに書いた記事だ。AMPの概要と主要な技術的設定、参考リソースを紹介している。 AMPに初めて触れる人にはわかりやすい、非常に優れた解説だ。 AMP対応 2016.02版次は、一般のウェブマスターによる、AMPを実際に導入してみての解説だ。かなり深掘りして技術的設定を説明している。現状では、AMPの日本語ドキュメントが少ないので貴重なリソースになるだろう。 AMPとは～対応HTMLを作ってみてわかったこと～最後に、グーグルのデベロッパー向け公式ブログも紹介しておく。AMPが高速化を実現している仕組みと、AMPに
AMPの対応方法まとめ
Googleが「Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)」という目的で始めたAMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。 Q&A対応するとどうなるの？カルーセルに掲載されるモバイルでのGoogleの検索結果にカルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。 AMPのマークが付くモバイルでのGoogleの検索結果に雷のマークが付きます。そして検索結果からのアクセスは全てAMPのページになります。開発者もユーザーも、通常のページかAMPのページかを選択することができません。 アクセスは増える？増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Templates