Simplicity2.3.9公開。width・heightの無いIMGでも自動取得してAMP化する処理追加

Simplicityを2.3.9にバージョンアップしました。

主な変更点は以下。

1. [AMP]AMP画像で幅（width）と高さ（height）のないものを自動取得して属性に追加（サーバー内画像のみ）
2. [AMP]iframe用のplaceholderタグ追加（amp-iframeの呼び出し位置エラー対策。要はamp-iframeの位置によるエラーが出なくなるようにした） [AMP]Googleマップを表示できるようにした（詳細）
3. [AMP]FacebookとTED動画埋め込み表示に対策（詳細）
4. [AMP]Jetpackにより直接Facebook動画が埋め込み表示される場合に対応（詳細）
5. [AMP]Spotifyのプレイリストに対応（詳細）
6. [モバイル]ごく限られた条件でアドセンス広告などが画面内に2つ出てしまう不具合修正
7. テキストウィジェット内のリストスタイルタイプを表示するように修正（詳細）
8. テーマカスタマイザー機能の補足説明の誤字修正

画像のwidthとheightの自動指定

今回、画像によるAMPエラーを出にくくしました。

これまでの仕様では、widthやheightが設定されていない画像では、AMP化した場合、以下のようなエラーが出ていました。

The implied layout ‘CONTAINER’ is not supported by tag ‘amp-img’.

けれど、今回のバージョンアップで、同じサーバー内の画像なら画像ファイルから幅と高さを自動取得してwidthとheightに割り当てるようにしました。

これで、画像のサイズ指定が原因によるAMPエラーは、自動で改善されると思います。

基本的に、このAMP画像サイズの指定漏れがAMPエラーの原因として最も多い（僕の環境ではそうでした）ので、これで結構エラーは減らせると思います（他にもエラーの原因は多々ありますが）。

ただ、外部サーバーの場合は、「処理に時間がかかる」「サーバーの設定によっては取得できない」「相手サーバーへの負荷」の観点から、サイズの自動取得はしていないので、これまで通り自前でwidthとheightを修正する必要があります。

iframeにプレースホルダーを指定

以前の仕様では、ページの上の方でamp-iframe呼び出すとAMPの仕様から以下のようなエラーが出ていました。

amp-iframe may not appear close to the top of the document (except for iframes that use placeholder as described below). They must be either 600px away from the top or not within the first 75% of the viewport when scrolled to the top – whichever is smaller.

今回はこのエラーを、amp-iframeにプレースホルダーを指定することで回避しました。

各種サービスの埋め込みに対応

今回は、フォーラムなどにいろいろ報告いただいて、以下の埋め込みサービスに対応させました。

• Googleマップ
• Facebook動画
• Facebook動画（JetpackによるURL埋め込み）
• TED動画
• Spotifyのプレイリスト

その他にも、大抵のiframe埋め込みなら、今回の修正で対応できたのではないかと思います。

あとがき

今回も、AMPエラーの原因を結構潰せたのではないかと思います。

AMPエラーは、PHPで吸収できるものならば、出来る限り潰そうと思っています。ですので、「自分のサイトのAMP状況をGoogle Search Consoleで見たら、AMPエラーが出ていた」なんて場合は、フォーラムに該当ページのURLとともに報告いただければ、なるべくすぐに修正したいと思います。

とりあえず自分のサイトは、AMPエラーが出なくなってしまったので、いろいろなエラーサンプルをご連絡いただければ、出来る限り対応したいと思います。