Akatsuki Hackers Lab | 株式会社アカツキ(Akatsuki Inc.)

Akatsuki Hackers Labは株式会社アカツキが運営しています。

アカツキのクライアントサイドインターンに参加しました!

はじめまして!アカツキのクライアントサイドのインターンに参加させて頂いた伊藤と申します。

今回5/17 〜 5/28までの十日間クライアントの機能実装に関わり、やったことやどう思ったかを書きたいと思います!

 

インターンについて

 私は以前から、アカツキが主宰するLTでの発表やハッカソンの参加などでご縁があり、今回選考の一環としてこのインターンに参加していました。

今回のインターンは完全リモートで、私は関西にいながら参加していました。対面できない、会社の風景が見られないというのはデメリットですが、全く別の場所からインターンに参加できるというのは大きなメリットと思います。

事前面談でメンターとなる方とコミュニケーションを取って参加するプロジェクトが決まり、インターン前日にMacなどの備品が郵送され初日開始という流れでインターンが始まりました。

解決した課題

私が配属されたのは「八月のシンデレラナイン」を開発しているチームで、主に新機能開発の課題に取り組むことになりました。私が担当していたものはおそらく今リリースされているハチナイには入っている機能だと思います。

私は今回、2つの機能の改善や実装を行いました。

メニューのカスタム画面の改善

この課題は私のPCのセットアップが何とか終わった初日の翌日、火曜日から始まりました。

右上の[MENU]をタップで出てくるメニュー画面内には、左上にメニュー画面そのものをカスタマイズするボタンがあります。(私は気付いていませんでした。そこそこやってたのに…)
この画面ではメニューのカスタマイズが出来るのですが、これを保存する時にフィードバックがなく、また、保存せずに戻ると変更内容が破棄されるという仕様でした。
そこで、これにフィードバックを付けよう というのが私が最初に取り組んだ課題になります。

やったこと

まずどのような仕様、デザインにするかを決めなければなりません。そのため、火曜日早々に私主宰でデザイナー/企画の方とMTGを組むことになりました。大変緊張しました。
すぐにMTGを組むつもりだったのですが、メンターの方に主催者は実装の方針をある程度固めた状態で始めた方が良いと教わり、夕方からのMTGに設定しました。
その間に私はコードを読み、おそらくオーダー編成画面が参考になるだろうと思い、MTGでここの表現(機能)を使うつもりでいますと話しました。皆さんからありがたくも賛同いただき、この方向での実装に決まりました。
決まった仕様は、変更を保存するときは[保存しました]と中心に出し、変更があるまま戻る時は確認のダイアログを表示する というものになりました。


ダイアログ表示の実装自体はそこそこ順調に進んだのですが、連続して保存するとおかしくなるケースやそもそも保存できないケースがあるなどいくつかの問題点があり、それらを解決しきったのが結局木曜日になりました。中々苦労しました。あとGitでいろいろやらかしブランチがたくさん生まれ消えて行きました。
木曜夜に修正が終わったPRを出し、一旦はこのタスクが終了しました。レビュー待ちをしている間に次の課題に取り掛かりました。

思ったこと

MTGではデザイナー/企画の方を交え、なぜここがこういう挙動なのか、ここはどうして行くべきかといった話ができたのがとても面白かったです。例えば、既存の保存ボタンは殆どのユーザーさん達が頻繁に押すボタンではないだろうから同時に閉じた方が操作の手間が減るだったり、これからの実装でオーダー編成画面を参考にするのであればその挙動に合わせた方が良いだったり、そういった仕様の部分からのお話ができるとは思っていなかったので嬉しかったです。
そして、仕様通りに作ることの難しさも感じました。単に実装すると仕様と異なる挙動をする〜みたいなケースが結構起こり、なかなか思った通りの操作をさせるのが難しいなと思いました。

キズナレベルアップ演出の改善

私が取り組んだもう一つの課題は、キズナレベルアップの演出をよりリッチでかわいいものに変更する というものでした。
既存のキズナレベルアップ演出は左右からキャラクターの立ち絵が出てきてレベルアップの表示が行われるというものでしたが、それをSDキャラがカットインアニメーションをした後ハイタッチしてレベルアップの表示が行われるというアニメーションに変える というものです。
アニメーションはデザイナーの方が作って頂いていたのですが、最初のMTGでアニメーションを見た時めっちゃ可愛いですねーという話をしたのを覚えています。非常に可愛いアニメーションです。

やったこと

まずは1つ目の課題と同様、MTGを設定しデザイナーの方と課題を確認しました。今回はアニメーションの変更だけなので企画の方はいませんでした。
その後デザイナーの方からデータをいただき、それをキズナレベルアップ時にちゃんと再生されるように実装を進めました。
この時は既存コードがどのように練習しているキャラクターのデータを流しているのかを追い、その流れに乗せてアニメーションが再生されるように実装しました。

アニメーションを動かす実装をしている間に、スキップ機能が必要ではないかという話になりました。これを実装し始めた時点ではスキップは考えていなかったのですが、アニメーション全体が長くなったため、画面タップで適切なタイミングまでアニメーションを飛ばせないとユーザーさん達の待ち時間が長くなってしまうという問題がありました。そこでデザイナー/企画の方とコミュニケーションをとり、必要そうだという結論に至ったのでこの機能を追加で実装することになりました。

