AMPに挑戦してみる
はじめに
自サービスがのちにAMP対応しようとしていたのと、AMPに合っているサービスということもあり AMPとはどうゆうものなのかという所から、AMPを実際に実装していく所までやっていきました。 AMPの目的がモバイルでの高速表示なので、様々な制限の中ページを作っていきます。 自サービスのAMP化したいページが、実際に再現可能なのかどうかという所が最初不安でいました。
実際に実装してみて
制限の中どれだけのことが可能なのか気になっていましたが、結論予想以上に出来ることが多かったです。 もちろんサービスによって表現に可能・不可能はありますが、自サービスでやりたいことはほぼ可能でした。 TwitterのwidgetだったりInstagramだったり、Youtubeだったり簡単に再現可能でした。 ボタンを押したらある要素の表示を変えたり、スクロール量によって何かをするということも可能でした。
ampコンポーネント
たくさんの表現を可能にしているのが、豊富なコンポーネントです。
Youtubeだったらamp-youtubeを使ったりTwitterだったらamp-twitterを使ったりと、すでに用意されているコンポーネントを使えば
すぐに表現することが可能です。
サンプルがあるのでこちらを活用するとわかりやすいです。
最後に
AMPで表現できることがこれからも増えていくとの事なので期待です。 自サービスも今期中にはAMP化していきたいと思っています。
AMPの基本的な書き方
html宣言
<html ⚡ lang="ja">
のように記述する。
style指定
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
</style>
cssは極力処理を早くするために外部ファイルを読み込むではなくstyle amp-customで囲う。
img指定
<amp-img src="sample.jpg" layout="responsive" width="266" height="150"></amp-img>
width/heightはレンダリングを少しでもスムーズにするために指定します。
layout="responsive"を指定すると画像はレスポンシブに表示してくれるようになります。
<br>？<br />？
htmlを書くときに改行タグを、<br>または<br />と書かれてあったりします。
なぜ２種類の書き方があるのか気になったので調べて見ました。
XHTMLの文法
<br />はXHTMLの文法のようで<br>や<img>タグなど、1対で囲まないタイプのタグについては、<br / >や<img />と書くようにと決められました。
XHTMLの文書はこう書かれていない場合、文法チェックでエラーと判断されてしまうようです。
HTML5ではどちらでもいい
HTML5になってからは<br>でも<br />でもどちらでもよいみたいですが、基本的につけなくていいということになりました。
最後に
最近のHTML5で書かれているwebサイトは基本<br>で問題ないみたいです。
あったかい
？？？？？？？
あったかい
AMP
AMPとはなんぞや
Accelerated Mobile Pagesの略です。 読み込みに「3 秒以上かかると 40% の人がサイトの閲覧を諦める」という調査結果が出たりしています。 このような事を改善するために、モバイル端末でウェブページを高速表示する事が目的です。
AMPの作り
ウェブページのHTMLをGoogleまたはTwitterでキャッシュすることで、読み込む分の時間を大幅に高速化する事が出来る仕組みとなっています。
主要な４要素
HTML5（AMP HTML） CSS 3（Custom Styling） JavaScript (AMP JS) グローバル プロキシ キャッシュ (AMP Cache)
AMPの課題
AMP HTMLの制約から、ニュース記事等が中心として使われています。 高速化の代償として、使用できる要素に制限が大きくされてしまっています。 よって表現できる事も制限されてしまいます。
aria-live
aria-liveは、要素に変更があったときに変更内容をスクリーンリーダーで読み上げてくれたりするのでアクセシビリティに貢献する事ができます。
ライブリージョン
JavaScriptで動的に更新されたりする要素に対して、スクリーンリーダーなどの支援技術を使っているユーザーは変化に気づく事ができない事があります。 ライブリージョンを使うことで動的に更新される要素に対して、スクリーンリーダーなどの支援技術を使っているユーザーも変化を把握できるようになります。
3つの属性
assertive: 内容が更新されてもユーザーに伝達しない（デフォルト設定）
polite: 現在の読み上げの終了やユーザー入力時など適切なタイミングで、内容が更新されたときにユーザーに伝達する。
assertive: 即座に伝達を行う
使用例
文字を挿入する前
<div aria-live="assertive/polite/assertive"></div>
javascriptで文字を挿入した時
<div aria-live="assertive/polite/assertive">文字が挿入されました</div>
この時にaria-liveに設定によって「文字が挿入されました」がタイミングで読み上げられるようになります。
HTML5 コンテンツ・モデル
HTML5以前の要素は大きくブロックレベル要素とインライン要素に分類されていましたが、 HTML5からブロックレベル要素とインライン要素の分類は無くなっているとのことです。
そのような概念に変わっていた事が知らなかったので書き留めておきます。
ブロック要素・インライン要素から大きく７つの分類に分かれました。
メタデータ・コンテンツ
文書情報や他の文書との関係を定義するもの
base command link meta noscript script style title
フロー・コンテンツ
子孫にテキストなどを持つもの
a abbr address area* article aside audio b bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label link* map mark math menu meta* meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style* sub sup svg table textarea time ul var video wbr Text*
* 特定の条件の場合
セクショニング・コンテンツ
見出しと概要を付けられるもの
article aside nav section
ヘッディング・コンテンツ
セクションの見出しとなるもの
h1 h2 h3 h4 h5 h6 hgroup
フレージング・コンテンツ
段落などの中に含まれる文節・語句など
a* abbr area* audio b bdo br button canvas cite code command datalist del* dfn em embed i iframe img input ins* kbd keygen label link* map* mark math meta* meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time var video wbr Text*
* 特定の条件の場合
エンベッディッド・コンテンツ
文書に他のリソースを埋め込むもの
audio canvas embed iframe img math object svg video
インタラクティブ・コンテンツ
ユーザーによる操作に対応するもの
a audio* button details embed iframe img* input* keygen label menu* object* select textarea video*
* 特定の条件の場合
