[dev: html5/css3/js] modern web note @2014. #html #css #js

yano3nora

7/2/2017 - 10:36 AM

[dev: html5/css3/js] modern web note @2014. #html #css #js

modern_web.md

Rendered
Source

Introduction

オライリー「モダンWeb」のまとめ。

モバイル（スマートフォン等）のネイティブアプリケーションにも注目が集まっているが、ネイティブなアプリを窓口に、Web上のサービスとの連携が前提になっているため、現在のアプリケーション開発はまだまだWebアプリケーション全盛と言ってよい。

「フロントエンド開発」という範疇を超えて、HTML5はもはや【プラットフォーム】という新しいコンテキストを獲得している。HTML5/CSS3/JS(ES6) の習得はインタラクティブなWebフロントエンド開発だけでなく、Webアプリケーション開発者の必修科目と言ってよい時代に突入した。

HTML5

HTML5要素とRole属性
DOM API の拡張
- データ属性 //data-
  - <p id="foo" data-id="123">yamada</p> //idデータ123の山田さん
  - document.querySelector('p#foo').dataset['id'] でとれる
- マイクロデータ //検索エンジン最適化向け
  - schema.org
  - https://goo.gl/5lP9Ky
  - <section itemscope="itemscope" itemtype="http://schema.org/Person">
アバウトネス＝意味に基づくマークアップの重要性
- OGP (open graph protocol) //FBなどSNS向け
- RDFa とかマイクロフォーマット
- WAI-ARIA
  - <a href="~" aria-haspopup="true">popup!</a>
  - aria-application //アプリ部品やで
  - aria-banner //header的な
  - aria-navigation //nav的な
  - aria-main //main的な
  - aria-complementary //aside的な
  - aria-contentinfo //footer的なドキュメント修飾情報
  - aria-form //検索以外のフォーム
  - aria-search //検索フォーム
真偽値を入れる属性は未記入＆false指定時以外はtrueに
- <input type="checkbox" checked>
- <input type="checkbox"> ↓と同義
- <input type="checkbox" checked="false">

HTML5基本セット

<!DOCTYPE html>
<html lang="ja>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="foo.css" type="stylesheet">
    <script src="foo.js" defer></script>
    <!-- type指定は省略可能に -->
  </head>
  <body>
    <header>
      <h1></h1>
      <nav></nav>
      <section>
        <div role="search"></div>
      </section>
    </header>
    <main>
      <article>
        <h2></h2>
      </article>
      <aside></aside>
    </main>
    <footer</footer>
  </body>
</html>

マイクロデータ (schema.org)

<!-- 本／著者のリスト -->
<section itemscope itemtype="http://schema.org/Book">
    <h1>本の情報</h1>
    <span itemprop="name">Ruby入門</span>
    <p itemprop="description">本の説明</p>
    <div itemprop="author" itemscope itemtype="http://schema.org/Person">
    <p itemprop="name">著者名</p>
    <p itemprop="email">author@abc.efg</p>
    </div>
</section>

<!--ホーム＞パソコン＞Macノートのパンくずリスト-->
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/home">
        <span itemprop="name">ホーム</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/home/pc">
      <span itemprop="name">パソコン</span></a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/home/pc/macnote">
      <span itemprop="name">Macノート</span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

OGP

<meta property="og:title" content="EXAMPLE.COM">
<meta property="og:url" content="http://example.com/">
<meta property="og:description" content="EXAMPLE.COMは~~"。>
<meta property="og:image" content="http://example.com/img/logo.png">
<meta property="og:type" content="website">

IE8/9対応

<!-- jQueryは1.x系じゃないとだめよ-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/><!--互換モード最新に-->
<!--[if lt IE 9]>
  <script src="path/to/html5shiv.js"></script><!--html5タグ対応-->
  <script src="path/to/respond.js"></script><!--メディアクエリ対応-->
<![endif]-->
</head>

HTML5 の Form 要素

HTML5のForm要素は、HTML5 の基準になった Web Applications1.0 の仕様を引き継ぎ多くの拡張がなされている。

<input type="email"></input> など
- date
- color
- range
- number
autofocus 属性
placeholder 属性
autocomplete 属性
spellcheck 属性
multiple 属性
form 属性
- form外でマークアップしたinputも form="form-id" で連携可能に
progress 要素
- フォームの進捗度を表示
meter 要素
- 入力値の視覚的表現
output 要素
- 入力に対する結果出力のためのマークアップ
バリデーションAPI
- Constraint Validation API
  - https://goo.gl/NIUAMq
