オブジェクト指向UIデザイン ワークアウト5 家族で遊べる場所を探すアプリケーション
OOUIを勉強中です。
『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。
ワークアウト5：家族で遊べる場所を探すアプリケーション
1. オブジェクトの抽出（モデルレイヤー）
まずはタスクから名詞を探します。
・「すみれ山公園」の「すべり台」の「設置場所」を確認する
・「ブランコ」のある「公園」を確認する
・「公園」の「住所」を確認する
・「すべり台」の「一般的な特徴」を確認する
このワークアウトで初めてのtoCアプリ！
名詞を一般化して、名詞同士の関係性をつなげます。
はじめは「公園」「遊具」の2つがメインオブジェクトの単純なやつかと思いましたが、いやここにきてそんなはずはない。ヒント欄とチャレンジ欄をチラ見します。
このワークアウトは、物理的なオブジェクトを題材として暗黙的に存在するオブジェクトを理解することが狙いです。「すべり台」という言葉が2つの意味で使われています。それぞれの意味の違いを考え、異なるオブジェクトとして抽出してください。
何ィ！？苦し紛れに2つに分けてみる。
しかし「遊具（一般）」って。我ながら何か他になかったのか。解答例では「遊具の種類」でした。
「遊具の特徴」はプレゼンテーションレイヤを書き始めてから、特徴から検索することなさそうと気づいてプロパティに回しました。
2. ビューとナビゲーションの検討（インタラクションレイヤー）
メインオブジェクトにコレクション（一覧）とシングル（詳細）のビューを想定します。
ビューの参照関係を、矢印で表します。呼び出し元から、呼び出し先に向けて矢印を引きます。この線が、ナビゲーションの遷移の方向になります。
「設置されてる遊具」と「遊具の種類」で別ビューはさすがにヘンテコかと思い、超メインオブジェクトは「公園」と「遊具の種類」にしました。「設置されてる遊具」はシングル公園に内部化したらいいかなと…後からちゃんと書けばよかった。
3. レイアウトパターンの適応（プレゼンテーションレイヤー）
時間がない！時間がない！デスクトップとスマホの両方はつくれなそうだったので、ユーザー層的に使いそうなスマホを取りました。
コレクション公園はカードで並べました。フリーワード検索となんかよくありそうな人気ランキングをつけてみる。写真と公園名だけのカードがずらずらと並んでいても選べなそうかなと思ったため。前回の反省を生かし、タスクでは直接指定されてないプロパティもガンガンつけています。
シングル公園内に設置されてる遊具コレクションは内部化しました。
コレクション遊具もだいたいコレクション公園と同様に。遊具の特徴、「小学生向け」みたいなタグ的なものかな〜と想像していたので、特徴から探すセクションをつけてみました。
シングル遊具には、特徴タグと設置している公園リストを置きました。
感想
今回はそんな悪くないのではないか。指定されたタスクにとらわれすぎずに、プレゼンテーション側からそれっぽいものを置いていくのはありな気がしてきました。