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

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

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


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

developer.animatelab.com


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

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.

BOTソンを開催して感じた収益化の難しさと社内活用のポイント

はじめまして。エンジニアのこまめです。入社後はじめてこのブログを書きます。

簡単な自己紹介

文系の大学を卒業し、前職では某メーカーで3年間SEをしていました。主な業務はユーザーと外注の調整つまり、今までプログラミングの経験すらほとんどありませんでした。そんな私ですが、5ヶ月ほど前にアニラボに入社し、エンジニアとして黒い画面を相手に苦戦する日々を過ごしております。

BOTソンとは何か

BOTソンとは、『bot』と『ハッカソン』の造語で、4〜5人でエンジニア、ディレクター合同のチームを作り、テーマに沿ったbotを考え、実際にデモをプログラミングする、といったような内容のイベントです。

タイムテーブルとテーマ

タイムテーブルは以下の通り

17:00〜17:05 ルール説明

17:05〜17:30 発表内容打ち合わせ

17:30〜18:20 発表準備(botデモプログラミング、資料作成)

18:20〜19:00 発表(1チーム 発表3分 質問2分)

19:00〜 振り返り会、懇親会

50分という短いプログラミングの時間でしたが、エンジニア各々が得意な方法でbotのデモを作りました。 たとえばhubotやslack-ruby-clientなど、その方法は様々でした。

テーマに沿ったbotを考え、と前述しましたが、テーマは お金になるアニメイトラボ発のbot 日頃の社内生活を支えるbot の2つから選べるようにしました。

出てきた案の紹介

その名も『社内コンシェルジュ』。

Google Driveやドキュメント共有サービスのesaから欲しいファイルを検索してくれる、社員の予定を教えてくれる、ランチの場所を教えてくれる、というような仕事が捗る機能から、今日のラッキーパーソンを教えてくれるユニークな機能まであるbotをイメージしています。

他にも、社内生活を送る上でちょっと手間だなあ、と考えていることを解決してくれるbotが多かったです。しかし、既存のチャットツールを利用するという限られた範囲では、botを収益に結びつけることは難しいと感じました。

主催してみた所感

今回、botソンの主催をさせていただいた私ですが、入社前にアニラボ開催のアイデアソンに参加したことがありました。

前職はオカタイ会社だったので、アイデアソンのイベント等の取り組みがなく、とてもユニークな発想が飛び交うイベントで衝撃を受けたことはいまでも覚えています。

今後も、社内外問わず日々の仕事に追われていては生まれない自由な発想ができるようなイベントを企画できれば!と考えておりますので、その際は是非参加してくださいね。

f:id:komame_b:20160912100144j:plain f:id:komame_b:20160912100505j:plain f:id:komame_b:20160912100316j:plain

アニメイトラボ流エンジニア日報と、個人的に始めてみたプライベート日報

抱き枕の人ことバトルプログラマー柴田智也 id:bps_tomoya です。

みなさんは日々の業務で日報を書いているでしょうか。ひょっとすると、「日報なんて」と思われる方もいらっしゃるかもしれません。書くのがメンドウ、書いても読まれたのか読まれてないのかよく分からない、作業時間に当てた方が有益だ…日報を書くことには色々な意見があると思います。

それでも弊社、アニメイトラボのエンジニア陣は esa.io 上で出社時に日報を作成、退社時に更新することを日課としています。

f:id:bps_tomoya:20160831182240p:plain

アニメイトラボ流エンジニア日報

アニメイトラボの日報の主な目的は、メンバー間で以下のことを共有するためです。

  • 今朝はどんな気持ちですか
  • 今日なにやる予定?
  • どんな成果が出せましたか
  • 今日はどんな気持ちでしたか

「今朝はどんな気持ちですか」「今日はどんな気持ちでしたか」というのは、一般的な日報ではあまり見られないものかもしれません。 他の項目についてでもですが、アニメイトラボの日報は特にかしこまって書くものではなく、各メンバーが思うまま、カジュアルに記載できるような場を心がけたものになっています。

例えば私の日報だと、最初にこんな気持ちを書いて、それから今日の予定…成果…と続けています。

f:id:bps_tomoya:20160831181448p:plain

「どんな成果が出せましたか」については、コマンドを叩くだけで GitHub での活動状況を列挙形式でズラッと取得できる、ペパボさんの pepabo/furik というものがあります。

github.com

これをベースに弊社 CTO id:bash0C7 が、Ruby に慣れてない人でも扱えるように make コマンドで利用できるように改造した animateLAB/diary というツールを利用しています。

github.com

f:id:bps_tomoya:20160831183924p:plain

これをコピペして貼り付ければ、「えーと…今日はこの Issue を立てて…こっちは Close して…そうそう夕方には PullRequest を出したんだっけ…」と今日の貢献を1つ1つ確認する時間が、数分間から数秒にギャッと圧縮することができます。

また esa.io で管理された日報なので、カジュアルにスターを付けたりコメントを書き込んだりすることもできます。

タスクの予定や消化具合の共有はもちろんのことですが、一緒に働くメンバーやマネージャー層がもっとも知りたいのは「みんな元気に働けてるかな?」ということではないかと思います。

もしも元気でない、何か問題などが起きているのであれば、上記のような気持ちを書く気持ちにはなりにくいと思います。そういう面で見てみると、弊社の日報はメンバーの様々な角度から見た「健康診断」の意味合いも持ち合わせているかなと感じています。

個人的に始めたプライベート日報

ここ1ヶ月、id:r7kamura さんが運営されていらっしゃる 日報 をお借りして、プライベート日報という試みをしていました。 その日1日の自分の行動や思っていたこと、ザックリとした知見をアウトプットする1人実験です。

f:id:bps_tomoya:20160831181904p:plain

私は個人ブログも持っていますが、あえて別の場でプライベート日報を書くようにしてみたのは以下の理由によるものです。

  • 個人ブログはあくまでも技術知見主軸のアーカイバとしたい(たまに雑記も書きます)
  • 上記の理由から、日報で技術知見記事が埋もれるのは好ましくない
  • 「皆で寄り合って書く日報」というコミュニティについて純粋に興味があった

プライベート日報を始めてみて

あまり深い考えをもたずに始めて見たプライベート日報ですが、思いのほかプライベート日報でアウトプットしたこと、またその行動が業務にもよい影響を与えることがありました。

弊社では 1on1 という、社員と上長が1対1で雑にお喋りする時間を設けています。このお喋りの中でプライベート日報の内容を話題にしてみると、そこで書いていた考えを業務に取り込める機会に恵まれたり、ふわっとしたことをプライベート日報を書くことで「あ、次の 1on1 でこれ話したいかな」という自分自身のふわっとしていた部分をすくい上げることができました。

1日を総括、アーカイブするのはやってみると意外と楽しいですし、自分にとってはストリーミングな Twitter と対をなすツールかな? と感じながら日々のプライベート日報を書いています。

今回は弊社アニメイトラボ流エンジニア日報と、バトルプログラマー柴田智也が個人的に始めてみたプライベート日報をご紹介させていただきました。 皆様の日報ライフのご参考になれば幸いです。