Intro 前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。 これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。 その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。 ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期

と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ

こんにちわ、@t32kです。先日、3/18に大阪で開催されたFRONTEND CONFERENCE 2017に登壇してきました。また弊社メルカリは懇親会スポンサーでした。今回は『スタンドアロンAMPのススメ』というタイトルで講演した内容をシェアしたい思います。 私が所属しているソウゾウ社ではメルカリアッテというクラシファイドサービスを作っています。メルカリは配送システムを介して売買しますが、こちらは直接会って手渡しでモノの売り買いができます。もちろん、手数料や配送料はかかりませんので、よろしかったら使ってみてください。私はそこのWeb担当で、本サイトのAMP実装について話します。 今日のアジェンダです。 AMPのメリット 表現力について テンプレート分散について 構造化データについて まとめ といった内容でやっていきたいと思います。 AMPとは？ まずはAMPとは何か説明します。AMPとは

.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads

AMPの発表から約1年が経ち、国内のGoogle検索でも正式対応されたことや、AMPに対応しているサービスやアプリの増加などから、AMP対応をしているサイトを見る機会が増えてきたように思います。以前は、AMPのプレビュー用検索ページでしか、AMP対応アイコンやAMP対応サイトがカルーセルに掲載されていることが確認できませんでしたが、正式対応されたことで、通常の検索ページからでもAMP対応ページが一目でわかるようになりました。 その中でも、カルーセルに掲載されたページは、タイトルやサムネイルが大きく表示されるため、よりユーザーの目を引くことが可能だと思われます。AMP対応ページをカルーセルに掲載させるためには、次の条件を満たす必要があります。 AMP HTMLが仕様に準拠して適切に記述されている AMP HTML内にJSON-LD形式の構造化データが適切に記述されている そこで、カルーセルへ

2016年9月18日 著 Googleが勧めるAMPの終焉を予測してみた、という記事を読んだのはだいぶ前のことだけれど、最近になってGoogleが謎の#AMPlify キャンペーンなどという動きを見せるにつけ、AMPの終焉というのは実は多くの人が予想するよりもっと早くに訪れるかもしれないと思いました（理由は後述）。 AMPが発表された当時は制約が厳しすぎて「こんなフォーマット流行るわけがない」と思っていたものですが、その後は日進月歩の勢いで「AMPでできること」が充実してきました。一昔前なら動的コンテンツにAMPは向きませんとか言ってたけど、今や<amp-live-list>があるくらいで......EC方面に積極的に売り込んでいる節もありますね。 とはいえ、AMPを個人的に好きになれないのは、Googleのビジネスを担ぐ格好にしか映らない点。いくらオープンソースのプロジェクトであることを

※AMPは画像を遅延読み込みする機能が存在するため、ファーストビューでの転送容量が少なくなる傾向があります。当サイトもHTTP/2やリバースプロキシーを利用するなどWordPressを極限まで早くするようチューニングしていますが、AMPページではそれよりも高速に表示されています。 筆者はモバイルブラウザでのページ読み込み高速化によって、アクセス数が伸びる、SEO的に有利になる、エンゲージメントが向上する、といったことに期待していました。 AMP対応の効果は今のところ局所的 結論からいうと、AMP対応して得られたメリットは局所的なものでした。一部の記事がバズったときに、アクセス数の向上を確認できたというものです。まずアクセス数の数値から、AMPの状況を見ていきましょう。次のグラフはAMP対応してから現在までのアクセス数の記録です。 ▲アクセス解析はAMPページのみに絞り込んで表示 上位1位の

サイバー・バズの@kashira2339です。 最近巷を賑わせているAMPと、導入にあたって検討されるであろうことがらについて サイバー・バズでの取り組みにあわせて触れていきたいと思います:) 急いでいる人用 AMPを導入すると... モバイルページの表示が早くなる 検索結果にカルーセルUIが表示される Twitter、FacebookなどSNSのシェアボタンが設置できる サイドメニューやアコーディオンUIは拡張コンポーネントで使える 限られた広告は表示できる テンプレートエンジンの駆使で仮想的に外部ファイルが読み込める サードパーティのレコメンドエンジンは海外に強い会社を中心に対応されている 現状、記事ページのみ対応可能 SEOに直接影響はない GoogleAnalyticsが使える SNSの投稿やyoutubeも埋め込める 10人日程度の工数がかかる 時間があるならば、やらないよりはや

Theme 第 22 回のテーマは AMP(Accelerated Mobile Pages) です。 今回は @ymotongpoo さんをお迎えして、 AMP の登場背景やそこから見える今の Web の問題点、導入や普及、今後の展望などをふまえ、 AMP が登場した意味、そして AMP が Web にもたらす影響などを通して 「今何がおこっているのか」と「これからどうなっていくのか」を議論しました。 Show Note Why AMP is Fast ampproject.org ampproject/amphtml github Waht is AMP? Why AMP is fast Publishers using AMP HTML AMP Cache AMP Cache AMP Cache Update Ping Format AMP Validator Chrome Dev

プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる こんにちは，id:hitode909です．このあと14時から品川のマイクロソフト様のオフィスでおこなわれている，YAP(PはパチモンのP)Cで発表します． この記事では，発表資料を公開いたします．現地の方は今すぐCルームに来てください．そうでないかたは懇親会でお会いしましょう． はてなブログのトピックもあるようです． トピック「YAPC」 #yapc8ojic のツイート はてなブログのAMP対応で学ぶウェブサービスのAMP対応 2016/07/03 YAP(achimon)C::Asia Hachioji 2016 mid in Shinagawa hitode909 自己紹介 id:hitode909 @hitode909 京都から来ました はてなではてなブログを作っている 自己紹介 YAPC 2015でベスト

