Bonfire iOS #4に行ってきた
本日はYahoo!Japan社が開催するiOS勉強会Bonfire iOSに行ってきました。
今回のテーマはUIです!
第4回のテーマは「UI」です!
UI、それはアプリ開発と切っても切り離せない関係……
どうやって保守しやすくUIを定義していくか
どうやってユーザビリティの高いUIを作っていくか
どうやって多人数で協力してUIを作っていくか
どうやってツール(Auto Layout, Storyboard, …)と向き合っていくか
どうやって非同期処理と連携していくか
どうやって新しい分野(AR, VR, …)でのUIを作っていくか
などなど、それらのどれもが昔から、そして現代においても重要なテーマです。 今回はUIという大きな課題に対して、各々どう向き合っているのかを話のネタに交流し、気づきを得られる夜にできればと思っています。
健康なStoryboardを考える 〜 Auto Layout、UIStackViewともっと仲良く!
最初はゆこびん(@yucovin)の発表です。
エンジニアはクリーンで読みやすく保守しやすいコードを書くことに命を削ってますが、デザインになるとそこまでの情熱がなくなってしまいがちです。
でもStoryboardのレイアウトもコードと同じようにクリーンで読みやすく保守しやすいレイアウトを組んでいくべき!という主張をもとにどんな風にレイアウト組んでいけばよいのかを発表していました。
技術的なエラー(制約の矛盾)とデザイン的なエラー(デザインをレイアウトで再現できていない)の2つの観点からレイアウトを組むとよいとのこと。
AppleのAutolayoutのドキュメントは再度しっかり読み込む必要があるなと痛感しました。特にHugging Priority, Compression Resistance Priority周りは再入門しなきゃいけないな。
storyboardをつかっていない人もちらほらいた #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
storyboardのメリット。早い、確認できる!
— SatoTakeshi (@hatakenokakashi) May 15, 2018
困ったこと。デザイン再現するのにどうやって組めばいいのか分からん。
— SatoTakeshi (@hatakenokakashi) May 15, 2018
制約直したけどおかしいー>無駄な制約があった!
各サイズ対応できてない
そもそもおもい。レインボーカーソル
storyboardの不健康≒autolayoutの不健康 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
コードを綺麗にするようにautolayoutも綺麗に!#yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
無駄な制約であとでデザイン修正で苦しむことはよくある #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
storyboardのレビューってたしかにノーチェックだな。
— SatoTakeshi (@hatakenokakashi) May 15, 2018
#yjbonfire
大なり小なりを使いこなす。
— SatoTakeshi (@hatakenokakashi) May 15, 2018
けっこう大きい端末でもいい感じにマージンをとれるから便利。 #yjbonfire
Hugging Priority, Compression Resistance Priority使いこなしたい! #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
これの絵がわかりやすかった。#yjbonfire https://t.co/GO4XTq3r3F
— SatoTakeshi (@hatakenokakashi) May 15, 2018
stack viewほんとうに便利。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
#yjbonfire https://t.co/f7Jpi6APdt
— SatoTakeshi (@hatakenokakashi) May 15, 2018
デザイン構造に即した制約。キモになるものだけ親ビューLeading。あとはそのオブジェクトに左よせる。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
この本ほんとうによかった。デザインの構造がわかって勉強になった。#yjbonfire https://t.co/pDjB8bU0tn
— SatoTakeshi (@hatakenokakashi) May 15, 2018
デザイナーxエンジニアの共同UIづくり
ヤフー株式会社「Yahoo!乗換案内」のデザイナー花井 舞 (@m871) さんと田中 達也 (@tattn) さんの共同発表です。
アプリ「Yahoo!乗換案内」でデザイナーとエンジニアでペアプロをしながらアプリを実装していったお話でした。
今までデザイナーはカンプを作るところまでだったのをStoryboardを使ってデザイン実装するところまで領域を広げたそうで、どのようにチームとして役割分担をしていったのかを発表していました。
デザイナーさんがUI実装もできるようになった!Styoryboardで!#yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
なんでもいえるチーム大事! #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
UITableViewのData sourceみたく、デザインといいつつコードもかかないといけないものはどっちがつくっているんだろう。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
デザイナーがモック表示できるところまで書いてます!
— Tatsuya Tanaka / たなたつ (@tanakasan2525) May 15, 2018
おおー!そうすると、デザインや静的な画像当て込んでビルドして画面が見れるところまでってことですかね?
— SatoTakeshi (@hatakenokakashi) May 15, 2018
(実際のデータをAPIなどで取得するのはエンジニアがやる想定)
ですです!numberOfRowsやcellForRowAtなどで仮の数やデータなどを設定して表示できるようにするところまでですー
— Tatsuya Tanaka / たなたつ (@tanakasan2525) May 15, 2018
テストって、企画・制作・技術チームでみるんだ。いいね。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
WatchKit ExtensionがあるとIBDesiginableがビルドエラーになるらしい。そうなんだ! #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
補足。workspaceでプロジェクトを作っているときらしい #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ユーザーインターフェースと非同期性について
株式会社はてな、加藤 尋樹 (@cockscomb) さんの発表。
Reactive NativeやFlutterなど新しいUIフレームワークがどのように非同期処理を実装しているのかを共有するお話でした。
加藤さんのしゃべりに癒やされました。
非同期処理がなかったらどんなに楽か! #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ここで本の宣伝!
— SatoTakeshi (@hatakenokakashi) May 15, 2018
iOS11 Programmingはよい本! #yjbonfire
URLSessionTaskにprogressプロパティ追加された #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
URLSessionTaskにprogressプロパティ追加された #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
Drag and Dropのお話し。Dropした瞬間に通信をはじめられる。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
iPadで書いたそう#yjbonfire pic.twitter.com/6eGeWM7mpY
— SatoTakeshi (@hatakenokakashi) May 15, 2018
イケてるUIフレームワーク:Reactive Native(諸説あり) #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
Flutterっていうのがあるらしいですね(๑╹ω╹๑ ) #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
DartがFlutterで復活 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
FutureBuilder未来を創るぜ #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
async/await夢にまでにみたあれがFullterなら使える! #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
Marzipanこれかな?#yjbonfire https://t.co/vdhME9qgs6
— SatoTakeshi (@hatakenokakashi) May 15, 2018
go言語っていうのがあってはてなでサマーインターンがあるらしい #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ARKit + CoreLocation
続いてヤフー株式会社「Yahoo! MAP」の徳元 健太 (@totomo1217) さんの発表。
Yahoo! MAPアプリでARKitを使って道案内アプリを実装したお話を発表していました。
ARKitで表示されたカメラ領域とGPSから取得されたCoreLocaitonの領域をどのように変換していくか。オブジェクトをどうマッピングしていくかなど、ユーザーが迷わず使えるような配慮をYahoo! MAPでどのように実装したのかが詳細に語られていました。
私もARKit + CoreLocationで何かしたいなと思っていたところなのでとてもタイムリーな発表でした。
座標変換をしっかり考えないといけない印象を持ちました。
ARKitとCoreLocationめちゃ興味ある。興味あるけどぜんぜん手をつけられてなかったやつ。
— SatoTakeshi (@hatakenokakashi) May 15, 2018
耳を大きくしてきこう #yjbonfire
道順をARで案内できるアプリをつくったそう #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
実験が3ヶ月ぐらいかけている #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
12月の寒い時期に外でデバックした。辛い #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
行列変換をして位置情報とARの位置をコンバートする #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
足跡を置いている。平面におく #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
足跡はランダムでだしている。革靴足跡や犬の足跡がある。遊び心いいね #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
現実にはいないキャラを置いてみる。目的地で手を振ってくれている。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ARモードと地図を切り替えられるようにした。併用できるように。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
快適なUIを持つアプリを作るためにやっていること
株式会社エウレカでpairsアプリの海外版を作っている木村 寛 (@muukii0803) さんの発表。
UIの確認はともすると手間がかかりがちでそのために確認漏れでバグが発生することがたびたびあります。確認の手間を減らすための工夫を発表していました。
例えば、サーバーの向き先を本番、開発にボタン1つで切り替えられたり有料会員、無料会員などユーザーの状態を擬似的に切り替えられたりです。またそれを再ビルドなしで切り替えられるようにするなども行っているそうです。
私も開発で取り入れたい実例がたくさん発表されていました。
ペアーズは韓国と台湾版もあるらしい #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
攻めのUI
— SatoTakeshi (@hatakenokakashi) May 15, 2018
品質。Facebook Instagramレベルの動作を目指す #yjbonfire
状態情報を安定的に提供する #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
EasyPeasyをつかって、xibはつかってないそう。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
TextureGroup/Textureをつかって徹底的に非同期化 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
状態を正しく表示する。一回でも一瞬でも間違った状態を表示するとユーザーは混乱 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
攻めUIでヌルヌルを実装した。次は守り #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ちらつき。処理に時間がかかる。デザイン崩れ。視認性や情報設計が崩れる #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
不具合の原因ー>ヒューマンエラー。動作確認がめんどうだとしなくなる。
— SatoTakeshi (@hatakenokakashi) May 15, 2018
手間の排除ってどうしたんだろう?? #yjbonfire
開発者メニューをアプリでつくった。
— SatoTakeshi (@hatakenokakashi) May 15, 2018
接続できるサーバーをきりかえられるようにする。 #yjbonfire
環境変更のたびにビルド直す必要をなくした。これ使う方には大事なのでは? #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
画面サイズの変更を一端末で確認できるようにした。すごい! #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ビルドに関する情報を画面に出力するようにした。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
アプリを利用しながらビジネスロジックを呼び出すようにした。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
自分とマッチングできるようにとか無料、有料を切り替えられるようにする #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
確認するための手間を省く開発を惜しまずやってる! #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
有料会員なのに課金ボタンが押せてしまうー>fabricで検知するようにした #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ログを送るとエラー起きた時にそれまでのログと紐づけられる。あれ、これめちゃしたいぞ #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
#yjbonfire https://t.co/FmRtJMN5gE
— SatoTakeshi (@hatakenokakashi) May 15, 2018
エクストリーム・プログラミング開発におけるUIテスト〜ライブコーディングを添えて
ヤフー株式会社 ヤフオク!の山下 真一郎 (@shin_yahoojp) さんと山下 真一郎 (@shin_yahoojp)さんの発表。
ヤフオクチームが取り入れているというエクストリーム・プログラミング開発を実際にライブコーディングで体験できる発表でした。
エクストリーム・プログラミング開発でストーリーを作り、見積もりを出す。その後にTDDを取り入れて、ペアプロをしているそうです。一人がテストを書き、もうひとりが実装をする。という流れを追体験できる発表でした。
YahooJapanさんはペアプロを推奨していてそのためのLab施設も持っているそう。
実際にバグ報告が少なくなって生産性がアップしているそうです。
エクストリームプログラミング。
— SatoTakeshi (@hatakenokakashi) May 15, 2018
XP。開発チームが行う慣習 #yjbonfire
ライブコーディングが始まった! #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ピボたるトラッカー #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
見積もりのライブコーディング斬新! #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
TDDでやるんだ #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
XCTestでもUIのテストするそう。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ストーリーをpivotaltrackerで定義#yjbonfire
— Takagi Shingo (@zizi4n5) May 15, 2018
テストをかいて、テストが通る実装をする。TDDだ! #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ペアプロはコードレビューも含む。ペアプロしたらそのままマージしているそう。そうすると全員がコードかける。(レビュー担当がいない) #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
非同期処理はテスト通らない #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
非同期のテストどうするんだろう? #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
スタブクラスをつくる。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
(stubじゃないよStubだよ)いいペアプリ #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
テストにスタブを追加した。なのでViewController実装をそれでビルドエラー通るようにする。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
UIは後回し。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
UIは変わることがおおいから。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
Zeplinを使っているそう。サーバーが落ちてて奇跡の復活 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
Zeplinの透過機能で1px単位でずれていないかを確認。すごいなー。後ろでデザイナーがみているそう。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
ペアプロでプロダクトの品質もあがって成長もできたそう。 #yjbonfire
— SatoTakeshi (@hatakenokakashi) May 15, 2018
最後に
イベントが終わっての感想。
- AppleのAutolayout関連のドキュメントを読み返そう
- YahooJapanさんは開発はペアプロを積極的に取り入れて実際生産性も上がっている。
- ARKitとCoreLocationは座標変換をきちんとする。
- 加藤さんが書いた本はこちらです。みんなも読みましょう!