- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-05-02T16:05:10+09:00;2020-05-02T11:34:42+09:00","default:tgoto","tgoto")
これまでに[[pukiwikiカスタマイズ箇所/2019]]で示したように、自分が使用しない多数のプラグインを犠牲にしてでもPukiwikiの徹底的な軽量化と現代化を図ってきたところですが、ここまで来るとGoogleが提唱するAMP（Accelerated Mobile Pages）への対応はそれほど難しくないように思われました。
#author("2023-01-09T18:00:51+09:00;2020-05-06T00:56:08+09:00","","")
#ref(https://oncologynote.jp/img/78d3e6b858.png,nolink)
AMP対応はサイト軽量化などの効果があるほか、AMPそのものにSEOの効果はないものの、サイトが軽くなるとGoogleからの評価も上がり間接的にはSEOに寄与するという話もあります。
これまでに[[pukiwikiカスタマイズ箇所/2019]]で示したように、自分が使用しない多数のプラグインを犠牲にしてでもPukiwikiの徹底的な軽量化と現代化を図ってきたところですが、当サイトのようにpukiwikiをベースにしているが個人で編集するのみで多人数編集を前提としていない場合は、ここまで来るとGoogleが提唱するAMP（Accelerated Mobile Pages）への対応はそれほど難しくないように思われました。
**AMPは個人管理のお一人様用wikiに向いている（多人数wikiには向かない） [#n0ef2ff7]
AMP対応はサイト軽量化などの効果があるほか、AMPそのものにSEOの効果はないものの、サイトが軽くなるとGoogleからの評価も上がり間接的にはSEOに寄与するという話もあります。一方で、多人数で編集するWikiとして使用する場合はキャッシュを効かせて高速化するという恩恵があまりありませんのでAMP対応を目指す意味はあまりないかもしれません。
AMP対応のために実際にすべきのは以下の事項です。これはPukiwikiに限らずAMP一般の話も含んでいます。
#contents
*AMPの boilerplate とAMPライブラリを記載する（AMPでは必須）
*AMPの boilerplate とAMPライブラリを記載する（AMPでは必須） [#xfeb8176]
** AMPの boilerplateの記載
** AMPの boilerplateの記載 [#pecd8841]
> <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>
** AMPライブラリの読み込み
** AMPライブラリの読み込み [#bb0a6939]
これを読み込むことでAMP対応に必要なキャッシュを生成するための機能がサイトに付与されます。
> <script async src="https://cdn.ampproject.org/v0.js"></script>
なお、このライブラリはasync属性で読み込まなければAMPエラーがでます。
AMP対応には直接は必須ではないのですが、このAMPライブラリが意外にPagespeed Insightのスコアに影響します。高速化のために読み込んだライブラリでサイトのスピード評価が下がっては本末転倒ですが、これはpreloadを使うことでいくらか軽減できます。
> <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
下記の一文をHTMLのできるだけ上の方に置いておきます。当サイトでは meta name="viewport" の次の行にこれを配置しています。
* canonical URLの記載
* canonical URLの記載 [#sc890caa]
AMPページを作った場合はAMPページのもとになるオリジナルページのURLを記載したcanonical URLを記載しておくことが推奨されています。
> <link rel="canonical" href="<?php echo get_script_uri() ?>?<?php echo $r_page ?>" />
なお、短縮URLを導入しているpukiwikiではこれの導入時にcanonical URLを記載していると思います。しかし<?php echo $canonical_url ?>は短縮URLを吐き出すので、直感に反しますが短縮URL導入後のpukiwikiでは下記のようにcanonicalの欄にオリジナルURLを記載しつつshorturlの欄に$canonical_urlを記載します。
> <link rel="canonical" href="<?php echo get_script_uri() ?>?<?php echo $r_page ?>" />
> <link rel="shortlink" href="<?php echo $canonical_url ?>" />
* AMPで利用できないHTMLを変更する
* AMPで利用できないHTMLを変更する [#h779c621]
これが大変です。特に代表的なものは<img>と<form>で、これらへの対処がPukiwikiのAMP化の最大の難関です。
**imgタグのamp-img化
**imgタグのamp-img化 [#mf39228d]
AMPでは<amp-img>はwidthとheightの記載が必須になっていますが、絶対値記載が必要なのでCSSで相対的レイアウト（width:50%やwith:100vw）をしている場合などはレイアウトを再構築する必要があるかもしれません。サイズはスタイルシートでうまく工夫してなんとかしましょう。
個人的にはこのamp-img対応がAMP化の最大の障壁となります。何しろ、スキンだけでなくpukiwikiのプラグインなど至るところにimgタグがあるので…。
amp-imgで必須の画像サイズの絶対値表記のため、個人的に使用頻度の高いrefプラグインではプラグインをテキストエディタで開くと見える設定項目で画像のサイズを取得するという設定を探して、これをTRUEにしておく必要があります。この取得したサイズが$infoに格納されるので、これを350行目付近の画像HTML出力の中に表記されるようにしておく必要があります。
> $params['_body'] = "<amp-img src=\"$url\" layout=\"intrinsic\" alt=\"$title\" title=\"$title\" $info></amp-img>";
**formタグのamp-form化
詳しくは[[AMP HTML対応の断念のその後>日記/2019年/11月14日/AMP HTML対応の断念のその後]]の記事を参照してください。
#ogpi(https://oncologynote.jp/?b8dd7cfc05)
**formタグのamp-form化 [#qe9187ec]
Pukiwikiの検索ボックスのほかに編集ウインドウ、commentプラグインなど至るところに<form>があるのでこれを全て対応させるのもなかなか大変です。
結論からいうと、これに全て対応させるのは現実的ではない気がします。AMP-formスクリプトはフォームに入力された内容を非同期的に送信するのですが、これをPHPで受け取ってpukiwikiを動かすというのがかなり難しいと思います。
編集ウインドウなど動的なページはAMP化させる必要はありません。当サイトではその場しのぎの対応として、検索フォームはcmd=searchのページとトップページのみに設置してトップページは非AMPとしています。コメントプラグインは使っていないので、コメントプラグインについては深くは追求できていません。
*schema.orgのJSON-LDを指定する
**type属性などAMP非対応の属性を変更 [#z6369346]
#ref(https://oncologynote.jp/img/78d3e6b858-type.png,nolink)
AMP化について各種サイトであまり言及されていないのが、type属性が使えないというものです。
これまでdivのCSSを分岐させるために<div class="ogp" type="amp">としてCSSで.ogp[type="amp"]{}というようにtypeで区別するというのを多用していましたが、これはAMP testでは「属性「type」はタグ「div」で使用できません。」と言われてしまいます。
スタイルシートのclassは使えるので、typeを使わずにclassの並列で表記させましょう。上記の例で言えば<div class="ogp amp">として、CSSは.ogp.ampと連続して2つ書けば.ogpかつ.ampの要素のみにこのスタイルが適用されます。
*schema.orgのJSON-LDを指定する [#t398b7a9]
これはAMPが登場した当初は必須とされていましたが、現在のAMP対応では必須ではありません。metaタグでdescriptionなどをつかって検索エンジンにサイトの情報を伝えていたようなことと同じこと＋αが実現できますが、必須でないので後回しで良いでしょう。
#ogpi(https://oncologynote.com/?ab056d28f5)
#ogpi(https://oncologynote.jp/?ab056d28f5)
*最後にヘッダの変更
*最後にヘッダの変更 [#d4554ec3]
これを記載してHTMLが完全にAMPに対応していれば、GoogleからはAMP化ページとして認識されます。
> <html amp lang="ja">
なお、AMP対応が完全にできているかどうかは [[AMPテスト:https://search.google.com/test/amp?hl=ja]]から調べることができます。AMPに対応できていないエラーがあればその箇所が表示されるので、順番に一つづつ潰してゆきます。
**全てのページをAMP化しない場合
**全てのページをAMP化しない場合 [#ddcb2e6b]
たとえば編集ページや添付ファイルページはAMP化する必要がありませんし、そのまま置いておくとAMPエラーの警告メールがくるだけでややこしいことになります。また、当サイトはトップページに検索フォームを置いていますが、AMP-formを入れていないのでこのままだとトップページもAMPエラーが出てしまいます。
AMPエラーが出たまま放置していても特に実害はないのですが、Google search formでエラーがいつまでも表示されたままになるのは気持ちの良いものではありません。そこで、これらのページではAMP化しないようにしておきます。<html amp lang="ja">とする代わりに下記の1行を書いておき、FrontPageか$is_readでないページでは<html lang="ja">と表示してAMPと認識されないようにしておきます。もちろん画像遅延読み込みなどのjavascriptとしてのAMPライブラリは問題なく動作します。
> <html <?php ( $title != 'FrontPage' && $is_read ) ? print 'amp ' : print '' ; ?>lang="ja">
* AMP対応は不完全でも無駄ではない
* AMP対応は不完全でも無駄ではない [#q359f7ea]
AMP対応は不完全でも無駄ではありません。むしろAMPライブラリを部分的に使用する方がコストパフォーマンスに優れるかもしれません。
AMPライブラリはAMPキャッシュを作成するためだけでなく、サイトを軽量に作成するためのjavascriptとしてもかなり優秀です。普通であればjQueryなどを用いなければ実装しにくい画像の遅延読み込み、画像のフェードインやスライドインなども、AMPライブラリとamp-imgを使用すれば簡単に実装できるのです。
もしサイトが完全にはAMP対応できていない場合も部分的なAMPライブラリの利用は可能であり、これはサイトの高速化に寄与します。完全にAMP対応できない場合はヘッダの変更だけせずに可能な範囲で部分的にAMP HTMLを使うという方法もあります。AMPスクリプトを使ったサイトが結果的にAMPエラーを全て修正できなくてAMPキャッシュが作成できなくても、非AMPページとしてそのスクリプトはちゃんと動作するからです。
#ogp(https://fwww.me/2018/06/07/img-to-amp-img/,amp)
*AMP対応断念と再開の経緯
**不完全AMP対応で済ませる場合のAMP-boilerplate [#d47e08dd]
2019年9月に当サイトのPukiwikiのAMP HTML対応に向けて様々な試みをしたが、CSSで描いたページレイアウトの崩れを避けられないことと、GoogleのAMPキャッシュでは動的なモジュールが予想外の挙動を示すことなどから、一時はAMP対応を断念しました。
完全にAMP化を目指すのでない場合はAMP-boilerplateを読むかどうかは各サイトの判断に任されます。これを読み込まなかったとしてもエラーにはならないようです。ただし、これまでの経験から言うとAMP HTMLによる高速化はAMP-boilerplateによってAMP jsが読み込み完了するまで画面を非表示にする遅延読み込みが働いている面もあるので、AMP-boilerplateを読み込みさせておくほうがpagespeed insightのFCP（First Contentful Paint）も改善する傾向があるようです。
#ogpi(https://oncologynote.com/?e48fc5ba5b)
#ogp(https://amp.dev/ja/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/)
しかしその後にハンバーガーメニューの改良などを経て、再びAMP化の作業を始めてAMP対応を果たしました。
*AMP対応断念と再開の経緯 [#e47b2c0e]
#ogpi(https://oncologynote.com/?b8dd7cfc05)
2019年9月に当サイトのPukiwikiのAMP HTML対応に向けて様々な試みをしたが、CSSで描いたページレイアウトの崩れを避けられないことと、GoogleのAMPキャッシュでは動的なモジュールが予想外の挙動を示すことなどから、一時はAMP対応を断念しました。しかしその後にハンバーガーメニューの改良などを経て、再びAMP化の作業を始めてAMP対応を果たしました。
*pukiwikiのAMP対応関連記事
#ogpi(https://oncologynote.jp/?e48fc5ba5b)
#ogpi(https://oncologynote.jp/?b8dd7cfc05)
#ogpi(https://oncologynote.com/?a9db412a51)
#ogpi(https://oncologynote.com/?ed13e08e9b)
#ogpi(https://oncologynote.com/?c0f678f270)
*pukiwikiのAMP対応関連記事 [#p35af665]
#ogpi(https://oncologynote.jp/?a9db412a51)
#ogpi(https://oncologynote.jp/?ed13e08e9b)
#ogpi(https://oncologynote.jp/?c0f678f270)
#ogpi(https://oncologynote.jp/?d310f6b14d)
#pcomment