とおりいっぺんAMPになじむ

これまで何度か、サイトの全面書き換えを余儀なくされるような、CSSの波、HTML5の波、レスポンシブの波‥‥といった大波が来ました。 どこまでやるのか、いつやるのか、どこからやるのか、そのたびに迷いましたけど、この「AMPの波」もまた、大きなうねりになるんでしょうか。

人魚兵
AMPでは凝ったデザインは避けたほうがいいって言われてるそうやないか。
「吹き出し」とか、だいじょうぶなんか?

CMSのプラグインで通常ページから自動変換したときに、凝ったデザインだと崩れてしまうことが多いからでしょうね。
 でも、はじめからAMPを意識してコーディングすれば、たいていだいじょうぶなもんですよ。
 「吹き出し」だって、ほらこのとおり。amp-imgタグで画像のサイズをいちいち書かないといけないのが面倒ですけどね。
ウェブマスター
AMPの第一歩
いま、ご覧のこのページが、
わたしの初AMPになります。
ま、
なにごとも勉強ですから、
CMSは使わず、
手打ちでコーディングしております。
AMP対応というと、
PCで見る通常のページとは別に、
AMP仕様のページをもうひとつ作って、
閲覧端末によって切り替えて表示
‥‥っていうのが基本的なしくみなんですけど、
そんなめんどくさいことは誰だって歓迎しないはず。
つまりけっきょくは、
AMPに対応したページをはじめからひとつだけ作り、
PCでもそれを表示させることになるでしょう。
どんな画面サイズでも常に最適なデザインをレスポンシブで実現する、
使いまわしのスキル

ますます重要になってきますね。
AMPの制約の中で、
ですね。
はやらせ太郎
せっかくがんばって作りましたんで、ぜひね、ブラウザの横幅を広げたり狭くしたりして、レスポンシブ感を味わっていただきたいですね。 モバイル端末でご覧の方はぜひPCでも。

ダメなことの数々
AMP(Accelerated Mobile Pages)には独自の決まりがいっぱいあります。
あれもダメ、これもダメ
なんか、
あかんことばっかりで、
グーグル先生に叱られっぱなしな気になってきますが‥‥
なんたって神さま 仏さま グーグルさまですからな。
言いつけに逆らうことはできませんね。
どうせいつか対応しないといけないなら、
なんかの機会をとらえてなるべく早めに習得しておくことです。
グーグル先生の主導で動いているプロジェクトですからね、
>あの話、
>近ごろ聞きませんけどどうなりましたかね?

‥‥みたいなことにはならないでしょう。
決められた書式を守れというなら守りますが、
いくつか、
けっこう厳しい制約条件があります。
JavaScriptが使えないなんてことになると、
動的ページの対応は最後まわしにせざるをえないでしょう。
imgタグが使えない(amp-imgに置き換え)ってことは、
通常ページのコンテンツ部分をそのままコピペするだけの作業では対応ページを作れないってことですし。
外部CSSの読み込みができないということは、
静的なページを手作業でコーディングしていこうっていう選択肢が、
絶望的にしんどくなることを意味していて、
ボリュームにもよりますがCMSが必須になるでしょう。
個人的には、
iframeがそのまま使えないのが痛いです。
いっぺん書いたソースを最大限に使いまわしたい無精なわたしはiframe大好きだし、
従来サイトでは必須なので。
代わりに amp-iframe って要素を使えということらしいけど、
これの制限がまたビミョ~。
>ファーストビューの領域の75%よりも下、
>または最上部から600pxより下に配置

とか。
あ~痛いε=( ̄。 ̄;)
はいはい、
使うのがイヤになりますけど、
サイドバー部分(PCでのみ表示されます)に無理くり使ってみました。
やらないといけないことの数々
案ずるより産むが易し
で、
まずは素直に、
決められた書式に従って1ページ作ってみることでしょ。
とりあえずここに、
ソースがまちがってたら教えてくれるサイトがあるので、
自分の書いたソースをなんべんもコピペしながら、
グーグル先生に叱られなくなるまでやり直します。
いきなり、
>構造化データ
っていう、
耳慣れない作業が出てきます。
こんなんです↓
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting" ,
"mainEntityOfPage":
  {
  "@type": "WebPage" ,
  "@id": "http://www.hayaraseya.com/tmp/20170725.htm"
  } ,
"headline": "とおりいっぺんAMPになじむ" ,
"image": 
  {
  "@type": "ImageObject" ,
  "url": "http://www.hayaraseya.com/img/hayalyo_h.png" ,
  "height": 117 ,
  "width": 960
  },
"datePublished": "2017-07-25T00:00:00+0900" ,
"dateModified": "2017-07-25T00:00:00+0900" ,
"author": 
  {
  "@type": "Person" ,
  "name": "HayaraseTaro"
  },
"publisher": 
  {
  "@type": "Organization" ,
  "name": "M-tone" ,
  "logo": 
    {
    "@type": "ImageObject" ,
    "url": "http://www.hayaraseya.com/img/logo_amp.png" ,
    "height": 60 ,
    "width": 600
    }
  },
"description": "これからどのようにAMP対応を進めるか。"
}
</script>