- pattern 属性
  - 正規表現によるバリデーション
- CSSの疑似クラス追加
  - input:required
  - input:optional
  - input:valid
  - input:invalid

CSS3

レスポンシブとアダプティブ
- メディアクエリ (@media)
- Flexbox (別メモ参照)
- Grid
- box-sizingプロパティ
- calc() 関数によるCSS内演算
- ビューポート単位 vw, vh, vmax, vmin
- ルート基準単位 root em (rem)
- column-spanプロパティ
  - https://goo.gl/uSW4Bj
- object-fitプロパティ
  - (IE非対応) https://goo.gl/jKh6XJ
ベンダープレフィクス
- ビルドツールで省略可能にするのが一般的
  - gulp-preeease
  - autoprefixer-rails
プリプロセッサ (LESS, Sass)
CSSフレームワーク
- Blueprint.css
- Bootstrap
- Foundation

メディアクエリをJSで

var mq = window.matchMedia('screen and (min-width: 800px)');
if (mq.matches) { ... } else { ... }

モダンJavaScript

async/defer対応
addEventListenerメソッドでイベント取得
DOMContentLoadedイベントの追加 //jQueryの$(document).readyすね
モバイルデバイス向けのtouch(指), pointer(スタイラスペン) イベント
classListオブジェクトの追加によりクラス名操作が可能に
- document.getElementsByClassName('foo'); 何気にHTML5から
- document.querySelector('.foo'); //classList利用なモダンな記述法
Ajax+JSON+RESTAPI
JSライブラリ／フレームワークの台頭
- AngularJS, Angular2
- React, Redux
- Vue.js, Riot.js

defer属性での遅延実行

scriptタグでJSを呼ぶと、そのタイミングでブラウザがDOM解析・レンダリングをストップさせ、JS解析に移ってしまい低速回線では表示に時間がかかってしまう。そのためscriptタグはbody終了タグの直前に置くのが定石だった。HTML5ではscriptタグにdefer属性（真偽値）を記述すると「HTMLを読み終わってから読込→実行」してくれる。

<head>
  <script src="foo.js" defer></script>
</head>

async属性での非同期実行

scriptタグにasync属性を記述すると、HTMLの読み込みを中断しないまま非同期でJSを読込するようになる（実行された場合は当然レンダリングは中断されちゃうがね）。

モバイルデバイスを意識したAPI

FileSystem API

ローカル環境にサンドボックス化したファイルシステムを作成して操作できる。 dataTransfer.files など

Geolocation API

// 現在位置情報の取得
var geo = navigagtor.geolocation,
  lcn_success = function(where) {...}, 
  lcn_error = function() {...};
geo.getCurrentPosition(lcn_success, lcn_error);

Orientation API

