【HTML/CSS/API/JavaScript】次世代技術について

読了: 約 4 分

基本的に私は大規模開発やプロジェクトにおける効率的なマークアップと、綺麗なマークアップに興味があるので
前回までSassの記事をご紹介しておりましたが、HTML5から色々な技術が増えて、APIも増えてきたのでその辺りもどんどん
まとめていきたいと思います。
本日は、Twitterにおもしろい記事が流れていたのでメモがてら書いておきます。
※1日1ブログみたいな形でかけば情報収集せざるをえないので良いかなと思って始めます笑

HTML5 Conference 2012に登壇していたMasataka Yakura (myakura)氏のgithubに挙げられていたスライドです。
HTMLとかCSSとかAPIとか

概要

0.1 今回の参考書籍

1 HTML5関連
2 CSS関連
3 API関連
- 3.1 XMLHttpRequest
4 参考書籍
- 4.1 JavaScriptの書籍
- 4.2 Sassの書籍

今回の参考書籍

パーフェクトJavaScript (PERFECT SERIES 4)

posted with amazlet at 12.09.20

井上誠一郎土江拓郎浜辺将太
技術評論社
売り上げランキング: 9225

Amazon.co.jp で詳細を見る

HTML5関連

Tantekelik氏がtimeタグについてまとめている記事について。
User:Tantekelik/time element

海外の方が情報がやはり早いですね。
slideshare等を見ていて中国語だったり、ドイツ語で書かれていて他言語の方はどのようにマークアップしているか
わかるので面白いなと最近思っています。

CSS関連

CSS4の主なものを挙げられてサイトです。
css4-ui features list

Subject Indicator
「親セレクタ」が指定できる様になったようです。

/* <a> を子に持つ <li> を選択*/
ul > !li > a {
    color: #c00;
}

:matches()

「このうちどれか」を選択
/* articleかsectionかどっちでもいい */
:matches(article, section) > h1 {
    font-size: 220%;
}

Cascading Variables（変数のように使いまわせるプロパティの登場）

/* 色を定義 */
:root {
    var-myBlue: #09c;
}
/* つかう */
:link {
    color: var(myBlue);
}

API関連

XMLHttpRequest

こちらはXHRとXHR2が一緒になって「XHR」となったそうです。
それによって、
クロスオリジン通信（CORS）、フォーム・バイナリ送信などが可能に。
HTML, JSON, ArrayBuffer, Blobも取得可能に。

→これまでJSONPでクロスオリジン問題を解決していたので、
XHRを使って試してみたいと思います。

xhrについての記事
第12回　XMLHttpRequest入門

一緒になったという事で可能になった事が下記になります。

onreadystatechangeの代わりにonloadを使用できる

クロスオリジン通信が可能になった

アップロード・ダウンロード時の進捗をイベントとして把握することができるようになった

overrideMimeTypeによってMIMEタイプ・文字コードを制御可能になった

バイナリを受信可能になった

上記の記事をForkしてスマホ用にしてみました。
Twitterタイムライン検索
ただ、submitにする必要や、そもそも検索ボタンが無い方がスマートなので、
消した状態のものはおいおい作成したいと思います。
クロスオリジン通信のxhrの勉強がてらやってみましたが、これの使い方としては
APIのURLと現在のURLが同じかどうかを確認するためにXMLHttpRequestを使っているようです。

今回の記事に関係ありませんが、別の時に作成したエンターイベントをメモ。

var key = 0;
	  if (window.event) {
		  key = window.event.code;
	  } else {
		  key = code;
	  }
    if (13 === code) {
        var word = $('#word').val();

	    if (word == "") {
            alert("キーワードを入力してください")
            return false;

        　　　} else {
               //キーワードが入っている状態で、エンターが押された場合の処理
　　　　　　　 }
    }