クックパッドさんのpotatotipsで発表してきました

2013年11月13日、クックパッドさんでpotatotipsというiOSやAndroidのtipsを発表する会がありました。

当日の参加者は総勢で24人(応募はもっといたらしい)。1人5分の発表ですが、これだけで120分確定なのでTipsと言ってもなかなかのボリュームです。

当日は基本的に参加者みんな発表なので、自分も発表してきました。

自分は「ユーザービリティ向上の為にここらへん気を使いましょう」的な難しくも新しくもない発表だったのですが、諸事情によりスライドをアップできません。(権利関係を確認するの面倒)。また、時間の関係上コードの説明はほとんどしなかったので、ブログで改めて書いてみたいと思います。実際の挙動はiOS版の攻略アプリを見て下さい

 

1.Webから取得する画像はキャッシュして再利用する

Webから画像を取得するということは当然通信が発生するため、毎回通信していたのでは待ち時間もかかるし、サーバーにも負担がかかります。そのため一度取得した画像は端末内に保存しておいて再利用できるようにします。キャッシュの方法はいろいろありますが、一意なキーでファイル名をつけてLibrary/Cache以下に保存するのが一番簡単だと思います。再利用することで(キャッシュがクリアされるまでは)オフライン状態でも見ることができます。ネットの負荷軽減とユーザーの利便性に効果的なので、できるところではキャッシュするのが望ましいです。

 

2.データの多いテーブルビューのセルで、ネット越しの画像を使うときは、テーブルのスクロール中はリクエストしないで、スクロールが止まってからリクエストする。これにより、見えない部分のセルの画像リクエストをしないで済む。

テーブルのセルの画像を表示する時、cellForRowAtIndexPathですぐにリクエストを発行してしまうと、そのままさらにスクロールさせた場合に見えない部分の画像までリクエストしてしまうことになります。キャッシュ機構を入れていれば無駄にはなりませんが、データが大量にあり勢い良くスクロールさせた場合、見たい部分のセルの画像がなかなか表示されない可能性があります。

それを回避するため

・cellForRowAtIndexPath では
DL済みならすぐ表示
DLまだならとりあえずインジケータ
・scrollViewDidEndDragging、
scrollViewDidEndDecelerating
あたりで
tableView.visibleCells
の画像をリクエストする
・DL完了したらアイコン表示

というステップを踏むことで、スクロールが停止したユーザーが見たい部分の画像のみをリクエストでき、無駄なリクエストを減らせます。

 

3.アプリ内でブラウザを組み込むとき、リンククリックで遷移した時もタイトルを変更する

アプリにブラウザを内包する時、最初のページは何も考えずタイトルを設定すればいいですが、リンクで画面遷移した時、そのままではタイトル部分が変更されません。そのためタイトル部分を更新する処理を入れる必要があります。

UIWebViewのdelegate、webViewDidFinishLoadで、

[webView stringByEvaluatingJavaScriptFromString:
@"document.title"];

とすれば、そのページタイトルが取得できますので、適宜更新するとユーザーが迷子にならずにすみます。

 

4.アプリ内ブラウザでタイトルを表示する時、タイトル部分を2行にしてもいいかもしれない

最近のウェブページタイトルは長いため、そのまま表示してもほとんど入りきらず、かと言ってフォントサイズを小さくしても、長いタイトルでは文字が小さすぎて読めません。そこで、タイトル部分にUILabelなどを設定して2行表示できるようにすると、そこそこ見やすい表示ができます。

navigationItem.titleView に 好きなようにカスタムしたUILabelを入れるのが簡単です。

 

5.UINavigationControllerでPushしていくと、画面が深くなるので長押しで一気に戻る処理を入れる

NavigationControllerのPushは便利なのですが、デザイン等の都合上、タブが無い状態でPushすると戻るときに何回もバック(戻る)ボタンを押す必要があります。これは面倒なので、LongPressGestureで一気に戻る処理を入れてやると便利です。

UILongPressGestureRecognizer *gesture 
=
[[[UILongPressGestureRecognizer alloc]
 initWithTarget:target
 action:longPressAction] autorelease];



[btn addGestureRecognizer:gesture];



