インターネットコメントを書く月曜日担当になりました、網干です。今回は、Web界隈で話題になっている「AMP」について少しだけ調べたので掲載します。Pagesの略称になります。Googleが推進している取り組みで、モバイル環境で非常に速くページを見るための機能です。実際にモバイル環境でAMP対応のページを見ると、下記のようになるそうです。速いですね、読み込みの時間を一切感じませんでした。こんな技術があるのならば、早めに対応すべきなのか...!?ということで、まずは調査をしてみました。JS以外のJavaScriptを認めないことで、速度低下につながるScriptの使用を回避している。全ての外部リソース要素のサイズを明示的に固定させることで、再計算・再描画の負担を減らしている。画像はサイズによって読み込みの優先度を変更している。サイズの大きい画像ほど優先度を低くする。AMP対応のページはGoogleやTwitterのサーバーにキャッシュして、GoogleやTwitterからアクセスした際にキャッシュを使用する。この辺りが要因であると考えられます。AMP対応の有無は検索順位に影響するのか?googleのリチャード氏はインタビューにて「AMP対応は検索順位に影響しないが、対応したことでユーザーの満足度が向上する」と明言しています。(※下記は参考記事へのリンクです)https://www.suzukikenichi.com/blog/how-does-amp-affect-rankings-in-google-search/上記の内容から、AMPページの有無は検索順位に直接的な影響は与えないものと考えられます。検索エンジンの評価が上がることにはなりそうです。AMP対応はどのように行えばよいのか?AMP対応のページは、いくつかのルールに則って作成しなければなりません。meta要素の指定head要素内のmeta要素で文字コードとビューポートを指定します。この二つはどちらも必須の指定で、欠けるとエラーが発生します。オリジナルページの指定AMP対応のページは基本的にサブページとなるので、オリジナルページを指定する必要があります。link要素のcanonical属性で指定してください。この項目も省略するとエラーが発生します。boilerplateの記述AMPが高速化を実現するために、head要素内にboilerplateを記述する必要があります。こちらも改変するとエラーが発生します。jsファイルの読み込み指定したjsファイルをhead要素内で読み込みます。CSSはすべてインラインで記述するセレクタにも一部制限があり、「!important」は利用不可となっています。タグの制限AMPページを作成する際には、利用できるタグ、利用できないタグが存在します。タグについて綺麗にまとめたサイト様がありましたので、下記のリンクをご覧ください。https://syncer.jp/amp#section-4WordPressでプラグインとかないの?あります。WordPressのプラグイン検索でAMPと検索するとAMPのプラグインが出てきます。プラグインをインストールして有効化を押します。プラグインを有効化したら、記事のURLの末尾に/amp/とつけるだけでAMP対応ページが表示されます。期待通りのページになることはほとんどないと思います。現状はどうなっているの?実際にスマホを使ってグーグルで「ニュース」を検索すると、下記のように表示されます。上記の画像はグーグルクロームのデベロッパーツールで縮小した画面になっていますが、スマホでも同じ表示になります。AMP対応のページはカルーセル形式で表示されるので、おそらく画像が表示されている三つの項目がAMP対応ページなのでしょう。実際にクリックをしてみると...あれ?普通にリンクでページに飛ぶ......?どうやら、現状ではyoutubeの映像のように文章がスッと出てくるような仕様にはなっていないようです。以上がAMP調査結果になります。最後に意外と制約が厳しいですね...。凝ったサイトにしていると、そのままAMP対応ページとして使うのは難しそうです。「AMP」と検索するとAMP対応ページを作っているサイト様がいくつもあるのですが、カルーセル形式で表示されるページが確認できません。このことから、仮にAMP対応のページを作ったとしても、AMP対応ページとして表示されるには何か別の条件があるため、AMP対応ページとして表示されない可能性が高そうです。注目すべき機能であることは間違いないので、今後も注目していきます。記事の参考にさせていただいたサイト様は下記になります。Pages)ってなんで速いの。Pages)に対応にする手順http://creatorclip.info/2016/02/wordpress-accelerated-mobile-pages/ではまた!この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。裕介Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。CCの全製品解説!IllustratorとPhotoshop以外にも使えるツールがたくさんあります。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。「現在メンテナンス中のため、しばらくの間ご利用いただけません。Animateを利用したアニメーションを作ってみる。超初心者なのでプログラミング学習のProgeteをやってみました。Nature様のHPを制作させていただきました!2016-9-8地元ならではのスイーツ勢ぞろい!さがみはらスイーツフェスティバル2016のHPを作成いたしました!2016-3-14伊勢ヶ濱部屋様のHPを制作させていただきました!2016-7-26まずはお家を調査・診断!!一友ビルドテック様のチラシを制作させていただきました。ホームページ制作、WEBマーケティングページ上部へ戻る。