AMP Fest を振り返る
.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
#AMPConf 2019で発表された検索関連の最新AMPニュース――amp-scriptやSXG、AMPストーリーなど
[レベル: 上級] 東京の六本木で 4 月 17 〜 18 日に開催されている AMP Conf 2019 に参加しています。 1 日目の基調講演から検索に関係する部分をピックアップします。 <amp-script> コンポーネント [05:34] AMP ドキュメントで、独自の JavaScript を実行可能になりました。 現状では、AMP が定義した JavaScript しか AMP では利用できません。 サイズが 150KB以内（圧縮前）などの制限はありますが、AMP JS 以外の JavaScript が使えるようになるのは大きな変革です。 詳細は公式ドキュメントを参照してください。 Next.js [06:33] Next.js が AMP を正式にサポートしました。 React の SSR が AMP で利用可能になります。 詳細は Next.js の公式アナウンスを参照し
この DOM がすごい2018: worker-dom - mizchi's blog
おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM を参照し、それに連なるものが処理時間の殆どを占めている、ということです。 off-the-main-thread の時代 - mizchi's blog DOM に触れない WebWorker でビジネスロジックを処理するのは、ある種の健全性(Universal/Isomorphic)を手に入れるための「縛りプレイ」として有用ですが、現状は実用上のメリットが殆どありません。 例えば react / redux の reducer で、ビジネスロジックを worker 側に移して処理できるぐらいアイソモーフィックに(DOMに触
WebPackaging の Signed HTTP Exchanges | blog.jxck.io
Intro WebPackaging は以下の 3 つの仕様を組み合わせたユースケースである。 Signed HTTP Exchanges: Signing (コンテンツに署名する) Bundled HTTP Exchanges: Bundling (コンテンツを 1 つにまとめる) Loading Signed Exchanges: Loading (そのコンテンツをロードする) 本エントリでは、各仕様を Signing/Bundling/Loading と記す。 現状、 Signing および Loading の仕様策定が進んでおり、 Chrome は Experimental な実装を行っている。 全体的に仕様が大きく、今後も変更される可能性が高いため、今回は実装が進んでいる Signing に絞り、ユースケース、仕様、および本ブログへの適用を中心に解説する。 Signing (Si
FirebaseとAMPでCDNをフル活用したWebサイトを作る（Google I/O 2018）
このセッションではタイトルの通り、FirebaseとAMPを駆使して高速なWebサイトを作る方法を紹介している。 セッションのまとめ 🚀イントロ 何はともあれ表示速度が大事 ウェブサイトには2種類ある CASE #1 メールクライアント エントリーポイントが１つ 認証が必要 ユーザーが1日中アクセスし、絶え間なく更新される インタラクティブ CASE #2 コンテンツサイト 特定の記事へのディープリンク 誰でもアクセス可能 個々の記事ページは頻繁に更新されない 読むことがメイン 「コンテンツサイト」の高速化が今回のトピック 初期ページ読み込みの最適化 ネットワークのラウンドトリップを最小化 レンダリングをブロックするJavaScript / CSSを最小化 ネットワークのレイテンシを最小化 ⚡️AMP（Accelerated Mobile Pages） AMP HTMLは従来のHTMLと
こんなに詳しく解説された本は初めて見た！SEOに関する技術的な側面から徹底的に詳しく解説された良書
SEOに関する技術的な側面から徹底的に詳しく解説された良書を紹介します。 サイトの現在状況の把握から、Googleの検索エンジン、サイトの高速化や構造化マークアップ、AMP対応、内部施策と外部施策、施策の効果検証まで、SEOに必要な知識と情報がこの一冊にすべてまとまっています。 SEOの解説書というと、なんだかぼんやりしたイメージがありましたが、本書では技術的に、しかも具体的に詳しく説明されているので、今まであやふやだったことも非常にクリアになると思います。 本書は中級者向けの解説書です。中級者向けとは言っても、SEOにはじめて触れる人でも大丈夫です。基礎から徹底的に詳しく解説されています。 SEOやマーケティングの担当者はもちろん、実装を担う制作者も目に通しておくべき一冊だと思います。構造化マークアップとか、高速化、AMP対応など、コードの解説も具体的で非常に充実しています。 Googl
amp-date-picker がリリースされました！
.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 #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 71 Ads API 11
AMPページをPWA化する。AMPでServiceWorkerを使う方法 - Qiita
AMP縛りでページ作ったけど、やっぱりPWA化もしたいと思いやってみたらあまりにも簡単にできたので手順を残しておきます。 出来上がったページをLighthouseで計測した結果、PWAの点数は100点満点でした。 TL;DR Web App Manifest Generator使ってmanifest.jsonを生成 amp-install-serviceworkerでAMPでもService Worker動く workboxでService Workerコードを簡単に生成 AMP(Accelerated Mobile Pages)とは モバイルページを高速化するためのもの 速くするというより遅くしない 詳しくはampproject.orgを見て下さい PWA(Progressive Web Apps)とは Webとネイティブアプリの良いところを合わせてUXを良くしようとする仕組み オフライ
AMP/PWA をどこで/いつ使うか - Qiita
某所で使った資料の公開版 用語整理 PWA: ネイティブアプリのようなUXを提供するための機能群 SPA: JSで遷移するシングルページアプリケーション AMP: 後述 PWAMP: AMPで流入させてPWAを起動する形式 MFI: モバイルファーストインデックス いまさら聞けないPWAとAMP アメブロ2017: Isomorphic Web Appの進化編 AMP とは イニシャルビューのためのHTMLの特殊なサブセット GoogleにホワイトリストされたHTML属性しか使えない GoogleにホワイトリストされたJSプラグインしか使えない CSSはHEADに全部書く AMP仕様を満たすと、Googleがキャッシュして、モバイルの検索流入ではそのキャッシュを使う HTTPS必須 必ずしも全ページをAMPに対応する必要はない PWA: ServiceWorker の機能 リソースの先読み
App Shell モデルの素振り（後編）SSR なき世界観を模索してみた
3. その他 SPA にありがちな懸念点の検討 書き終わって読み直すに、いくつかの方法論は浮かぶが思った以上にやってみねぇと分からんという感じです。 ここでは SPA + SSR における完全な HTML を生成するサーバーサイドと、SPA + BFF (Backend For Frontend) くらいのゆるやかなサーバーサイドを別のアプローチとします。どのみち完全に静的な HTML と API サーバだけで複雑な SPA を成り立たせるのは無理があるので BFF の支援は前提に入ります。 また、SPA + SSR のダルさの根源は node の CPU ぶん回し対策や、キャッシュサーバーの管理などを伴うキャッシュストラテジーの煩雑性と定義します。単純に SPA + SSR を実現するだけなら道具も成熟してきているので、さほど難しくはなくなってきているという扱いにしておきます。 3-1.
第 2 四半期の 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 HTMLの拡張コンポーネントとAMP対応ページのデバッグ | さくらのナレッジ
AMP対応ページではJavaScriptの実行が制限されている。そのため、サイト独自の動的な機能などはそのままでは実装できない。今回はこれに対応するための「拡張コンポーネント」と、AMP対応ページのデバッグについて解説する。 AMP HTMLの拡張コンポーネントを利用する 前編記事で説明したとおり、AMPではページ内に画像を埋め込む際にimgタグではなく、「amp-img」タグを利用する。また、「amp-pixel」や「amp-video」といったタグも用意されている（表1）。これら3つのタグは、「Built-in Components」（ビルトインコンポーネント）と呼ばれている。 表1 AMP HTMLのBuilt-in Components タグ名 説明
AMPはニュースサイトだけじゃない、ECサイトでもAMP対応可能 #IO17JP
[レベル: 上級] この記事では、EC サイトを AMP 対応させる方法を解説します。 米カリフォルニア州マウンテンビューで先週開催された Google I/O 2017 で僕が参加したセッションにもとづきます。 AMP はニュースサイトやブログのような静的コンテンツを提供するサイトに向いています。 一方で、EC サイトのようなダイナミックな機能を必要とするサイトには向いていません。 向いていないというよりも、機能不足で実装不可能と行ったほうが正確でしょうか。 しかし状況は変わりつつあります。 AMP プロジェクトは EC サイトにも AMP を使えるように取り組んでいます。 AMP 対応した EC系サイトも増えつつあります。 それでは、どのようにして EC サイトをAMP 対応させていくかを、これから解説します。 EC サイトで利用できる AMP コンポーネント EC サイトでよく使われ
PWA＋AMP＝PWAMPと言う考え方 | フロントエンドBlog | ミツエーリンクス
2017年5月17日から19日かけてGoogle I/O 2017が開催されました。 Smart ReplyやGoogle LensなどのAI技術、Android Go/Oに加え開発言語であるKotlinの正式化、Google Assistant iOS版の提供、Google Assistantを搭載したGoogle Homeの日本発売など、さまざまな技術躍進が発表される中で、やはり個人的にはPWAとAMPに関する内容が気になる所です。 PWAに関してはProduction Progressive Web Apps With JavaScript Frameworksにおけるフレームワーク上の「PRPL」のことを書くべきだとは思いますが、今回はFrom AMP to PWA: Progressive Web AMPsからAMP＋PWA対応を行ったサイトがどのような恩恵を受けるのか、一部抜粋
AMP から Progressive Web App へ
.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 Conf 2017 に参加してきました - ぐるなびをちょっと良くするエンジニアブログ
みなさまいかがお過ごしでしょうか。フロントエンド開発グループの佐藤雅ｙです。 2017年3月7日と8日にニューヨークで開催された AMP のカンファレンス「AMP Conf 2017」に招待していただき、参加してきました。 今回は1日目のレポートになります。 AMPとは カンファレンスの内容に触れる前に、AMP をご存じない方のために、ちらりと AMP について触れておきます。 まず、AMP = Accelerated Mobile Pages の頭文字 です。 実装方法等はオフィシャルサイトが最新で基本となりますが、オフィシャルブログや、Google他サービスブログ等で、事前に仕様やマイルストーンが公開されることも多いです。 AMP の昨今 もともとの AMP の成り立ちは、モバイルニュースサイトの表示速度の遅さに業を煮やした有志たちが、モバイルサイトのパフォーマンスを改善させるために考
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Maximize Yahoo! JAPAN’s UX with AMP and Signed HTTP Exchanges #AMPConf
Documentation: <amp-twitter>