この部分も、
書式が合ってるかどうかチェックできるサイト(コードスニペット側を選択)があるので、
何回かやり直しながら進めます。
(JavaScriptが使えないために、
いつも使っているシンタックスハイライターが使えず、
こんな表示になったわけですが、
ことほどさようにいちいち不便です。)

しかしいちばん手間なのはやはり、
スタイルシートの外部ファイルが使えないので、
すべての定義を総コピペしないといけないこと。
スタイルシートは、
style要素にamp-custom属性を付けて、
50KBを超えない範囲でインラインで記述することとされてます。
なので、
必須の定義とそうでないものを選り分けて、
余分な記述はなるべく減らしてスッキリさせておきます。
やらなくてもいいこと
はじめの1ページがどうにかこうにかできてしまうと、
それをテンプレートにして、
あとは本文の入れ替えをくりかえせばよいことになります。
>いろんなケースを想定して、
>できるだけ多くの仕様を把握しよう

とか、
ぜんぜん思ってません。
最低限の対応、
いま発信しているだけのことがとりあえず代替できたらそれでよろしいです、
という立場ですわたしは。
なので、
いかにもAMP仕様のサイドバー(amp-sidebar)や、
アコーディオン(amp-accordion)といったコンポーネントは、
いったん無視して採用しないことにします。
あまりにAMP依存が高いと、
従来仕様(非AMP)ページとの互換性(プログラマ用語?)が低くなって、
複数サイトをまわしていく上で気苦労が増えそうだからですね。
アナリティクス
アクセス解析のために、
Googleアナリティクスのコードを設置しないといけません。
この書き方も通常ページとちがうんですね。
まずはheadタグ内の、
AMP JSライブラリよりも前に、
以下のように記述。
<script async custom-element="amp-analytics"
 src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>

それから、
bodyタグ内でこう書く。
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-2154568-5",
    "anonymizeIP": ""
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

「UA-‥‥」の部分はサイトごとに異なりますが、
基本はこれだけです。
フィルター設定でちょっとハマりました。
特定のIPアドレス(自宅とか自社とか)からのアクセスはカウントしないように、
フィルターで除外してる方も多いと思うんですが、
それがAMPではIPアドレスが暗号化(=匿名化)されてしまうとやらで、
うまく効きません。
その対策についての情報がまだまだ少なくて、
久しぶりに英文サイトまで探しに行くハメに‥‥
ようやく見つけたのが「anonymizeIP」の箇所です。
とおりいっぺんAMPになじめたか
さてここまでのところで、
AMPになじんだといえるかどうか?
>じゅうぶんじゃね?
って
思いますがな。
従来ページのデザインと構造を、
まあまあ忠実に再現できたかなと思います。
AMP対応ページは、
使用するスタイルシートをひとつのファイルの中に書き切ってしまうことになるので、
とりあえず過去のレガシーから切り離してしまえる。
いままで書いてきたスタイル定義の数々を、
まとめて見直すいい機会になりましたな。
コードはきれいに書きたい。
しかし、
あまり見栄えに手間と暇を奪われすぎて、
伝えるべきメッセージの本質が見えなくなってしまっては本末転倒。
従来ページでは複数の外部ファイルを参照していたものを、
一気にブッコミで amp-custom に丸々コピペするのがてっとり早くていいかな。
そこらへんのバランス感覚を最優先に考えるとすると、
まあまあええ線までいけたんとちゃうかって気がします。
新たに学んだこと
Dreamweaverの機能に、
「タグをたたむ」っていうのがあります。
多少なりともサイト制作の仕事に関わっている者なら、
ゼッタイ知ってるはずの機能です。
が、
わたしはいままで使ったことありませんでした。
たたんでひらいて‥‥
って、
いちいちそんなことしなくても、
よけいなコードは下のほうにまとめるようなコーディングしてますから、
本文に集中できてました。
ところがAMPでは!
スタイル定義やら規程のスクリプトがすべて、
本文より上にきますから、
折りたたんでしまっておかないとソースが見づらくてたまりません。
たたんでひらいて‥‥

頻繁に必要となるために、
ショートカットキーによる操作が欠かせません。
たとえば‥‥
  • フルタグをたたむ‥‥Ctrl+Shift+J
  • 選択範囲をたたむ‥‥Ctrl+Shift+C
  • 選択範囲を展開‥‥Ctrl+Shift+E
  • 親タグを選択‥‥Ctrl+[

これ、
知ってるのと知らないのとではコーディング効率に雲泥の差が出ますね。
まっ、
AMPコーディングを手打ちでやろうって物好きは、
そんなにたくさんはいないでしょうけども‥‥

そして最後にもうひとつ──
いま、
この上でくるくるまわってるみたいなやつ。
いろいろダメなことが多いAMPコーディングですが、
こんなふうなカスタムフォントがいくつか許可されてます。
いままでたいして興味なかったので、
使ったことなかったんですが、
ダメダメだと叱られたあとに、
>いいよ

いわれると妙にウレしもんで、
これはこれから積極的に使っていこうって気になりました。
特に使い勝手のよさそうなのは Font Awesome
アイコンの種類がめっちゃ豊富で、
くるくるまわしたり反転させたり、
おもしろい使い方がカンタンにできます。
遊びすぎ注意ですけどね。