BitList アプリとチャレンジ

BitList - 買い物リスト ＆ To Doリストを先日リリースしました。 無料！

iOS標準のアプリの「リマインダー」の情報を読み書きするアプリになります。
このリマインダー、TODOを管理できるのですが、なかなか使いづらくほとんど使っていません。
だけど、唯一使っているのが、お買い物リスト としての使い方。
使っている理由としては、iCloudのログインだけで他の人と共有できるから。That's all.

だけど、残念ながらApple Watchには「リマインダー」アプリが無い...!
ということで作成したのが、BitList です。

iPhoneのアプリでは、リマインダーアプリよりも更に機能を絞って、以下のみ可能です。

• 項目の追加をすること
• 完了にすること
• 削除すること
• 優先度の有無を設定すること

機能を絞ってシンプルにして使いやすくした というのが特徴。

Apple Watchのアプリでは、

• 完了すること

のみ可能です。

このアプリ、実はチャレンジをしました。
チャレンジとは... 「2日でアプリを作ること」

2日でアプリを作るチャレンジ

1日目:午前

リマインダーがApple Watchで見れるアプリ
ということだけが決まっている状態から開始です。

どんな画面にするか を決めるのを朝10時からお昼過ぎまでかかった。
これが一番苦しかった...!
最初は、リマインダーのリスト一覧画面もある という方針で考えていたのですが、この画面はすっぱり切って一つのリストのみ扱う形にした。
切った理由としては、使いやすいUIを考えるのに時間がかかってしまう割には、必須の機能でもないから。
単純に、リストがテーブル形式で名前が並んでいる画面なら、ちょいちょいって作ればいいだけだけど、もっと負担がなく選択できて、Watch上でもいい感じなもの と考えると、アイコンを付けたいとか欲が出てくる。
リストの名前が単純に並んでいる画面が最初に出てくるよりは、無い方がイイ。 というのが私達の選択。

ということで、作成する画面は以下7つ。

1. iPhone:アイテム一覧画面
2. iPhone:設定画面
3. iPhone:初期設定フロー用 リマインダーアクセス許可画面
4. iPhone:初期設定フロー用 アクセス許可されなかった時の画面
5. iPhone:初期設定フロー用 リマインダー選択/作成画面
6. Watch:タスク一覧画面
7. Watch:Glance

1日目:午後

まず、iPhoneアプリから手をつけ始める
Storyboardのファイルのみ作って、@horiuniさんにパス。
@horiuniさんは、デザインも考えつつStoryboardをゴリゴリ。
その間に、私はUI制御以外のコードをゴリゴリ。

アイテム一覧画面と、設定画面がそれとなく動くところまで仕上げて1日目完了。

2日目:午前

私は、iPhoneの初期設定フロー画面を組み込み。
@horiuniさんは、アイテム一覧画面を実際に動かしつつStoryboardでデザイン調整。

2日目:午後

Apple Watch用のアプリ作成。
アプリの名前を決める。
アプリアイコンを作成。

という感じで、なんとか、目標の2日でアプリ完成！

3日目

2日ではApp Storeへの申請までこぎつけれなかったので、ここは3日目に突入...
説明文、スクショなどなど用意して申請Done！

チャレンジの感想

@horiuniさんと一緒に作ったアプリはBitListもいれると9本目。
お互い出来ることとか、作業のススメ方などは随分わかってきたので、集中してやればできるだろう！と正直最初は簡単に思っておりました。

が、想定範囲内ではあるものの、やはり厳しかった。
実際に手を動かしている時間でれば2日は十分な時間なんだけど、どんな内容にするかの意思決定は難しいし、時間がかかる。
が、一緒にやってきた実績があり、利害関係も一致しているので、一般よりはスムーズに意思決定が出来た方だと思いますよ...!

使いやすいか？ というところが、Flaskでは譲れない重要ポイント。
普段であれば、実際動かせるものを手にとって数日試してみる ということをします。
使ってみて始めて、気づくこととか、新しいアイデアも出てきたりする。
それが出来ないのは苦しかった。

