HTML上でiPhoneのフリック時刻用ドラムUIを実現するTimeFlickerJS

iPhoneのフリック時刻用ドラムUIを実現するTimeFlickerJSのサムネイル

以前も記事に書いたデザイナー主体のハッカソンプロジェクト「Designers Hack」で作っているモックをちょっと作り込みましたので、テストバージョンサンプルと動画をあげておきます。

DEMOはこちら(iPhone, Androidで見てください、PCブラウザでは動作しません)

TimeFlickerJS + iPhone4S

TimeFlickerJS + GALAXY S2

iPhoneのUIで見かける、数字を縦にフリックできる日付用のドラムっぽいあのUI。
あれ、HTMLのフォームなどで作ってほしいという要望がありがちです。

でも、「時」と「分」を同時にクルクル指でフリックさせて数字を合わせるHTMLのUIが無いので、作ってみました。
jQueryのプラグインみたいにしてます。

使い方は簡単です。


<head>
  <link rel="stylesheet" type="text/css" href="common/css/timeflicker.css">
  <script src="common/js/jquery-1.7.min.js"></script>
  <script src="common/js/jquery.timeflicker.js"></script>
  <script>
   $(function (){
    $("#timefrom").TimeFlickerJS();
   });
  </script>
</head>

 <body>
  <div id="timefrom">
   <span class="TimeFlickHour">4</span>
   <span class="TimeFlickMinite">10</span>
  </div>
</body>


以上です。
必要なのはHTML上でspan.TimeFlickHourを「時」として、span.TimeFlickMiniteを「分」とします。
これだけは必須なので忘れないように。
あとはその親divをjQueryな書き方でTimeFlickerJS()を付けるだけで準備はOKです。
親div(”4時10分”と表示されている部分)をタップすると、ドラムっぽいUIが降りてきたら成功です。

メソッド

一応、OKボタンが押されたタイミングでイベントを発火できます。


var jikan = $("#timefrom").TimeFlickerJS();
jikan.change(function (e, v1, v2){ console.log(v1+" "+v2); });

とすると、v1に「時」が、v2に「分」が帰ってきますので、
例えばform要素の中で使う際、
<input type=”hidden” name=”jikan” value=”ここにv1とv2を入れてサブミット” >
とかするとお問い合わせフォームでも使えるので良いでしょう。

シビアだけどAndroidでは不採用になりそう?

Designers Hackのフロントエンドエンジニアのメンバーと話していると、Android大丈夫?的な声が。。。
確かにiPhoneはレンダリングも強力なので割とフリックなど滑らかなんですが、GALAXY S2やXPERIA ARCなどで試したら結構厳しいところもあります。
クオリティを考えるとAndroidはもっと別のUIを考え、振り分けた方がいいのでは?という意見が続いています。

あと、このUIは今は横幅320pxとハードコーディングしてます。解像度のちがうAndroidではCSSを触らないといけなくなりそうです、というよりボツになりそうです。
例えばhtcとかの機種では横が空いてしまいますので。。。
これはもうちょっと改善できたらいいなと。

ただ、このようなUIの制作を色んな仲間の意見をもとに作れ、勉強しているって恵まれてるなあと感じます。
精進精進。