制作工程ブログ
おいでよコードの森

TearsSwitch、AMP対応はじめるってよ

  • 2016年04月08日|
  • 若林 遼|

GoogleのAMP

「TearsSwitch、AMP対応はじめるってよ」とは

『TearsSwitch、AMP対応はじめるってよ』(てぃあーずすいっち あんぷたいおうはじめるってよ)は、若林リョウによる日本のWeb製作、およびそれを原作とした投稿記事。

先手必勝!参考サイト紹介

・AMPとは
・AMP HTMLのフォーマット(記述ルール・英語)
・AMPの対応方法まとめ (作成途中)(書きたいことほとんど書いてた・よかった)
・爆速モバイルWeb、AMPの仕組み抄訳(Googleの意図)
・AMPが正しく設定できているかチェックする3つの方法(チェック方法)

参考サイトがAMP対応に必要なことほぼ全部です

参考サイトだけでかなり書きたかったことが書いてあります。
いやーもうハイパーリンクしただけでブログ書ききった感がありますが、それだとまとめブログで終わってしまうので頑張って書きます。

もうちょっとだけ続くんじゃよ。

AMP(Accelerated Mobile Pages)って何?

一言でいえば、表示速度改善を目的としたモバイルサイトから重い要素の「切り捨て」です。

動的コンテンツとか重くなることが原因となるタグなどを禁止にしたり、読み込みを早くするためのフレームワークです。
このルールを守って構築すればGoogle側でそのコンテンツをキャッシュしてくれます。
で、ユーザーが対応してるページにアクセスしたらGoogle側でそのキャッシュを即レスで直接ユーザーに返してくれます。
基本無料。
一部無料。
無料で利用できます
巨大な資本力を感じますね。
↓↓↓巨大な資本力を感じる動画はコチラ↓↓↓

AMPのルール

htmlタグをhtml ⚡、もしくはhtml ampと書いたり、
使用禁止にされているタグを使わない(消す)、もしくは置き換える、AMP用のJSファイルを読み込むということが大まかなルールです。
例えばimgタグは
「Replaced with amp-img.」
「amp-imgタグに置き換えてね」とか
formタグは
「Prohibited. Support coming in the future.」
「禁止、将来はサポートするよ」とか
Googleのお約束を守りながら書き直します。
1個1個直していきます。
後から書き直すとなるととっても面倒くさいです。

フォーマットを一生懸命翻訳してましたが、ここ↓に書いてありました。やったぜ。
・AMPの対応方法まとめ (作成途中)(書きたいことほとんど書いてた・よかった)

これに対応したページには、当然禁止されたタグを使ったコンテンツや動的コンテンツは存在しません。
元ページがリッチな動きでガチャガチャ動いてても、対応後は「もしもボックス」で存在を消された後みたいになります。
つまり設計やデザインの段階からAMP対応させるテンプレートについては、AMP構築ルール内で考えないといけません。
後から変えるとなると動的コンテンツを消した後のデザインをまた考え直さないといけないので、
技術的に大変じゃなくても確認やすり合わせなどの違う部分で工数が掛かったり、とにかく時間掛かってめんどくさかったりします。
作ろうとしているWebサイトをAMP対応まで考える場合は、設計の段階でどのテンプレートはAMP対応するのか予め決めておきましょう。

AMP対応箇条書き

★1から構築する場合
(1)テンプレートを元にheadタグ内を記述。
・AMP HTMLのフォーマット(記述ルール・英語)・AMPの対応方法まとめ (作成途中)(書きたいことほとんど書いてた・よかった)
(2)メインコンテンツを作る
(3)できたらチェックする
・AMPが正しく設定できているかチェックする3つの方法(チェック方法)

★AMP対応するために書き直す場合
(1)AMP対応後の設計とデザインを出す
(2)headタグ内をAMP対応に書き直す。
(3)その他のタグをAMP用タグに置き換えていく
(4)できたらチェックする

なんや!?(JSON-LDについて説明して?)

JSON-LDについてです。
参考サイト紹介
・Googleが勧める、SEOで今注目の2つの技術はJSON-LDとWeb Components
・【徹底解説】JSON-LDを使ったschema.orgの記述方法
引用:JSON-LDは、Linked Data(リンクト・データ)を記述するためのフォーマットです。

