株式会社ユーザベースの技術チームブログです。NewsPicks(iOS)の設計思想2014-12-16NewsPicks(iOS)の設計思想TweetNewsPicksチームインターン生の保田です。iOSアプリ開発のお手伝いをしております。iOSアプリを作っていて悩ましいな、と思うのが、同じ機能を持つがiPadとiPhoneで見た目が違うページをどう設計していくか、ということです。僕が関わった、NewsPicksの特徴的な機能である「ニュース中間ページ」をどのように設計したかについてお届けいたします。NewsPicks上でニュースをみるとき、上図の左から右の流れで画面を切り替えます。この中の真ん中の画面(ニュース中間ページ)の設計についてご説明していきます。当初は、次のような単純な仕様でした。「その他のユーザー」セクションで、コメントを表示ただし、並び順に関してはサーバー側で『時系列順』『Like順』でソートされたものを受信して、そのまま表示していました。当時は次のようなクラス図になっていました(メソッドは省略)。iPadで共通の処理が双方に書かれていたため、メンテナンス性が低いものになっていました。NewsTableViewにはコメントが表示されるのですが、コメントの有無の判定、データの保持などの処理も行っており、ViewとLogicが切り分けられていない典型的なアンチパターンになってしまっていました。次に、人気ニュース一覧からニュース中間ページに遷移した場合、Likeがたくさん付いているコメントを「人気コメント」というセクションで上位に表示するという仕様が産声を上げました。仕様を整理すると、下記のようになります。そこで、以下のような設計に変更しました。Commentsというクラスを作成し、NewsTableViewから表示するコメントの表示内容、コメントのソートなどを切り離しました。これで、ViewからLogicを少し切り離すことができました。CommentsWithTrendingCommentsはCommentsを継承した、人気コメントを表示するためのクラスです。NewsTableViewがどうCommentsを生成すれば良いか知っていて、それをControllerが知っているという設計です。実装の詳細を知らないと使えないクラスはイケてません。検索機能の実装と、連載企画のスタートNewsPicksオリジナル連載企画がはじまり、中間ページに以下のようなページが仲間入りしました。リが追加されたりしました。コメント」というカテゴリを表示することとなりました。仕様を整理すると、下記になります。それに伴い大幅な設計変更を行い、以下の様な設計になりました。