• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

DigiPressのAMP(Accelerated Mobile Pages)モードにおける仕様・制限


AMP(Accelerated Mobile Pages)とは、モバイル環境でのウェブサイトの表示速度を高速化するためにGoogleが推進している仕組み、およびプロジェクトです。

AMPでは、Javascriptの使用が禁止されていたり、CSSはheadセクション内にインラインで50キロバイト以下に抑えなければならない、imgタグはamp-imgに置換しなければならない、フォームやvideo、audioタグを利用するには専用のライブラリをロードした上で、SSL環境でなければならない、など多くの厳しい制限や規則があり、すべての仕様に準拠する必要があります。
AMPの詳しい仕組みについてはこちら

動的なウェブページを生成するWordPressをAMP化するには、多くの課題とあらゆる条件下での対応を考慮する必要がありますが、DigiPressでは、可能な限りサイト内のすべてのページについてAMPをサポートし、サイト管理者や寄稿者は非常に複雑なAMPの規則やコーディング仕様を一切意識することなく、テーマはもちろん、記事などの既存コンテンツもすべてDigiPressが自動的にAMP用のコードに置換する仕組みを備えています。

ここでは、DigiPressのテーマオプションにてAMPを有効化した場合の仕様、制限事項について解説します。

最終更新2017/12/8

INDEX

AMP対象外テーマ

以下のテーマはAMP有効化の機能は搭載していませんのでご注意ください。

  • Attractive
  • Mature
  • el plano
  • ESCENA
  • GRAPHIE

DigiPressのテーマ表示制御のしくみ


DigiPressテーマでは、「PCテーマ(レスポンシブ含む)」、「モバイルテーマ」の2つが組み込まれており、テーマ側でスマートフォンでのアクセスを判定して読み込むテーマを分けるだけでなく、それぞれのテーマ(接続元デバイスの種類)で必要なCSSやJavascriptだけを読み込み、さらに実行されるプログラムもPCテーマ用とモバイルテーマ用で細かく分岐して処理しています。

このように、DigiPressではスマートフォンか否かを判定し、根本的にテーマを分けて必要な処理のみを実行することで、PCとスマートフォンでのページ表示を分岐しないことが基本のレスポンシブ対応のみのテーマの場合で発生してしまう無駄な処理と、同一テーマ(テンプレート)で表示させることにより発生する、CSS(メディアクエリ)によるHTML要素の見かけ上の単純な非表示制御(display:none など)、閲覧する端末によっては本来不要なPC用(またはモバイル用)のCSSやJavascriptなどの読み込みによる無駄な転送量を一切排除しています。

さらに、AMPに対応したテーマでは、テーマオプションでAMPでの表示を有効にすると、スマートフォンからのアクセスは「モバイルテーマ」ではなく「AMPテーマ」で表示し、AMP専用のURLに自動的にリダイレクトするようになります。
また、AMP独自の仕様に準拠するためのあらゆるタグの置換処理や制御処理を行います。

DigiPressのAMP制御の仕様

  • AMPモードでの表示を確認するには、AMPが有効になっている状態で、URLの最後に「/amp」を付けてページを更新することで確認できます。
  • AMPを有効にすると、PCテーマではheadセクション内に、AMPページのURLが指定された rel=”amphtml”を持つlink要素が挿入されます。
  • 任意の記事や固定ページでAMPを無効化する必要がある場合は、対象記事の編集画面の「投稿オプション」にて、”このページではAMPを無効にする” にチェックをして保存してください。
  • AMPを有効化しても、AMPテーマが反映されない場合は、ページを改めて更新してください。
  • 設定変更や記事を更新後、なかなかページに反映されない場合は、AMPを一旦無効にし、AMP用URLにて対象ページを更新して404エラーが表示されたことを確認後、再度AMPを有効にして改めてページを更新してください。
  • AMPを有効にしている状態で、後からパーマリンク設定を変更したり、AMPページが404エラーで表示できなくなった場合は、この「詳細設定」のいずれかの「設定を保存」ボタンでそのまま保存し直してください。
  • AMP専用設定にない各カスタマイズは、他のテーマオプションの設定内容に基づいた状態で反映されます。

制限事項

