[レベル: 上級] 試験的に公開されていた <amp-script> が一般公開されました。 AMP では原則的に、AMP で定義された以外の JavaScript を動かすことが許されていません。 しかし、<amp-script> を利用すれば任意の JavaScript を AMP ドキュメントで実行することが可能になります。 好きな JavaScript を AMP で実行 <amp-script> を使うと、自分で書いた JavaScript はもちろんのこと、React や Angular、Vue.js といった JavaScript フレームワークを構成することも可能です。 ユーザーのアクションに応じてインタラクティブなコンテンツや機能を <amp-script> は提供できます。 ※Chrome Tech Talk Night #14 で Paul Bakaus 氏が紹介して

「情報にアクセスできるようにすること」は、Google にとって最も重要なミッションです。しかし、現在のモバイルインターネットは、特にスピードの面において、必要な情報を求めるユーザーの期待に応え切れていません。たとえば、データが示すように、コンテンツの表示に 3 秒 以上かかると、多くのユーザーがそのウェブサイトの閲覧をやめてしまいます。表示速度の遅さは、オンラインで必要な情報を探しているユーザーにとって不便であるだけでなく、コンテンツを提供する側にとっても大きな障壁となります。モバイルで「読む」体験はすべからく高速で快適で、そして何よりも楽しくあるべきです。 このような状況を改善するために、Google は業界各社と協力のもと、昨年 10 月に AMP （ Accelerated Mobile Pages ） プロジェクトを発足しました。AMP プロジェクトは、モバイルインターネットの高

CSSJavaScriptAstro での CSS カスケードレイヤーの順序の管理：問題ケースと解決方法CSS の @layer を Astro で書いた時、意図しないレイヤー順序になるケースがありました。その問題となるケースと injectScript などによる対策です。 CSScolor-mix() の色空間による違いCSS の color-mix() 関数に指定する色空間によって、どれほど色が異なるのかが分かる一覧を作りました。 JavaScriptマテリアルデザイン 3 のカラースキームを Material Color Utilities で作るnpm パッケージの Material Color Utilities の TypeScript 版を使い、ライトモードとダークモードに対応するマテリアルデザイン 3 の色を作ります。 JavaScriptWrangler を使い Clo

[レベル: 上級] AMP の開発状況を示すロードマップの現状を紹介する記事を AMP プロジェクトの公式ブログが投稿しました。 正式リリースされた機能と開発中の機能、取り組みが始まったばかりの機能が数多く紹介されています。 個人的に気になった機能を2つ、この記事で取り上げます。 amp-next-page は AMP ページで無限スクロールを実装するコンポーネントです。 ページの下までスクロールすると追加のコンテンツが自動で読み込まれます。 EC サイトの商品リストページや、ソーシャルメディアのタイムライン、長いブログ記事などでおなじみの UI ですね。 無限スクロールが AMP ページでも利用できるようになります。 一般的に、AMP ページでは、内部リンクをたどった場合は AMP ページではなく通常のモバイルページに移動します。 amp-next-page を構成すれば、一連のコンテン

+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は、デベロッパー向けサイトの AMP セクションの内容を拡充しました。 また、項目ごとに整理整頓し、以前よりも全体像を把握しやすくしました。 項目を追加、整理整頓 左が以前のメニューです。 右が現在のメニューです。 以前は「Introduction to AMP」（AMPの紹介）と「Use AMP」（AMPの使い方）の2つだけでした。 現在は、次の5つのサブセクションに増えています。 About AMP Enhance AMP for Search Validate AMP Remove AMP Content from Search Integrate with Google products 上から順に次のような中身です。 About AMP――AMPの全体的な説明 Enhance AMP for Search――Google 検索のための AMP 実装

