Warning: reset() expects parameter 1 to be array, boolean given in /home/users/2/mods.jp-makoto-tanaka/web/wordpress/wp-content/themes/xeory_base/lib/functions/head.php on line 143
このエントリーをはてなブックマークに追加

読了: 約 4 分

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

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

今回の参考書籍

パーフェクトJavaScript (PERFECT SERIES 4)
井上 誠一郎 土江 拓郎 浜辺 将太
技術評論社
売り上げランキング: 9225

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 {
               //キーワードが入っている状態で、エンターが押された場合の処理
        }
    }

参考書籍

JavaScriptの書籍

初心者向けと言われて買った本です。jQueryのセレクタ等も載っているので重宝しますね。
ただ、生のJSと混ぜたくない…混ぜるな危険…

パーフェクトJavaScript (PERFECT SERIES 4)
井上 誠一郎 土江 拓郎 浜辺 将太
技術評論社
売り上げランキング: 9225

Sassの書籍

Pragmatic Guide to Sass
Pragmatic Guide to Sass
posted with amazlet at 12.09.20
Hampton Catlin Michael Lintorn Catlin
Pragmatic Bookshelf
売り上げランキング: 186412

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'