サイバーエージェントさんの「AbemaTV Hack - ネイティブアプリ編-」に参加してきました!

インターン振り返り
Tomu Obata
📅2019/3/26

2019年3月16(土),3月17日(日)に行われた、サイバーエージェントさんの「AbemaTV Hack - ネイティブアプリ編-」にiOSエンジニアとして参加してきた時の振り返りになります!

参加したキッカケ

サポーターズさんのイベントに参加した時に、春休みに様々なイベントを行うということで 紹介していただき今回のインターンを知りました。

そして、AbemaTVの現場のエンジニアがどのように画面設計をして実装しているのか、 今回行う自分の機能実装と比較してそれらのノウハウを学びたいと思い、参加しました。

面接

その場で合否を言ってくれたのは、非常に嬉しかったです。 おかげさまで、新幹線の予約などの準備を、時間に余裕を持って済ますことができました。

参加までにしたこと

インターンシップの期間が2日間しかないので、より多くのことを吸収するため、もう一度基礎を復習しておこうと思い、以下の本を読んでから参加しました。

たった2日でマスターできるiPhoneアプリ開発集中講座 Xcode 10 Swift 4.2対応
たった2日でマスターできるiPhoneアプリ開発集中講座 Xcode 10 Swift 4.2対応

その時の感想はこちら ⬇️

「たった2日でマスターできるiPhoneアプリ開発集中講座 Xcode 10 Swift 4.2対応」を2日で読み切った話
本当に2日で読み終えることができたのか、どんなことを学べたのかということを書いていきます。 今までSwiftでアプリ開発してきましたが、Xcodeの知らない使い方を学んだり、iPhoneアプリ開発の幅を増やしたりできればいいなと思い、 この本を読みました。 また、〜日で読める系の本を今までこの日程で読み切ったことがなかったのも、 この本 をチョイスした理由の1つです。 復習の意味合いが強かったですが、学んだことを紹介していきます。 普段オートレイアウトを感覚的に行なっていた部分があったけど、各制約を意識して行うようになった これからは、iPhoneXS などでも問題なく画面をデザインするためにSafeAreaを意識してUIを配置するようにしていく。 また、オートレイアウトを利用し、UIパーツを配置すると、SafeArea内に配置されるため便利だ機能だと改めて思った。 iPhone,iPadのアイコン生成サービス MakeAppIconは便利 「Horizontally」「Vertically」を使用して、オートレイアウトすれば画面が横になってもレイアウトが崩れにくい実装ができる その他にも、オートレイアウト・クロージャ・Navigation Controller・オプショナルについての簡単な説明など、幅広くiPhoneアプリ開発で必要となってくる知識をカバーしている本でした。 ⌘(command)+ shift + M または、メニューからView → Libraries → Show Media Library を使うことで、以下のように UIImage クラスを利用する時に簡単に確認することができるため、便利です。 エミュレータでキーボードを表示して確認する時は、キーボードを選択して、 ⌘(command) + K または、メニューの Hardware → keyboard → Toggle Software Keyboard PCのキーボードで文字を打ちたい場合は、キーボードを選択して、 ⌘(command)+ shift + K または、メニューのHardware → keyboard → Connect Hardware Keyboard で切り替えができます。 他にも、 右クリックが、^(control) + Clickでできるのは知らなかったです(iOSアプリ開発とは関係ないですが😇) 2019/3/13 16時に読みはじめ4時間30分で本の1日目分を読み終えました。 3/14 14時に2日目分スタート!!約6時間後の20時に本を全て読み終えました。 紹介された機能を全て実装し、丁寧に読みましたがちゃんと2日で読み終えることができました! とてもカラフルで読み進めることは全く苦になりませんでした。また、図が多く、ハイライトされているので、Xcodeを全く使ったことがない人でもスムーズに進めていけると感じました。 普段は作りたいものがあって、学びながら開発をしてきましたが、新しい技術を学ぶときは入門向けの本を集中して1冊読み切ってから、作りたいものを開発していく手順も、今回のように本を読む時間が長くなりすぎない場合はアリだと思いました。 2日で曖昧な理解になっている部分を再認識することが出来たので良かったです。

お題と仕様

お題
お題

お題が発表されました!

画面イメージ
画面イメージ
仕様について
仕様について
評価ポイント
評価ポイント

必須要件は2つです。

必須要件を満たした上で、どのくらい自分のコンセプトに沿って開発を進められるかが勝負だと感じました。

大まかなスケジュール

1日目の午前中にアーキテクチャに関するLTがあり、その後は、ワークを行いました。 2日目も、16:30までワークを行い、その後、成果物発表会を行うという流れでした。

LT

塚本 武志さんが行ってくれたLTは 「モバイル開発のためのアーキテクチャ入門」という内容でした。

LTを聞き、場当たり的な実装ではなく、よりクリーンなコードを書きベストプラクティスな開発を行うために、適切なアーキテクチャを取り入れて、設計思想を守っていきたいと思いました。

抽象的な表現になってしまいましたが、設計原則を守るコードを書くためにも適切なアーキテクチャ選定を行って取り入れていきたいです。

1日目のワーク

1日目は、コンセプトを決め、どのような画面レイアウトで作成していくかある程度設計してから、 まずは必須要件を満たすことを目指して開発をしていました。

今回定めたコンセプト

今回のインターンシップで僕が決めた、コンセプトは、「投げ銭しよう!って思わすことができるUI/UXにこだわること」です。

投げ銭を行うということは、実際にお金を入れる訳なので投げ銭を行ったことがないユーザーにとってハードルがあると感じていました。

