明日もデザインで食べていこう![28]HTML上でiPhoneのフリック時刻用ドラムUIを実現するjQueryプラグイン TimeFlickerJSを作りました/秋葉秀樹

投稿:  著者:  読了時間:6分(本文:約2,500文字)


こんにちは、秋葉です。

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

◎サンプル画像
< http://akibahideki.com/blog/2011/12/21/fig01.jpg >

これはiPhoneではよく見かけるドラム式のUI(日付を決めるもの)を、HTML上で模したものです。月と日がフリックでクルクル回して選択できます。


◆サンプルとデモ

◎DEMOはこちら < http://ecoloniq.jp/TimeFlickerJS/ >
(iPhone, Androidで見てください、PCブラウザでは動作しません)

◎サンプルファイル(ダウンロード)
< http://ecoloniq.jp/TimeFlickerJS/timeflickerjs.zip >

◎動画も撮ってみました。(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の制作をいろんな仲間の意見をもとに作れ、勉強しているって恵まれてるなあと感じます。精進精進。

【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/ >

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。