html関連

■headタグ内での設定

<!-- //デバイスサイズにあわせて表示領域を変更する -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- //電話番号のリンクを無効化 -->
<meta name="format-detection" content="telephone=no">

<!-- //ホーム画面用アイコン -->
<link rel="apple-touch-icon" href="icon.png">

<!-- //ホーム画面用アイコンの光沢を無効化する -->
<link rel="apple-touch-icon-precomposed" href="icon.png">

<!-- //iPadホーム画面用アイコン -->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png">

<!-- //iPhone4ホーム画面用アイコン -->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png">

<!-- //splash画像の設定 -->
<link rel="apple-touch-startup-image" href="startup.png">

<!-- //homeボタンから起動時にfull screen modeで起動 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- //full screen mode起動時のステータスバーの色の変更 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

■viewportについて

• width:ビューポート（可視領域）の幅(初期値980px)
• initial-scale:倍率の初期値、minimum-scale:倍率の最小値、maximum-scale:倍率の最大値
• user-scalable:拡大縮小の可否
• コンテンツより小さいviewport widthやheightを設定しても設定値は適用されない

例えば、device-width=320pxでinitial-scale=0.5の場合は、表示領域 320px/0.5px = 640pxで算出、
device-width=320px、width=400px、コンテンツ450pxであれば、initial-scale = 320/450で横幅450pxのドキュメントを描写される。

■Tel URI、Sms URIの設定

<!-- //リンクをクリックで電話をかける -->
<a href="tel:00000000000">00000000000</a>

<!-- //リンククリックでsms -->
<a href="sms:00000000000">sms</a>

<!-- //smsの送信秋複数 -->
<a href="sms:00000000000,1111111111">sms複数</a>

<!-- //smsの本文追加 -->
<a href="sms:00000000000,1111111111?body=%83e%83X%83g%83%81%83b%83Z%81%5b%83W">smsメッセージ</a>

■inputタグ関連

<input autocorrect="off" autocomplete="off" autocapitalize="off">

• autocorrect:スペルチェック機能
• autocomplete:自動補完
• autocapitalize:先頭文字を大文字にする

<input type="number" value="001">

• iOS5以上の場合、inputのnumber属性値の場合、「００１」は「１」の数値形式に変換される。
• 同様に「1000」は「1,000」の数値形式に変換される
• ソフトウェアキーボードを数値入力形式で表示させたいならばtel属性値を付与するかJavaScriptで回避

css関連

■position:fixed関連

position:fixed はiOS5、Android2.2以降が対応。
ただし

• Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動かない
• iOS5ではURLに#がついた状態だと挙動が不安定
• iOS5で他ページに遷移した後に、戻るボタンでページにもどると表示位置がずれる
• Androidではuser-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる

ちなみに、iOSがposition:fixをサポートしているかの判定は、Modernizr position fixed checkのコードから

var isSupported;

    if ( typeof document.body.scrollIntoViewIfNeeded === 'function') {

        (function () {
            var container     = document.body,
                elem          = document.createElement('div'),
                orgHeight     = container.style.height,
                orgScrollTop  = window.pageYOffset,
                testScrollTop = 20;

            elem.style.cssText = 'position:fixed;top:0px;height:10px;';

            container.appendChild(elem);
            container.style.height = '2048px';

            window.setTimeout(function() {
                elem.scrollIntoViewIfNeeded();
                isSupported = !(window.pageYOffset === testScrollTop) || !(window.pageYOffset === testScrollTop+1);
                alert(isSupported);
                container.removeChild(elem);
                container.style.height = orgHeight;

                window.scrollTo(0, orgScrollTop);
            }, 1000);

            window.scrollTo(0, testScrollTop);
        }());

    }

   return isSupported;

という感じで判定できそうです。

■overflow:scroll関連

overflow:scrollはiOSは２本指スクロール(わかりにくい)、Androidはoverflow:hiddenとして扱われます。iOS5の場合は、

-webkit-overflow-scrolling: touch;

で1本指スクロールが可能です。Androidの場合は現状、JavaScriptなどで回避するか別のアプローチが必要の様子。
overflow-scrollingは将来的にAndroidでもサポートされるかもしれないので、個人的には、

if("overflowScrolling" in document.body.style || "webkitOverflowScrolling" in document.body.style || "MozOverflowScrolling" in document.body.style) {
  //対応しているときの処理
}
else {
  //対応してないときの処理
}
;

という感じで分岐したりしてます。

■Media Queries

デバイスの向きによって、スタイルを変更する場合、インラインなら