UIBarButtonItem* item = 
[[[UIBarButtonItem alloc]
 initWithCustomView:btn] autorelease];

上記のaction:longPressActionでNavigationContoroller::popToRootViewControllerなどを使ってやります。

 

6.長押しとか普通のユーザーは気が付かないので、N階層目でガイドを表示する

上記の長押し処理ですが、「戻るボタンを長押し」というのは一般的な操作では無いので、普通に使っていてもユーザーは気が付きません。ですので、その操作ができるよー、というガイドを表示させてやります。攻略アプリの場合は、3階層目に入った最初の1回のみガイドを表示させています。

下記のような感じです。

UINavigationControllerを継承してOverride


-(void)pushViewController:
(UIViewController *)viewController
 animated:(BOOL)animated {


  if( [self.viewControllers count] >= N ) {

    // N階層目以上で行う処理

  }
  [super pushViewController:viewController
 animated:animated];

}

 

7.スクロールする画面(モンスターリスト)で、ステータスバー以外のところでも一番上、一番下に一気にスクロールさせる

モンスターリスト画面ではモンスターが大量にいるため、一番下までスクロールさせるのが面倒です。特に新しく追加されたモンスターはNo順で下に追加されるため、下の方を見ることが非常に多いです。

UITableViewのメソッドでスクロールさせられます。

[self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:row inSection:sec]
 atScrollPosition:UITableViewScrollPositionBottom
 animated:YES];

攻略アプリでは「合計NNNモンスター」の部分をタップすると一番下まで移動します。

 

8.ガイド表示など、バツ(閉じる)ボタンが小さく押しづらいところでは、画面の他の部分をタップしても消えるようにする

ガイド表示はいいのですが、それを閉じるのに細かい操作が必要な場合、かえってストレスになってしまいます。そこで、バツボタン以外の空白部分でもタップしたらガイドを閉じるようにしました。処理的には、タップを許可する部分に見えないViewなどを置き、そこのタップ判定をとって非表示にします。

 

9.検索画面では最初から入力欄にフォーカスを当ててすぐに入力できるようにする

モンスターリスト画面で右上の虫眼鏡アイコンを押すと、検索画面に遷移するのですが、この時にデフォルトで入力欄にフォーカスを合わせてキーボードを表示させます。そうすればユーザーがいちいち入力欄をタップすること無く入力でき、操作に関して迷子にならないようにできます。

入力欄にbecomeFirstResponderをしてあげればOKです

 

10.検索ではインクリメンタルサーチができると便利

入力時に入力確定後に「検索」ボタンを押させるのでもいいのですが、入力時に自動的に検索(インクリメンタルサーチ)されると便利です。ただし、そのまま、

-(void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText

などで都度検索処理をすると検索処理の間もたつきが発生してしまいます。そこで先のイベントですぐに検索をするのではなく、タイマーなどを使って0.5〜1.0秒後くらいに検索処理をするようにします。入力が再度合った場合はタイマーを再セットして最後の入力確定から一定時間後に検索するようにすると、スレッドなどを使わなくてもほとんどストレスのないインクリメンタルサーチが実装できます。

(このアイデアは以前に岸川さんが別の勉強会で言っていたことを使わせてもらいました)

 

11.適当なタイミングでキーボードを隠す

9とは逆で、検索後の結果が表示され、テーブルに項目が表示されるとユーザーは自然とそのテーブルをスクロールさせようとします。この時にキーボードが表示されたままだと邪魔になりますので適切なタイミングでキーボードを非表示にします。

scrollViewWillBeginDeceleratingやscrollViewWillBeginDraggingで、resignFirstResponderを呼んであげればOKです。

 

 

駆け足での説明になりましたが以上です。

いずれも難しい処理ではありませんが、細かい積み重ねがユーザーの操作体験に影響するので、手法のひとつとして引き出しに入れておいて損はないと思います。

 

最後になりましたが、@tokoromさん@7ganoさんをはじめ、非常に楽しいpotatotipsを開催してくださったことに感謝します。今日ので雰囲気がなんとなくわかったので、また参加して勉強させてもらいたいです。

ではでは。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>