Cocoaの日々

新アプリ IconTimer をリリースしました。決めた時間をカウントダウンしてアラームを鳴らすだけのシンプルなタイマーアプリです。見た目にも音にもこだわりました。


特徴的なのは時間の選び方。
タップしたボタンの数字を足した合計が計測時間（分）になります。


以下は紹介動画。




時間・アイコン・色を自由にカスタマイズ。




以下は開発メモをつらつらと書きます。

ユーザインターフェイスめも

既存のタイマーアプリを使っていて毎回不満に感じていたのは、時間を選ぶ時に頭の中で「ひっかかり」があるところ。うまく説明できないのだけれど、あえて言えば時間を選ぶ時に注意を払わせるのが苦痛だった（どんだけものぐさと言われそうですが。。）
アプリを使うのがちっとも楽しくない。


例えば電卓式の時間を直接入力するタイプの場合、目的の数字を押してスタートするだけ....なんだけど打ち間違えたらクリアしないといけない。だから無意識のうちに間違えないように注意を払う。それがひっかかる。一方あらかじめ時間がリストで選べるタイプの場合、たくさんの選択肢から目的の時間を注意を払って探さなければならない。これもひっかかる。

そんな気を遣わずにポン・ポン・ポンと選ぶだけで時間が選べる UIはできないのか？それが開発の出発点だった。注意を払わ無くて良い UIって、きっと失敗しても直すのが苦にならないものだろう。試行錯誤がしやすいUI はどんなものか。





最初イメージとしてあったのは、少ないボタンを配置してそこから時間を選んでスタートするデザイン。どうせよく使う時間は決まっているだろうから、あらかじめ好きな時間を割り当てておけばボタンは少なくていいだろう。数が少ないのでひと目で把握できて判断もしやすそうだ。ただ問題なのはボタンが少ないと時間のパターンが物足りないこと。さらに使う前に時間を決めて設定するのはいちいち面倒。もしパターンを多くしようとボタンを増やせば選択方式と同じ罠に陥る。


そんなことを思いつつプロトタイプをひたすら弄ってた。ふとボタンを排他的に扱うではなく「足し算」にしたらどうかと思いつく。タップした時にONだった他のボタンをOFFにするのではなくそのまま残す。その残ったONボタンの数字の合計がタイマーの時間とする。逆にもう一度押すとOFFになり、その分タイマーの時間が減る。つまりタップのON・OFFがちょうど足し算・引き算の意味を持つことになる。これなら間違っても何度でもやり直せる。そして何よりもこの方法だとボタンの数以上の時間パターンを作り出すことができるのに気がついた。

Asset Catalogには画像以外のデータも置ける。サウンドファイル（.aif）を置いてみた。

let sound = NSDataAsset(name: name)
// use sound.data

取り出したサウンドファイルを鳴らす。

import UIKit
import AVFoundation

class Sound: NSObject {

    static var player:AVAudioPlayer?
    static func play(name:String) {
        if let sound = NSDataAsset(name: name) {
            do {
                try! AVAudioSession.sharedInstance().setCategory(AVAudioSessionCategoryPlayback)
                try! AVAudioSession.sharedInstance().setActive(true)
                try player = AVAudioPlayer(data: sound.data, fileTypeHint: "aif")
                player?.volume = 0.3
                player?.play()
            } catch {
                print("error")
            }
        }
    }
}

上記は下記サイトのコードをクラスメソッドに置き換えただけ。サウンドファイルをアセットに置くのもここで知った。
Accessing audio (and other) files stored in the Xcode asset catalog with Swift

前回のやつにアニメーションを加えてみる。子ビューが下からシュッと出てくるやつ。

これは制約を使えば簡単。子ビューの上のラインを画面下端から、最終位置（この場合親ビューのCenterY）まで引き上げてやれば良い。
まず子ビューの初期位置を最終下端で作る。

let v1c = NSLayoutConstraint(item: tableView, attribute: .Top, relatedBy: .Equal,
     toItem: parentView, attribute: .CenterY, multiplier: 1.0, constant: parentView.frame.size.height)

一旦 parentView.layoutIfNeeded()で初期描画させた後、アニメーションのコードを走らせる。

v1c.constant = 0.0
        UIView.animateWithDuration(0.5) {
            parentView.layoutIfNeeded()
        }

こうすると子ビューの上の制約の値（constraint）が下端（parentView.frame.size.height）から 0.0へアニメーションしながら変化する。

なおこのままだと制約のワーニングが出る。

2015-06-11 08:10:18.938 LKMenu_Example[89282:6908924] Unable to simultaneously satisfy constraints.
 Probably at least one of the constraints in the following list is one you don't want.
 Try this: (1) look at each constraint and try to figure out which you don't expect; 
(2) find the code that added the unwanted constraint or constraints and fix it.
 (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer
 to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<0x7fadd864a120 v:><0x7fadd8652f10 uitableview:0x7fadd981f200.top="=" uiview:0x7fadd8788930.centery><0x7fadd8653090 uitableview:0x7fadd981f200.bottom="=" uiview:0x7fadd8788930.bottom>　　：

（？）。。

。。。。
（）。


。

。


（）（）。

。。
。

、。

、。。

、（）。

　├──　│  ├──　│  ├──　│  └──　←（）

。

　→

（）、。

※。。

。

。。

。。。

。。






。。。

。

。

。、。

。。。、。


。

（）

。。

（？）。

。。「」、。、。、。。

、、、。

。

• ＋
• （）

、。