アニメイトラボ開発者ブログ

株式会社アニメイトラボの開発者ブログです


アニメイトラボ開発者ブログ

developer.animatelab.com


インターンで「なんかよく」してきました

8月半ばからアニメイトラボでエンジニアインターンをしている、やましーです。

今日までの1ヶ月半で、どんなことを考えてやってきたのかを振り返ってみます。

概要をざっくり

「なんかよくしてほしい」

サービスの一つである animateTimes のラジオ配信ページ(スマホ版) をモダンにするお仕事を任されました。

反映されるのはまだちょっと先ですが、こんな感じになります。

(今とあまり見た目が変わっていないのは、今のUIに親しんでいるユーザを置いてきぼりにせず改良を進めるため)

f:id:yamasy1549:20160930183035p:plain f:id:yamasy1549:20160930183642g:plain

アニメイトタイムズのラジオのUI改善

抜本的なリニューアルではない。現在のラジオWebページをベースに、モダンにするチャレンジ。 最大で、デザイン、UI、スタイル、フロントエンドAP、バックエンドAPまで担う。データベースは変更なしとする。

-- 社内esaより

主な使ったもの

「最近流行りのモダンな構成だからアピールして欲しい」と言われたので書いておきます!

使ったもの 選定理由
Rails (5.0.0.1) やましーが比較的慣れてるから
browserify-rails sprocketsとの共存
npm JSのライブラリ管理
babel ES6で書きたい
React (15.3.1) ※後述
React Router (2.8.1) SPAを見据えて / デファクトっぽい
KSS スタイルガイドジェネレーター / 色々ある中で一番使われていそうだった

特にReactは

  • SPAを見据えて
  • 脱・jQuery
    • ちょっとモダンなことやろうとすると、jQueryではついていけなくなりつつある
  • そこそこの規模(ページ数)で、Componentベースで組んでいくと便利そう
  • 1ヶ月半という期間的にも、そもそもViewをいじるので精一杯かなと思った
  • 「「迷ったらReact」」

という理由で使ってみました。Reactを触るのはこれが始めてです。

なんかよくする

なんかよくすることが出来るなら、今なんかよくないところがあるはずです。

ここで大切なのは「誰にとっての」なんかよくないところを見つければいいのか?です。

それは「エンジニア、ユーザー」といったロールの区切りよりもっと細かい枠、例えばユーザーの中でも「初見さん、常連さん」、さらには

  • ユーザー
    • 初見
      • 好きな声優さんがラジオをやっているか知りたい人
      • 好きなアニメに関するラジオがないか知りたい人
      • PICK UP コーナーに載っているラジオをなんとなく聴いてみた人
    • 常連
      • 毎週○曜日の特定のラジオを聴きたい人
      • 自分の趣味に合うラジオが他にないか知りたい人
    • (共通)
      • なんとなくふらふら〜っとラジオをウィンドーショッピングしたい人

などかなぁと思っています。

各パターンから「〜をなんかよくしたい(e.g. ラジオが全画面で再生されて、聴いている間画面操作ができないのをなんかよくしたい)」項目を抜き出し、大まかにまとめます。本当はユーザーテスト/インタビューなどしたかったのですが、継続してやらないと意味がなさそうで、インターン中にやるには時間が足りませんでした。

なんかよくした

