AMPを「高速化技術」「一瞬で表示する技術」というのはもうやめよう。｜榊原昌彦
AMP（Accelerated Mobile Pages）がオープンソースとして立ち上げられてから数年が経ちました。食べログなどの大手Webサービスが対応し、また簡単にAMP対応できるWordPressプラグインが出たことで、今では一般に浸透してきた感じを持っています。 ただ「表示高速化技術」「一瞬で表示する技術」というのは正しくないのでやめませんか？ AMPはWeb Componentsフレームワークまず誤解されがちなのですが、AMPは新たな技術ではなく、Web標準の「Web Components」というAPIを用いて実装されています。AMPのGitHubページにもしっかりと「The AMP web component framework.」（AMPというWeb Componentsを用いたフレームワーク」と掲載されています。 Web Componentsは、再利用可能でカプセル化された
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
2018年のAMPはどう進化するのか？ #AMPConf 2018基調講演レポート
[レベル: 上級] オランダのアムステルダムで2月13〜14日に開催された AMP Conf 2018 に参加してきました。 この記事では、基調講演のハイライトをレポートします。 AMP の現状 3,100 万のドメインが AMP ドキュメントを発行 検索に出てくる AMP ページのクリックの 60% 以上が、ニュース以外のサイト AMP ページの滞在時間は2倍 AMP でコンバージョンが2倍 AMP が目指すのは、いまだかつてないほどにユーザーにフォーカスした強力な、開かれたウェブを実現すること。 そして、誰でも使える一般的なものにすること。 AMP Stories ユーザーのコンテンツ消費の仕方が変わってきた。モバイルでは長い記事を読みずらく、1〜2分でユーザーは読む。 そこで、AMP Stories（AMP ストーリー）を導入した。 AMP Stories は次のような機能を持つ。
AMPとPWAの動向まとめ #io17jp - Qiita
はじめに 5/17（米国時間）〜3日間、Google I/O 2017が開催されました 今年も盛況だったようです いつものように 全てのセッションの動画 が公開されています 去年のセッションの中で話題になっていたAMP・PWAについて今年のセッション動画から動向を確認してみました AMP・PWAとは？（おさらい） AMP(Accelerated Mobile Pages) GoogleとTwitterが合同で開発 モバイルでページを高速表示する 必要な技術 AMP HTML…専用のhtml/CSS/JSコーディング AMP JS…専用のJSライブラリ Google AMP Cache…キャッシングのためのCDN 参考 Accelerated Mobile Pages Project（公式） Googleの AMPデモ AMP Start …AMP＋Material Designのコンポーネ
AMPはニュースサイトだけじゃない、ECサイトでもAMP対応可能 #IO17JP
[レベル: 上級] この記事では、EC サイトを AMP 対応させる方法を解説します。 米カリフォルニア州マウンテンビューで先週開催された Google I/O 2017 で僕が参加したセッションにもとづきます。 AMP はニュースサイトやブログのような静的コンテンツを提供するサイトに向いています。 一方で、EC サイトのようなダイナミックな機能を必要とするサイトには向いていません。 向いていないというよりも、機能不足で実装不可能と行ったほうが正確でしょうか。 しかし状況は変わりつつあります。 AMP プロジェクトは EC サイトにも AMP を使えるように取り組んでいます。 AMP 対応した EC系サイトも増えつつあります。 それでは、どのようにして EC サイトをAMP 対応させていくかを、これから解説します。 EC サイトで利用できる AMP コンポーネント EC サイトでよく使われ
リアルガチにヤバいAMP Start - Qiita
AMP(Accelerated Mobile Pages)がGoogle検索の仕様に加わってからひさしくなりますが、さらなる広がりの予感をAMP Projectがみせております。 ウェブデザインが収束の方向に向かっている BootstrapやMaterial design、Reactなどコンポーネント単位でウェブモジュールをつくっていこうという動きがあります。これは当たり前です。たとえ、オリジナルデザインでウェブサイトを作ろうとしても、パーツの再利用性などを考えることは効率やブランディングの観点からも正しく、みんなそうしてウェブサイトを作ってきたと思います。 2017年現在の現状を俯瞰的にみてみると、仕組みが出来てきたというフェーズに入ってきたのだと思います。 それによって、起こる現象はおそらく２つ。 1. ウェブデザインの２極化が起こる これは安易に想像がつきますね。一つの流れとしては、
スタンドアロンAMPのススメ
こんにちわ、@t32kです。先日、3/18に大阪で開催されたFRONTEND CONFERENCE 2017に登壇してきました。また弊社メルカリは懇親会スポンサーでした。今回は『スタンドアロンAMPのススメ』というタイトルで講演した内容をシェアしたい思います。 私が所属しているソウゾウ社ではメルカリアッテというクラシファイドサービスを作っています。メルカリは配送システムを介して売買しますが、こちらは直接会って手渡しでモノの売り買いができます。もちろん、手数料や配送料はかかりませんので、よろしかったら使ってみてください。私はそこのWeb担当で、本サイトのAMP実装について話します。 今日のアジェンダです。 AMPのメリット 表現力について テンプレート分散について 構造化データについて まとめ といった内容でやっていきたいと思います。 AMPとは？ まずはAMPとは何か説明します。AMPとは
AMP Conf 2017へ行ってきました #AMPConf | メルカリエンジニアリング
こんにちは、Software Engineerの @yui_tang です。 3月7-8日にニューヨークにて開催されたAMP Conf 2017に参加してきましたので、そのレポートを書きたいと思います。 メルカリでのAMPの取り組み まずは、現在までのメルカリにおけるAMP(Accelerated Mobile Pages)の取り組みについて簡単にお話します。 2016年7月にメルカリのWebサイトの一部に導入を開始し、現在AMPページには数万PV/日のアクセスがあります。 メルカリ内の商品毎のページが全てAMP対応しているため、そのページ数は相当数に上ります。 流入経路ですが、現在元ページにlink rel="amphtml"を設定しているのみで、メルカリのサービス内にAMPページへのリンクは露出していません。 よって全てが検索流入となっており、事実上ランディング用のページとして機能して
AMP: 1 年を振り返る
.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
稲妻マークを体験してみよう
.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プロジェクトが第3四半期のロードマップを更新、ECサイトでのAMPサポートを目指す
[レベル: 上級] AMPプロジェクトは、第3四半期 中間のロードマップを更新しました。 ロードマップには、その期間にAMPプロジェクトが集中的に取り組む、新機能の追加や機能の改善に関する予定と進捗が示されています。 ECサイトでの利用が想定されている機能のサポートが、第3四半期のロードマップには含まれています。 ECサイトでの利用を想定したAMPの新機能 ECサイトのAMP対応の普及を目的に、新しい機能の開発に取り組むことになっています。 たとえば、次のような機能をECサイトのAMPページで利用できるようにします。 フォーム サムネイル画像ギャラリー アクセス解析 フォーム AMPページでフォームを使えるようにします。 <form> や <input> に相当する機能がECサイトでは必須です。 こうした機能を含むフォームに必要な仕組みを amp-form という拡張仕様によって、AMPペ
はてなブログのAMP対応で学ぶウェブサービスのAMP対応 - hitode909の日記
プレゼンモード 再生 ← / →で移動 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でベスト
sitemap.xmlをクロールしてサイト内の全ページのAMPのバリデーションをしてくれるコマンドラインツールを作った - hitode909の日記
ウェブサービスのAMP対応するときに役立つ，sitemap.xmlをクロールしてサイト内の全ページのAMPのバリデーションをしてくれるコマンドラインツールを作った． GitHubにも置いてあるのでご紹介します． はじめに：AMPのバリデーションについて AMP（Accelerated Mobile Pages）はHTMLのサブセットなのだけど，ふつうのHTMLとちがって，バリデーションに通らないとAMPのページとは認めてもらえず，エラーが出てると検索結果などに出してもらえないので，がんばって直す必要がある． バリデーションの主なやり方には， クロールされるのを待ってSearch Consoleで見る AMPバリデータを使う の2つがある．順番に説明します． クロールされるのを待ってSearch Consoleで見る Search ConsoleからAMPのクロール状況を見れて，エラーが出て
『AMPを導入してどうだったのか？』
アメブロがAMP対応してからしばらくが経ちました。 今回はその"AMP"に対応した結果どうなったのか？ という、効果について簡単に書きたいと思います。 ここ最近ブロガーさん向けの記事が多かったので、今日は珍しくSEOネタっぽいやつです。 さて、アメブロでは3/10より順次AMP対応しています。 スマートフォンでGoogle検索をした際に、 このような表示がされることがあります。 これは実際に「ユニクロ」で検索した結果の一部です。 このマーク が表示されているものはAMP対応となり、 このように簡易的なページが表示されます。 AMPページはGoogleからの検索の場合はGoogle側にキャッシュされる形になることもあり、 いろいろな制約があります。 例えば、 ・広告の掲載に制約がある ・画像の使い方に規則がある ・使えるHTMLタグに制約がある などです。 HTMLタグなどは、AMPページを
Google、AMPページ対応はランキングシグナルとして使用せず
米Google・John Mueller（ジョン・ミューラー）氏は2016年2月26日（米国時間）に開始されたウェブマスター向けのオンラインQ&Aセッションにおいて、現時点で AMP(Accelerated Mobile Pages)対応の有無はランキングシグナル（検索順位を決定するためのてがかり）として利用していないことを明らかにした。 オンラインで定期的に開催されている Google Webmaster Central office-hours hangout に登場したミューラー氏がウェブマスターからの質問に答えた。既報の通り、Google はAMPウェブページをモバイル検索に導入したが、現時点ではトップニュースの欄内の2か所にのみ AMPページへのリンクが表示されるようになっている。しかし、Google は2010年以降、ウェブの高速化に取り組んでおり、ページの読込速度をシグナルと
AMP（Accelerated Mobile Pages）の基礎知識から対応・導入方法まで！まとめ | 株式会社ウェブ企画パートナーズ
「Accelerated Mobile Pages」と呼ばれるGoogleが推し進めてきたプロジェクトですが、とうとう正式導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。 まずは導入後のイメージを御覧ください。（英語ですが公式サイトのイメージよりもわかりやすいです） このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。 自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。 http://g.co/ampdemo（※スマホからアクセスしてください） 既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。 Googleが過去に発表してきた、モバイル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PWA+AMPの話
Web | WordPressやWebデザインなど紹介 Ocadweb