[AS3 | iOS | Android] タイマーアプリ制作日記 1

2014/01/29

こんにちは。きんくまです。

作業中によくポモドーロテクニックを利用しています。
ポモドーロテクニックというのは、集中時間と休憩時間を短く区切って作業するいわゆるライフハックというやつです。

>> ポモドーロテクニックとは

25分作業+5分休憩は最初は短いかな?と思ったのですが、意外とそのぐらい短い方がほどよく集中できます。
私は気分がノってくると3時間とか休み無くやってしまうことがあって、ただそれをやってしまうと疲れてしまって、そのあと1時間ぐらい休まないとまた気合いが入らないことがあります。

そんなときに、ポモドーロを利用すると、「あれ?もう終わり?」と思いつつ、強制休憩を入れることで、何サイクルも継続的に集中できるのが魅力でした。
キャッチフレーズをつけるとすれば「持続可能な集中」みたいな。

で、そのポモドーロを利用するのにタイマーアプリがあると便利です。
PC用のアプリもあり、使ってみたこともあるのですが、マウスやキーボードでワンクリックで止められてしまい(当然なのですが)、作業をやめないことが多くてダメでした。まあ、目覚ましみたいなもんですね。止めて寝てしまう(この場合は続けてしまう)みたいな。

で、iPhone用のアプリをいくつか試してみたところ、意外とうまくいきました。
iPhoneなので、マウスとキーボードから手を話、それに画面から目を離すことも良いのだと思います。

それで、便利に使っていたのですが、せっかくなら自分でも作ってみたいなと思ってきました。
少しずつ時間を使って、仕様を考えて、デザインも基本的なのはできてきたので、一度公開しておいて、やる気を保とうかと思いました。

タイマーアプリの仕様

timerapp_fig1

現状の仕様

・ポモドーロなので、2連続タイマー(作業用と休憩用)を設定
・アイコンのきせかえ(10種類くらい?大変そうだったらとりあえず2種類。作業+休憩)
・背景と時計の文字の色変え
・AIRを使ってワンソースで、iOS、Android両対応にする
・日本語版のみ
・無料版で広告をつける
・時間設定は独自のテンキータイプですばやくできるようにする

という感じです。
当初はもっとモリモリと機能をつけたりすることを考えたのですが、実装が大変だし、シンプルさがなくなりそうだったので、なるべくしぼる方向で。

背景と時計の文字の色変えは、実用上はそんなに重要じゃないんだけど、使ってて楽しい愛着のわくのを作りたかったので、やってみようかなと。

timerapp_fig2

今までイラレのライブラリの中のプリセットスウォッチを使ったことなかったんだけど、今回使ってみたら結構たのしいです。明るめ、暗め、彩度高 or 低 などテーマが決められてるので、それでポチポチ変えていくとがらっとイメージが変わって楽しいなと。

このパネルを気軽にポチポチするとイメージががらっとかわるのをアプリでも再現できたらいいですね。
RGBやHSBのスライダをいじればそれこそ無限に設定できるけど、逆に気軽さが失われるので、あくまでこちら側で何色か用意した方がよいかと。
色相環で12色 x (明, 普通, 暗の3種)= 36色くらいでしょうか。

あとテンキーで時間入力はこんな感じにしようかと思ってます。
時 / 分 / 秒 のキーをつけて、1, 5, 秒->OK とかってすばやく入力できる感じで。

timerapp_fig3

あとは、もう少し設定項目の仕様を決めて、プログラムを書いてく感じです。

AIRは、前にMadComponentsをやってみようと思って試してみたのだけど、背景とかのカスタマイズが難しそうでした。
なので、1から簡単なUIコンポーネントを作ろうと思いました。
今回のアプリに必要そうなのは、基本View, Label, Button, Image, VerticalScrollView, HorizontalScrollViewくらいでしょうか。
このあたりをRetina対応しつつ、AS3のネイティブクラス(Spriteとか)から拡張して作ってみようかと。
なかなかに難しそうですね、、ww


自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る