この1ヶ月半でなんかよくしたこと一覧です。

  • ラジオを聞いている時は何もできない
    • 画面下部固定コントローラでもラジオの操作ができるようにして、記事を読みながらラジオを聞けるようになった(Android
  • ごちゃごちゃしてどこ見ればいいかわかんない
    • コンテンツの並べ方を見直した
    • ラジオ再生パーツをファーストビューに持ってきた
    • ボタンに統一感をもたせた
  • 表示時間が遅い・広告が読み込まれて誤タップしてイライラ
    • 広告の量や配置を見直してもらった
  • 長年保守され続けたコード
    • PHPから Rails / React に書き換えた

やったこと

洗い出した「なんかよくない」をひとつひとつ改善していくことにしました。

やったことは

  • 画面案を作る
    • 一度画面の要素を分解して(Atomic Design でいうMoleculesレベル)、再構成してみる
    • イラレでぽちぽちモックアップをつくる
    • 意見を聞いてだいたいの方向が固まったら、ざっくり動くプロトタイプを作る
      • gulpやjadeを使った。軽く何か書きたいなーってときに便利
    • プロトタイプを見せて完成イメージを共有
  • コードを書いていく
    • どんな設計にしようと思ってるか、など esa にまとめながらやる
    • 適宜レビューをもらう

です。

画面案(一部)

f:id:yamasy1549:20160930183303p:plain f:id:yamasy1549:20160930183325p:plain

考えたこと

フロントのスタイルガイド

コーディング規約とかじゃない方です。

今後他のコンテンツ(ニュース配信など)でもUIに関するコードを使いまわせるように、見本帳となるようなフロントのスタイルガイドを作りました。プロトタイプの段階から簡単なスタイルガイドを用意していたので、いざ腰を入れて実装していくときもUIに関してはそれをチラ見しながらサクサク進め、機能本体やデータの流れに集中することができて良かったです。

ユーザーになりきるのが難しい

作っているうちに「この機能/情報ってほんまに必要なん?」と思うことがちょこちょこあって、やっぱりユーザーインタビューしたい、ユーザーテストしたいなぁという気持ちになりました。短期間で「なんかよくする」のつらいところだと思います。

「なんかよく」ありたい

ユーザーにとっての「なんかよく」を実現するには、まず開発側の地ならしというかモダンな環境構築というか、そういうのが必要だと思いました。今回は改修(ユーザーから見たアプリケーションの改修)と地ならし(開発者から見たアプリケーションの改修/モダン化)の両方を実質一気にしていたのでちょっときつかったです。

インターンを終えて

私は一応エンジニアのところに入ってインターンをしていたのですが、デザイナーっぽいことなどもやらせてもらったので、複数の目線でサービスを見ることができました。どうしたらなんかよくなるか考えるところからはじめて、デザインを考えコードを書きイメージを形にしていくのは本当に楽しかったです。

以前こんな記事を書いたことがあって、そこでも言っているのですが

デザイナーさんもエンジニアさんも結局思ってることは同じで、良いものを作りたいはずです。ただ、良いものを作るための道のり・表現が違うだけだと思います。

もちろんデザイン・エンジニアリングに特化したひとがいれば今までどおり作業をすすめることはできます。でももし「中間」のひとがいれば、デザイナーさんとエンジニアさんどちらの気持ちもわかるひとがいれば、その翻訳・橋渡しができ、もやっとした気持ちも少し減るのではないでしょうか。

-- FRONTEND CONFERENCE 2016 で基調講演をしました #frontkansai

デザインとエンジニアリングの両方を一人でやってしまうという、ある意味理想の究極系を実現させてくれたアニメイトラボに感謝です。

他にもインターン用のプログラムじゃなくて実際の業務にガチコミットさせてもらったり、Reactなんて触ったこともなかったのに選定は全部おまかせしてくれたり、エンジニア見習いとして嬉しいことがたくさんでした。

あとは改修したラジオ機能が修正を経て世の中に出ていくのを見守るだけです。

メンター陣からのメッセージ

せっかくの就業体験の機会なので、実はあえて難しい前提条件を設定しました。ところがそのハードルを飛び越えて、素晴らしいプロダクトになり瞠目しています。 これからも色々な技術を身につけて、新しいものを生み出す活動をしてくれたらうれしいなと思います。

この先どんな勉強をするか、仕事をするかは色々迷ってるかと思いますが、何をやっても将来の糧になります。やって損なものはありません。今回同様、貪欲に古いものを知り、新しいものを取り入れ、突き進んでいってください!


最終発表会のときに「ドキュメントがない」って言ってましたが、私が入社したとき(1年前)も同じ感想でしたし、今もそこまで整備されているとは言い難い状況です。

そんな中、表向きのWebサイトとソースコード・データベース構造だけしか渡してないのに、ここまで動くものを作って、かつドキュメントも十分に残してくれたのはいちエンジニアとして本当にすごいと思います。一覧画面が間に合わなかった〜とか歯がゆいところはあるかもしれませんが、あの1画面が動いただけでも十分にすごいです。

今回1人での開発になりがちでしたが、次回があればもっとチーム開発っぽいことしたいね!と思ってます。是非また遊びにきてください!


1ヶ月半のインターンシップお疲れ様でした。 資料や発表を拝見しましたが、短い期間で良くできているなと感銘を受けました。 特に持っている知識や技術を使って、新しい事に積極的に挑戦するというスタイルに関しては既におっさんに膝まで浸かっている自分としては見習うべき点だと痛感致しました。 残してもらったソースとか見て、自分の勉強に活かしたいと思います。

これからも大変なことや苦労することもあるかもしれませんが、草葉の陰から応援しております。 お疲れ様でした。


私は前職ではユーザーとエンジニアの間に立つ「中間」の仕事をしていました。結構、社会に出ると頭固くて、自分の立場以外の意見を理解できない人って多くて苦労しました。なのでいろんな立場で物事を考えられるってすごい大事なことだと思います。しかもデザイン、エンジニアリングの両方ともセンスがあるので、これからどんどんいい物を作って行ってください!


人生の貴重な貴重な1ヶ月半という時間をアニメイトラボのために費やしてくれてありがとうございました。

ITの領域は日進月歩の世界。iPhoneが発売したのは2007年6月29日、それから10年にも満たない間に、世界を変革するほどの進化がありました。

つまり、10年後は全く違う。先も見えない。そんな可能性が十二分にある世界。ですが、今の積み重ねでしか未来はない。今をガンバってこそ、将来の自分が素敵になっていると思います。

若いうちからたくさんの経験を積むということはとても大事。これからも技術、デザイン、コミュニケーションを学びながら、最高の人生を歩んでください。また、東京に来るときは遊びにきてね。


1か月半ほど、お疲れ様でした!

アニメイトタイムズのコードは正直読んでて色々わからんかったり辛い部分があったと思いますがここまで動くものを作れるのは素晴らしいと思いました。

振り返りでも言っていた通り特に「スピード感」が魅力的だなーと思っていたので見習いたいと思います。一方で「自分で考えこみすぎてしまう」「集中しすぎてしまう」などで最初はなかなか周りに話を聞きにいけない様子もありましたが、後半になるにつれてどんどん色々なことを聞いたり追いかけしてたりで社会人スキルの成長が目覚ましいなーと思っておりました。

今後も頑張ってください!