/*縦向き*/
@media all and (orientation: portrait) {
    body {
       /* your styles */
    }
}

/*横向き*/
@media all and (orientation: landscape) {
    body {
       /* your setting here */
    }
}  

読込むcssファイルを変更する場合は

/*縦向き*/
<link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css">

/*横向き*/
<link rel="stylesheet" media="all and (orientation: landscape)" href="landscape.css">

デバイスの画面サイズや解像度によってもスタイルを変更できます。

/* 画面サイズ〜480pxの端末のときに */
@media only screen and (max-width: 481px) {
  /* CSS goes here */
}

/* 画面サイズ481px〜1024pxの端末が縦（portrait）のときに */
@media only screen and (max-width: 480px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* CSS goes here */
}

/* 画面サイズ481px〜1024pxの端末が横（landscape）のときに */
@media only screen and (max-width: 480px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* CSS goes here */
}

/* 画面サイズ1025〜の端末が横（landscape）のときに */
@media only screen and (max-width: 480px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* CSS goes here */
}

width: 1025px〜の端末のときに */
@media only screen and (max-width: 1025px) {
  /* CSS goes here */
}

/* iphone4 iphone4s */
@media (-webkit-min-device-pixel-ratio: 2),
             (min--moz-device-pixel-ratio: 2),
             (min-resolution: 300dpi) {
  body{ your styles here }
}  

/* andoroid */
@media (-webkit-max-device-pixel-ratio: 1.5),
             (max--moz-device-pixel-ratio: 1.5),
             (max-resolution: 299dpi) {
  body{ your styles here }
}

■そのほかの設定

そのほか、細かい設定などなど。

/* タップ時のハイライトカラー*/
-webkit-tap-highlight-color:#f00;

/*テキストの選択をキャンセルする場合*/
-webkit-user-select:none;

/*リンクの長時間タップでリンク内容をポップアップで表示させない場合*/
-webkit-touch-callout: none;

などが主なものになります。

JavaScript関連

■URLバーを隠す

ウェブページを表示した際にURLバーを隠すことができます。(厳密には1pxだけwindowをスクロールさせる)

//1000ミリ秒の遅延を設定しているのはページの読込が完了するまでの十分な時間として設定してます。
setTimeout(function(){  window.scrollTo(0,1);},1000);

//jQueryなどだとページ読込み完了時に呼んでやるのもありです。
$(function(){
window.scrollTo(0,1);
});

■メディアクエリ・解像度関連

cssのメディアクエリのjavascript版のような感じで、window.matchMediaを使うとデバイス画面サイズごとに処理を分岐できます。

if ( window.matchMedia("only screen and (max-width: 480px")).matches ) {
     // For Mobile
} else if (window.matchMedia("only screen and (min-width: 481px) and (max-width: 1024px)").matches ) {
     // For Tablet
} else {
     // For PC
}

同じように、デバイスの解像度も取得できます。

if( window.devicePixelRatio == 2 )
{
  //iphone4,iphone4s
}
else if( window.devicePixelRatio == 1.5 )
{
  //Android
}
else
{
  //others
}

また、フルスクリーンモードで起動しているかも検出できます。

if(!window.navigator.standalone)
{
    //your method
}

■通信状態の取得

Android2.2以降からは接続状態も検出できます。

/*
Browser Object Model

navigator = {
  connection: {
    "type": "4",
    "UNKNOWN": "0",
    "ETHERNET": "1",
    "WIFI": "2",
    "CELL_2G": "3",
    "CELL_3G": "4"
  }
};
*/

switch (navigator.connection.type ) {
case 0:
//unknown
case 1:
//ETHERNET
break;

case 2:
//WIFI
break;

case 3:
//CELL_2G
break;

case 4:
//CELL_3G
break;

}

オンラインかどうかの検出もできて、以下のようになります。

if (window.navigator.onLine)
{
    //online
}
else
{
    //offline
}

■touchイベント関連

touch、gestureイベントは次のようになります。

//スクリーンにタッチ
document.addEventListener("touchstart", touchHandler, false);

//タッチ後、指を動かす
document.addEventListener("touchmove", touchHandler, false);

//タッチ後、指を離す
document.addEventListener("touchend", touchHandler, false);

//タッチ後、指をスライドさせた(タッチをキャンセルした)
document.addEventListener("touchcancel", touchHandler, false);

//2本以上の指を使ってスクリーンにタッチ
document.addEventListener("gesturestart", gestureHandler, false);

//指が動く
document.addEventListener("gesturechange", gestureHandler, false);

//どちらかの指がスクリーンから離れる
//ちなみにこの後、残りの指を離すとtouchendが発生
document.addEventListener("gestureend", gestureHandler, false);

■デバイスの向き関連

デバイスの向きも検出できます。

//90度ごとに向きが変更された場合に発生
window.addEventListener("orientationchange ", orientationEvent, true);

//細かい回転量の取得
//返される値は
//alpha:0～360(degrees)
//beta:-180～180(degrees)
//gamma:-90～90(degrees)
window.addEventListener("deviceorientation", orientationEvent, true);

//デバイスの加速度と回転データを取得
window.addEventListener('devicemotion', deviceMotionHandler, false);

このあたりはhtml5rocksが詳しくです。

■Media capture API

Andoroidはhtmlからユーザーがアップロードできるコンテンツを細かく制御できます。

<!-- regular file upload (Android 2.2+) -->
<input type="file"></input>

<!-- opens directly to the camera (Android 3.0+) -->
<input type="file" accept="image/*;capture=camera"></input>  

<!-- opens directly to the camera in video mode (Android 3.0+) -->
<input type="file" accept="video/*;capture=camcorder"></input>  

<!-- opens directly to the audio recorder (Android 3.0+) -->
<input type="file" accept="audio/*;capture=microphone"></input>  

アニメーションの繰り返し回数を設定(無限に繰り返す場合はinfinite )
animation-iteration-count: 1;*/


実際には各プロパティにはvendor prefixが必要。
アニメーションは状態毎にイベントを発火するので、

//アニメーション開始イベント
e.addEventListener("animationstart", listener, false);

//アニメーションが1周するごとに発生
e.addEventListener("animationiteration", listener, false);

のように取得可能。
こちらもvendor prefixが必要でwebkitAnimationEnd,mozAnimationStartなどとしないといけない。

で、簡単に作ったのが以下。ゲーム風の表現も全然可能ですね。

css animationをサポートしてないブラウザだと動かないです。実用にはここでjQeuryなどでアニメーションさせたりするといいかな。
css animationのほうがjvascriptでの表現より軽く、負荷も少ない。

cssを書くのが大変なので、scssやless使ってやると楽になりそう。

さらにECMA-262に対応してないブラウザにはprototypeで拡張してやればネイティブのメソッドとして使える。