AMPを有効にした場合、主に以下の制限があります。

  • オリジナルCSSはAMP専用に分けて追加できますが、テーマのCSSと合わせて50KB以下である必要があります。
  • AMP対応のページを表示するには、WordPressのパーマリンク設定にて「基本」(既定)以外のパーマリンクにしておく必要があります。
  • AMPが有効になるのは、トップページ、既知のアーカイブページ(カテゴリー、タグ、日付、寄稿者、検索結果)、記事ページ、固定ページ、組み込みの「お知らせ」用カスタム投稿タイプが対象です。
  • トップページのヘッダーエリアのスライダーは、エフェクトは水平方向へのスライド表示のみとなり、トランジション時間は反映されません。
  • アーカイブページの記事一覧には、SNSシェア数やページビュー数は表示されません
  • アーカイブページの表示形式と「DP-アーカイブ専用記事一覧」ウィジェットは「ノーマル」形式のみとなり、他の表示スタイルは反映されません。
  • 「DP-タブウィジェット」、「DP-Facebookページプラグイン」など、Javascriptの処理を必要とするようなウィジェットや、iframeタグによる外部リソースの埋め込みコンテンツを生成するウィジェットは、AMPページでは使用しないでください。
  • サイト内検索ウィジェットは利用できません(※フッターバーの検索アイコンからポップアップでサイト内検索フォームを表示可能)。
  • 「ビジュアル設定」にて指定しているカテゴリーカラーはCSS軽量化のため反映されません
  • HTMLフォーム(form)は非SSL通信(http)環境では利用できません(formタグが削除されます)。
  • Javascriptは利用できません。
  • <!–nextpage–>タグによるシングルページの分割は無効になり、1ページで表示されます。
  • コメントが許可されている投稿ページにてコメントする際は、非AMP(モバイルテーマ)に遷移してコメントフォームエリアに自動的に移動します。
  • トラックバックは表示されません。
  • AMPテーマでは、wp_head()、wp_footer()関数を利用できないため、すべてのプラグインでheadセクションに指定されるCSSとJavascript、および</body>の前に指定されるJavascriptは出力されなくなります。
  • 記事やテキストウィジェット内に指定しているscriptタグやstyle属性によるインラインのJavascriptとCSSはすべて削除されます。
  • プラグインなどが生成するHTMLコードにインラインでCSSやJavascriptがある場合や、AMPで禁止されているタグや属性がある場合は、AMPテーマでは表示できない可能性があります。
    そのようなプラグインの利用を優先する場合は、該当ページではAMPを無効にするか、サイト自体のAMPを無効にしてください。
  • AMPはJavascriptが利用できず、定められた箇所でのインラインCSSしか許可されていないため、提供中のDigiPress専用プラグインのコンテンツも正常に動作しなくなったり、CSSが無効の状態で出力されます。特に「Shortcodes for DigiPress」のショートコードを利用しているような投稿ページでは、「投稿オプション」でAMPは無効化してください。
  • 記事内にimgタグで表示している画像はamp-imgタグに置換され、表示幅が250ピクセル以上の画像はブロック要素として左右への回り込みができません
  • テーマに組み込みのHTML装飾セレクタ(CSS)は、必要最低限のスタイルが読み込まれ、ボタンカラー(btn以外)、ラベルカラー(label以外)、マーカー、ボックスカラー(box以外)、40ピクセル以上のフォントサイズ(ft8px〜ft35px以外)、マージン(mg系)、パディング(pd系)、セリフ体(serif)、アニメーション(animate-*)のCSSの装飾は無効になります。
  • WordPressのメディア追加機能のギャラリー(ショートコード)表示は、指定カラム数に関係なく3カラム固定で表示されます。
  • 組み込みの「寄稿者一覧テンプレート」はAMPに対応していません。このテンプレートを指定した固定ページでは、投稿オプションからAMPを無効にしてください。
  • No Category Base」などによって、カテゴリーページのパーマリンクから “category” を削除した状態のURLに置換している場合、AMPモードではカテゴリーページとしてURLのクエリのマッチングが行えず、404エラーページが表示されます。

AMPコンポーネントへの自動置換と削除される(禁止されている)タグ

AMPコンポーネントへの自動置換

