今回からはてなブックマークのホットエントリー専用リーダー Hotentry がどういう思想で作られたか、何回かに分けてお送りしていきます。第1回目はメインビューについて。

３ペイン構成のメインビュー

____メインビューの構成は「お気に入り」、「新しいエントリー」、「アーカイブ」の3つのリストが横並びになっています。（画面に表示されるのは1つのリストのみ。）最初からこのような構成だったのでしょうか？

はい。メールでいうところの受信トレイが中央にまずあって、見るべきエントリーとそうではないエントリーをスワイプで左右に振り分けていくというのは構想検討時から実現したい機能の一つでした。

____ Mailbox という有名な iOS のメールアプリがありますが、同じ操作性ですよね。

そうですね。でも構想検討時は Mailbox を使ったことなかったんですよ。話題になっていたので名前は知ってましたが。影響を受けたのは Clear の方ですね。大量のエントリーを効率良く、楽しく消化するにはこれだろうと。で、同じことができるオープンソースライブラリーを探していたら MCSwipeTableViewCell というのを見つけて、 Mailbox と同じ操作を実現できるやつって説明があって。それで Mailbox を入れてみたんですよ。で、あーやられたなーって。

____ Clear は個性的なジェスチャーによる操作で話題なった ToDo アプリですね。

UIマニアとしてはコレクションに加えなければいけない逸品ですね。実用性は全くなかったですけど笑

____ああ、ハハハ..。

セルのスワイプ操作について

____セルのスワイプ操作ですが Mailbox はスワイプの量によって発動する機能が変わるようになってますよね。

あれはやりすぎですよね。普通に誤操作を引き起こすんで。あれを使いわけるには相当な精度での操作が必要ですよ。それこそスタープラチナ級の。なんで Hotentry ではそれはやっていません。あと MCSwipeTableViewCell は操作のトリガーがかかるポイントが%指定なんですね。 Hotentry は横向きのビューもサポートしています。そうすると、縦向きと横向きでトリガーがかかるまでに スワイプする量が変わってしまうんです。これは使いにくかったのでトリガー位置をポイントで指定できるようにカスタマイズしました。

ボタンは画面下部に集約

____その他の特徴ですが、ボタン類がすべて画面下部のツールバーに配置されてますね。 iOS の場合、普通は画面上部のナビゲーションバーに配置するのがセオリーですよね。意図的にそうしているのでしょうか？

みんな本当は下の方が良いと思ってますよね？上にあると片手操作が無理になるんで。でも普通の大手メーカーであれば下だけにするリスクはとれないと思います。 Apple の UI ガイドラインを満たしていないと見られる可能性もありますから。でも、私は失うものは何もないので。むしろ大手と差別化ができるというように考えています。慣れれば絶対に下の方が良いのは明らかですから。ただ、 Apple が想定していないことをやろうとすると、実装が急激に大変になるんですよね。なので、頻繁に使わないであろう設定画面では普通に上部にナビゲーションバーを配置して使っています。

____なるほど。そのメインビューの下部に左から「お気に入り」、「新しいエントリー」、「アーカイブ」の３つのリストを切り替えるボタンがありますね。押すと、スライドアニメーションとともにリストが切り替わります。

やっぱりアニメーションがあると気持ちいいですよね。まあここは好みもあって、 iOS7 のアニメーションが過剰だっていう人も多いようですね。私は好きなので使っていきますよ。

ジェスチャーによるリストの切り替え

____ v1.1.0 からジェスチャーでもリストの切り替えができるようになりました。

ええ。リストのセルをスワイプして他のリストに移す操作はコアとなる機能だと考えていたので最初から入れていますが、基本的にジェスチャーはショートカット的な位置づけにするのが無難ですよね。ジェスチャーが有効かどうかUIから判別できるようにするのは難しいですから。なので、まずはジェスチャーなしで成立するように作って、あとから追加しようと思っていました。

____画面端からのスワイプはリスト自体の移動、端から少し内側でスワイプする場合はセルが移動するんですね。

セルのスワイプがまずありきでしたので、それを邪魔しないジェスチャーを選択する必要がありました。1本指かつ既存のジェスチャーだと画面端のスワイプしかなかったですね。 iOS ではあらかじめいくつかのジェスチャーが用意されていて、画面端のスワイプも用意されています。なので普通はそれを使えばよいんですが、今回はセルのスワイプ、リストのスクロールとも両立させる必要があったので、自前でタッチイベントを取得して判定するようにしています。

背景色でリストをさりげなく差別化

____その他に何か工夫したことは？

3つのリストの差別化ですかね。「新しいエントリー」は白ベースですが、「お気に入り」は黄色、「アーカイブ」は緑というように機能ごとに色を割り当てることで、違いをわかりやすくしています。ただ、 Hotentry は毎日使ってもらうことを想定しています。大きく色を変えてしまうと煩雑さが増し、目疲れすることも考えられますので、白ベースを保ちたいという相反する思いもありました。そこでリストの背景色のみを色づけするという方法をとりました。セル部分は不透明の白で統一しているたため色づきませんが、セルがない半透明の上部バーなどでは背景色がうっすらと透けるよいうになります。これでさりげなく3つのリストを差別化することができたと思っています。

____なるほど。さりげなくがポイントなんですね。長くなってきたので今日はこの辺にしましょうか。貴重なお話どうもありがとうございました。

ありがとうございました。以上、まるでインタビューを受けているかのように(ry