ブロガー🔰が爆速⚡ブログを書く

AMP-HTML

みなさま、こんにちは!いかがおすごしですか?今日は話題のAMPについて
爆速ブログに興味ありますか?
モバイルアクセスアップを狙ってますか?
それなら、AMP。AMP始めるなら、今でしょ!

・・ということで今回は最近のgoogleゴリ押しのAMPについて超ハイテンションでご紹介します😦

AMPとは

AMPとはAccelerated Mobile Pagesの略。
スマホの遅い通信でも瞬時に読み込むことが出来る軽量なページ。
googleが一押ししているプロジェクトで今のところSEOに直接的な効果はないらしいがアクセスアップには期待があるということで当サイトにも導入することにしました。
やっぱり読み込むのがクソみたいに遅いページよりパッと表示されるページの方がストレスもないですもんね。

ちなみに本件とは全く関係ないですがHTMLに半角で&と書くと「&」が表示されます。ampersand(アンパサンド)の略で今回のampとは関係ございません。
他には「<」「>」「"」とか「 」があります。
それぞれ「<」「>」「”」「(折り返しの無い)空白」という意味です。

&amp;
&lt;
&gt;
&quot;
&nbsp;

以上、雑談でした😌

サイトの対応

話をリセットしましょう。今回のampについて

scriptが使えない外部cssが使えないなど色々と制限があります。

当ブログの場合、最初に選んだHEXOテーマは読み込みが遅かったです。amp対応どころか、ものすごく読み込みが遅かったです。

HEXOでかなりシンプルなテーマを選び、cssはインラインで50kb以下という制限に悪戦苦闘しながらも無事オリジナルHEXOテーマにカスタムいたしました😶

まずはhtmlの最初の部分

<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">

htmlをhtml ampもしくはhtml ⚡︎にしてください。
⚡︎マーク!?まさかの絵文字😦と思った方・・私も同じです。
信じられないようで本当の規格です。

<head><!–ここ–></head>

head要素 の変更です。

<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>ブログ記事の題名がここにきますよー☆</title>

このscriptタグがないとampとはいえません。うどんで例えるならばのようななくてはならないものです。HTML5のdoctype宣言のようなものと思って、何も考えずにhead部分に貼ってください。

<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />

canonicalでgoogleのロボットにこれが本当のページだと教えているわけです。❶同じ内容の通常ページとampページが存在する場合は、通常のページの方にこのタグを置きます。❷ampページのみ存在する場合は、このタグを置いてください。

❶の場合、ampページにはcanonicalではなくamphtmlとampページのURLを配置する。

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

viewportの設定。こちらもおとなしくこのタグを貼りましょう。これからの時代はモバイルフレンドリーではなくモバイルファーストですよ!

<style amp-boilerplate>あなたのCSS</style>
<noscript><style amp-boilerplate>あなたのCSS</style></noscript>

head部分で一番苦労し、泣かされるところ
外部CSSは使えません。
じゃあminifyした外部CSSをコピペでOK?
甘い!50kb以下にまとめてください。

ampサイトの確認

どうでしたか?出来ましたか?ちゃんとできたかどうかは機会がやってくれます。
URLの末尾に #development=1 をつけてください。

例:http://blog.lunapig.com/#development=1

クローム開発者ツール→[cosole]へ進む

1行目に下のコードが出てくれば、とりあえずampページとして読み込まれています!とりあえず爆速デビューです。おめでとうございます😉

Powered by AMP ⚡ HTML – Version

過去記事への対応

ampデビューは終わりました?否、頭だけスリムになったわけです。

モデル事務所ampに応募すると顔写真だけ合格!第一選考をクリアしたにすぎません。

Mr. amp: Ok your head! I want to see your body!

社長のアンプ氏も次はあなたの体が見たいと言っています。
まだまだamp社の厳しい審査が続きます・・

でも・・・あなた、体はまだおデブちゃんなんです。顔パス。お腹ぽっちゃり、お尻エラーです。

それではLet’sダイエットbodyもスリムに合格するようにしていきましょう!

<body><!–ここ–></body>

あなたのサイト、記事のbody内はどうでしょうか?ampの基準を御覧ください。

scriptタグは使用できない
imgタグをamp-imgタグへ
iframeタグをamp-iframeタグへ

