読者です 読者をやめる 読者になる 読者になる

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

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


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

developer.animatelab.com


『夜の合同説明会 - アニメイトラボ, ドリコム, GMOペパボ, Repro』を開催します

チーフ IT アーキテクト/開発部長の久松です。今週の金曜日、12月2日に『夜の合同説明会 - アニメイトラボ, ドリコム, GMOペパボ, Repro』をドリコム様にて開催いたします!

adpr.connpass.com

このイベントの内容は、

20歳以上の学生 (高専生, 専門学校生, 大学生, 大学院生) を対象に、アニメイトラボ, ドリコム, GMOペパボ, Repro の4社のトップエンジニアが、お酒を交えながら本音で語り合うイベントです。

ということで弊社からCTOの小芝が参加いたします。また、現場のエンジニアを代表して私も参加する予定です。

興味がある学生の皆さんは是非ご参加ください!!!

こちらもオススメ

「学生だけど、12月2日はちょっと都合が……」という方、大丈夫です。こちらからいつでもお待ちしております!

www.wantedly.com

※「学生だったあの頃が懐かしい」という方向けのページもバッチリご用意しております

www.wantedly.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か月半ほど、お疲れ様でした!

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

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

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

なぜキャンペーンページを公開するのか?

sugicyanです。

アニメイトタイムズにて複数のアニメコラボキャンペーンページを公開してきましたので、ここで一度まとめてみようと思います。

9/12(月)に「クオリディア・コード×アニメイトタイムズコラボキャンペーン!」をリリースしました。
皆様是非ご参加ください。

画像をクリックした際に開く画面のリンク

キャンペーンページをやる意味とは?

そもそも、なぜコラボキャンペーンをやっているのかというと、社内でも目的はわかれると思いますが、今まで使ったことない技術を気軽に試せるというのが大きいと思っています。
技術というのは日々新しい物が出てきます。
現在運用するサービスで使うのはためらうが、試してみたい技術というものが出てくると思います。
キャンペーンページは企画内容にもよりますが、期間が短く保守する必要がない(キャンペーン終了後、静的ページにしてしまえば良い)という特徴があり、これによっていろいろ挑戦することができます。

キャンペーンページ作成を始めたときに立てた最初の技術的目標は
「 React + TypeScript を使ったサービスを作ってみたい 」
というものでした。
今回の 「クオリディア・コード×アニメイトタイムズコラボキャンペーン!」 にて、最初の技術的目標としていた React + TypeScript を使ったサービスのリリースを達成したのでこれまで作成してきたキャンペーンページについてまとめ、簡単な補足を記載していきたいと思います。

TVアニメ「ご注文はうさぎですか??」×アニメイトTV ホワイトデー企画

www.animatetimes.com

■ 技術的目標

  • コラボキャンペーンページを作る
  • Reactを使う

■ 使用技術

  • React

アニメとコラボしたHPを作成してみたいという思いから作成を開始しています。
このときの私の技術力はHTMLをほとんど書いたことがない状態でした。
結果できあがったページはスマートフォン(以下SPと略します)対応もしていないページになりましたがはじめてキャンペーンページを公開する/Reactを試してみるという目的を達成できました。

どこにReactを使っているかというとページ下部のキャラクターと吹き出しの表示です。

f:id:sugicyan:20160915194556p:plain

『夢王国と眠れる100人の王子様』×『あんさんぶるスターズ!』×アニメイトタイムズ コラボ企画

www.animatetimes.com

■ 技術的目標

  • レスポンシブでSP対応する

こちらは「ご注文はうさぎですか??」を実施したことによって始まった企画になります。
PC向けのページを作成したのでこのキャンペーンでの目標は PC, SP での表示に対応させることでした。 レスポンシブにするまではできませんでしたが、PC向け、SP向けの表示をすることはできるようになりました。

TVアニメ「NEW GAME!」 × アニメイトタイムズ コラボキャンペーン

www.animatetimes.com

■ 技術的目標

  • レスポンシブ対応
  • API通信
  • ビルド環境構築(gulp)

■ 使用技術

こちらのキャンペーンは擬似的に出退勤をしてもらうキャンペーンで、参加者数に応じて「制作現場の方たちへ クリエイティブドリンク・pixiv DORADO を送る」という企画内容を多くの方に取り上げて頂きました。
レスポンシブ対応・API通信を初めて行いました。
以前の企画でReactを使用したことがあったので、API通信の結果を受けてviewの表示を変更するということに挑戦しました。

劇場版アイカツスターズ!×アニメイトタイムズコラボキャンペーン!

www.animatetimes.com

■ 技術的目標

  • レスポンシブ対応
  • ディレクターがキャンペーンページを作成する
  • ビルド環境構築(npm script)

■ 使用技術

こちらのキャンペーンは、弊社のディレクターと共同で作成しました。
このころから、HTMLでも共通の項目をまとめたいと思い pug を使い始めました。
開発初期にレスポンシブになる仕組みとビルド環境だけを作成しました。
そこから先はディレクターが自分でHTMLを組んでと、社内でもかなり珍しい開発になりました。

クオリディア・コード×アニメイトタイムズコラボキャンペーン!

www.animatetimes.com

■ 技術的目標

  • React + Typescript

■ 使用技術

キャンペーンページを作り始めてからずっと React + Typescript の組み合わせを試してみたいという目標を達成できたキャンペーンです。
こちらのキャンペーンは NEW GAME! とはちょっと違いますが、毎日ボタンをクリックして戦ってポイントを貯めていき自分の所属都市を勝利へ導くことが目標です。 皆さんも是非遊んでみてください。

キャンペーンで使用した主なライブラリ

github.com

github.com

facebook.github.io

TypeScript - JavaScript that scales.