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) 
(
    "",
    "",
    ""
)
　　：

これは子ビューの上の制約(v1c)と下の制約(v2c)の値が初期状態では等しくなる（逆転する？）ため。こんな時は優先順位(priority)をつけてやればいい。

let v2c = NSLayoutConstraint(item: tableView, attribute: .Bottom, relatedBy: .Equal,
      toItem: parentView, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
        v2c.priority = 750   // 追加
        parentView.addConstraint(v2c)

親ビューに制約を追加する前につけるのを忘れずに。これでワーニングが消える。priorityは大きい方が優先順位が高い。IBでプロパティ欄を見ると 1000(Required), 750(High), 250(Low)となっている。
デフォルト値は 1000（最大値も 1000）。


最終的なコード。

parentView.addSubview(tableView)

        tableView.setTranslatesAutoresizingMaskIntoConstraints(false)
        
        let h1c = NSLayoutConstraint(item: tableView, attribute: .Left, relatedBy: .Equal,
            toItem: parentView, attribute: .Left, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(h1c)
        let h2c = NSLayoutConstraint(item: tableView, attribute: .Right, relatedBy: .Equal,
            toItem: parentView, attribute: .Right, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(h2c)
        
        let v1c = NSLayoutConstraint(item: tableView, attribute: .Top, relatedBy: .Equal,
            toItem: parentView, attribute: .CenterY, multiplier: 1.0, constant: parentView.frame.size.height)
        parentView.addConstraint(v1c)
        let v2c = NSLayoutConstraint(item: tableView, attribute: .Bottom, relatedBy: .Equal,
            toItem: parentView, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
        v2c.priority = 750
        parentView.addConstraint(v2c)
        parentView.layoutIfNeeded()
        
        v1c.constant = 0.0
        UIView.animateWithDuration(0.5) {
            parentView.layoutIfNeeded()
        }

Autolayoutはコツがわかってくると楽しい。


（おまけ）animateWithDuration:usingSpringWithDamping: を使えばアニメーションにバネ効果（バウンス効果っぽい）をつけられる。

UIView.animateWithDuration(0.5, delay: 0.0, usingSpringWithDamping: 0.7,
            initialSpringVelocity: 0.0, options: UIViewAnimationOptions.CurveEaseInOut,
            animations: { () -> Void in
            parentView.layoutIfNeeded()
        }) { (Bool) -> Void in
        }

メニュー作成中。Autolayoutでこんな感じのビュー配置をしたい。
ランドスケープで。

親ビューが parentView、子ビューが tableViewとするとこんな感じ。

        parentView.addSubview(tableView)

        tableView.setTranslatesAutoresizingMaskIntoConstraints(false)
        
        let h1c = NSLayoutConstraint(item: tableView, attribute: .Left, relatedBy: .Equal, toItem: parentView, attribute: .Left, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(h1c)
        let h2c = NSLayoutConstraint(item: tableView, attribute: .Right, relatedBy: .Equal, toItem: parentView, attribute: .Right, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(h2c)
        
        let v1c = NSLayoutConstraint(item: tableView, attribute: .Top, relatedBy: .Equal, toItem: parentView, attribute: .CenterY, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(v1c)
        let v2c = NSLayoutConstraint(item: tableView, attribute: .Bottom, relatedBy: .Equal, toItem: parentView, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
        parentView.addConstraint(v2c)

        parentView.layoutIfNeeded()

ポイントは v1c のところで、親のCenterYに 子ビューのTOPを紐付けているところ。ここの constantを変更すれば高さを調整することもできる。

CocoaPodsで自作ライブラリを作っているケースで、swift対応のためにフレームワーク化（use_framework!）するとバンドルはその中に入ってしまう。

Example.app
　├── LKPostingQueueManager.framework
　│   ├── Info.plist
　│   ├── LKPostingQueueManager
　│   └── Resources.bundle　←ここにくる（以前はもっと上の階層）

プログラムでこれを参照するにはメインバンドル配下では見つからない。

let path = NSBundle.mainBundle().pathForResource("Resource", ofType: "bundle")!　→ ここで nilでクラッシュ
let bundle = NSBundle(path: path)

最初にフレームワークのバンドル（クラスが含まれるバンドル）を取って、そこから引き出すのがポイント。

let frameworkBundle = NSBundle(forClass: LKPostingQueueManager.self)
let path = frameworkBundle.pathForResource("Resources", ofType: "bundle")!
let bundle = NSBundle(path: path)

関連

Resource Bundle の作り方と CocoaPodsでの配布
※上記はフレームワーク化する前の話。フレークワーク化するとこんな面倒は入らず設定だけで済む。

s.resource_bundles = { 
    'Resources' => ['Pod/Assets/*']
  }

みたいな。

StackOneの最新バージョン 1.6.3をリリースしました。このバージョンからアイコンが変わっています。

新アプリ PicsEver をリリースしました。カメラロールの写真を選択してエバーノートに投稿するアプリです。最大１００枚までの写真をまとめて投稿できるのが一番の特徴です。

新アプリ PicsPicker をリリースしました。カメラロールの写真や動画を選択して他のアプリに渡すという単純なアプリです。






初の Swiftを使ったアプリで四苦八苦しました。でも実際 Swiftで書いたのは100行ぐらいで写真選択の部分は昨年 Objective-Cでガリガリ書いた自作ライブラリがメイン。Swiftの使い始めとしてはちょうどよかったかも。

このライブラリは githubで公開している。

このライブラリを使うとこのアプリの写真選択機能と同じものが簡単にできる。

Swiftは面白い。が、Objective-Cのゆるゆるさに比べるとチェックが厳しいので慣れるまでが大変。

本日 EverGear 3.0 がリリースされました。数年ぶりのメジャーバージョンアップになります。基本機能はあまり変わっていませんがデザインとアイコンをすべて一新しました。さらに iPhone6 / iPhone6Plusに対応、そして iPadでも利用できるようになりました。


新しくなった EverGearを紹介します。

（参考）ランディングページ

特徴

EverGearは エバーノートへの投稿に特化したアプリです。このアプリの一番の特徴は投稿前の下書き機能が充実しているところです。

下書の仕組み

EverGearでもっともわかりづらい（？）下書の仕組みについて図解してみました。

テキストは１行目がタイトルになります。長い文章などはここに書きます。「メモ」は文字と写真を１まとめにしたカードのようなもので、このメモは１つの下書きに複数付けることができます。メモには必ずしも写真をつける必要はなく、文字だけのメモも作ることができます。またメモごとに作成日時と位置情報が自動で記録されるようになっているので、ちょっとしたライフログにも最適です。写真の入ったメモは写真のタブで地図と一緒にスライドで観ることができるようなっています。

下書きをエバーノートへ送るとテキスト、メモ、メモ、... の順でレイアウトされたノートができあがります。

このエバーノート上のレイアウトは４種類から選ぶことができます。

• サムネイル＋通常画像
• サムネイルのみ
• 通常画像のみ
• プレーン（CSSなし）

送信の流れ

もう一つ EverGearでわかりづらい送信の流れについて、こちらも解説しておきます。

メニュー

サポート

メールアドレス