最初のscriptタグが使用できないという基準がかなり厳しいように思えるかもしれません。じゃあsocialバーはどうするの?諦めるの?SMAPファンクラブ会費はいつ返金されるの?とか色々と疑問があると思いますが、ご安心ください。amp氏のバックにいるのは、あの世界一の大企業googleです。解決策が用意されてますので、ご安心を!

脱:<script>

今やJavaScriptを使うのは当たり前になっていますが、基本的にはこれまでのようにjsは使えません。

JavaScript によってページ レンダリングの速度が低下しないよう、 AMP では非同期の JavaScript のみ使用を許可しています。

作成した JavaScript を AMP ページに使うことは禁止されています。

Accelerated Mobile Pages Project

それでは、全部はご紹介出来ませんが一部ご紹介しましょう。
ちょっと長いので別記事にまとめます。

ampのJavaScriptについての記事はこちら

<amp-img>

imgタグはamp-imgタグに変えましょう。下記の形です。めんどくさいですが、height,widthも値を指定する必要があります。

<amp-img src="/img/amp-taiou-tyuu.jpg" width="527" height="193" layout="responsive"></amp-img>

アニメーションgifとかvideoの埋め込みも可能ですが、別のjsを読み込む必要があります。
詳しくは公式サイトの解説をご覧ください。Include Images & Video-Accelerated Mobile Pages Project

<amp-iframe>

amp-imgの時のように書き換えるだけでは不十分です。
下記のjsをheadに追加してください。


<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>


これでamp-iframeタグを読み込む準備ができました。
これで好きなページが埋め込めますね。ちなみにYoutubeにはamp-youtubeという拡張タグ、vimeoにはamp-vimeoという拡張タグが色々と用意してあります。専用のタグがあるのは面白いですね。もちろんheadに上のようなjsを読み込む必要があります。詳しくはこちらの
ampのJavaScript代替についての記事をご覧ください。

<amp-iframe width="500"
height="281"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
allowfullscreen
frameborder="0"
src="https://player.vimeo.com/video/140261016">
</amp-iframe>

まとめ

ということで、おそらく一番簡単なamp導入の方法です。
wordpressにも対応するプラグインがあるそうですが、どうなんでしょう?ちゃんと出来るのかな?ちょっと不安です。

このサイトはhexoで作成していてテンプレートをamp対応にheadのテンプレートファイルhead.ejsやそれに関連するカスタマイズしていますので、と記事ファイル[記事名].mdを対応させればOKです。
え?このブログは全記事対応してるのかって?
<amp-image>を<amp-iframe>
変更し、仕様に準拠するために過去記事を時間があるときに変更しています。

では、皆さんもamp対応の爆速サイトを構築しましょう⚡︎

関連記事

No related post.

おすすめスマホアプリ紹介-2017最新版

素人ブロガーが週替わりで厳選したアプリを紹介しています😚


● android

お前のアンドロイドのスマホ・タブレットにお勧めするアプリ。


  1. 読むだけでお小遣いが貯まるニュースアプリ トクニュー
  2. 手数料無料 オタクのフリマアプリ-モノキュン!
  3. 家族で共有するフォトアルバム~famir
  4. Locari(ロカリ)オトナ女子向けライフスタイル情報アプリ
  5. スター・ウォーズ:フォース・アリーナ
  6. マッチングアプリ いいね!
  7. ガーデンスケイプ (Gardenscapes)
  8. 彗星のアルナディア
  9. SHAREL
  10. シャドウバース
  11. グリモア~私立グリモワール魔法学園~

● iOS

貴方のiPhone,iPadにお勧めするアプリです。


  1. 読むだけでお小遣いが貯まるニュースアプリ トクニュー
  2. 手数料無料!オタクのフリマアプリ-モノキュン!
  3. 家族で共有するフォトアルバム~famir
  4. NewsJet
  5. Locari(ロカリ)オトナ女子向けライフスタイル情報アプリ
  6. 女性のための無料まとめ読みアプリ - pool(プール)-
  7. ガーデンスケイプ (Gardenscapes)
  8. アルバイトEX バイト探しの決定版
  9. チャットで出会い探しLIFE!
  10. SHAREL
  11. シャドウバース
  12. ハッピーメール
  13. グリモア~私立グリモワール魔法学園~

● Kindle

俺様のamazon kindle fireにお勧めするアプリ。


  1. 右脳鍛練ウノタン 七田式 速読トレーニング