なんや!?(Linked Dataについて説明して?)

引用:Linked Open Data(リンクト・オープン・データ、略名: LOD)は、ウェブ上でコンピュータ処理に適したデータを公開・共有するための技術の総称である。従来のウェブがHTML文書間のハイパーリンクによる人間のための情報空間の構築を目的としてきたことに対応して、Linked Open Dataでは構造化されたデータ同士をリンクさせることでコンピュータが利用可能な「データのウェブ」の構築を目指している。
by wikipedia

だからなんや!?(つまりどういうこと?)

人間はWebサイトを読んでいれば「これはWeb製作のサイトなんだな」とか「個人ブロガーのブログなんだな」とか理解できますが、それをコンピュータに伝えようとすると大規模な辞書持たせないといけなくなったり高度な言語処理を要求されたり、それでもまだ正確に伝えきれなかったりして辛い、ならコンピュータに伝わるような記述を人間にさせよう、ということです。
headタグ内に記述します。
具体的にどういう記述なのかと言うと
・JSON-LDの指定
こちらは必須なので詳しい解説が載っている下記リンク先で確認して記述してください。
Webサイトの住所氏名電話番号を書くようなものなので特に難しいことは要求されません。
属性に沿った値を記述していけばOKです。
・Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【JSON-LD編】

なーんや(なんだ、簡単そうじゃん!)

※めっちゃ関係のない大阪弁のどうでもいい話:大阪人でも1から10まで大阪弁で話す純度100%の大阪人はいない。だからを大阪弁で言い直すと「やから」になるが同音に「輩(やから)」があるため文脈によっては理解しにくい、聴き取れなくなる場合がある。そういった語弊やいらぬ誤解を回避するためにあえて標準語を織り交ぜて会話するのが普通である。でなければ「なんやこれ?」「なんやとはなんや!」という事態になり兼ねない、そうならないための大阪市民の生活の知恵である。

チェッカーでOKでもconsoleで出てくるエラー

よし、できたぞ!とチェッカー
・Structured Data Testing Tool
で確認をしてエラーが無い状態にしてから実際にAMP対応ページを開いてデベロッパーツールを見ると
console(Chromeブラウザ→「検証」→「console」タブ→エラー内容のチェック)に色々とエラーが出てきます。
なんや?と思ってエラー内容を確認してみると全部AMPとは関係のないエラーでした。
一瞬これで混乱する人もいるかもしれないのでこのとき出てきたエラーの内容について書きます。

・Uncaught SecurityError
テストで広告を貼ってたりすると出てきます。リンクが一致してないというエラーです。
・ERR_FAILED
大抵はYoutube埋め込み等していたらGoogleCastインストールしてというエラーです。知らんがな。
・Mixed Content
混在コンテンツに反応してエラー出ます、これが出たときはHTTPS上にHTTPコンテンツが読み込まれたときです。盗聴などを気にして出してくれているようですね。テストでいれた広告が原因で出てきました。

上記は参考程度にして調べるときはエラー内容の詳細をよく読んで対応してください。

常に最新の技術と向き合う

Webサイトは24時間働く営業マンであるという前提で話をすると、呼び出してから表示までにいつまでも待たせるというのはお客様の時間を奪う営業マン、もしくは30分近く待機させるコールセンターという解釈ができます。
外出先でモバイルでWebサイトを確認するようなユーザは基本的には短い時間での閲覧が多いはずです。
その条件下でリッチな動きを見せるために表示速度が遅くなってしまうというのはユーザビリティの低下を招いているのではないか?果たしてスマートフォンやアイフォンでそこまで高度な表現をWebに求めているのか?
きっと表現の自由を犠牲にしてでも、表示速度改善の方が優先であるということが今回のGoogleの意向なのでしょう。もちろん将来的には動的コンテンツもAMP HTMLで構築できるようになるかもしれませんが、現時点では表示速度の方が優先、というのがGoogleの出した解答です。

そう、まさにあのイナズママークのようにレスポンス早くしろ、とおっしゃっているのです。
あの絵文字⚡には神のイライラが雷として込められているのです。
地震、雷、火事、Google。

Google先生にお尻を叩かれながら明日へ、未来へ、
クライアントの皆様と共に成長していける製作会社を目指して日々日々精進していきます。

※この記事は2年間ブログを更新しなかった男が書きました。