サイトへのAMPのとても簡単な導入手順 結城永人 - 2017年9月26日 (火) 普段、Google検索を使っていてAMPの実装サイトはブラウザで瞬時に開いたりして表示速度が圧倒的に速い。というのもGoogleにサイト内容がキャッシュされていてサイトへ行かずに出て来るためだ。 AMPサイトならばGoogle検索でのサイト評価が上がるとも聞かれるし、訪問者の利便性を高めると共に検索エンジンからのアクセスアップにも繋がるはずだ。 羨ましくて自分でもやってみたいと思うけれども既存のサイトを専用のコードで書き換えなくてはならないか、またはオリジナルとは別のAMPサイトを作成しなくてはならないのが大変だから無理だと何もせずにいた。 ところが好奇心からサイトへのAMPの導入手順を調べていたら意外とできそうな感じがし来て実際にやってみたら最初はエラーを連発して相当に苦しんだにしても色々と細かく学びながら成功するや否やとても簡単だったと振り返ってしまった。 有効なAMPページです｜AMPテストGoogle メインのホームページ（ブログへ移転）にAMPを実装すると決めた。専用のコードや通常のJavaScriptが使えないせいで、取り入れるだけでも表示速度が上がるのが嬉しい。なのでオリジナルをAMPサイトに書き換えてどちらでも表示できるようにした。 Googleアナリティクス（アクセス解析）やGoogleアドセンス（サイト広告）も対応しているから以前と全く変わらないし、デザインでもソーシャルメディアの埋め込みやソーシャルボタンも提供されていて慣れると却ってオリジナルよりもAMPでのサイト作成の方が楽な部分が増えていて良いと思う。 難点としてはプロフィールで音楽にHTML5のaudioタグを使っていたけれどもサーバーがSSL暗号化通信の「https」ではなくては反映しなくて断念せざるを得なかった。Googleドライブに音楽をアップロードして埋め込みコードを取得してAMPの専用コードに修正して取り込むように変更した。文章と画像は「http」のサイトでも大丈夫だけれどもファイル／メディアによって表示されない場合があるから注意しなくてはならない。 もう一つHTML5でcache-manifestを使ってブラウザにサイトをキャッシュして二回目以降の閲覧での高速化を図っていたけれどもAMPとは両立しないんだ。エラーになってしまうので、外すしかなくなった。オリジナルとは別にAMPサイトを作って振り分けないかぎり、cache-manifestは使えない。 目次サイトへAMPを実装するための必須の五項目headタグのamp指定についてmetaタグのcharset挿入にいてmetaタグのview-port挿入についてlinkタグのcanonical挿入についてAMP対応のstyle設定についてAMP対応のマークアップで出易いエラー サイトへAMPを実装するための必須の五項目 headタグのamp指定metaタグのcharset挿入metaタグのview-port挿入linkタグのcanonical挿入AMP対応のstyle設定 既存のサイトをAMPに変更する場合にはHTMLをAMPの専用コードに書き換えたり、通常のHTMLの一部やJavaScriptを外したりしないとエラーが出てしまうかも知れない。 只単にAMPに対応するための標準設定は五つしかないし、規定通りにやれば済むから決して難しくはないんだ。 標準設定のオリジナルとAMPの共通サイトのサンプルのソースコード <!DOCTYPE html> <html amp> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0"> <link rel="canonical" href="正規URL"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style> <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> （中略） </body> </html> AMPはHTML5の設定を下地にしているので、そこからだと導入する手間は少ない。 HTML4以前のサイトだとマークアップの仕様を完全に変更する必要にも迫られる。 無料サービスのホームページやブログでhHTML5でなければマークアップの設定も含めてhead内を操作できないとAMPの標準設定は不可能だから自力では導入できない。 htmlタグのamp指定について <html amp> サイトのhtmlタグに「amp」を追加する。記載は絵文字の稲妻（⚡）でも大丈夫らしい。好みに応じて使い分ける。オリジナルとAMPで二つのサイトを作るならば絵文字の稲妻を使うと違いが一目で分かって良いかも知れない。 metaタグのcharset挿入について <meta charset="utf-8"> サイトの文字コードが「utf-8」でなくてはならない。HTML5ではもう既に入っている場合もある。二つ入れると重複でエラーになるからサンプルのソースコードのコピー＆ペースには注意するべきだ。 metaタグのview-port挿入にいて <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0"> サイトのモバイルフレンドリーで画面幅を自動で調節するmetaタグのviewportだけれども「minimum-scale=1」が付いてないと駄目みたいなので、最初から使っている場合でもちょっと違うかも知れないから確認しておきたい。 linkタグのcanonical挿入について <link rel="canonical" href="正規URL"> サイトの正規URLを指定するlinkタグのcanonicalが欠かせなくてオリジナルとAMPで共通のサイトを作成する場合には使い方は何も変わらない。 正規URLの記載は絶対パス（http～）で行うのが完全な形だから相応しい。 オリジナルとAMPを振り分けて二つのサイトを作成する場合には指定が変わる。 前者から後者を指定するのは<link rel="amphtml" href="AMPサイトのURL">で、後者から前者を指定するのは<link rel="canonical" href="正規URL">（共通版と同じ）になる。 AMP対応のstyle設定について <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style> <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> サイトのheadタグの終了タグの</head>の直前に専用のJavaScriptの<script async src="https://cdn.ampproject.org/v0.js"></script>を記載する。他の部分は必ずしもその真上とサンプルのソースコードの順番通りでなくてもhead内ならば大丈夫だ。 AMPのstyleタグのamp-boilerplateの中身は余計な隙間があるとエラーになるから、全部、詰めないと駄目で、属性の値の並びを除いて要素間は隙間を残さずに改行もしないように記載しなくてはならない。 他のstyleタグは構わないけど、しかしAMPを設定するためのamp-boilerplateが入ると受け付けない。 AMPの標準設定の必須の五項目が完了したらAMPプロジェクトの検証ツール（ウェブインターフェース）でエラーが出なければ対応済みになる。 Google検索で大丈夫かどうかはGoogleのAMPテストで確認できる。 既存のサイトをAMPに変更すると他のところでエラーを連発する可能性が非常に高い。 現状、AMPの公式サイトのマークアップの検証が日本語に対応してなくてどんなエラーが出ているのかが英語で分からなくて余計に大変だったりもする。 実際にやってみて気がかりなところを幾つか挙げて纏めておきたいと思う。 AMP対応のマークアップで出易いエラー 通常のCSSはhead内に一回だけ<style amp-custom></style>の形で使用できる。 概して従来の基本的なstyle要素の開始タグに「amp-custom」を付けるだけで、中身を完全に保ったまま、AMPに移行できるような感じになっている。 サポートされるCSSによればインラインスタイル（body内でのHTML要素へのstyleタグの記載）や「!important」（最優先の指定）やカスタムフォントを除いてのlinkタグのstylesheet（外部CSS）などが受け付けなくてAMP対応で残してしまったためにエラーを引き起こしそうなところだ。 そしてCSSの容量は50KBまでに制限されているからソースコードが越える場合には圧縮したり、削減したりしなくてはならない。 通常のJavaScriptは使用できない。全て消しておくしかない。使用できるのはAMP専用のものを除いて「application/Id+json」というJSONのタイプだけみたいだ。 AMP専用のものは標準設定の他にもソーシャルメディアの埋め込みなどで使うけれども全てサイトのHTMLのhead内に記載しなければならない。 通常のHTMLで変更しないとエラーのタグがある。最も多いのは画像のimgだろう。AMPの専用コードではamp-imgで、しかも記載するには開始と終了のタグが両方とも求められる。さらにサイズの属性も横と縦の「width」と「height」が必須になっている。 AMPの画像を表示するサンプルのソースコード <amp-img src="画像URL" width="幅" height="丈" alt="画像の説明文" layout="responsive"></amp-img> 画像の説明文のaltは通常のHTMLと同じで、layoutが専用のコードなんだ。 サイズを指定するとデバイスの画面幅が狭いとはみ出す可能性があるのを「responsive」を指定すると止められる。 AMPは基本的にサイトのスマホでの高速化のために実装するから小さな画面で画像がはみ出すデザインは是非とも避けておきたいからlayout属性は重宝する。 注意点として「responsive」を指定するとデザインの画面幅よりも小さな画像でも画面一杯に広がる。低画質だと粗が目立つ恐れもあるので、避けるのならばlayout属性は記載しないでおくか、またはCSSの「max-width」を使って最大幅を抑えると良い。 HTML5だと文章と画像以外のファイル／メディアを表示できるけれども記載のパターンは画像と似ていて元々のタグに「amp-」を付けてサイズを指定する。 ただし音楽のamp-audioタグのように専用のJavaScriptがhead内に必要なものもあるから追加しなくてならないし、サーバーが「https」でなければエラーは出なくても実際には動かないという場合には対策しなくてはならない。 メインのホームページでAMP対応に成功して標準設定と専用コードの使い方を覚えてしまえば導入手順はとても簡単だと感じた。 元々、マークアップそのものは長くなかったし、新しく変更するのにも時間はかからなかった。 やる前は無理だと手を伸ばす気持ちにさえもならなかったにせよ、基本を身に付けると他にさらに色んな表現が可能だと思うし、かねて望んでいたAMP対応で久々に大きく着手して上手く行ったので、サイト作成の面白さにも改めて気付かされた。 参考サイトGoogle検索でのAMPに関するガイドラインAMP（Accelerated Mobile Pages）とは？今から導入するための基礎知識と手順書マニュアルAMPでレスポンシブ・レイアウト画像のwidthが反映されないスタイルとレイアウトamp-audio コメント 新しい投稿 前の投稿
吉幾三の怒りに触れる横着な議員連中は日本の崩壊を引き起こす 歌手の 吉幾三 が自身のYouTubeチャンネルの 吉幾三チャンネル【公式】 に 私は怒ってます！ を掲載して、一体、何だろうと観てみたら飛行機で乗り合わせた国会議員の態度が悪いのを見兼ねて黙っていられなかった。 今の日本の不味い政治状況を良く表している感じがしてさらに酷くな...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 伊良部秀輝が大好きだった記憶 Hideki Irabu records hi...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
松本典子の今世紀最大の失敗という笑い話 日本のアイドル黄金時代と呼ばれる1980年代の真っ只中に十六歳で歌手としてデビューして、その後、十九歳から異色にも 志村けん と共にお笑いでも活躍した 松本典子 という芸能人がいた。二十四歳で野球選手の 苫篠賢治 と結婚して芸能界から殆ど姿を消して、大分、経っているので、今は知ら...
ナサニエル・ホーソーンの若いグッドマン・ブラウンの日本語訳 十九世紀のアメリカの作家、小説家の ナサニエル・ホーソーン の小説の 若いグッドマン・ブラウン （1835）の日本語訳を行った。一つの文学作品として人間の洞察力に富んだ優れた内容を持つだけではなく、表現も意義深いから外国語の英語の聞き取りと読み取りの教材としても最適だと感じる。 ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL／直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
JavaScriptの繰り返しボタン：押した回数を数えて実行結果を元に戻すプログラム サイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてHTMLのinputやbuttonの開始タグに他の属...
結城永人
結城永人
コメント