デザインにもこだわったUIの事始め(2)～ 今人気のアプリであるようなUIの一部分を真似っこしてみる ～

自己紹介

✦ 今までの仕事履歴（本業）

石川県金沢市生まれ

本業はサーバーサイドのプログラマ ※Rails＆PHP使い

26歳～30歳： Ruby / PHPのプログラマ 23歳～25歳：Webデザイナー兼ディレクター

Objective-C歴：4ヶ月くらい Swift歴：60日程度

趣味：シルバーアクセサリー集め・スイーツ作り・開発

女子向けと食べ物系コンテンツのお仕事が多い…

http://www.coffre.me/シンプルにつけられる家計簿アプリ「Coffre」の作者

✦ 酒井文也（さかい ふみや）

東京（大塚）住まいの30歳

デザインが素敵なアプリたち（追加）

creema 時短美人 Mery Rakunew

　(ここがポイント) ①UITableView・UICollectionViewのセルと写真のサイズを合わせる ②スワイプやボタンの動きに連動してナビゲーション・コンテンツが動く

✦ 最近また見つけた良さげなアプリ例）女性向け・通販などのアプリ

今回のサンプルの概要と個人的なポイント✦ デザインや動きもアプリをつくる際の重要な要素

①実際のアプリを参考にして個人的な思いとか

②UIKitをうまく活用することで③気になったUIを再現をしてみる

という方針でできないか？CocoaPodsなしでも使えるもの

実際にCocoaPods含めライブラリを使う ことはありますが今回は使わないで挑戦。

今回のサンプル＆セッションの方針

おおまかな仕組みの概要を知った上でライブラリを 使った方が良いと個人的に思ったので、

「まずはできそうな所から真似してみよう」

CocoaPodsなしでも、

・Xib ・UITableView ・UICollectionView

・UIScrollview ・ContainerView ・GestureRecognizer

実現する上でのキーワードは

UIにもこだわりたい

UIへのこだわりは アプリでの重要ポイント

自分のアプリでも使ってみたい

仕組みをもう少し理解しておきたい

UIKit面白い

では実際にサンプルを！

https://github.com/fumiyasac/variousViewsOfSwift2/

✦ おおまかな仕様や動きについて(全体)

左ナビ デフォルト 右ナビ

左スワイプ 右スワイプ

(ここがポイント) 左右のジェスチャーに対応して、下に隠れているナビゲーションを表示する

✦ こちらのURLからどうぞ！

ボタンがでてくる

セグメントコントロール で切り替え

表がでてくる

テーブルビューで開閉 （Xibの読み込み切り替え）

Pointその1 : ContainerViewの配置と処理

ContainerViewの配置とSwipeGestureの連携がポイント

(ここがポイント) 左ナビ・右ナビ・メインコンテンツを各Containerに分割して配置

✦ ContainerViewでスワイプしたら現れるナビゲーションを分割

①最初に表示されるViewController　ビのContainer②その上にコンテンツ用のContainer

③さらにその上にボタンを配置④SwipeGestureでコンテンツ用のContainer　動かす処理を記述

作り方の流れ

④の処理の切り分け　※状態管理のハンドリングが重要 ・通常時 → メインコンテンツは操作可能 ・左右ナビ表示時 → メインコンテンツは操作できない

⑤一番上のボタン制御の処理を記述

Pointその2 : テーブルビューの開閉処理

テーブルビュータップ時にタップしたセルを開く処理を記述

(ここがポイント) UITableView・UICollectionViewは良く使う部分なので、是非とも覚えておくと良い

✦ 読み込むXibを切り替える（reloadDataを利用する）

データ連携の際は さらに工夫が必要デフォルト タップの後

セルをタップ 中身が表示※処理のポイント NSIndexPath型のメンバ変数に タップされたセルの情報を保持

①NSIndexPath　作成する②セルタップ時に①のメンバ変数の 　中に選択されたセル情報を保持

作り方の流れ

③セルを生成するメソッド内に 　①を踏まえた条件分岐を作成

✦ 気になっているキーワードや技術的なこと

今後取り組んでみたいもの

✦ 今後のアプリ開発の予定

① AutoLayoutのTips

Coffre「家計簿アプリ」のメンテナンス

デザイン・サーバーサイドもしっかりと連携させたアプリ

② カメラまわりのTips③ 課金（in App Purchase）④ Realm⑤ WatchKit⑥ 発表とかプレゼン⑦ テストまわりのこと

出典：BLEACH347. The Lust より

今は本業ではないけれども 今後もアプリ開発は続けて 行くよ、ということで。

興味は尽きない

もう2～3本アプリを作れるといいな…

✦ 1つのViewControllerに収まりきらないときはContainerViewを活用

※今後ともデザインにこだわったUIに関するトピック等はグループ等でも共有していきます。

✦ まずはUIKitの特性を知った上で実現できるかをやってみる

セッションのまとめ

✦ ファイルが多くなることが多いのでXibの設定もれ等には注意

✦ GestureRecognizerでの画面切り替えやアニメーションは他のアプリのタイミングを参考にすると良い

✦ AutoLayoutも合わせて使う場合は難易度が上がるので注意が必要

✦ 実現する上でのキーワード「Xib・UITableView・UICollectionView・UIScrollview・ContainerView・GestureRecognizer」に関する理解

ご静聴ありがとうございました！