2012年5月29日火曜日

DeskClockCalendarのプロモコード差し上げます!

iPad用アプリ 時計&カレンダー Desk Clock Calendar がリリースしました! やったね♪
Desk Clock Calendarは、時計・カレンダーとともに、経過時間を円グラフで表示するアプリ。

ずっと表示するものだから、ちょっとカッコイイものが欲しくて作成しました。
雰囲気はちょっとレトロなポスター風(勝手なイメージw)。
仕事場やリビングにおいていても良い感じに仕上がっていると思うので、iPadをお持ちの方は是非使ってみてください!
価格は170円ですが、6/12まではリリース記念として半額の85円でセール中です。

そこで....私から...
先着10名様に無料で使えるプロモコードをプレゼント!
欲しい方は twitter で @aqubi までご連絡ください。"プロモコード欲しいよ" と書いてもらえればOKですー。
プロモコード送付はTwitterのDirectMessageで送る予定です。

プロモコードを使う方は、AppleStoreのレビューを書いて頂けると有りがたいですm(__)m
レビュー、ホント有りがたいのです....(;_;)
ご応募お待ちしてまーす! プロモコードの使用期間が限られているのでお早めに....

追記:
プロモコードを使ってインストールすると、AppStoreのレビューは書けないことに気づきました。。
よければ一言感想を頂けるとうれしいです!





Desk Clock Calendar
価格 : 170円 (6/12までリリース記念セール中で85円)
カテゴリ : ライフスタイル
対応機種 : iPad
対応OS : iOS5.0以上
サポートページ : http://dcc.places-inc.com/
リリース日 : ver1.0 2012/05/29


• • •

2012年5月27日日曜日

iOSで時計アプリを作る

GW中にゴソゴソつくっていた、iPad用時計アプリ 時計&カレンダー Desk Clock Calendar がもうすぐ公開される予定です!
仕事中でパソコンに向かっている時、眠っているiPadを有効に使いたいー と思い作ってみました。
今週、今月、今年で、もう何%過ぎてしまったか? のグラフ見れる、焦る機能付きですw

多分、プロモコードの配布とかすると思うので、興味有る方は是非。

時計では 時間の表示 をします。
時間を表示って、結構いろんなアプリで表示が必要になりますけど、誰もが一度は多分経験するだろうハマリ箇所をご紹介。

時間の表示は、NSDateFormatterを使ってフォーマットして表示します。
NSDateFormatterはOS側のLocaleの設定や、24時間表示 on/off の設定によって挙動が変わってしまうの注意!

たとえば、以下のように表示設定をするとする。
NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
[formatter setDateFormat:@"yyyy/MM/dd HH:mm:ss"];
NSDate *date = [NSDate date];
NSLog(@"date %@", [formatter stringFromDate:date]);

HHは、24時間表示の設定なので、

2012/05/27 15:22:50

のような24時間表示の結果を期待するのですが、これが、表示が何もされなくなったり、12時間表示になったり というパターンになる時があります。
その時は、OS側の設定で 設定 → 一般 → 日付と時刻 で 24時間表示 が off になっている時に発生します。
逆に 24時間表示が on になっている時に、hh(12時間表示)のフォーマットにしてもNG。

解決策としては、NSDateFormatterにLocaleを設定してあげること。
[formatter setLocale:[[[NSLocale alloc] initWithLocaleIdentifier:@"ja_JP"] autorelease]];

ちなみに、
[formatter setLocale:[NSLocale currentLocale]];
では上手く反応してくれなくて解決になりませんw
国際化しているアプリでは気持ち悪いデスヨネ...
Localeがjaだと 5月と表示されるが、enだと May となったりもするので、そのコードにjaのLocaleを単純にいれてよいのか?はちゃんと確認が必要です。

逆に考えると、OSの設定が引き継がれるので、自分のアプリで設定項目を作らなくてもよかったりする場面もあるかも。
表示される文字の長さに注意して、画面レイアウトすれば... ですけども。

今回作成したアプリでは、時間はキモのところであり、経過時間などの計算もしたりするので、 NSDateFormatterでのフォーマットを使っている所もあるのですが、NSDateComponentを使ってNSDateの情報を抽出して自分でフォーマットしている所の方が多いw
NSDateComponent は、NSDateを年/月/日/曜日 などに分割してくれるものですが、NSCalendarと一緒に組み合わせて使うと、 経過日数の算出とか、今月の日数の算出とかできます。