// 3次元空間上でのデバイスの方向、位置変化を検出
window.addEventListener('deviceorientation', function(orientData) {
  //doSomething
}

FullScreen API

// フルスクリーン表示を要求
if (document.fullScreenEnabled) {
  var el = document.querySelector('.target');
  el.addEventListener('click', function() {
    el.requestFullScreen();
  });
}

Vibration API

デバイスの振動機能にアクセス

Battery Status API

デバイスのバッテリー情報にアクセス

Network Information API

通信回線、ネットワーク接続情報へのアクセス

Web Storage

Cookieでは小さなデータしか保存できない。より大きなデータのデバイス保存には、WebストレージAPIが便利。ブラウザが閉じるとデータが消えるのが【セッションストレージ】。ローカルにデータを保存できるのが【ローカルストレージ】。ちなみにどちらも構文は同じらしい。旧名称はDOM Storage。

// localStrage.gorilla = 'ゴリラ';
sessionStorage.gorilla = 'ゴリラ';
// sessionStorage.clear();
sessionStorage.removeItem('gorilla');

Indexed Database API

非同期でKeyValue形式でローカル（ブラウザ）にデータを保存し、インデックス機能やトランザクション機能も備えている。WebStorageとくらべてとっても大容量（ブラウザによるが５０MBくらい）かつバイナリ保存も対応。性能優秀ぽい。 https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

APIは複雑
RDBMSではない
SQL操作ではない
インデックスはらないと検索もソートもできん

このIndexedDBを通常のRDBMSのように扱えるGoogle製のライブラリ「lovefield」ってのもある。http://qiita.com/ryo-ma/items/33386ec4b4c3b0261ce3

dragover / drop イベント

// ドラッグ＆ドロップによる動作
var target = document.getElementById('target');
target.addEventListener('dragover', function(e) {
  e.preventDefault();  //デフォルト動作の抑止
}, false);
target.addEventListener('drop', function(e) {
  e.dataTransfer.setData('text/plain', e.currentTarget.textContent);
}, false)

その他

WebSocket

実験段階の仕様、低コスト版HTTPプロトコル的な通信規格...ラッパーなのか？クライアントに情報を配信するための簡単なAPIと、クライアントからWebサーバへ情報を送信するための簡単なAPIを提供するらしい。 https://developer.mozilla.org/ja/docs/Web/API/WebSocket

マイク・オーディオ関連API

音声関係は WebAudioAPI や StreamAPI で利用可能。 http://150217-html5sound.fnobi.com/

カメラ・映像関連API

WebRTC というUDPベースのリアルタイム双方向通信でチャットとかビデオチャットとかファイル通信できる的なAPIらしいがあんま流行ってない。 https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API / https://html5experts.jp/mganeko/19728/

あとは FileAPI で画像や映像なんかをこれから取る、みたいなカメラ起動アクションに対応できるぽい。http://cartman0.hatenablog.com/entry/2015/06/20/021402

PhoneGap/Cordva

HTML5技術でネイティブアプリケーションを作る（＝ハイブリッドアプリ）ためのラッパーフレームワーク。Cordva, Electronなど。

画像：Canvas・SVG・WebGL

Canvas

ビットマップ描画API。SVGと違いオブジェクトではなく画面上のピクセルに対して直接描画する仕様らしい。

SVG

ベクター描画API。Canvasと違いオブジェクトとしてDOMツリーに組み込まれる。その分DOMツリーが重くなるが、JSなどでアクセスしやすくなる。

WebGL

3D描画API。興味ないのであんま調べてないけど色々できるぽい。

メディア対応：video/audio

<audio src="foo.oga" controls></audio>
<video src="bar.ogv" controls></video>

<audio src="foo.oga" preload="auto"></audio>
<video src="bar.ogv" autoplay muted></video>

<video src="bar.ogv" width="360" height="240"></video>
<video>
  <source src="foo.ogv" type="video/ogg"></source>
  <source src="foo.webm" type="video/webm"></source>
  <source src="foo.mp4" type="video/mp4"></source>
</video>

<video>
  <source src="foo.ogv" type="video/ogg"
    media="(device-aspect-ratio: 16/9) and (min-devicewidth: 1920px)">
  </source>
  <source src="foo.webm" type="video/webm"></source>
</video>

映像メディアの拡張子

mp4 は Microsoft と Apple が大好きな有償ライセンス ogg は Mozilla Opera が mp4 に対抗して開発 webm は Google が無償ライセンスで最近発表→普及しつつある

現在mp4が最も強い (IEやSafari含む多くが対応だがFireFox, Opera非対応) Chrome, FireFox, Android は ogg, webm 対応

キャプションと字幕

W3Cによって標準化されている webVTTファイル や TTMLファイル による字幕・キャプションの埋め込みが可能になっている。https://goo.gl/37irmY

// video
<video src="foo.ogv">
  <track kind="captions" label="English" src="captions_en.vtt" srclang="en"></track>
  <track kind="captions" label="Japanese" src="captions_jp.vtt" srclang="ja" default></track>
</video>


// webVTT
1
00:00:05.000 --> 00:00:08.000
<v 太郎>はい、太郎です。</v>

2
00:00:08.000 --> 00:00:13.000 line:63% position:72% align:start
<v 花子>花子です。久しぶり。</v>

// TTML
<?xml version='1.0' encoding='UTF-8'?>
<tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' >
<body>
<div>

<p begin="00:00:01.567" end="00:00:03.987" >こんにちは。</p>
<p begin="00:00:10.098" end="00:00:13.214" >やあ。<br/>久しぶり！</p>
</div>

</body>
</tt>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster