チェックボックスをiOS5スタイルのスイッチに置き換えるjQuery非依存のJavaScriptライブラリです。タップ（クリック）に加えてスイッチ上でのスワイプ（ドラッグ）でチェックのオンオフが切り替えられます。

CSSで見た目を書いているので古いIEではデフォルトスタイルはほぼ表示できません。古いIEでも使いたいときは自分で書いてください。モバイルサイト限定で利用が推奨です。Androidはborder-radiusが残念なことになるという仕様なので、border-radiusは残念なことになっていますが、そこは目をつむっていただき・・・あと、端末によってはtouchmoveがうまいこと発火しないので、スワイプも微妙な感じかもしれません。

ドキュメント・サンプルは以下のリンク先を参考にしてください。

• ui.checkSwitch (iOS4以上推奨

えっと、誰かiOS4スタイルとか新しい感じのデザインお願いします。。。

要望とかバグ報告などはgithubのIssuesへお願いします。

前略そんなわけでスクロールバー作りました。

Read more

HTML5ではvideo要素で（手軽に？）動画を再生できますが、枠だけ書き出しておいて（別にHTML直書きでいいですが）、動画を入れ替える場合は少し注意が必要です。たぶん。

現状で動画フォーマットがいくつか存在しますが、複数のフォーマットをサポートしたい場合は以下のように書きます。

動的に書き換えるので、次のような関数用意して再生したい動画のURLを入れればよさげです。

function playMovie(mp4, ogg) {
  $('#videoElm')
    .html([ // ソースファイルをつっこむ
      '',
      ''
    ].join(''));
}

playMovie(piyo.mp4, piyo.ogg);

で結局何に注意しないとあかんかっていうのは、このままだとiOSで再生ができないんですね。iOSはmp4ファイル等で再生す
るんですけど、source要素を動的につっこんでもだめな様子。。

なので以下のようになりました。
source要素を動的につっこむのではなく、素直にsrc属性に入れてるだけです。

function playMovie(mp4, ogg) {
  if ( /AppleWebKit/.test(navigator.userAgent) ) {
  // iOSのとき
    $('#videoElm')
      .attr('src', mp4); // 素直にsrc属性に書く
  } else {
  // iOS以外
    $('#videoElm')
      .html([
        '',
        ''
      ].join(''));
  }
}

※ UA判定はもっと良い方法あったらそっち使ってください。

画像はiPhoneのiPodでアーティストを探しているところですが、同じようなUIを実装したいと思っていて、簡単に言うとスクロールに追従してくる感じなんですけど、複数要素の対応だったり、索引一覧みたいにひっかかった場合に次のタイトルがついてくる的な動きがほしかったのでつくってみました。

サンプルを見たほうが早いと思いますが、このブログのトップのようにタイトルをついてこさせたり、記事ページのようにソーシャルサービスへのリンクやメタ情報などの要素を固定できます。

このブログにも試験的に取り入れていますので確認できますが、HTML5の要素を利用しているためIE8以下では確認することができません。IE8以下での確認は一番上のサンプルでみてください。

• 動作サンプル（IE6以外で動作)
• いくつもタイトルがある場合（このブログのトップ）
• 指定要素を表示しておきたい場合（今見ているページ）

Read more