chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

AMP

AMPとはなんぞや

Accelerated Mobile Pagesの略です。 読み込みに「3 秒以上かかると 40% の人がサイトの閲覧を諦める」という調査結果が出たりしています。 このような事を改善するために、モバイル端末でウェブページを高速表示する事が目的です。

AMPの作り

ウェブページのHTMLをGoogleまたはTwitterでキャッシュすることで、読み込む分の時間を大幅に高速化する事が出来る仕組みとなっています。

主要な4要素

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からブロックレベル要素とインライン要素の分類は無くなっているとのことです。

そのような概念に変わっていた事が知らなかったので書き留めておきます。

ブロック要素・インライン要素から大きく7つの分類に分かれました。

メタデータ・コンテンツ

文書情報や他の文書との関係を定義するもの

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*

* 特定の条件の場合

lang属性

HTMLのlang属性は、要素内で使用されている言語を表記するためにあります。

<html lang="ja">

これはhtml要素内で使われている言語はjapaneseという意味になります。

この設定をする事で、ブラウザに対して使用している言語を認識させる事ができます。

<p lang="en">hello chocotaka!</p>

のように、一部英語で表記される箇所にはlang="en"と設定すると良いでしょう。

適切に指定することで、プログラムによる自動翻訳などが容易になる効果があるようです。

seo最適化 robots.txt

robots.txtとは

robots.txtはクロール最適化の手段の一つで、検索結果に必要のないページへのクロールを制御し、重要なページのみを認識してもらうようにしてSEOを改善するものであります。

不要なページに対するクローラーのアクセスをブロックすることができる。 クローラーを回す必要のあるページに多くのクローラーが回るようになるためサイト全体のSEOが改善されます。

robots.txtの書き方

User-Agent:*
Disallow:

User-Agent

どのクローラーの動きを制御するかの指定で、*は全てのクローラーに指示します。 例えば、User-Agent:Googlebot-imageだと画像用クローラーのみに指示することができる。

Dissallow

クローラーのアクセスを制御するファイルを指定します。 全サイトをブロックするなら/。特定のページをブロックするなら/hogehoge.htmlのようにページを指定します。

最後に

robots.txtが必ず必要かどうかというと、これを設定したからといってすごい効果があるというわけではないですが、少なからず設定していないよりは良いので、seo更に向上したいと考えているならやってみる価値はあると思います。

css initial inherit の違い

cssの設定で何かを初期化したい時にinitialプロパティがありますが、似たような名前のプロパティでinheritがあります。

このinheritってそういえばなんぞやと思ったので調べました。

inheritは訳すと「受け継ぐ」という意味で、調べてみてやっと納得した次第でこざいます。

<div>
  <p>テスト</p>
</div>

というDOMがあった場合

div {
  color: red;
}

とするとpタグで囲まれてるテストという文字は赤色になります。

これはdivに設定されたcolorがpタグに継承されて色が変わっています。

テストという文字を赤色にしたくない場合は

p {
  color: initial;
}

にすれば継承がなくなり、赤色ではなくなります。

もともと継承がされないプロパティもあるので、逆に継承をさせたい場合はinheritを指定してあげると、親に設定されたスタイルを継承する事ができます。

Reactバージョン16から文字列をそのままrenderできる

Reactはrender時に文字列だけだったりをそのままrenderする事ができませんでした。

そのため必ず<p>テストテスト</p>のようにタグを挿入する必要があったため

Reactの1つの悩みであった階層が深くなりがちだったりするのを回避する事ができそうです。

render() {
  return <p>テストテスト</p>';
}

のように記述する必要があったのが

render() {
  return 'テストテスト';
}

と余計なpタグを減らす事ができます。