まとめると....
日付を表示するアプリを作る場合は、複数のテスト端末を用意して、24/12時間表示の設定が違うもの、Localeが日本と日本以外で違うもの を用意する。さらに言語設定が違うものも揃えとくと吉。
というお話でした。

• • •

2012年5月21日月曜日

iPhoneアプリの作成の入り口

先日見ていた某USTで、
"MVCのcontrollerがでかくなっちゃって、modelどこいった? みたいなの ありがちw"
ってお話を聞いたので aqubi風の手順をPicTackを作った時を例にを書いてみよう! というエントリ。

手順は、作るモノによっても違うし、作り手によっても違うと思いますが、参考になったと思ってくれる人がいるのかもしれない という期待を込めて。



1.アプリのイメージを固める

まぁ当たり前ですねw
PicTackの場合は、一言でいうと、 "出されたお題にそって絵を書くアプリ"
"対戦にすることで、絵が上手い人だけでなく下手な人だって楽しく、盛り上がる!" というのが面白さ。
ということで対戦するのが必須の機能として作成を始めました

2.ワイヤーフレーム作成

どんな感じで画面がすすんでいくか? のイメージをざっくりと作成します。
cacooを使って作成しました。(お世話になっています)
実際この作業の完了タイミングは、後述の 3.プロトタイプ作成 が終わるまで続いていきます。

3.プロトタイプ作成

2.ワイヤーフレーム作成 って固まるまではそこそこ時間かかるので、 並行して プロトタイプを作成し始めました。
ポイントは、ブレが少なそうな所から固めていくこと。

3-1. 外部IOの調査

外部要因は思わぬ落とし穴があるもの。
新しく使うiOSの機能とか、外部のサービスをつかう とかの場合は調査をします。
PicTackの場合は、Bluetoothで送受信がどこまでできるか? という所でした。

このタイミングで決めるのは機能として必須となるもののみ。
twitterでツイートする とか補足的な機能は絶賛後回し! ここの切り分け重要。

このタイミングで、改めて分かる制限事項などがあるので、でてきたら、ワイヤーフレーム作成フェーズ中にフィードバック。

3-2. データモデル作成

最初はデータモデルを作成します。
データモデルはブレが少ないし、これがある程度あると後の画面の組立とても楽になります。
でも仕様が決まっていないと、完璧なものは出来ないので、ブレが無さそうな基本的な所を作っていきます。

設定項目用のデータモデルはだいたい作るので作成しますね。
単純な設定しか無い時はシングルトンにしたりもします。

PicTackの場合は、
「1回のゲーム」class の中に、「タイトル」「サンプル画像へのリンク」の情報が入っている
「参加者」class の中に、「参加者の名前」「書いた絵の情報」 の情報が入っている
というのが最初からなんとなく見えているので、なんとなくのレベルで作っていきます。
あるかなー ないかなー と悩むものは、作りこまないのが吉。
だけど、データの塊(RDBでいうとテーブルになりそうな部分)はクラスだけ作っておきます。

なんとなく.. というのが微妙とおもわれるかもしれませんが、この属性(変数)をどこかに書きたい! と思った時に、適切なデータモデルのクラスがあり、そこにすぐに書けるのはとっても大事と思います。
そうでないと、Controllerとか適当な所に書きたくなっちゃいますので。

3-3. InterfaceBuilderで画面をざっくり作成

2.ワイヤーフレーム作成 で 画面の流れがみえてきたなー と思ったらざっくり作り始めます。
内部の細かな実装は後回しで、画面遷移部分を最初にひと通り作って、仕様の考慮不足がないかを確認していきます。
なんかあれば、ワイヤーフレーム作成フェーズ中にフィードバック。
実際画面を動かしてみると見えてくるものが多いもんですw

3-4. 外部IOのデータモデル、データモデルのコントローラ作成