スキップ機能はやりたいこととしては単純で、画面上をタップされたらアニメーションを特定の地点に飛ばす といったものです。しかし、これを綺麗に実装するのは中々大変で、デザイナーの方と何度もお話をしながらアニメーションデータそのものの変更もしてもらい、その上で実装を進めました。
水曜日にこの機能の実装が何とか終わり、PRを出してレビューしてもらいました。

そして木曜日にはレビューが返ってきたのですが、アニメーション遷移のより良い方法があること、スキップするためのボタンの配置の場所があまり良くなかったこと、そしてアニメーション終了の処理にUniRxが使えるということを教えて頂きました。
UniRxは私がインターン中に学びたいことの1つとして挙げていて、それを学べる機会をここで作って頂けました。なのでこの日一日はUniRxのことを調べ、コード内に使われている部分を参考にしつつ実装を進めました。
何とか木曜の夜に実装が終わり、完全な形のPRを出し切り、私のこの十日間のインターンでの実装が終了しました。

思ったこと

適切な粒度でのコミュニケーションの難しさというのをすごく感じました。この課題では1つ目のものより多くのコミュニケーションを取ったのですが、私が十分に伝えきれなかったり解釈を間違えたりで手戻りをさせてしまうことがありました。みんな自分の考えや思いを持っているので、それを適切に表現できる、汲み取る力の重要さを感じました。
ボタン関連の処理やアニメーションを扱うにあたり、UniRxは非常に使いやすいと思いました。学んでいる最中では同じ意味の処理を無駄に長いコードで書いてしまったりしていましたが、それも含めて非常に良い経験をさせてもらったと思っています。

業務を通じて学んだこと

チームでの開発がどのように進んでいくのか

今回得られた知見の中で最も大きなものがこれだと思っています。
クライアントエンジニアは機能開発を行う時どのようにデザイナー/プランナーの方とコミュニケーションをとり、どのように業務を進めていくのか。私は特に企画やデザインとも多く関われる方が好きなので、アカツキでは実際そういう風に開発が進んでいくというのを感じられたのは非常によかったと思っています。

UniRx

技術的な知識として、私が前々から付けたいと思っていたものがこのUniRxでした。今回のインターンではほぼ1日かけてUniRxについて調べ、実際の業務レベルのコードも読めるといった非常に良い環境で学ばせてもらい、知識がとても深まりました。
これまでは正直ほぼ使えないぐらいの知識しかなかったのですが、今回で多少使えるようになったと思っています。

Git (Github)

集団開発においては必須のツールですが、これまでは趣味での開発や個人開発がほとんどだったのでまともなレベルで使っていませんでした。しかし今回のインターンでは1つ目の課題からGitを(当然ですが)使うことになり、分からないことが多いながらもとても勉強になりました。
ただもう少しGitの基本的な使い方に慣れておくべきだったなぁという後悔もあります。少なくとも今回インターンで使った機能は忘れず、使っていこうと思います。

直接の業務以外のこと

課題解決の実装を主にやっていましたが、ランチで先輩社員とお話したり1on1を毎日設けてもらったりとかなり充実したインターンを設定して頂けました。

ランチ

基本的には私がこんな人に会いたい!と事前にリクエストして、それにマッチした方とお話しする という流れでした。LTで既に面識のある先輩社員の方に助けてもらったおかげで、私は十日間のインターンにも関わらずランチが5回もあり、ものすごくいろんなことを伺うことができました。どのランチでのお話も面白く、いろいろなことを知れました。

1on1

メンターの方と毎日朝夕2回の1on1を設定して頂きました。これのおかげで自分が今日何をやるのか、何ができたのかがより明確になりとても業務が進めやすかったです。

朝会夕会

私が所属していたチームは朝会と夕会があり、毎日アイスブレイクということで誰かが適当なトピックを5分ぐらい話すという場がありました。チーム自体の雰囲気が非常に良いというのが伝わってきましたし、話も毎日別のトピックで面白かったです。もちろんアイスブレイク後には共有するべきことも話していました。

アップデート

私がいる間にハチナイのアプデがあり、中でどういったことが起こっているのか、運用チームやサーバー側はどんなことをしているのを横から眺めることができました。空き時間にこういうことをやっているという説明もして頂き、(横から見ているだけの私は)とても楽しかったです。実際担当するとヒヤヒヤするだろうなぁと思います。

コードリーディング

UniRxでもそうですが、私は既存のコードを読むのが結構好きで、今回はいろいろな場面でコードを読めて面白かったです。特に業務レベルのコードだと、こうすればよかったのか!みたいな発見が結構あるので、非常に勉強になりました。

テキストベースコミュニケーション

私はこれまであまりSlackなどを活用していなかったので、今回のインターンでのテキストベースのコミュニケーションは中々慣れないものがありました。最後メンターの方からそれほど悪くなかったよと言われたのがすごく嬉しかったです。テキストベースだと非同期的にコミュニケーションが取れ、また後々ログが残るという良さもあり、今回の経験も含めて慣れて行きたいと思います。

まとめ

非常に短期のインターンでしたが、十日間とは思えない充実ぶりでした。会社の空気感や業務の進め方、雰囲気、そして技術的な知見ととても多くのことを学ぶことができました。
短い間でしたが、本当に皆さんお世話になりました。ありがとうございました!!