if (!Array.prototype.forEach)
{
Array.prototype.forEach = function(fun /*, thisp*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();

var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
fun.call(thisp, this[i], i, this);
}
};
}


ということで、サンプル

Mozilla Developer Network forEach

jQuery.Deferred(), introduced in version 1.5, is a chainable utility object that can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

callback queuesに複数のcallbackを登録できてるオブジェクトで、同期・非同期の処理の成功と失敗を中継する。と言った感じ。

DeferredオブジェクトはCommonJSのPromises/Aをもとに設計されていて、生成されてからunresolved -> pending -> resolved or rejected という具合に状態をたどります。
それぞれの状態を監視して、pending、resolveもしくはreject時に登録した関数を実行します。

ajaxの処理やウィジェット同士の通信などオブジェクトの状態に応じて、レスポンス精度の高いアプリケーションを作る際にDeferredオブジェクトを利用するといいらしい。
実際にアニメーション系のメソッドやajax系のメソッドなどのオブジェクトもDeferredオブジェクトを返してくれるようになってるので、これまでと違い

となります。いままでよりすっきりして見通しがいい気がします。また、メソッドチェーンで書けるというところもいい感じです。
というわけで、Deferredオブジェクト簡単に使ってみる。


//Deferred object
var df = $.Deferred();

//経過中に実行されるメソッド指定
.progress(func);


細かく制御できるのがいい感じです。
また処理が完了するまでqueueにしておき、完了時に処理を進める(遅延処理)できるということも特徴です。


//Deferred object
var df = $.Deferred();

//複数のDeferred objectが処理されるまで遅延する
$.when(Deferred objects)


ざっくりまとめてみたけど、便利だな。

/*box center*/
.box-center {
display: block;
margin: 0 auto;
}


IEのactivexコントロール利用時にLessがパースエラーを起こすので

/*
Less escape code : e('escape this code')
*/
filter: e("progid:DXImageTransform.Microsoft.gradient(startColorstr='")@start e("', endColorstr='") @end e("')");

のようにエスケープコードを使って回避できます。
さらにエスケープコード内で変数を使用する場合は、

e(%("some IE stuff here, first color %s, second color %s", @color1, @color2))
/* 最初の%sが@color1に、次の%sが@color2に置き換わります */


どうしてもvendor prefixを繰り返し書くのが面倒。

.vendor-prefix(@prop, @val) {
-moz-@prop:@val;
-webkit-@prop:@val;
-o-@prop:@val;
-ms-@prop:@val;
@prop:@val;
}

のようるようにならないかな。


$(elements).on(events [, selector] [, data], handler);
$(elements).off(events [, selector] [, data], handler);


例えば使い方としてとしては

var sayHello = function (event) { alert("Hello "+event.data.name); }
$("button").on("click", { name: "kazu69" }, sayHello);


のように、これまでのbindやliveのように使用できる。
また、

var sayHello = function (event) { alert("Hello "+event.data.name); }
$("div").on("click", 'span', { name: "kazu69" }, sayHello);


のようにselectorオプションを使うとdelegateのように使用する事もできる(引数の順序が違うけど)

$(elements).on(events-map [, selector] [, data]);
$(elements).off(events-map [, selector] [, data]);

またeventMapを利用する事で複数のイベントを登録する事ができます。
たとえば、

$('input[type=text]').on({
focus: function() {
$('div').empty().append('focus');
},
blur: function() {
$('div').empty().append('blur');
}
});


とすると、簡潔にまとめる事も可能です。
off()についてもon()とおなじく

$('.parent a').unbind('click');
$('.parent a').off('click');

という具合にunbindと置き換える事ができ、

$('.parent a').die('click');
$('.parent').off('click', 'a');


$('.parenta').undelegate('a', 'click');
$('.parent').off('click', 'a');

のようにdieやundelegateを置き換える事も可能です。

ちなみにこれまでのevent apiも使用できます。
でも、これからはon()、off()を使う方がいいですね。

簡単なチャットくらいしかできませんが、こんな感じです。

後ほど作り方まとめたい。

http://kazu69.heteml.jp/html5/websocket/

位置情報とからめてみるってのもおもしろそうだ。
今回のようにpusherを使えば裏側の実装の必要もないため、簡単にリアルタイムウェブサービスができます。

郵便番号などのフォームでinput type numberを利用している場合は、バリデーションに引っかかると思うので
注意が必要です。

input type numberを使うメリットはソフトウェアのキーボードがinput typeによって最適なものに切り替わる点です。
取り急ぎの解決策として、数字入力させたいのでinput type telに修正したり、jsでごにょごにょして対応してます。

その他変更点は http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5 にまとまってました。

LESSを使ってみた
LESSはJavaScriptでコンパイルするので、LESSファイルとコンパイラーのJSを読み込めば使用できる。

style.lessに

@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}

としてやると


#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

とコンパイルされる感じ。
Mixinやネストのほか演算、関数も少し使える。

SASSを使ってみた

とりあえず、rubyがインストールしてる条件で

gem install sass

でSASSをインストール。
style.scssファイルに

$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

として、
sass style.scss style.css
でコンパイルすると

.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

でコンパイルされます。
SassでHTML記号や日本語を使う場合は、@charset “UTF-8″ を文頭につけておくとコンパイル後のcssも文字コードが予期しないものにならないっぽい。

毎回、コンパイルすのも面倒なので

sass --watch style.scss:style.css

watch オプションをつけておけばscssファイル編集とともにcssも変更されます。終了する時は Ctrl+c。これは便利です。
ディレクトリを指定すれば、ディレクトリ単位で監視もできます。


sass --style compressed --watch style.scss:style.css

style compressedオプションをつけてやればminifyもしてくれます。これも便利。
SASSの場合、関数で定数の演算を扱える、条件分岐や繰り返しも使えるのでLESSより柔軟です。

あと、Hamlをインストールしておけば
css2sass style.css
とすることで既存のCSSをSASSに変換できるっぽいので、既存環境をSASS化することもできそう。

最近railsを触ってることもあってSASSのほうが気になりました。

個人的な感想では、SASSはrubykのコンパイルが必要だけど、機能が豊富で柔軟に使用できる。環境構築さえしてしまえば、後は非常にやりやすかった。
CompassというSASSフレームワークが便利そう。

LESSは導入が容易。Twitter Bootstrap などにも導入されている。JavaScriptでコンパイルするので、環境などの構築は不要。文法がひと癖あり、SASSにくらべて制限がある。小規模な案件やモバイルウェブアプリ、node.jsを使うときには便利じゃないかな。という感じでした。