Embed Size (px)
Citation preview
ContainerView活用術とポイントになる部分～ 凝ったUIをつくる際の参考アプリの探し方含む ～
自己紹介
✦ 今までの仕事履歴（本業）
石川県金沢市生まれ
本業はサーバーサイドのプログラマ ※Rails＆PHP使い
26歳～31歳：Ruby / PHPのプログラマ 23歳～25歳：Webデザイナー兼ディレクター
Objective-C歴：7ヶ月くらい Swift歴：半年弱
趣味：シルバーアクセサリー集め・スイーツ作り・開発
女子向けと食べ物系・エンタメ関連のお仕事が多い…
Qiita : http://qiita.com/fumiyasac@githubGithub : https://github.com/fumiyasac
✦ 酒井文也（さかい ふみや）
東京（大塚）住まいの31歳
こんな格好してますが… 遊び人ではなくエンジニアです
フリーランスっぽいですが… 会社からお給料もらっているマンです
経験豊富ではありません ちゃんとした実務経験は3weekです
※心の叫び❶
※心の叫び❷
※心の叫び❸
これまでつくったもの(2015年)① 簡易家計簿アプリ「Coffre」
② ゲームアプリ「10秒虫食い算」
・カレンダーを自作しています・シンプルなお小遣い帳感覚で支出管理できます
・全問正解者ほとんどいません…
・不定期ですがコラムも書いています・サーバーサイドはRuby on Railsを使用
http://www.coffre.me/
・デザインにもこだわってみました（特にグラフ）
・実はちょっとバグがあります。・問題は今後追加予定（現在110問収録）
個人的にはなりますが、他にもアプリ・Webサービスなど開発中です（来年はもっとおおきなやつを…）
・サイト等は次回のアップデートで公開予定
http://blog.just1factory.net/services/284・若干の中毒性を含みます
ざっくりContainerViewのおさらい
(ぼくはこう思った) 1つのViewControllerに処理を無理やり押し込めるぐらいなら、追い切れる単位で分割する方がベター
✦ 複数のViewControllerをまとめてくれる影のエース
① iOS6から登場・Storyboard上で確認するとEmbedセグエでUIViewControllerがくっついてくる
② Storyboardとの相性が良い印象
・ViewControllerを分けることができるから、FatController状態防止にも
・ContainerView内のViewControllerはWebサイトのiframeのようなイメージで 親のViewControllerに表示される・UIのカスタマイズをStoryboardで行う際にはとても重宝しました（体験ベース）
③ もちろん親子間での値の受け渡しも可能・ContainerViewには親子間で処理を伝播させるメソッドも用意されている※この部分に関してはまだまだ深堀りしきれていない部分が多いので、Appleの公式ドキュメントなど を読んでおこうと思います
デザインが綺麗なアプリに近しく作る
(ぼくはこう思った) 優秀なライブラリはたくさんあるけれども、たとえ経験が浅くてもうまくカッコイイUIを実現してみたい
✦ 最近のトレンド？にもなっているメディア系アプリのUI例1. Ciel 例2. 朝時間.jp
❶タブ部分はコンテンツ部分とは 独立してスクロール可能
ボタンを押すとコンテンツ位置に
❷コンテンツ部分をスワイプさせると 上のタブメニューが伴って動く
❸コンテンツ部分の写真入りコンテンツ をクリックすると詳細画面に遷移
実現のための構成と設計
(ぼくはこう思った) 機能と役割が違うScrollViewが2つあるので伴って動く場合とそうでない場合の場合分けがポイントになる
✦ UIScrollView と ContainerViewの合わせ技を駆使する方針
Container 1
Container 2
Container 6
Button1 , Button2 , Button3, Button4 , Button5 , Button6
・・・・・・
表示されているエリア
・Containerのスワイプに伴いbutton1とbutton6以外の際はContainer番号のボタンが真ん中に来る
・ButtonのスワイプはContainerのスワイプに影響しないようにする
… スライドバー
・Button1～6が押された際にはButtonの番号に
ボタン用ScrollView
コンテンツ用ScrollView
サンプルとデモの紹介
(ぼくはこう思った) ScrollViewの振る舞いのコントロールと子から親への値の受け渡し方法を知っておくと骨格部分ができる
✦ 実際のサンプルで動きを確認しながら見ていきましょう！① Githubhttps://github.com/fumiyasac/mediaStyleContainer
② Qiita・メディア系アプリでよくあるUIを実現した簡易サンプル http://qiita.com/fumiyasac@github/items/2490990be4c011935368 → 今回の発表内容の詳細解説になります。
③ 解説のポイント・UIScrollViewに識別用のタグ(tagプロパティ)をつけてScrollViewDidScrollのメソッドの制御・子のViewControllerから親のViewControllerへの値の渡し方
・PagingMenuController：https://github.com/kitasuke/PagingMenuController・PageMenu：https://github.com/uacaps/PageMenu
④ Just FYI
デザインに凝ったUIをつくるヒント✦ このようなアプリってどうやって探しているか？
・自分でさがすキーワード：女子向け、キュレーション、ファッション、ヘアサロン、グルメ、フリーマーケット等
→ こちらは僕の個人的な印象や偏見も含まれているのかもしれませんがあくまで参考にどうぞ
ぼくの考えた探し方
(ぼくはこう思った) たくさんアプリを見ることでUIのパターンがつかめてくるので、これはよさそうと思うアプリはストック
・女子目線でさがす方法例：友人・彼女・母親に「おすすめのアプリ教えて( ́ ▽ ` )ﾉ」と聞いてみる
→ Twitter / Facebookのタイムラインにもヒントがあるかも？
→ 異性の目線はシビアだから重要な参考バロメーター
実装の上でハマったポイントなど✦ 実際に取り組んでみて感じたつらみの部分など
Layoutでだだハマりする場面
Storyboardの超煩雑化
・1画面に配置する要素が多すぎる場面がありAutoLayoutでの制御が結構大変 → 思わぬところでAutoLayoutの制約に違反して大変になることもなくはない
・場合によってはAutoResizing + コードによる絶対配置もやむなしか？ → おそらくこれは最終手段？でもどうしても難しい場合限定になるかなと思ったり
・ViewControllerが増えすぎてファイルを行ったり来たりになってしまうリスク → 実装の前に画面遷移の設計をしっかりとしておいたほうが良い
・Gitでも差分が追いにくい状態に陥る → 実機でレイアウトが正しいかの確認は怠ってはいけない
(ぼくはこう思った) いくら便利だからといっても、ViewControllerはむやみに増やしては後々辛くなるので気をつけるべし。
アニメーションやレイアウトにこだわるとアプリ開発がより一層楽しくなるのは間違いないと思います！
✦ ContainerViewを活用して1つのViewControllerに詰め込みすぎない
セッションのまとめ
✦ 小さなViewControllerに分けて考えることができるのは良い
✦ UIScrollViewはtagプロパティを持っているのでタブ部分にUIScrollViewを使用する際はこれを活用する
✦ いいな！と思ったアプリはストックしておいて挙動をチェック！
✦ インスパイアされたなら、完全コピーする必要はないので、できそうな部分のみを見繕ってまずは実装を！
ご静聴ありがとうございました！
✦ 子のViewController→親のViewControllerの値の受け渡しはキチンと