AMPでは、iframeタグやJavascriptが禁止されているため、例えばYouTubeの埋め込みプレイヤーをはじめ、埋め込みタグを利用する各種サービスのプラグインはそのままでは利用できず、AMP用の代替タグに置き換え、さらに各サービスのウィジェットの利用に必要なAMPが提供している専用のスクリプトファイル(javascript)をheadセクション内に定義する必要があります。

DigiPressのAMPモードを有効にすると、記事本文などの対象コンテンツ内に以下のサービスが提供している埋め込みコンテンツが見つかった場合、自動的にAMP用のコードに置換し、必要なときだけ専用のスクリプトファイルをロードし、置換するコードがないページではスクリプトは読み込まず無駄な転送量が発生しないよう設計されています。

AMP自動置換対象コンテンツ

  • 記事本文(投稿、固定ページ)
  • 組み込みの「お知らせ」用カスタム投稿タイプの本文
  • 任意のカスタム投稿タイプの本文(※オプションにて対象とする投稿タイプの指定が必要)
  • 「テキスト」ウィジェット、「DP-カスタムテキスト」ウィジェット
  • コメント済みテキスト

以下のコンテンツについては、ユーザーは、AMPの仕様や制限を一切意識することなく、DigiPressがAMPのルールに則ったコードに自動で置換します。

AMP自動置換対応コンテンツ

  • YouTube埋め込みプレイヤー(※URLの指定のみでプレイヤー表示可。)
  • Vimeo埋め込みプレイヤー(※URLの指定のみでプレイヤー表示可。)
  • Instagramの投稿(※URLの指定のみで表示可。)
  • Twitterの投稿(※URLの指定のみで表示可。)
  • Facebookの投稿(※URLの指定のみで表示可。)
  • Facebookのビデオ(※URLの指定のみでプレイヤー表示可。)
  • Pinterestの投稿
  • Soundcloudの埋め込みプレイヤー
  • Googleアドセンスの広告コード
  • その他のすべてのiframeタグ → amp-iframeタグへの置換(※srcは https のみ。さらに width, heightの指定が必須。)
  • SSL環境でform要素がある場合、amp-formライブラリを読み込み、非SSL環境ではform要素を削除
  • imgタグ → amp-imgタグへの置換(※width/height属性でサイズ指定がないimgタグでも、画像ファイルから直接サイズを算出し、AMPページで画像が表示されなくなるのを回避可能)
  • videoタグ → amp-videoタグへの置換(※SSL環境が前提)
  • audioタグ → amp-audioタグへの置換(※SSL環境が前提)

また、AMPとは直接関係ありませんが、以下のコンテンツについてもAMPテーマが自動でスタイリングします。

自動スタイリング対応コンテンツ

  • Table of Contents Plus」プラグインの目次コード
  • カエレバ、ヨメレバのアフィリエイト広告コード

AMPテーマで削除されるタグと属性

AMPで禁止されている以下のHTMLタグが記事本文とテキストウィジェット内にある場合は、AMPモードではDigiPress側で自動的に削除されます。

元のコンテンツデータ自体からタグが削除されるわけではなく、AMPテーマで表示されるときのみ排除されます。

  • scriptタグ
  • styleタグ
  • iframeタグ
  • framesetタグ
  • objectタグ
  • paramタグ
  • embedタグ
  • appletタグ
  • baseタグ
  • style属性
  • border属性
  • onclick属性
  • onchange属性
  • scale属性

AMPモードの検証(デバッグ)方法

  • AMPページのエラー確認などの検証を行うには、ブラウザ(Chrome)のディベロッパーコンツールを有効にし、URLの最後に「#development=1」を付けてAMPページを更新することでコンソールで確認できます。
  • AMPを有効にしている状態で、表示しているページのAMPモードを一時的に無効にするには、URLの最後に「#nonamp=1」を付けてページを更新してください。

AMPモード(AMPテーマ)でのコンテンツ表示例

トップページヘッダースライダー


トップページのスライダーは、モバイルテーマ用のスライダー設定と連動し、対象はヘッダー画像のスライダーか指定記事または固定ページのスライダーです。

サイドメニュー&検索フォーム、非AMPページへの切り替え