PicTackの場合は、Bluetoothの通信の基本部分の作成になりました。
Bluetoothの通信はバイナリで行うことにしたので、各タイミング毎にデータフォーマットを決めて、それをデータモデルに落とし込みます。
送受信のイベントを受け取り、データモデルに展開して使いやすくするような動作の部分も作成していきます。
そういう部分のところは、データモデルのコントローラ といっていいのかなー。
ここを使いやすく、テストもして正常動作を確認して、後で安心して使えるように用意しておきます。
Bluetoothの通信がおかしいときに、ここのバグが原因だとあとでめっちゃ混乱するのは目に見えているのでw

PicTackの時にはなかったのですが、外部のサーバーとのアクセスをする時には、 アクセスするための口(メソッド)は用意しておきます。
ネットワークアクセス開始した/終了したタイミング、システムバーの通信中のインジゲータのグルグルを開始したり止めたりしたいので、そこらへんが上手く動くように最初に作りこんでおきます。
非同期で基本動かすと思うので、ちゃんとカウントとってグルグルさせましょー!

3-5. イベントの整理

画面からのAction, 外部IOのcall、callback のイベントのメソッドを作っていきます。
このイベントの結果受け取りは、どうやって行うのか? をまとめていきます。
方法としては、以下のように色々ありますよねー。

  • delegateでやり取りする
  • observer的にやりとりする(NSNotificationCenterなど)
  • クラスの変数を保持しているので直接メソッド/プロパティをcallする
統一された作りになるように、全体をみつつ設計していきます。ここ、楽しい作業ですよ!
最初はメソッドの実装は空のまま、ザクザク必要そうなものを作っていくのがオススメ。
全体から俯瞰する というのに集中力がきれないように作成していけるので。
後の組立作業で、この箇所が上手く設計されていると やったった! という気分になります。

3-6. 主となる機能を実装

いままで下ごしらえしたものを、実際組み上げていきます。
PicTackの場合は、ゲームを開始して、書いて、結果が見える所まで。
プロトタイプで必要となる実装のみ、先程用意したメソッドの中にコードを書いていきます。
ここで、プロトタイプとしてレビューしました。
レビュー後、やっぱり欲しい画面とか機能とか追加して、ワイヤーフレーム作成フェーズとともにプロトタイプの完了。


ここまでのプロトタイプの作成で、手元のメモによると 5日かかった模様。
まぁ、アプリってそこからが長いんですけどもねーw

• • •

2012年5月19日土曜日

iOSでバッテリー残量を取得する

iPhone/iPadのアプリで、バッテリー残量を取得するには、以下で取得が可能です。

[UIDevice currentDevice].batteryMonitoringEnabled = YES;
float battery = [UIDevice currentDevice].batteryLevel;

float battery にて入ってくる値は -1 〜 1.0 までになり、
-1 は シュミレータで実行などにより、バッテリー状態が不明な時(UIDeviceBatteryStateUnknown の時)に設定されます。
実際の値は、0〜1.0 までの値で設定されるので 100 をかければ パーセントの値になります。

簡単やーん! とおもって早速書いていたのですが、
iPhone/iPadでiOSが表示している上部のステータスバーのバッテリー残量の%と違う値が返ってくる。

コードでは 85% の時、ステータスバーは92%
コードでは 65% の時、ステータスバーは69%
コードでは 55% の時、ステータスバーは57%
コードでは 50% の時、ステータスバーは51%

どうやら、コード上では 5%刻みでしか取得できていないっぽい。

ググっていたら以下のサイトを発見。

How to get UIDevice batteryLevel to provide status in 1% increments or finer

The UIKit calls to retrieve Battery can only get a number better 0.0 to 1.0 with 0.05 steps which means 5% intervals. In order to get it with finer granularity you might have to jail break the device and setup something like this but you might not be able to submit the app. Just in case, I came across this post, which might be of interest to you.

そういうものらしいです。
リジェクト対象になってもいいなら方法はあるらしいw

試していると、
しかも誤差は +-5%には収まらない時がある気もする。 +-10%とかなのだろうか。
UIDeviceBatteryLevelDidChangeNotification で変更イベントをリスナーしていると、充電してないのにbatteryLevelが増えた値が来る時があったりとかもする。
まぁ、あまり当てにしてはいけない ということだろう。

ということで、本日の教訓。

