れいぶろぐゲームをプレイしたり、作ったりしてる人、LABEのブログ『れいぶろぐ』。創作のこと、PCのこと、その他趣味のことを広く浅く。(11)このブログも久しぶりにイノベーションしそうだ。AMPという技術を恥ずかしながら最近知ったのだが。Pagesの略で、モバイル向けにページを超高速で表示させる技術だ。Googleを中心に、TwitterやPinterestやWordPressなども参加するプロジェクトで、2016年2月からGoogle検索で実用化が始まった。どのくらい速くなるのかというと、本当に驚くほど一瞬だ。このブログもぜひその最先端技術に対応したいのだが(新しいもの好き)、ページをAMPに対応させるには条件や制約がかなり多く、苦労しているところだ。残念ながら、おそらくこのブログはAMPに対応できないと思われるが、勉強のためにも可能な限りで実装しようと取り組んでいる。今回は、WordPressにおいてスタイルシート(CSS)をAMPに対応させる方法を紹介する。内でのみ50,000バイト以内で記述せよ」という無理難題ものがある。CSS内の空白文字などの不要な部分を削り、容量を削減する。――という二つの処理が必要になる。どちらも俺にとっては初めてで、苦労してなんとか解決したため今回紹介することにした。中にすべてを記述しなければならない。よって読み込んでいる外部CSSファイルを、HTML内にインラインで挿入しなければならない。コピー&ペーストで挿入してもいいのだが、俺の場合はCSSを1箇所で管理したいのでPHPにより外部CSSファイルを取得することにした。この場合、WordPressプラグインにこれを実現するものがあるが、自由度が低いので俺は自力で実装することにした。この関数では、引数としてURLを渡すことで外部ファイルの内容を文字列として取得でき、あとは変数に代入するなり置換処理を行うなりすればいい。ところが、サーバーによってはこの関数が使えない場合がある。使うと以下のようなエラーが出る。系の関数)が使えないとのこと。ファイルにアクセスすることもできない。そこで、この関数を使わない方法で外部CSSファイルの内容を取得する方法を調べ、以下のサイトで情報を見つけた。ScrapEngineerこのサイトの情報をもとに、以下のように自作関数を作成した。}}1行目は関数名の重複防止チェック、2行目は関数の定義、関数名はお好みで。すると、404エラーなどの場合に取得に失敗せず、エラーページの内容を取得する。上のコードではPHPの「cURL」という一連の関数を利用している。系の関数を使うことができるようだ。系の関数でローカルのファイルを取得する場合、ファイル名はローカルのパスで指定しなければならない。系の関数を使用したほうが高速であることがわかった。系の関数を利用した以下の自作関数を作成した。6月26日追記:URLのかわりにローカルのパスを指定しても動作するように改良してみた。}}引数としてURLを渡した場合、6行目から10行目にかけて、URLをローカルのパスに変換する。※ひょっとしたら、サイトやサーバーによってはパスの構造が異なり、このコードのままでは使えないかもしれない。引数としてパスを渡した場合はそのまま使う。以下のように使って外部CSSファイルを取得する。);複数のファイルを取得したい場合は、普通にこの関数を複数回使い、あとで文字列を連結するなどすればよい。CSSを圧縮(minify)するここまでの方法でCSSをHTML内に挿入することができたが、上記の通りこのブログではCSSが約101キロバイトもあり、これを50,000バイト以下にまで削減する必要がある。CSSの容量を削減するには、AMPページ向けに記述を絞ったCSSを別に用意するか、余分な空白文字を取り除いて容量を削減する(圧縮:minifyと呼ばれる)かしなければならない。圧縮ができるのは、普段CSSを書くときは(SASSやSCSSのツールを使っている場合は別として)、コードを見やすくするために大量の改行やタブ文字でコードを整形しているからである。これを除去することで容量を何割か削減することができる。そこで、俺は普段通りの外部CSSを取得し置換処理することで、容量を半減させることにした。CSSの置換処理については間違えると表示がおかしくなるし、すでに確立されたPHPのライブラリが用意されているが、新たなファイルを導入したくない俺はこれも自力で実装することにした。試行錯誤の末、以下のコードにたどり着いた。以下のコードは実際にこのブログで使用し、不具合が出ていないことを確認しているが、完璧ではないので使用の際は自己責任で。自己責任なのはこのコードに限らないが......より良いコードがあれば教えてくださいな。すべて除去できるようになる。AMPページにおいて不要な部分を指定することで、容量を削減できる。これらはCSSコメントなので、通常のページに影響を与えない。ディレクトリを指定する相対URLを絶対URLに置換する例。始まる絶対URLを使用しなければならない。始まる相対URLである場合に工夫が必要となる。取得するCSSファイルはテーマディレクトリの直下にあることを前提としている。上の行と下の行の違いはクオーテーションマークの違いなので、コーディングポリシーに合わせて片方だけを採用しても良い。このコードは元のCSSがすでに正確に記述され、かつ正常に動作していることを前提としていることに注意。なければそもそもエラーが出るはずだが、このコードはそれを悪化させることこそあれ、是正する機能は一切ない。その他、このコードの注意点として、CSSにおける文字列値に含まれる空白文字も置換・除去してしまう。このブログではそういう記述を用いていないので問題ないが。このブログでは上記のコードを使うことで、CSSの容量をギリギリ50,000バイト以内に抑えることができた。始まる相対URLである場合のコードの例も紹介する(1行目と2行目はクオーテーションマークの違い)。);まとめ以上の二つの方法により、このブログも最新技術であるAMPに対応したCSSを挿入することができた。WebページをAMPに対応させるためには、他にも多くの仕様や制約に従わなければならない。その方法のすべては長くなるので今回は触れない。WordPressはHTMLの構築を自動で行うので、もとより難易度が高いAMPへの対応をさらに難しくする。導入するだけでAMPへの対応を行うとされるプラグインがWordPress公式によって公開されているが、実際にはそれだけではエラーが頻発するらしいし。ブルーレット置くだけとはいかないわけだ。このブログではAMPへの対応をほぼ済ませたのだが、残念ながらAMP対応版ページを公開することはできない。このブログのサーバーが挿入する広告のためのスクリプトが、AMPで用意されたものを除く一切のJavaScriptの使用を禁じるという仕様と相容れないためだ。利用規約により、このスクリプトを除去することはできない。