こんにちは、秋葉です。
以前も記事に書いたデザイナー主体のハッカソンプロジェクト
「Designers Hack < http://designers-hack.net/
>」
で手がけているモックをちょっと作り込みましたので、テストバージョンサンプルと動画をあげておきます。
◎サンプル画像
<
>
これはiPhoneではよく見かけるドラム式のUI（日付を決めるもの）を、HTML上で模したものです。月と日がフリックでクルクル回して選択できます。
以前も記事に書いたデザイナー主体のハッカソンプロジェクト
「Designers Hack < http://designers-hack.net/
>」
で手がけているモックをちょっと作り込みましたので、テストバージョンサンプルと動画をあげておきます。
◎サンプル画像
<
>これは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標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。
◎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標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。