[レベル: 上級] AMP 対応をやめたとき、AMP コンテンツが Google 検索に表示されなくするようにする方法を Google はデベロッパー向けページに追加しました。 Google は3つの方法を説明しています。 僕の見解も交えながら、この記事で紹介します。 【方法1】Google 検索から AMP ページを削除 この方法を使うと、検索ユーザーにエラーを発生させることなく AMP ページが検索結果に表示されるのを止めることができます。 正規ページ (rel="canonical" で指定しているページ) の HTML コードから、rel="amphtml" を削除する AMP ページの URL を、対応する正規ページの URL に 301 リダイレクトまたは 302 リダイレクトする AMP ページがなくなったことを次のようにして確かめる Google 検索して AMP ページが

[レベル: 中級] アクセス解析における、AMP と非 AMP ページ（通常ページ）との間の移動で生じる不正確なトラッキングの問題を Google アナリティクスは解消しました。 同一ユーザーとして正常に認識 AMP ページと非 AMP ページにアクセスがまたがった場合、同じユーザーなのに異なるユーザーとして認識してしまうという問題がAMP のアクセス解析には存在していました。 その結果、ユニークユーザー数が実際よりも多くなってしまったり直帰率が異常に高くなってしまったりする現象が発生します。（詳細はこちらの記事で解説）。 Google アナリティクスに限らずに、amp-analytics を利用するすべての解析ツールに共通の問題です。 欠陥とも呼んでいいこの難題を Google アナリティクスはようやく解決できました。 AMP ページと非 AMP ページ間でも、同じユーザーであれば同じユ

海外のSEO/SEM情報を日本語でピックアップグーグル検索はどこへ向かう？ モバイルファーストからAIファーストへ AMP・PWA・HTTPS・構造化データの最新情報 （Google I/O 2017）グーグルは、いま何を重視していて、どこへ向かっているのか。 グーグル本社がある米カリフォルニア州マウンテンビューで5月17日～19日に開催された「Google I/O」というカンファレンスに参加してきた。基本的には開発者向けのカンファレンスなのだが、検索関連のセッションも数多くあった。 筆者が参加した検索に関わるセッションのなかから、グーグル検索の最新情報をダイジェストで紹介する。 AI（人工知能）モバイルファーストからAIファーストへ ―― すべてのプロダクトでAIを使っていく Googleの音声認識のエラー率は4.9%（音声認識にはAI技術が用いられている） 音声と同様に視覚も入力方式と

AMP(Accelerated Mobile Pages)がGoogle検索の仕様に加わってからひさしくなりますが、さらなる広がりの予感をAMP Projectがみせております。 ウェブデザインが収束の方向に向かっている BootstrapやMaterial design、Reactなどコンポーネント単位でウェブモジュールをつくっていこうという動きがあります。これは当たり前です。たとえ、オリジナルデザインでウェブサイトを作ろうとしても、パーツの再利用性などを考えることは効率やブランディングの観点からも正しく、みんなそうしてウェブサイトを作ってきたと思います。 2017年現在の現状を俯瞰的にみてみると、仕組みが出来てきたというフェーズに入ってきたのだと思います。 それによって、起こる現象はおそらく２つ。 1.　ウェブデザインの２極化が起こる これは安易に想像がつきますね。一つの流れとしては、

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

[レベル: 上級] Googleは、現状ではAMPをランキング要因にする必要性を感じてないようです。 可能性は排除しないが、今のところは考えていない 将来的な可能性までは排除しないが、今のところは AMP をランキング要因にすることは考えていない。 Google が3月7〜8日に米ニュヨークで主催した AMP Conf 2017 の Q&A で、Googleのエンジニアリング部門の副社長である Dave Besbris（デイブ・ベスブリス）氏はこのようにコメントしました。 ベスブリスの発言全体を要約すると次のようになります。 我々は検索で、たくさんの優れたシグナルを使っているし、さまざまな実験も繰り返し行なっている。 したがって、どんな可能性も排除しないが、AMP は現状では検索結果を実質的に変える要因ではない。 AMP は、ランキングのシグナルとしてはたいして多くのことを示してはいない。

