AbemaTV HackにiOSエンジニアとして参加！開発プロセスとUI/UX設計の工夫【Part 1】
2019年3月16(土),3月17日(日)に行われた、サイバーエージェント主催『AbemaTV Hack - ネイティブアプリ編』にiOSエンジニアとして参加！お題の発表から開発プロセス、UI/UXの工夫、LTで学んだアーキテクチャ設計の考え方まで詳しくレポートします。
参加したキッカケ
サポーターズさんのイベントに参加した時に、春休みに様々なイベントを行うということで紹介していただき今回のインターンを知りました。そして、AbemaTVの現場のエンジニアがどのように画面設計をして実装しているのか、今回行う自分の機能実装と比較してそれらのノウハウを学びたいと思い参加しました。
面接
その場で合否を言ってくれたのは、非常に嬉しかったです。おかげさまで、新幹線の予約などの準備を、時間に余裕を持って済ますことができました。
参加までにしたこと
最新版：
「たった2日でマスターできるiPhoneアプリ開発集中講座 Xcode 10 Swift 4.2対応」を2日で読み切った話2024/6/5 23:272025/3/4 0:50お題と仕様
お題が発表されました!
必須要件は2つです。
- 投げ銭アイテムが一覧で表示されていて、1画面目に戻ることができること
- 投げ銭アイテムを使用した時に、どのアイテムを使用したのか分かる演出・効果が表示されること
必須要件を満たした上で、どのくらい自分のコンセプトに沿って開発を進められるかが勝負だと感じました。
大まかなスケジュール
1日目の午前中にアーキテクチャに関するLTがあり、その後は、ワークを行いました。2日目も、16:30までワークを行い、その後、成果物発表会を行うという流れでした。
LT
LTを聞き、場当たり的な実装ではなく、よりクリーンなコードを書きベストプラクティスな開発を行うために、適切なアーキテクチャを取り入れて、設計思想を守っていきたいと思いました。抽象的な表現になってしまいましたが、設計原則を守るコードを書くためにも適切なアーキテクチャ選定を行って取り入れていきたいです。
1日目のワーク
1日目は、コンセプトを決め、どのような画面レイアウトで作成していくかある程度設計してから、まずは必須要件を満たすことを目指して開発をしていました。
今回定めたコンセプト
今回のインターンシップで僕が決めた、コンセプトは、「投げ銭しよう！って思わすことができるUI/UXにこだわること」です。
投げ銭を行うということは、実際にお金を入れる訳なので投げ銭を行ったことがないユーザーにとってハードルがあると感じていました。そのため、投げ銭を行うハードルを下げることをコンセプトに開発を進めようと決めました。
1日目の実装面の工夫
２画面目のアイテム一覧は、新たにViewControllerを追加し、そこに表示することで実装しました。また、の値を変更し１画面目を透過することで、流れている動画を閲覧しながら、投げ銭が行える仕様にしています。
今回のインターンで僕が最も重要視していた「投げ銭しよう！」ってユーザーが思ってくれる実装を行うために、まずは、ストレスなく投げ銭機能を使えるように考えていました。
必須要件は、1日目の午後のワークの時間には満たすことができたので、それからブラッシュアップするために、メンター社員の方と色々な議論をしたりもしました。
その中で、なぜその機能を追加するのか・なぜこのようなレイアウトにしたのかという、実装する機能・レイアウト全てに意味を持たせて、説明できるように意識してお話しをしていました。
例えば、で値段を100円から、100円区切りで可変に指定することができるように理由は以下の通りです。
- キーボードで数字を打って指定するよりも、直感的に金額を変更できるようにしたい
- ユーザーが少額であっても、その時に気持ちをギフトを送ることで表現できるようにしたい
続きは後半パートで！
AbemaTV Hackで投げ銭UXを改善！Lottieでのアニメーション演出と開発の振り返り【Part 2】2024/6/5 23:272025/3/4 0:49署名2025/3/3 16:552025/4/1 23:47