AMPモードで適用される専用テーマでは、固定表示のフッターバーからサイド(グローバル)メニューとLightboxで現れるサイト内検索フォームを表示できます。
検索結果ページも、もちろんAMP化された状態で表示します。

AMPコンポーネントへの自動置換


DigiPressのAMP制御機能では、記事本文とテキストウィジェットに設置した、YouTube、Twitterなどの各Webサービスが提供している埋め込みコンテンツに対して、自動的にAMP用のコードに置換し、必要なときだけ専用のスクリプトファイルをロードします。

投稿ページでのSNSシェアボタン


シングルページでは、テーマオプションまたは投稿オプションでSNSシェアボタンを表示するよう設定されている場合は、フッターバーの「シェア」ボタンをタップすることで、Lightboxで各SNSへのシェアボタンが前面に表示されます。

投稿ページでのコメント


AMPではform要素は専用のライブラリを読み込むことで利用できますが、SSL環境でなければならないことや、inputなどの各フォーム要素に対する細かなルールに対応させる必要があるため、現時点ではAMPモードで投稿ページからコメントするには、一旦、非AMPモード(モバイルテーマ)に遷移してコメントフォームに移動させることでコメントができるようになっています。

また、投稿済みのコメントに表示される返信リンクのコードもAMPの仕様を満たすコードに自動で置換し、返信する際は非AMPページ(モバイルテーマ)に遷移してから返信ができます。

さらに、DigiPressにはFacebookコメントを表示するオプションがありますが、AMPモードでもFacebookコメントプラグインによる埋め込みコメントフォームの表示をサポートしています。

ギャラリーショートコードの表示

WordPressのギャラリーショートコードによる画像ギャラリー表示では、自動的にインラインでCSSが挿入されてしまうため、AMPではこのCSSが出力されないようにし、ショートコードでのカラム数の指定に関係なく、常に3カラムで表示されるように設計されています。

PCテーマでの表示(4カラムの場合)

AMPモード(AMPテーマ)での表示(3カラム固定)

AMPモードでテーマを表示する

AMPモードを有効にする

スマートフォンでアクセスされた際、サイトをAMPモードで表示するには、【詳細設定】→【AMP(Accelerated Mobile Pages)専用設定】パネル内にある「AMPを有効化」にチェックをして保存します。

このオプションを有効にすることで、スマートフォンのブラウザにてAMPページがキャッシュされた検索結果からアクセスされた際に、そのページでのみAMPテーマで表示されます。
表示後にサイト内の別のページに移動した場合は、以後は通常のモバイルテーマで表示されるようになります。

Google検索結果表示例

モバイル端末での検索結果

スマートフォンでは常時AMPモードを有効にする

検索結果からファーストアクセスしたページだけでなく、以後のサイト内のページ移動も含め、スマートフォンでは常にAMPモードで表示(AMP用URLにリダイレクト)することを基本とする場合は、「サイト内リンクは常時AMPページにリダイレクトする」にチェックをすると、常時AMP用の制御が行われるようになります。

シングルページのみAMPモードを有効にする

トップページ、カテゴリーページ、タグページなどのアーカイブページではAMPを無効にして通常のモバイルテーマで表示し、記事や固定ページのシングルページのみにAMPモードを反映するには、「シングルページのみAMPを有効にする」にチェックをして保存します。

このオプションは、「サイト内リンクは常時AMPページにリダイレクトする」オプションの有無に関わらず、アーカイブページでのAMPモードを無効化します。

このオプションを有効にした場合は、アーカイブページでの rel=”amphtml” タグが出力されなくなり、AMPページのURLを明示しなくなります

アクセス解析コードの設置

AMPではscriptタグが禁止されているため、一般的なアクセス解析コードは利用できませんが、AMPに対応しているアクセス解析サービスのうち、DigiPressではGoogleアナリティクスによるアクセス解析コードの自動組み込みをサポートしています。

Googleアナリティクスによる解析を行うには、【詳細設定】→【AMP(Accelerated Mobile Pages)専用設定】の「アクセス解析(Google アナリティクス)設定」セクションにて “Google アナリティクストラッキングID” にトラッキングIDのみを指定します。

このオプションでは、「アクセス解析コード設定」に指定しているGoogleアナリティクスと同じトラッキングID(UA-XXXXX-Y)のみを指定することで、テーマが自動でAMP専用の解析コードを生成してbodyセクションに埋め込み、AMPページと非AMPページのアクセスを統合して解析することができます。

任意のカスタム投稿タイプをAMPに対応させる

プラグインなどで独自に追加されているカスタム投稿タイプのうち、AMPの表示対象とするカスタム投稿タイプがある場合は、【詳細設定】→【AMP(Accelerated Mobile Pages)専用設定】の「AMPを有効にするカスタム投稿タイプ」セクションにて “カスタム投稿タイプのスラッグ”に、対象の投稿タイプのスラッグを指定します。

AMPを有効にする対象のカスタム投稿タイプが複数ある場合は、スラッグを半角カンマ「,」で区切って指定してください。
例: music,movie,actor

AMPテーマ専用のウィジェットエリア

PCテーマ、モバイルテーマとは別に、AMPテーマにも以下の専用のウィジェットエリアが設けられています。

AMP用ウィジェットエリア

  • コンテナエリア上部(AMP用)
  • 記事タイトル直下(AMP用)
  • 記事の中間(AMP用)
  • 記事の最後(AMP用)
  • コンテナエリア下部(AMP用)
  • フッターエリア(AMP用)

なお、ウィジェットを表示する対象ページを制御するには、オンラインマニュアルを参照してください。

ウィジェット表示制御方法

注意事項

  • アーカイブページの表示形式と「DP-アーカイブ専用記事一覧」ウィジェットは「ノーマル」形式のみとなり、他の表示スタイルは反映されません。
  • 「DP-タブウィジェット」、「DP-Facebookページプラグイン」など、Javascriptの処理を必要とするようなウィジェットや、iframeタグによる外部リソースの埋め込みコンテンツを生成するウィジェットは、AMPページでは使用しないでください。
  • サイト内検索ウィジェットは利用できません(※フッターバーの検索アイコンからポップアップでサイト内検索フォームを表示可能)。
  • その他、AMPは所定の定義以外のCSSとJavascriptを読み込むことが禁止されているため、各プラグインが組み込んでいるウィジェットは正常に動作しない場合があります。

サイドメニュー/フッターメニューを設置する

DigiPressはPCテーマ、モバイルテーマ、そしてAMPテーマの3種類が用意されているため、AMPテーマでも個別にメニューを設置することができます。
WordPress管理画面の【外観】→【メニュー】にアクセスし、サイドメニューにメニューを追加するには「AMP用グローバルメニュー」、フッターエリアには「AMP用フッターメニュー」に作成したメニューを追加することができます。

メニュー表示例

サイドメニューの表示位置を指定する

AMPテーマでは、フッターバーのハンバーガーメニューアイコン()をタップすることで、オフキャンバス状態でサイドからメニューを表示することができます。
このメニューの表示位置を指定するには、【詳細設定】→【AMP(Accelerated Mobile Pages)専用設定】の「スライドサイドメニュー設定」にて左右のいずれかの位置を指定します。

AMPモードから非AMPモード(モバイルテーマ)へ切り替える

AMPモード(AMPテーマ)で表示している状態から、非AMPモード(モバイルテーマ)でのページ表示に切り替えるには、サイドメニューを開き、最上部にある「通常モードでページを表示」(※既定値の表現の場合)リンクをタップします。

非AMPモードへの切り替えリンクのテキストを変更する

サイドメニューの最上部にある、非AMPモードへの切り替えリンクのテキストを変更するには、【詳細設定】→【AMP(Accelerated Mobile Pages)専用設定】の「非AMPページナビゲーション設定」にて、任意のテキストを記入して保存します。

headセクションに任意のコードを設置する

headセクション内に任意のコードを挿入する必要がある場合は、【詳細設定】→【AMP(Accelerated Mobile Pages)専用設定】の「<head>~</head>内のユーザー定義設定」に記述してください。
ただし、AMPでは、scriptタグや指定箇所以外でのCSSの記述は禁止されているため、AMPの仕様に則ったタグやコーディングの仕方で記述してください。

bodyタグ直後に任意のコードを設置する

Googleタグマネージャーの解析用コードやGoogle Analytics以外のAMPに対応したトラッキングサービスのコードなど、bodyタグの先頭に設置することが推奨、あるいは決められているサービスで発行されたコードがある場合は、【詳細設定】→【AMP(Accelerated Mobile Pages)専用設定】の「<body>タグ直後のユーザー定義設定」に記述してください。

AMP用にカスタムCSSをテーマに組み込む

AMPテーマで任意のCSSをテーマに組み込む必要がある場合は、【詳細設定】→【AMP(Accelerated Mobile Pages)専用設定】の「オリジナルスタイルシート設定」に記述してください。
なお、AMPでは、CSSの総サイズが50KB以下である必要があります。テーマのCSSと合わせて50KBを超えない範囲となるように注意してください。

TipsCSSが50キロバイト以内か確認する方法
AMPページでCSSが50KBを超えてないか確認するには、ブラウザ(Chrome)のディベロッパーコンツールを有効にし、URLの最後に「#development=1」を付けてAMPページを更新してコンソールを確認してください。
CSSが50KBを超えていた場合、コンソールに「The author stylesheet specified in tag ‘style’ is too long – we saw (現在のCSSサイズ値) bytes whereas the limit is 50000 bytes.」というエラーが表示されます。

コメントエリアのメインタイトルを指定する

投稿ページのコメントエリアには、投稿済みのコメント一覧が表示されます。
AMPテーマではトラックバックは表示しない仕様であるため、通常のコメントエリアタイトル(既定:COMMENTS & TRACKBACKS)とは別に指定できます。

タイトルを変更する場合は、【詳細設定】→【AMP(Accelerated Mobile Pages)専用設定】の「コメントエリア設定」の”コメントエリアタイトル” に記述してください。

既定値では、「COMMENTS」です。

任意の投稿ページまたは固定ページでAMPを無効にする

AMPで禁止されているタグを利用しなければいけない場合や、AMPの仕様を満たさない形でのフォーム使用など、AMPの仕様に準拠させることができないコンテンツを含む投稿ページや固定ページでは、各記事の編集画面にある「投稿オプション」にて、個別に非AMP(モバイルテーマ)にて対象ページを表示させることができます。

AMP対応ページがAMP CDN上にキャッシュされているか確認する

AMP対応ページがあることがGoogleに認識されると、AMP CDN 上に対象ページがキャッシュされます。
検索結果ではこのキャッシュされたGoogle AMPキャッシュページがAMP対応ページとして反映されることになります。

AMPモードを有効化したAMP対応ページが、AMP CDN上にキャッシュされているかを確認するには、以下の方法で確認できます。

対象ページがHTTPS(SSL)の場合

対象のAMPページのURLから、先頭の「https://」を省いたURLhttps://cdn.ampproject.org/c/s/ の後に続けて指定してアクセスします。

https://cdn.ampproject.org/c/s/your-domain.com/post-123/amp/

※対象のAMPページのURLが「https://your-domain.com/post-123/amp/」の指定例

対象ページがHTTP(非SSL)の場合

対象のAMPページのURLから、先頭の「http://」を省いたURLhttps://cdn.ampproject.org/c/ の後に続けて指定してアクセスします。

https://cdn.ampproject.org/c/your-domain.com/post-123/amp/

※対象のAMPページのURLが「http://your-domain.com/post-123/amp/」の指定例

キャッシュされたAMPページを最新の状態に更新する

公開後に記事を更新したりページ内のコンテンツを変更した場合、AMP CDN にキャッシュされているページデータはすぐに最新の状態にアップデートされるわけではないため、検索結果から訪れたビジターには以前にキャッシュされた古いページコンテンツが表示されることになります。

このような場合は、以下の手順で AMPキャッシュを最新のページコンテンツに更新させることができます。

1. AMPキャッシュフォーマットページにアクセスする

以下のページにアクセスします。

2. キャッシュを更新するAMPページのURLを指定し、更新する

「Enter an URL」のテキストフィールドにキャッシュを更新するAMPページのURLを入力し、「Convert」ボタンを実行します。

3. キャッシュページにアクセスして最新のキャッシュが表示されることを確認する

URL入力欄の下に表示されたAMPキャッシュURLにアクセスし、キャッシュされたURLでAMPページが最新のページコンテンツで表示されることを確認します。

Return Top