そして、普通ではあれば一番大事であろう、マネタイズも考えられなかった(笑

反面、ズルズルしないというのはメリット。
私たちの2日はコレぐらい作れる という指針が見えたのも凄く良かった。

そして、なにより...達成感を味わえるのが良かった！

このアプリ、ただいま完全無料だけど、好評だったら機能追加する予定ですー！

Apple Watch Glanceのレイアウト

Glanceに望むもの

Apple Watchを手に入れ、お気に入りのGlanceを設定。
でもなかなかお気に入りのものって無かったりする。

必要な情報なのか？
というのももちろんなんですが、綺麗なものでないと置きたくない。

Glanceは、表示専用画面を一つ作るようなものなので、とても手軽に作れるわけですが、デザイン的な重要さはWatchAppアプリよりも高いのではないだろうか。
デザイン的には、全然 気軽じゃないものだ。

Glanceはテンプレートベース

ご存知の方も多いと思うが、Apple WatchのGlanceはテンプレートベースでレイアウトする。

UpperとLowerに分かれていて、それぞれにテンプレートを適用して実装していく。
UpperとLowerのサイズは決められていて変更することはできない。

どんなテンプレートがあって、それらはどんなサイズになるのか？は、
Apple WatchkitのDesign Guides and Templatesにある
Apple Watch Design Resourcesのファイル見るのが一番早い。
なぜなら、XCode上ではフォントサイズが分からないから。(=サイズの修正は不可)
このリソースにはpsdとsketchのファイルが入っているので、そこからフォントサイズが分かる。

マッチするテンプレートがあれば幸せですが、無い方が多いのではないかと思う。
その場合は、自由に設定ができるGroupで囲まれたテンプレートがあるのでそれが使える。
だが、文字を表示する場合はできるだけそれを避けて、テンプレートのLabelを使えないか検討するのをオススメしたい。
(その理由は後述)

言い換えると、Glanceのデザインを考える際、
「画面デザインを考えてから、合ったテンプレートを探す」のではなく、
「テンプレートから合うものを考える」という方がよいかもしれない。

テンプレートを使うメリット

整ったレイアウトになる
というのは言わずもがなと思うが、他にもある。

1. 端末によってフォントサイズを変えてくれる

Apple Watchには38mmと42mmの端末がある。
端末によって、フォントサイズを変えた方が整うことが多い。
Watchは画面サイズが小さいので、iPhoneよりもそういう場面が増える。

テンプレートで用意されたラベルは、自動的にサイズを変えてくれる。
例えば、
42mmの時は、San Francisco Display/Regular 45pt のものは、
38mmの時は、San Francisco Display/Light 40pt になる。

2. フォントの上下マージン

Apple Watch標準フォントのSan Franciscoには、上下にマージンがある。

テンプレートのLabelは、このフォントの上下マージンが無い状態でレイアウトしてくれる。


左はテンプレートのラベル表示。
右はLowerをGroupにして、自分でラベルを追加した時の表示。(もちろん項目間のスペースは0に設定済み)
テンプレートのように詰めてラベルをレイアウトするのは、頑張ればできなくないが結構大変だと思う。
WatchでのレイアウトではX,Yの絶対座標での位置指定はできないし、(Groupを除いて)要素を重ねて置くことはできないから。

この"詰めれない"というのが、整ったレイアウトにするハードルをかなり上げてしまう。

3. 他アプリとの統一感

Glanceではページをめくって他アプリのGlanceも見る。
その際に、フォントサイズが各アプリでバラバラよりは、統一されていたほうが見やすいに違いない。
テンプレートは色々あるが、使われているフォントサイズはほぼ決まっていて、全体でも5つぐらいしかない。

また、大きい文字(=重要な文字)がある位置も、ある程度決まる。
テンプレート全体を見渡してみても、一番大きい文字が、一番下にレイアウトされることは無い。

---

提供されているテンプレートを使うとよい という締めくくりになるのだが、
この数日、私は、まさにGlanceのレイアウトで悩んでいた。
数が決まっているテンプレートではあるが、選択するのはとても難しい。
でも、自分でラベルを置いてレイアウトするよりは、よっぽど楽 という結論に今は落ち着いている。