[レベル: 中級] 日本の Yahoo! が AMP をサポートすることになりました。 Yahoo! 検索の AMP 対応を発表 Google は、AMP をテーマにした AMP Conf 2017 を3月7〜8日に米ニュヨークで主催しています。 1日目の基調講演で、David Besbris （デイビッド・ベスブリス）氏が、日本の Yahoo! 検索が AMP に対応することを明らかにしました。 ヤフージャパンがAMP を対応することが発表されました！#ampconf pic.twitter.com/QPt4h56SqV — Duncan Wright (@dunc_Can) 2017年3月7日 同時に、AMP Project の公式ブログでもアナウンスが出ています。 ……Yahoo! Japan which said it will connect to AMP pages from

[レベル: 上級] amp-analytics を用いた AMP ページのアクセス解析には大きな問題があることを Christian Oliveira（クリスチャン・オリヴェイラ）氏が自身のブログで指摘しました。 具体的には、次のレポートが非常に信頼性に乏しいデータになっています。 ユニーク ユーザー セッション 直帰率 ページ/セッション 参照元 そもそもの原因はCookie どんな問題が出てくるかはこの後説明するとして、問題が発生するそもそもの理由は Cookie に起因します。 AMP コンテンツは、その AMP ページを実際にホストしてるドメイン（僕たちのサイト）ではなく、AMP CDN のキャッシュから返されます。 AMP CND サーバーのドメイン名は、cdn.ampproject.org です（現在は、各サイト固有のサブドメインが割り当てられている）。 キャッシュされたAMP

ジャストシステムは、ネットリサーチサービス「Fastask」を利用して、事前の調査で、職種が企画、マーケティング、広報、販売促進、市場調査、クリエイターと回答した20～50代の男女573名を対象に「企業のスマートフォン対応に関する実態調査【2016年冬版】」を発表しました。 4割以上が企業サイトのスマホ最適化を実施 「あなたが現在担当している商品・サービスの、WEBサイトのスマートフォン対応状況」について尋ねました。「スマートフォンにも最適化している」と回答した人は46.0％、「スマートフォンに最適化していない」が36.4％、「よくわからない」が15.4％となりました。 4割以上がAMPを認知 「モバイルでのWeb表示を高速化する手法であるAMP（Accelerated Mobile Pages）について」を尋ねました。「知っており、注目している」と回答した人は20.5％、「知っているがそ

Twitter で流れてきて拝見したのですが、q-Az さんで、「AMP ページに ＃development=1 を付けて開くブックマークレット」 という記事が上がっていました。便利だなと思ったわけですが、つい先日、AMP バリデータの Web 版が公開されていますので、補足として、閲覧中の URL をこの AMP バリデータ に投げるブックマークレットも作って共有しておきます。 AMP ページに ＃development=1 を付けて開くブックマークレット ： q-Az 参考： AMP （Accelerated Mobile Pages） バリデータの Web 版が公開される 単純に閲覧中の URL を AMP バリデータに投げるシンプル版 AMP ページをあらかじめ開いておいて、そのページ上で下記のブックマークレットを実行すると、URL をそのまま AMP バリデータに送信します。一番

[レベル: 上級] 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（Accelerated Mobile Pages）ではJavaScriptを使うことができないため、従来の方法ではドラッグできる（グリグリ動く）Googleマップを表示することはできません。しかし、ちょっとした裏技（？）を使うことで、AMPページでもグリグリ動かせる地図を表示することができます。地図だけでなく、ストリートビューも見ることができます。 サンプル 論より証拠、AMPでGoogleマップを実装するサンプルをご覧ください。バリデーション・エラーが出ることなく、AMPページでもGoogle Mapが表示されます。 ポイントは amp-iframe <amp-iframe> を使うことでGoogleマップを表示することができます。AMPページではJavaScriptが使えませんが、インラインフレームとしてJavaScriptを使っているページを読み込めばOKということです。裏技