Project)に対応しました。今日はWordPressへAMPを実装する個人的な備忘録として共有したいと思います。プロジェクトの導入ガイドの日本語版を公開しました。Fontは<link>タグで読み込みOK。Project)はモバイルウェブ高速化を目的としたプロジェクトです。GitHubでもガイドラインが公開されています。HTML」と呼ばれる独自のテンプレートに沿ってページを作成すると、Google検索結果から記事の表示までを超高速で行う事が可能です。//creatorclip.info/wp-content/uploads/2016/02/amp-phone-10062015.mp4何はともあれ、まずはこちらを見て下さい。AMPで作成されたページは検索結果のすぐ下にカルーセルで並び、記事をタップすると一瞬で表示されるようになります。Googleがキャッシュしたページを読み込むことでこの速さを実現しているみたいですね。記事を表示している間にスワイプすると、次の記事へ即座に移動して表示されます。AMPに対応するとまるでアプリのニュースリーダーを読んでいるような快適な操作が実現します。以下の検索結果画面をモバイル端末(もしくはChromeの開発者ツール)でアクセスするとAMPのデモが体感できます。in、Pinterestなどからアクセスした場合でも対応する予定になっています。WordPerssならプラグインもあるよこのAMPプロジェクトにはWordPressも参加しており、記事をAMP対応にするプラグインが提供されています。Kaludi氏が開発したものです。プラグインを有効化にして【設定】>【パーマリンク設定】からそのまま設定を保存することでAMP用のURLが生成されます。stories.wordpress.orgプラグインを有効化するとこんな感じになります。WordPressのテーマカラーのヘッダーにロゴが入り、非常にシンプルな見た目になりました。通常のページURL末尾に「/amp/」もしくは「?amp=1」を追加すると見れます。...wordpress.orgプラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。AMPをプラグインを使わず自分で対応したい上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。いうわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。https://creatorclip.info/2016/02/mobareco-aquos-serie-mini-shv33-review/?amp=1AMPのざっくりとした仕様テーマファイルを弄る前にまずはバックアップを必ずとっておきましょう。その間にざっくりとしたAMPの仕様を確認しておいて下さい。Fontは<link>タグで読み込みOK。Analyticsを<amp-analytics>~</amp-analytics>に置換AMPはCSSをインラインで出力、JS使用禁止など制約が厳しく、動的にソースを生成するWordPerssには不向きとも言われていますが、コンテンツの取捨選択と気合があれば以外と対応できます。}?>条件分岐をしたいphpファイルの1番上に、上記コードをコピペして入れて下さい。$myAmpという変数を用意してampのパラメーターが1、かつsingleページで<script>タグが入っていない記事のみ$myAmpをtrueにする処理です。実際に振り分けるにはif文でこのように振り分けます。charset="utf-8">head内容</head><body>body内容</body></html>DOCTYPEは通常のHTML5と同じですが、<html>には稲妻の絵文字(?)を入れます。ソースコードに絵文字なんて...と思いますが、実際class名にも利用できるようなのでおかしいことはないです。絵文字に抵抗がある方はampと入れても問題ないです。絵文字のほうが可愛いので私はそっちにしています。charset="utf-8">は<head>タグ直下に書かないとエラーになります。urlの設定AMPでは通常ページとAMP対応ページの2つのコンテンツを生成することになるので、Googleから重複コンテンツとみなされてしまいます。urlの設定をして2つのページが同一ページである証明をする必要があります。?>get_permalink();でパーマリンクを取得して&canonical_urlという変数に格納し、canonicalの値に代入します。?>続いてamphtmlの設定です。これを指定することによってGoogleにAMPページがありますよと伝える事ができます。hrefの値には&canonical_urlに加えて?amp=1を追加しています。viewportの設定スマホサイト対応する上で必須のviewportですが、AMPではこれも決められた値以外だとエラーになるので必要に応じて振り分けたりそのまま差し替えます。?></head><body>プラグインなどの出力で使うwp_head()とwp_footer()は勝手に<script>タグを挿入するので、AMPでは読み込まないほうが無難です。その他metaタグは今までどおり使用OKその他のmetaタグに関しては大体対応しています。OGP設定などは振り分けを行わずそのまま使っています。JSOB側の設定です。これもheadタグの中に入れていきます。AMP用JSライブラリの読み込みAMP用のJSファイルを読み込みます。この中にAMPに関わるコードが書かれているらしいのですが、圧縮されているので何が書かれているかよく分かりません...。おまじないとして読み込んで下さい。?>schema.orgの設定schema.org(スキーマ)は検索エンジン最適化の一種で、Googleなどにより詳しい情報を伝えるためのマークアップ記法のことです。レビューサイトなどで★5と評価をすると検索結果に表示されたり(リッチスニペット)と、ただのテキストや画像に「これはレビューの評価ですよ」と意味をもたせることを指します。この他にもパンくずリストを検索結果に表示させたりすることにも使われています。Googleリッチスニペット対策!初心者向けSchema.org解説!星やパンくずリストを表示させる具体的な方法については割愛しますが、今回はAMP用のschema.orgを設定していきます。?>サムネイル画像のwidthとheightを800に指定しておりますが、なぜか値を変更するとエラーになってしまうのでガイドラインのまま使用しています。ロゴ画像のファイルパスやwidthとheightはサイトに合わせて適宜変更して下さい。ここまでのheadとmetaタグをまとめるとこのようになります。?></head><body>body内容</body></html>上記以外のJSは使用禁止!AMPでは上記で記述されたスクリプト以外のJSは使用できません。ページ内でJSを使用している場合は条件分岐で振り分ける必要があります。?>CSSの設定<link>タグ・インラインstyle属性は使用禁止!AMPでは読み込んでいるCSSファイルをインラインCSSで読み込みます。<link>タグで読み込んでいるとエラーになるので、置換なりプラグインなどでHTMLのhead内に出力しなければいけません。私はAutoptimizeというプラグインを使って対応しました。settings」と書かれたボタンを押して詳細設定を表示します。CSS?(全てのCSSをインライン化して読み込みますか?)という項目があるのでチェックを入れます。インラインCSSは正直見辛いのであまり好きじゃないのですが、AMPのためなのでシカたないですね。otherwise.(インラインCSSは小さなファイルには効果的ですがCSSの量が増えるとページの読み込みスピードが落ちることもあります。)インラインstyleを使って装飾を付けるようなことも禁止です。style="color:red;">この文字は赤色になります</span>classに置き換えると使用可能なので、1つずつ置き換えましょう。the_content()を使って一括置換することも可能です。Fontは<link>タグで読み込みOK。Fontは<link>タグを使用してOKというルールになっています。href="https://fonts.googleapis.com/css?family=Roboto:500,300,700,400">CSS総容量は50,000Byte=50KBまでCSSの容量が50,000Byte=50KBを超えるとエラーになります。私のブログデザインはCSSアニメーションなどでガッツリ組んでいるので、圧縮をしても80,000字を超えてしまいました。オーバーしていた場合、CSSのファイルを削るかamp用のCSSを用意することになるので面倒くさいです。CSSを削るのも難しいのでCSSを分けて出力することにしました。?>!important禁止!CSSでは!importantが使えません。セレクタを駆使してどうにかするしかありません。GPU関連のみらしいです。自分のブログでは該当しなかったのでそのまま使っています。amp-custom>~</style>になります。Autoptimizeの設定からはstyleタグの出力変更ができないのでプラグインの中身を直接触って変更しました。私の環境では問題なく動いてますが、プログラムには詳しくないため自己責任で行って下さい。ファイルを触る前に必ずバックアップを必ず取ってから作業を行って下さい。/WordPressインストールディレクトリ/wp-content/plugins/autoptimize/classes/にあるautoptimizeStyles.phpの513行目を編集します。以下省略}ハイライトされた行を以下のように変更して下さい。以下省略}これで通常時とAMP用ページでstyleの出力変更が出来ました。amp-custom>~</style>で読み込むことは可能ですが、念のために振り分けています。Codeをコピぺします。amp-customではなくamp-boilerplateなので注意!ちなみにboilerplateの意味は「決まり文句」らしいです。?>HTMLの設定form周りのタグは禁止!form周りのタグは<button>以外禁止です。検索フォームやコメント欄などは通常ページのみ表示します。?>最後にHTMLで使用している画像やiframe、その他埋め込みコードなどを置換していきます。header.phpとsingle.phpにベースとなるコードを貼り付けて下さい。$content);?>Vine埋め込みを<amp-vine>~</amp-vine>に置換.vineは各自サイトに合わせて変更して下さい。$content);?>Instagram埋め込みを<amp-instagram>~</amp-instagram>に置換.instagramは各自サイトに合わせて変更して下さい。$content);?>YouTube埋め込みを<amp-youtube>~</amp-youtube>に置換.youtubeは各自サイトに合わせて変更して下さい。$content);?>iframeを<amp-iframe>~</amp-iframe>に置換iframeは埋め込みコードにも含まれているので、1番最後に置換したほうがいいかもしれないです。ちなみに古き好きframeは使用不可です。Adsenseを<amp-ad>~</amp-ad>に置換Adsenseに関してはコードを置換するのが難しいので条件分岐で振り分けることにしました。その他の広告については非表示にしています。?>デバッグ作業ここまで完了したら後はデバッグ作業です。AMPページを開いてURL末尾に「#development=1」を付けると、開発者ツールのconsoleにエラー内容や解決のヒントが一覧で表示されます。errors.」と表示されるようになっています。エラーが有る場合、GitHubのドキュメントに色々書かれているので、英語を翻訳しながら解決あるのみです。まとめ15,000字超えの超長い記事になったのですが、私はこの方法でAMP対応を行いました。自分のブログに合わせた方法なので、サイトによっては使えないかもしれません。完全に対応は出来ていません。最後に参考にした記事をまとめて紹介して終わりにしたいと思います。関連記事ロリポップから「不正なアクセスを検知いたしました」とメールが来ましたWordPressでpjaxを使ってスムーズにページ遷移をしてみよう格安SIM(MVNO)比較サイトを作成しました。Clipは美味しいモンブランや炊き込みご飯について書くブログ「栗エイター栗ップ」になりました。鹿このブログを管理している鹿。Webデザインとガジェットが好き。Olderワイモバイルがタイムセールを実施。Meこのブログを運営している”自称”カワイイ鹿。フロントエンドエンジニアを目指して勉強しているなかで、スマートフォンやタブレットなどのモバイルガジェットを集めています。Inkscape」を試してみました。Simsellerで「梅の花満開!ウインターセール」を開催中。キャンペーン2020」で事務手数料無料+SIMのみプランが激安価格で申し込める!Satechiの電流・電圧チェッカー「ST-TCPM」レビュー。UBOOM」レビュー。Clip(クリエイタークリップ)は、ウェブデザインやガジェットについて書いているブログです。フロントエンドエンジニアを目指して勉強しているなかで、スマートフォンやタブレットなどのモバイルガジェットを集めています。ClipHOMEABOUTPROFILECONTACT。