AMPをやることになったときに見る記事をまとめましたが、そんなことより公式https://www.ampproject.orgに生きるべきでは。
と思ったんですが、ない！
Convert HTML to AMPの日本語版がない（2017年10月現在）
無いのでおおよそを訳します。
Convert HTML to AMP
https://www.ampproject.org/ja/docs/tutorials/converting
このチュートリアルでは、AMPのコンセプトと、AMPがいままでのhtmlとどのように違うかを知ることができます。
このチュートリアルを終えるとき、あなたは既存のhtmlからAMPのページを作ることができるようになっています。
学べること
- AMPサイトの基礎のマスター
- AMPページとhtmlページの違いの理解
- htmlページをAMPページに変換する
- AMPページの検証
- 見つけてもらえるAMPコンテンツの準備
作れるようになるもの
- AMPの仕様に準拠した、スマホニュースサイトにある機能を組み込んだ、シンプルなニュース記事ページ
Setting up 準備
https://www.ampproject.org/docs/tutorials/converting/setting-up
前提条件
チュートリアルを始める前に、次のものが必要です。
- 基礎的なHTML、CSS、javascriptの知識
- javascriptコンソールを検証できるお好みのブラウザー
- お好みのテキストエディタ
開発環境の準備
ステップ１：コードのダウンロード
サンプルコードをzipまたはgitからダウンロードして下さい。
（略）
ステップ２：サンプルページの実行
サンプルページをテストするためには、webサーバーからファイルにアクセスする必要があります。
テストのために一時的なローカルwebサーバーを作る方法はいくつかあります。
いくつかのオプションを示しますので、あなたにとって一番良いものを選んでください
（略）
ローカルwebサーバーが準備できたら、サンプル記事ページにブラウザでアクセスしてください。
Building a regular HTML page 普通のhtmlページを作る
https://www.ampproject.org/docs/tutorials/converting/building-page
プロジェクトのフォルダ（ディレクトリ）の中に、article.htmlというファイルがあります。
これからつくるAMPニュース記事のもととなるものです。
- article.htmlのソースコード全てを、新しいファイルにコピーします。
- コピーした新しいファイルをarticle.amp.htmlとして保存します。
（略）
これは一般的なニュース記事の要素（css、javascript、画像）を含む単純なページです。
AMP版の記事は、今はまだ単に元ページのコピーです。
早速AMPに変換していきましょう。
まず、AMPライブラリファイルを追加します。
これだけでは有効なAMPページにすることはできませんが、ページをどのように修正すればいいかを理解するのに役立ちます。
<head>タグの下に、AMPライブラリのコードを追加します。
追加したら、article.amp.htmlをブラウザで開きます。
そして、開発者ツールのConsoleを開きます。
すると、以下のようなログエントリが表示されるでしょう。
Powered by AMP ⚡ HTML
AMPライブラリは、AMPバリデーターを含んでおり、ページが有効なAMP文書でないことを知らせてくれます。
AMPバリデータを有効化するには、以下のフラグメント識別子をURLに追加します。
#development=1
たとえば、
http://localhost:8000/article.amp.html#development=1すると、開発者ツールのConsoleにバリデーションエラーが出ていることが確認できるでしょう。
（確認するためには、手動でページを更新する必要があります）
有効なAMP文書を作るためには、これらのエラーをすべて修正する必要があります。
それこそ、これからここで行うことです。
その前に、モバイルデバイスのシミュレートを、ブラウザの開発者ツールでやってみましょう。
（略）
Resolving validation errors バリデーションエラーを解決する
https://www.ampproject.org/docs/tutorials/converting/resolving-errors
このセクションでは、AMPページのバリデーションエラーを解決します。
コンソール上の表示順とは異なることがあります。
文字セットを含める
まずはこのエラー修正からはじめましょう
The mandatory tag ‘meta charset=utf-8’ is missing or incorrect.
テキストを正しく表示するためには、ページの文字セットを指定する必要があります。
meta charsetも<head>タグの最初の子でなければなりません。
このタグを最初に指定する必要があるのは、このタグのまえに追加されたコンテンツの再解釈を避けるためです。
<head>タグの中の最初の行に以下のコードを追加します。
<meta charset="utf-8" />
ファイルを保存してページを再読み込みしてください。
文字セットのエラーは表示されません。
canonical linkを含める
続いてはこちらのエラー
The mandatory tag ‘link rel=canonical’ is missing or incorrect.
全てのAMP文書はcanonicalのリンクを必要とします。
（略）
このチュートリアルではオリジナルのhtmlは、変換する元となるhtmlです
<meta charset=”utf-8″ />タグの下に下記のコードを追加します。
<link rel="canonical" href="/article.html">
メモ：AMPページ単体のページを作ることもできます。その場合でもcanonicalは必要ですが、AMPページそのもの（自分自身）を設定することができます。
ページを再読み込みすると、canonicalリンクのエラーは表示されなくなります。
AMP属性を指定する
AMPは、ページをAMPとして宣言するために、ルートの<html>エレメントに属性を必要とします。
⚡属性を<html>タグに追加します。
<html ⚡ lang="ja">
（略）
viewportを指定する
次はこのエラー
The mandatory tag ‘meta name=viewport’ is missing or incorrect.
AMPにはviewportのwidthとminimum-scaleの定義が必要です。
それらの値は、それぞれdevice-widthと1として定義する必要があります。
viewportは<head>タグ内に記述します。
以下のコードを<head>タグ内に記述します。
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
（略）
外部スタイルシートの再設置
（略）
<head>タグ内のスタイルシートのlinkタグに対してエラーが出ます。
AMPではページのロード時間をできるだけ早くするため、外部スタイルシートを使うことができません。
全てのスタイルシートはAMP文書内に、<style amp-custom></style>タグを使って書く必要があります。
<style amp-custom> /* The content from base.css */ </style>
エラーを解決してみましょう。
- スタイルシートを読み込むlinkタグを削除し、<style amp-custom></style>に置き換えます。amp-custom属性は必須です。
- 外部スタイルシートの中身をすべてコピーして、<style amp-custom></style>の中に貼り付けます。
（略）
サードパーティ製のjavascriptを外す
cssはインライン展開することでAMPでも比較的簡単に再現できますが、javascriptでは違います。
一般的にAMPではスクリプトは次の2つの主な要件を満たす場合にのみ許可されます。
- 全てのjavascriptが非同期であること。
- AMPライブラリ及び、ページ上のAMPコンポーネントであること。
これは下記（下記部分は略）の点をのぞいて、すべてのサードパーティ製のjavascriptのAMPでの使用を事実上排除します。
（略）
文書上から、javascriptを参照しているタグを削除します。
（略）
AMP CSSの定型文boilerplateを含める
（略）
全てのAMP文書は以下の定型コードを必要とします。
<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>
これを<head>タグ内に追加します。
（略）
<img>を<amp-img>に置き換え
AMPには<img>タグを置き換えるように特別に設計されたwebコンポーネントがあります。<amp-img>です。
<img>を<amp-img>に置き換えて、ページを読み込むと新しいエラーを受け取るこでしょう。
Layout not supported: container
The implied layout ‘CONTAINER’ is not supported by tag ‘amp-img’.
なぜ<amp-img>が別のエラーの引き金になるのかというと、<img>をただ置き換えるものではないからです。amp-imgを使うためには追加の要件があります。
AMPレイアウトシステム
先ほどのエラーは、amp-imgがcontainerのレイアウトタイプをサポートしていない、ということを示しています。
AMPの設計におけるもっとも重要な概念の一つは、ウェブページのレンダリングに必要なDOMリフローの量を削減することです。
（略）
containerタイプだと判断されたのはなぜかというと、amp-imgにheight属性が指定されていなかったためです。
htmlではページ上の要素の固定幅と高さを常に指定することにより、リフローを減らすことができます。
AMPでは、要素のアスペクト比を事前に決定できるように、amp-imgのwidthとheightを定義する必要があります。
下記のようにwidthとheightをamp-imgに追加しましょう
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>
これで有効なAMP文書ができました。
が、画像がページ上で不自然に配置されているため、あまり素敵に見えません。
そのままではamp-imgに指定した高さと幅で固定されますが、画面サイズに関係なく画像が拡大縮小されるように調整できれば素敵ではないでしょうか。
幸いにも、AMPは指定した幅と高さから要素の縦横比を計算できます。
（略）
responsive属性を画像に設定してみましょう。
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
画像は正しい縦横比のまま、画面の幅いっぱいに広がりました。
完成！
ページを再読み込みすると、以下のようなメッセージが表示されます。
AMP validation successful.
2017年10月現在存在しない、Convert HTML to AMPの簡易版日本語訳。でした。
コメント