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

インターン振り返り
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円区切りで可変に指定することができるように理由は以下の通りです。

続きは後半パートで!

SHARE

スポンサーリンク