そのため、投げ銭を行うハードルを下げることをコンセプトに開発を進めようと決めました。

1日目の実装面の工夫

2画面目のアイテム一覧は、新たにViewControllerを追加し、そこに表示することで実装しました。 また、backgroundColorの値を変更し1画面目を透過することで、流れている動画を閲覧しながら、 投げ銭が行える仕様にしています。

今回のインターンで僕が最も重要視していた、「投げ銭しよう!」ってユーザーが思ってくれる実装を行うために まずは、ストレスなく投げ銭機能を使えるように考えていました。

必須要件は、1日目の午後のワークの時間には満たすことができたので、それからブラッシュアップするために、 メンター社員の方と色々な議論をしたりもしました。

その中で、なぜその機能を追加するのか・なぜこのようなレイアウトにしたのかという、 実装する機能・レイアウト全てに意味を持たせて、説明できるように意識してお話しをしていました。

例えば、UISliderで値段を100円から、100円区切りで可変に指定することができるように理由には、

ということがありました。

2日目のワーク

2日目は、どのようにしたら、より投げ銭しやすいアプリになるか、 快適に投げ銭を行うことができるかということに着眼して、開発を進めていました。

2日目の実装面の工夫

特定の投げ銭アイテムを使用したと分かる演出や効果は、 Lottieというライブラリを使い、JSON形式のアニメーションを表示することで表現しました。 また、アイテム毎に特徴を出したアニメーションをつけることで、何の効果かわかりやすくしました。

この際に、ボタンを押してからアイテム毎のアニメーションを2画面目のまま表示し、 その後、1画面目に遷移してから、投げ銭を行ったことを表現するコインのアニメーションを出す仕様にしました。

アイテム使用時のアニメーション
アイテム使用時のアニメーション
投げ銭を行った時のコインのアニメーション
投げ銭を行った時のコインのアニメーション

このような仕様にした理由は、アイテム一覧のままコインのアニメーションを表示するよりも、1画面目に遷移して表示した方がギフトを送ったというコインのアニメーションの演出を、ユーザーが心地よく感じることができると考えたからです。

コインのアニメーションを表示した後には、コメントのように画面の右から左に なぜ・いくら投げ銭を行ったのかUILabelのTextを流す機能を実装しました。

コメントが流れている様子
コメントが流れている様子

コインのアニメーションを表示する処理は、

をすることで実装しています。

完成した成果物

動作の様子
動作の様子

発表

ワークを終えた後は、参加者全員でどのようなものを開発していたのか発表しました。

プレゼン資料
プレゼン資料

投げ銭ではなくギフトと表現している理由は、 機能は、どちらも一緒なんですが「ギフト」と表現した方が、配信者に今思いを伝える・プレゼントするという 意味合いが強くなるかなと思ったからです。(言いたかったこと 伝わっているかな...)

発表の様子
発表の様子

反省点・課題

発表を終え、振り返ってみると、今回の反省点・課題は以下のものがありました。

ちなみに

ランチの時間のお弁当には色々な種類がありました。オススメされたハンバーグ美味しかったです👍

1日目の夜ご飯で食べたラーメン
1日目の夜ご飯で食べたラーメン

懇親会の料理はオシャレで、どれもとても美味しかったです。ここまで、ご飯の話しかしてないですね笑

参加学生やメンター社員の方と様々なことをお話しすることができました。懇親会は、ざっくばらんに会話できるためイイですね!

機能面でのまとめ

機能面においては、今回は、2日間ということで改善に時間を回すのが難しそうだと感じたため、1日目の初期の段階である程度、仕様やレイアウトを固めてから開発しました。

結果的に、課題は多く見つかりましたが、その課題をより早く認識するためにも初期設計は重要だと再認識しました。

意図があって、機能をつけることを何より重視し、それらにこだわることができた2日間でした。 このインターンと通して、あらためて使いやすいなって思う既存のサービスのUIは考え込まれている と感じました。

今後も、なぜその機能をつけるのか・なぜそのようなレイアウトにしたのか根拠を持ち、利用者に使いやすいと感じてもらえるように、これからもどうしたらより良くなるか考え続けて試行錯誤していきたいです!

実装面でのまとめ

技術面においては、今回2日間ということで素早い実装を心がけていたために、

など、チーム開発を意識した開発が疎かになっていました。短時間での実装でも、上記のことを考慮しながら開発を進めることができる技術力を身に付けたいです。

また、綺麗なコードを読むなどして、実装の引き出しを増やしていくことは重要だと感じました。

最後に

サポートしてくださった人事/メンター社員・最後まで楽しく切磋琢磨した参加者の方々には、本当に感謝しております!🙏

自分の現状の技術力で、最大限のアウトプットを行うサポートをしてくださり、短い間でしたが、知見・使えるスキルを広げることができました。

どのようにしたら、ユーザーが快適に投げ銭ができるか考え実装まで行うことで、スピード感のある開発ができて、楽しい2日間でした!!

今回のインターンシップでは、アニメーションの実装など初期設計の通りにやり切ることができました。コードの書き方などまだまだ課題が見つかりましたが、UIの考え方をより深める良い機会になりました。

これから、UI/UXを自分のコンセプトに近づけるよう、こだわりをもって実装を行ったり、RxやFluxアーキテクチャを取り入れたアプリを作成したりすることで、思考力・技術力を高めていきたいです!

最後までご覧いただきありがとうございました😄

AbemaTV Hack
AbemaTV Hack

SHARE

スポンサーリンク