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

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

前回の続きになります!

前回の続き!

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

スポンサーリンク