アメブロがAMP対応してからしばらくが経ちました。 今回はその"AMP"に対応した結果どうなったのか？ という、効果について簡単に書きたいと思います。 ここ最近ブロガーさん向けの記事が多かったので、今日は珍しくSEOネタっぽいやつです。 さて、アメブロでは3/10より順次AMP対応しています。 スマートフォンでGoogle検索をした際に、 このような表示がされることがあります。 これは実際に「ユニクロ」で検索した結果の一部です。 このマーク が表示されているものはAMP対応となり、 このように簡易的なページが表示されます。 AMPページはGoogleからの検索の場合はGoogle側にキャッシュされる形になることもあり、 いろいろな制約があります。 例えば、 ・広告の掲載に制約がある ・画像の使い方に規則がある ・使えるHTMLタグに制約がある などです。 HTMLタグなどは、AMPページを

Googleはこのほど、2015年10月に公表したオープンソースプロジェクト「Accelerated Mobile Pages（AMP）」の日本語版導入ガイドをウェブサイト管理者向けに公開した。 このAMP（アンプ）と呼ばれるプロジェクトは、スマートフォンで閲覧するモバイルサイトの表示速度を従来のサイトよりも高速化させることを目的としたもので、すでに世界各国のニュースサイトなどがこのプロジェクトに参加し、AMPへの対応を準備しているという。 プロジェクトの目的と具体的な内容について、Google日本法人 プロダクトパートナーシップ本部 ストラテジック パートナー デベロップメントのマネージャであるダンカン・ライト氏、そして同じくプロダクトパートナーシップ本部 出版コンテンツ アジア太平洋統括部長の佐藤陽一氏に聞いた。 ページ表示の遅さによるユーザーの閲覧断念を解消したい --まず、このAM

Intro Google が推奨する仕様である AMP HTML に、このブログを対応した。 言いたいことは色々あるが、とりあえず非常に難しかったため、その対応方法や感想などを残す。 Update 以下の記事が出たので、古かったフォーマットのアップデートと JSON-LD によるメタデータの提供 に対応した。 Google モバイル検索が Accelerated Mobile Pages に対応しました AMP 対応 2016.02 版 Accelerated Mobile Pages ACCELERATED MOBILE PAGES PROJECT タイトルは識別しやすいよう AMP HTML としたが、実際には AMP という仕様(方針)があり、 HTML 以外にも手を入れている。 AMP は、特にモバイル向けに 静的コンテンツ を最適化し、表示を高速化することを目的としている。 実際

プラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。 AMPをプラグインを使わず自分で対応したい 上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。今から数年前にスマホサイト対応でWPtouch Mobile Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。 というわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。 https://c

+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1

Google Search Console （サーチコンソール） に新たに 「Accelerated Mobile Pages （AMP）」 の項目が追加され、AMP のインデックス状況やエラーレポートを確認することができるようになりました。 ちょっと前の話なんですけどね。Google Search Console （サーチコンソール、元々はウェブマスターツールって呼ばれてたあれです） に新たに 「Accelerated Mobile Pages （AMP）」 の項目が追加され、インデックス状況やエラーレポートを確認することができるようになりました。 Google Search Console AMP について、および実際に AMP を出力する方法については下記の記事を少し前に書いていますので参考まで。 AMP （Accelerated Mobile Pages） HTML を出力するよう

Googleさんが発表したモバイル端末での表示高速化のAMP HTMLに対応してみたよ、という話です。 Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web 概要などは上記見てもらえれば感じはつかめると思いますし、日本語で紹介してる記事だとKenichi Suzukiさんの紹介記事を見ると分かるかと思います。 なぜやってみようかと思ったかというと、「javascriptが無い静的なHTMLとCSSのページは爆速で表示したるで！」というGoogleさんの粋な計らいかと勘違いし、ほとんどが静的なページであるこのブログもサクーっと対応できたりするんじゃね、と思ったからですが、ちょっと苦労しました。 なおブログを完全に対応させたのではなく、記事ページのみ別にAMP HTML用の記事を出力してい

Google announced its own plan to revolutionize mobile news consumption with an open-source web-based solution called Accelerated Mobile Pages, or AMP. While Facebook and Apple have a significant head start on Google, there’s every reason to believe that AMP will catch up quickly. If you’re a developer or a publisher who needs to get up to speed on the why, what and how of Google’s Accelerated Mobi

Movable Type で運用している Blog の記事を AMP （Accelerated Mobile Pages） HTML で出力するようにしてみたけれど、とある自分の書き方の癖により既存の記事を AMP HTML に自動変換するのは結構面倒くさかったという話。 Google が発表したプロジェクト、Accelerated Mobile Pages （AMP） は、モバイル端末における Web ページの表示を高速化する取り組みで、超簡単に言ってしまえば、オープンソースで公開されるフレームワーク、AMP HTML の仕様に従って Web ページを作ってくれれば、その表示を大幅に高速化できますよという仕組み。 単にファイルサイズ的に軽いよというような単純な話だけではなく、キャッシュなど様々な技術を組み合わせることでページのロード時間を大幅に短縮する仕組みで、制作者側が AMP HTM