バッテリー残量を自作して表示する時は、90%など、実際の数値は表示しないほうがよさそう。
誤差が +-10%離れた値が返ってくる可能性もあるので、正確な値はやんわり隠しても大丈夫なアプリ仕様を考えよう。
• • •

2012年5月18日金曜日

選択肢から選ぶアイデアを探す

先日、選択肢から1つ選ぶiPhoneのUI部品 というエントリを書きましたが、普段接しているモノにもいいアイデアがありそうだなー ということで探してみました。

Saeco Talea Giro Plus という エスプレッソメーカーの操作部分です。

抽出する "お湯量調整" を銀色のグルグル回す所で選択します。
カップマークボタンは、それを押すと "抽出開始" する。 一番使うボタン。
その下の "珈琲豆調整" ボタンは、ボタンを何回か押すことにより豆の量を選択させるボタン。

普段よく使うものは、"抽出開始" と "お湯量調整"です。
それらがぐっと前に出ているので、ぱっと選択しやすい効果をうまく出していますよね。

"お湯量調整" 、"珈琲豆調整" は、両方共選択肢から1つを選ぶラジオボタン的な要素です。
"珈琲豆調整"は最初に好みの量を色々試行錯誤するけど、そのあとはあまり触らなくなります。
なので、選択がしにくくてもあまり不満は感じてません。

左側にある光りそうな部分は、現在のステータスを表示してくれるもの
お湯を暖めているからまってね... というタイミングでは、4つのランプの光がグルグルと回ります。
まるで、端末のUIで使われる loading中のインジゲータみたいに。
右側にある光りそうな部分は、清掃をする時などにトグルの操作で設定します。つまりあまり普段は使わないボタンです。

  • 普段よく変更するもの
  • 変更しないが設定内容は見えてて欲しいもの
  • 普段は設定内容が見えてなくてもいいもの

という、内容によって表現を考慮し、見かけ上も素敵なデザインになっていて素晴らしいです。

  • 大きく設定を変えるものは操作しやすい ぐるっと廻るボタンに
  • あまり普段は変えないものは、ボタンを何度か押して選択させるものに
というのも感じます。 ぐるっと回せるレバーは、実際のモノでは使いやすいけど端末上でドラッグさせるのは難しい というのもあるので、iPhoneなどのUIでそのまま使えるものではないのですが、 色々考慮されている素敵なUIは身近にあるんだなー と思いました。

• • •

2012年5月17日木曜日

選択肢から1つ選ぶiPhoneのUI部品

iOS(iPhone, iPad)で、
  • 複数の選択肢の中から1つを選択する
  • 日付などを選択する
という場合、Picker(ドラム) を使ったりします。
Pickerというのは↓ こういうやつ。
このPickerの表示、
  • 全体サイズが思うように調整できない
  • 色のカスタマイズも思うようにできない
...があり、凝った感じにUIや色を使っている場合には合わなくなってしまう事があります。
通常はラジオボタンを並べそうな用途の場合、Picker使うか、Tableを表示して行選択させるか などの選択になるのですが、 もっと小さく、手軽に(小さい領域)で選択できる方法はないもんか! と思う時も多々あります。

ということで、使いやすそうなUI部品を自作しているアプリを。

Fitocracy

http://www.fitocracy.com/

運動を通じてみんなと共有出来るアプリ。
細かなUIがしっかり作りこまれていて、かなり金かけてやってるなー という感じ。
運動が続けられるように仕組まれているものも豊富っぽい。
Achievements , Quests , Challenges とかもある。
だけど、機能が豊富&英語なので私には使いこなせません。。
ここでの体重入力は↓な感じ。
邪魔にならない色デザインになっている のと、選択されているものが はっきりとわかりやすい。
Pickerに慣れている人には違和感なくつかえそうです。

National Parks by National Geographic

http://itunes.apple.com/jp/app/national-parks-by-national/id518426085?mt=8

国立公園の画像とか情報が見れるアプリ。
このアプリも綺麗につくられていて、見てるだけで和みます。
惚れちゃうぐらい良くできてますね。
選択肢の文字が少ない時は、横に並べたいですもんね。
選択されている箇所はレバーっぽい立体的なボタンが表示され、選択文字列はちょっと上にでています。

他に良いアイデアのUIがないかちょいちょい確認しようーっと。
• • •