GameWith Developer Blog

GameWith のエンジニア、デザイナーが技術について日々発信していきます。

GameWith フロントエンド もくもく会 #13 開催しました #GameWith #TechWith #gamewith_moku2

こんにちは。GameWithのエンジニアのtiwuです。

7月25日(木)にGameWith主催で第13回目のもくもく会を開催しました!

GameWith フロントエンド もくもく会 #13

gamewith.connpass.com

今回のテーマも前回に引き続き、僕自身が関心を高く持っているフロントエンドを採用しました。

今回は社内2人、社外6人の合計8人で開催しました!

f:id:tiwu:20190329134140p:plain

もくもく会は最初にお知らせ、次に自己紹介と今日のもくもく内容を発表して、もくもくし、最後に進捗発表という流れで開催しました!

2時間ほどもくもくしたら本日の進捗の発表をしました!

  • AMPの勉強
  • HTMLとPHPの勉強
  • Vueの本を読みながら、Vue.jsで書籍検索APIを利用し書籍検索フォームを実装
  • Vue.jsとFirestoreの実装
  • Vue.jsの公式サイトを読みながら勉強
  • Flutter Webの勉強
  • Tensorflowとフロントエンドの勉強
  • jQueryを利用し、ポートフォリオを作成

といった様々なテーマの取り組みのもくもく会でした!

全体的にVue.js関連が多いですね!

次回告知

次回は8/29に開催します!次回もテーマはフロントエンドです!

gamewith.connpass.com

最後に

参加していただいた皆様ありがとうございました!

GameWithのDeveloper向けTwitterアカウントを開設しました。

もくもく会の告知やブログの更新情報などを発信するので良かったらフォロー宜しくお願いします!

twitter.com

非エンジニアがBigQueryとDataPortalを使って初日のイベント別継続率を出してみた話 #GameWith #TechWith

こんにちは!

ディレクターのケンシロウです。

今回は非エンジニアの自分がGoogle Big QueryとData Portalを使ってのアプリデータ分析に取り組んだので、勉強方法や実際のクエリなどを紹介したいと思います。

目次

Google BigQueryとは

BigQueryはグーグルが提供しているビッグデータ解析サービスです。SQLクエリで大量のログデータから、欲しい情報を取り出すことが簡単にできます。

データのクエリは課金されます。最初の1TBは無料です。

cloud.google.com

Google Data Portalとは

Data Portalはグーグルが提供しているBI(ビジネスインテリジェンス)ツールです。様々なデータベースに接続して、簡単にデータをまとめたり、グラフで表示したりできます。 datastudio.google.com

BigQueryとDataPortalを使うことになった背景

もともと弊社ではBigQueryを使っていて、今回可視化のツールとして相性が良いDataPortalを選びました。

非エンジニアの自分がやるきっかけ

自分が所属している開発部内で、データドリブンなプロダクトの改善をしていきたいというニーズがありました。

しかし、社内には専属でデータ分析を行うエンジニアがいませんでした。

自分は5年前に少しだけSQLを触ったことはあり、この機会に知見を深めたいと思い立候補しました。

しかし実際はほぼ覚えていない状態からスタートだったので苦戦しました。

学習方法

社内で書かれている既存のクエリをとにかく読み込み、実際に叩きながら自分でコメントもつけていき、一行一行理解していきました。

次に、BigQueryのデータテーブルのプレビューを見てデータ構造の理解を深めました。 プレビューはスプレッドシートとそんなに変わらない印象を受けました。

f:id:tiwu:20190719183846p:plain

わからないところはQiitaで使えそうな記事がないか探して、まずはそこに載っているクエリをコピペして叩いてみて理解を深めました。

qiita.com

ぐぐってもわからないものは社内のエンジニアに聞いてました。

さらに、社内のエンジニアとペアプロ的な事をして勉強をしました。

実際のクエリの紹介

アプリの継続率を高めるにあたってマジックナンバーを見つけるために、どういう事をしている人が継続率が高いのかをまず知る必要がありました。

いろいろ調べたましたが、ちょうど使えるクエリがなかったのでクエリを自作しました。

qiita.com

クエリ1

初日に行ったアクション別のユーザー群の継続率を表示するクエリ

#standardSQL

#日付を文字列にするファンクションを生成
create temp function date_to_string(date date) returns string as (
  concat(format_date("%Y", date), format_date("%m", date), format_date("%d", date))
);

#集計する最終日を現在の日付の差で指定
create temp function end_date() returns date as (
  date_add(current_date(), interval - EXTRACT(DAYOFWEEK FROM current_date())-1 day)
);

#集計する開始日を現在の日付の差で指定
create temp function begin_date() returns date as (
  date_add(end_date(), interval -14 day));

#必要な仮想テーブルを記載していくので定義
WITH 

#──────────────────────
#まずは初回起動の日のユーザIDの仮想テーブルを作成する。
start AS (
SELECT 
#ユーザID
  user_pseudo_id,
#初回希望日 
 EXTRACT(DATE FROM TIMESTAMP_MICROS( user_first_touch_timestamp) AT TIME ZONE "Asia/Tokyo") AS start_date
#データテーブルを選択
FROM
`<参照するデータテーブル>`

#条件式を記載していく。 

WHERE
#まずは集計期間の設定、ファンクションで定義したものを使う。(データセットで指定しているので文字列)
_table_suffix between date_to_string(begin_date()) and date_to_string(end_date())

 #初日に行なっているアクションの条件
 AND event_name = "<イベント名>"
#初日にイベントを行なっているかどうかの条件
and date(timestamp_micros(user_first_touch_timestamp), "Asia/Tokyo")  = PARSE_DATE("%Y%m%d", event_date)

#以下でグルーピングする。
GROUP BY
  user_pseudo_id,start_date
),

#──────────────────────
#ここからは初回起動の日に関わらず使用日ごとのユーザIDをみていく。
usedate AS (
#以下でユーザIDと日付を取得
SELECT 
#ユーザID
user_pseudo_id,
#イベントを行なった日付(この場合アプリ起動日)、文字列から日付データに変換している。
PARSE_DATE("%Y%m%d", event_date) AS use_date

#データテーブルを選択
FROM
`<参照するデータテーブル>*`

#条件式を書いていく 
WHERE
#まずは集計期間の設定、ファンクションで定義したものを使う。(データセットで指定しているので文字列)
_table_suffix between date_to_string(begin_date()) and date_to_string(end_date())

#継続して同じイベントをしている継続率が欲しい場合は下記のイベントを変更する。現状は起動時に送るセッションスタートを使用
AND event_name = "session_start"
#以下でまとめる。
GROUP BY
  user_pseudo_id,
  use_date
),
#──────────────────────
#ここからはリテンションしているユーザのIDを出す。
retention AS(
SELECT
  start.user_pseudo_id,
  start.start_date,
  IFNULL(DATE_DIFF(usedate.use_date, start.start_date,  day), 0) AS retention_day

FROM
# 上記2つの仮想テーブルからINNER JOINでIDが一致するデータのみに絞り込んでいる。(一応初回起動日以降もいれている。)
  start
  INNER JOIN usedate ON start.user_pseudo_id = usedate.user_pseudo_id AND usedate.use_date >= start.start_date

GROUP BY
  start.user_pseudo_id,
  start.start_date,
  retention_day),
  
#──────────────────────
#ここからリテンションDAYのユーザIDをカウントしてUU数にしていく。用途によっては不要
retention_sum AS(
SELECT
  start_date,
  retention_day,
  count(user_pseudo_id) AS uu
FROM
  retention
GROUP BY
  start_date,
  retention_day)
#──────────────────────
#最後に表示する項目をまとめる。
SELECT
  start_date,
#初日のUU数を出しておく。これが分母になるのでグラフ表示にも使いやすい。 
 SUM(CASE WHEN retention_day = 0 THEN uu ELSE NULL END) AS startuu,
#初日からの差分(経過日数)別に継続率を出していく。
 SUM(CASE WHEN retention_day = 1 THEN uu ELSE NULL END) / SUM(CASE WHEN retention_day = 0 THEN uu ELSE NULL END) AS oneday,
  SUM(CASE WHEN retention_day = 3 THEN uu ELSE NULL END) / SUM(CASE WHEN retention_day = 0 THEN uu ELSE NULL END) AS threeday,
  SUM(CASE WHEN retention_day = 7 THEN uu ELSE NULL END) / SUM(CASE WHEN retention_day = 0 THEN uu ELSE NULL END) AS week
FROM
  retention_sum
GROUP BY
  start_date
ORDER BY
  start_date ASC

実際にデータを出してみて

苦労した事

仮想テーブルを理解するまで時間がかかりました。

2つのテーブルのJOINの結果のイメージが最初はできず、実際に手でとにかくノートに書いてみたりしました。

f:id:tiwu:20190719183921j:plain

f:id:tiwu:20190719183938j:plain

f:id:tiwu:20190719183954j:plain

最初はクエリを叩いてもデータが見つからなくて苦労しました。

特にイベントネームとカラムの名前の区別がついておらず、全部変数を日本語にしてほしいなと感じました。

(エンジニアが定義した変数をググっていて、全然出てこなくて徒労に終わりましたw)

firebaseの純正のものはsession_startだったり基本英語で用意されているが社内のイベントは日本語のものも多く、混乱しました。

無限ループになるとエラーが表示されないので、デバッグに苦労しました(時間で課金ではないはずなのでヒヤヒヤしました)

仮想テーブルを一つずつ実行してどこで無限ループになっているか、地道にデバッグをしました。

→デバッグはできるだけ少量のデータで実行して節約しました。

学習中のため表示できない理由が自分の知識不足なのか、そもそもログが存在しないのか判断が難しかったです。

頑張ってみてだめだったら、別のアプローチで似たようなデータが出せないか模索をしていました。

DAUでUUを定義してしまうと、MAUを出すときにDAU * 30みたいな数値になり正確な数値が取れないのでUUの定義は気をつけないといけませんでした。

(自分はGAのデータと比較して差異があったので気づけました)

自分はBigQueryでUUを集計するのではなく、DataPortalで集計することで正確なMAUを算出しました。

(DataPortalでは参照する日付を簡単に変更することができるため、DataPortalでの算出がおすすめです)

良かった点

周りのエンジニアに綺麗なクエリを書くと褒められた!

基本を覚えるとその組み合わせで割と何でも出せるようになるので、もう出せないものはなくなりました。

クエリをわかってくるとデータを算出するのが面白くなってきました!

今後半年の目標がデータアナリストとして活躍することになった(キャリアめっちゃ変わった)

終わりに

現場でデータが身近になっているところは少ない印象です。

なので、ここを整備すると全体のアイデアの質も数字に対する意識も上がっていくと思います。

是非みなさんの現場でもデータ分析を活用してみてください!

今後やりたい事

  • ユーザーが行ったイベントの回数に応じてユーザー群を切り分けて継続率を算出
  • 常に見えるところに大きなモニターなどでデータを表示

最後に

GameWithのDeveloper向けTwitterアカウントを開設しました。

もくもく会の告知やブログの更新情報などを発信するので良かったらフォロー宜しくお願いします!

twitter.com

GameWith フロントエンド もくもく会 #12 開催しました #GameWith #TechWith #gamewith_moku2

こんにちは。GameWithのエンジニアのtiwuです。

6月27日(木)にGameWith主催で第12回目のもくもく会を開催しました!

GameWith フロントエンド もくもく会 #12

gamewith.connpass.com

今回のテーマも前回に引き続き、僕自身が関心を高く持っているフロントエンドを採用しました。

今回は社内3人、社外3人の合計6人で開催しました!

f:id:tiwu:20190329134140p:plain

もくもく会は最初にお知らせ、次に自己紹介と今日のもくもく内容を発表して、もくもくし、最後に進捗発表という流れで開催しました!

自分はFirebase Functions + Node.js + Expressの勉強をしていました。

2時間ほどもくもくしたら本日の進捗の発表をしました!

  • Firebase Functions + Node.js + Expressの勉強
  • Vue.jsの書籍でVue.jsの勉強
  • TodoMVCという同じ機能をいろいろなFWで作るサイトを参考にVue.js + Vuexを利用し実装
  • WordPressのサイトのCSSの実装
  • Vue.jsの書籍でVue.jsの勉強
  • ReduxとReact hooks、useReducerの勉強

といった様々なテーマの取り組みのもくもく会でした!

次回告知

次回は7/25に開催します!次回もテーマはフロントエンドです!

gamewith.connpass.com

最後に

参加していただいた皆様ありがとうございました!

GameWithのDeveloper向けTwitterアカウントを開設しました。

もくもく会の告知やブログの更新情報などを発信するので良かったらフォロー宜しくお願いします!

twitter.com

6月のデザインチームトーク #GameWith #TechWith

f:id:fukiworks:20190619201030p:plain

GameWithのデザイナー3名がチャット形式でゆるっと情報をお届けする「デザインチームトーク」です。


Fuki

こんにちは!!!!!!!!!

sono

こんにちはっ

Fuki

我々はGameWithのデザインチームです!あれっ、リーダーがいない

sono

いない

YOHAN

キタ━━━━(゚∀゚)━━━━!!

sono

ヒーローは遅れてくる

Fuki

キタ━━━━(゚∀゚)━━━━!!

YOHAN

いやぁーブログチャットついに始まりますね、楽しみ!!!

Fuki

お待たせいたしました!!!! さて、こちらはGameWithに所属するデザイナー3人が、より多くの方にこんなデザイナーがいるよ!こんな活動してるよ!ということをわいわい伝えるブログになります

YOHAN

よろしくおねがいします〜!

sono

よろしくおねがいしますっっっっ

Fuki

なんと見た目はチャット仕様!!!!みなさんお気軽に流し読みしてね!!!!
早速ですが...私たちが何者なのか....自己紹介してもらっちゃおうかな...!
私はブログいくつか執筆したかと思うんですが、他の2人は初露出??ですか???

sono

おはつです

sono

あっ初じゃないかもしれない

YOHAN

GameWithでは以前エンジニアブログにマイニング部の活動について書いたことありますね〜

Fuki

はつみみ

sono

はつみみ

Fuki

じゃあすでにちょっと露出してる私から!軽く自己紹介させていただきやす
名前はFukiです!ふうきとよみます!女の子です!!!!!
GameWithのデザイナーで今はUIデザインの勉強と新しいプロトタイプツールをいじいじすることにはまってます
あと街を徘徊することとお酒がだ〜〜いだいだいすき
あとなんか質問あります???(唐突)

sono

趣味が年齢にあってないのでは・・・・???????

Fuki

年齢は3万5千歳なので問題ありません

YOHAN

仙人じゃん

sono

良かった

Fuki

そういうことです もう世の中全部知っちゃってるけど UIデザインだけが未熟 (ほんとは他もまだまだ勉強中) はい!私はこのくらいにしておくかな!

YOHAN

え速い、聞こうと思ったのに

Fuki

次!ヨハンさん!!!!!
あっ言い忘れてたけどこのチャット30分の制限時間つきなんで
つぎつぎ!!!!!!!!!!! GOGOGOGOGOGO

sono

シッ

YOHAN

大分プッシュしますねw

Fuki

手をぶんまわしている

YOHAN

どうも、GameWithでUI/UXデザインして3年目に入る ナ・ヨハンと申します

Fuki

大御所すぎる 格が違う

YOHAN

趣味はDJ、ゲーム、アニメ鑑賞など!周りからはよくパリピィーって感じで思われてるみたいです

Fuki

パリピじゃないんですか!?!?!?

sono

あ怖い

YOHAN

人生お祭りですよ

Fuki

パリピならではの格言

YOHAN

ゲームの中でもパーティを組むのもお祭りでっせ

Fuki

すきなゲームは!

YOHAN

ゲームは幅広く好きですが、今だとFPS系のAPEXというゲームをPS4で遊んでますね!

sono

あ〜〜〜いいですよねわかる

Fuki

ライフラインちゃんすこ

YOHAN

ライフラインの飛んでるロボちゃんかわいい

Fuki

わかる アッ!?!?!?もう5分たってる!!?

YOHAN

てか、この話の流れだと僕がただのパリピのイメージで終わっちゃうぅーーー / ( T A T) \

sono

あ〜〜〜〜〜〜 合ってます

Fuki

次回に期待!!!つぎ!!!!!!

YOHAN

次回はもう少しイメージアップしますw

Fuki

sonoちゃ〜〜〜〜ん

YOHAN

次はsonoさんのターン!(遊戯王風)

sono

おろろ

Fuki

ドロー!!!!!!!!

sono

デザイナーのsonoです。 この中で一番下っ端ですがはやく一人前になれるよう一生懸命学び中ですι(`・-・´)/ 今主にやっていることとしては攻略記事の装飾だったり画像だったりを作成しています。 好きなことは絵を描くことと食べることとゲームすること!!

Fuki

平和の象徴みたいなプロフィール ドローとか絶叫して恥ずかしいわ

sono

おもろくないとかいうな

Fuki

パリピと仙人と平和

YOHAN

良いメンバーが揃ったではないか。

Fuki

じゃあ平和な質問しよ!!好きな色は〜?????

sono

きいろきいろきいろ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

Fuki

警告色で草

sono

ポジティブにとらえよ

YOHAN

黄色は食欲増しますよ!

sono

まじすか

Fuki

フォローが可愛すぎる これなんですよウチのリーダーは最高なんだ

YOHAN

ぉっ、おう。

Fuki

ヨハンさんの可愛さが全世界に発信されてしまう

YOHAN

かわいいパリピ・・・w

sono

先生時間が!!!!!!!!

Fuki

あああっ!?!?!?

sono

あああああああああああああああああああ

Fuki

タイムリープしたい

YOHAN

sonoさんに最後に質問!

sono

あはい

YOHAN

いま自分で流行ってる、美味しい食べ物教えてください!

sono

塩パン! 塩パン美味しすぎですよ

YOHAN

塩パン?!写真見たけど美味しそうですねぇ〜食べたこと無いけど今度食べてみよっと

Fuki

むりやりねじ込んだ質問がコレ どういうこと???????
そんなチームです、よろしくお願いいたします!!!!

sono

ふうきちゃんに疑問視されてますけど神レベルの美味しさ
あっよろしく〜〜!!!

Fuki

次行くわよ!!!塩パンの話はもうええよ!!!

sono

お腹すいた

Fuki

さて、GameWithにデザイナーがいたことすら知らない人も多いかと思うので、なんとなく現場の雰囲気をお伝えしたい
というわけで2人に1問1答してもらうよ!!!!!!
いくわよ!!!!!

YOHAN

とりあえず、ワイワイ感は既に大分つたわってるきがするなw

sono

えっはい!

Fuki

第一問
「使っているマシンはな〜に?作業環境教えて!」

Fuki

だいたいみんな一緒だけども!

sono

Mac!!!!!

Fuki

おおざっP〜〜〜

Fuki

我々はMacbook Proの15inchと外部モニターで作業してま〜す!

YOHAN

f:id:fukiworks:20190619191658p:plain

Fuki

めっちゃ具体的なスクショで草

sono

シンプルかつ真実のスクショ

YOHAN

こう見るとワシのMACふるい・・・

Fuki

けしからん....即買い替えましょう

YOHAN

そろそろアップグレードしますかねぇ!!!ふうぅぅ↑↑↑(パリピ感)

Fuki

第2問!
「GameWithってどんなデザインの仕事があるの??担当してるお仕事をざっくり教えて!」

Fuki

私はサービス改修、新規事業のUIデザインを主に担当してま〜〜す!スピードアタッカー!

sono

さっきちょっと言いましたけど、攻略記事のh2等の装飾や各ゲームごとのアイキャッチ画像などを作成しています。

Fuki

お世話になりっぱなし

YOHAN

sonoさん、この場を借りて本当にいつもありがとうございます!!!もちろんFukiさんも!!!

Fuki

GameWithがGameWithらしくいられるのはsonoちゃんのおかげなんですよ(?)

sono

突然のプレッシャー!!!

Fuki

ヨハンさんにほめられた〜!HAPPY

sono

先輩2人がすごいので追いつけるようにがんばりまする

Fuki

ヨハンさんヨハンさん!!!!時間がない!!!はよ!はよ!!!!

YOHAN

僕が関わっている、デザインタスクは様々な部署からいろんな案件がきますが、最近注力しているのはGameWithアプリでデザインリードさせて頂いてるので、UIやUX、調査なども含めて改善改修などゴリゴリにやってます!

Fuki

わかりやすい 理解ができる
なんと30分すぎてしまった.....!でももう少しだけ!!初回なんで!!!

YOHAN

ボーナスタイム突入!

Fuki

プリクラといっしょ

YOHAN

最近のプリクラのUX本当にすごいと思います

YOHAN

カメラ自分で動かせるんですよね?

Fuki

プリクラでUX観察するデザイナーの鑑....
なんでそこまで知って......あっパリピ

YOHAN

^0^;;;

sono

お察し

Fuki

じゃあまとめにはいりますよ〜〜〜!!!!!!

sono

は〜い

YOHAN

〆お願いします!

Fuki

これからも定期的にこの3人が情報をゆるく発信していきます! 次は3人の興味のあるコンテンツとか、シェアしたい知識などをモリモリ盛っていきますわよ

YOHAN

世界に向けて発信!楽しみですね!読者増えるといいなぁ!

sono

わ〜い!!楽しんでやっていきましょ〜!

YOHAN

スケールさせていきましょう(デザイン思考)

Fuki

初の今回は、とりあえず、みなさんに「GameWithにデザイナー、いるぞ!」ということが伝われば合格!だよね!

sono

優勝

Fuki

次回はもっ〜と有益になるよね?ハム太郎?

sono

へけっっっっっっっっっっっっっっっっっっ
反射しか誇れないので頑張ってもっと賢いこと言います

Fuki

わかる

sono

ありがとうございました

Fuki

ヨハンさんみたいにデザイン思考で話せるようになるまでの成長過程もみてほしい

YOHAN

僕も常に学んでいる身なのでデザインチームの皆さんも読者の皆さんともいろいろ学んで成長できるとよいですね!

Fuki

ヨハンさんが真面目にまとめてくれて助かる!それではみなさん、さようなら〜!また次回!

sono

またみてね

YOHAN

ありがとうございました〜!

Nuxt.jsの公式ドキュメント日本語化PJに社内エンジニア5人が参加してみた話 #gamewith #techwith

はじめに

初めまして!GameWithでフロントエンドエンジニアとして働いている、ごーです。🤓

今回Nuxt.jsの公式ドキュメントの日本語化PJにGameWithの社員を巻き込んで、参加をさせていただきました!

Nuxt.jsの公式ドキュメントの日本語化PJは去年から定期的に大きな更新をしており、自分は前回(v2.0)の日本語化PJにも参加していました。

今回Nuxt.js v2.4がリリースされたので、社内のエンジニアに一緒に参加しないかと呼びかけました。

f:id:tiwu:20190620171945p:plain

すると、すぐに3人のエンジニアが手を上げてくれて、後日更に1人が手を上げてくれました!

f:id:tiwu:20190620200839p:plain

f:id:tiwu:20190620200907p:plain

f:id:tiwu:20190621105007p:plain

Nuxt.jsとは?

Nuxt.js は Vue アプリケーションを作成するフレームワークです。

新規でVue.jsのPJを作る際に、Nuxt.jsは初めから便利なライブラリが整備されており、今一番信頼があるフレームワークです。

Nuxt.jsの公式ドキュメントの日本語化PJとは?

Nuxt.jsには下記日本語版のサイトがあり、OSS PJ として運営されています。

ja.nuxtjs.org

github.com

新しいバージョンがリリースされ、英語版は最新だが日本語版が古いので翻訳するPJが立ち上がりました。

github.com

英語版を除くと、現時点で日本語版が他の言語と比べて一番翻訳が進んでいます。

進め方

週1で1時間集まって、もくもく翻訳作業を行いました。

最初に各自翻訳のIssueにアサインし、作業し、1時間後に報告し合いました。

翻訳作業は、基本的にグーグル翻訳を活用しました。

翻訳が難しいところは、既存の翻訳の仕方に倣い、翻訳を行いました。

Vue.jsドキュメントの翻訳ガイドラインがあるので、それも参考に翻訳をしました。

github.com

翻訳のIssueは僕が各メンバーに振るのではなく各自、自分から取りに行くスタイルで行いました。

期間は1ヶ月くらいでほぼほぼ完了しました。

OSSのコミットや翻訳作業の初心者が多かったので、やり方をまとめたドキュメントを最初に共有しました。

ドキュメント

f:id:tiwu:20190620182332p:plain

参加してみて

今回私達が翻訳してマージされたPRはこちらです。

f:id:tiwu:20190620200525p:plain

f:id:tiwu:20190620200553p:plain

f:id:tiwu:20190620200617p:plain

f:id:tiwu:20190620200641p:plain

f:id:tiwu:20190620200703p:plain

みんなで取り組んだので、思ったより多く翻訳のIssueに対応できました。

翻訳作業やOSSコミットが初めての人が多かったですが、PRのレビュワーの方が親切にレビューしてくれたおかげで、スムーズに作業が進みました。

日本語化のPJ自体のリーダーは自分が知っている人だったので、参加しやすかったです。

各自一人で作業をするのではなく、集まって作業することにこだわりました。

そのおかげで、メンバー同士で相談しながら楽しくできました。

勉強会でお礼を言われる機会があり、嬉しかったです。

ただ、自分が巻き込んだので自分が一番多く翻訳作業をしなければ、というプレッシャーがありました。

参加メンバーの感想

弊社にはOSSコミッター手当があり、今回このPJに参加したおかげで利用できました。

OSSへのコミットはハードルが高いと感じていましたが、経験者がリードして社内のメンバーを巻き込んでくれたので、最初の一歩を踏み出すことができました。

GitHubのプロフィールにNuxt.jsが表示され、嬉しい気持ちになりました。

f:id:tiwu:20190621105204p:plain

最後に

日本語化PJをリードした inouetakuya (INOUE Takuya) · GitHub, potato4d (Takuma HANATANI) · GitHub,aytdm (numa) · GitHub へお礼申し上げます。

一人でやるとハードル高く、モチベが維持しづらいですが、みんなでやると楽しく続けられるので、チームでOSSの活動をするのはおすすめです!

Nuxt.js & 翻訳はいいぞ!

GameWithでは定期的にもくもく会を開催しているので、ぜひ参加してください!

gamewith.connpass.com

MangaWithの開発がスタートして約1年経ったので、チーム開発について振り返る #GameWith #TechWith

こんにちは。GameWithのエンジニアのtiwu(Taguchi Wataru)です。

今回は自分が携わっているMangaWithの開発が始まって約1年経ったので、チーム開発について振り返っていきたいと思います。

※このブログは4月に書かれたものです

目次

MangaWithとは

f:id:tiwu:20190507174115p:plain

MangaWithは15万点以上のマンガを配信・販売するスマートフォン向け WEB マンガサービスです。

最大の特徴は、マンガの購入や閲覧など特定の条件をクリアした特典としてゲームアイテムが手に入る「ゲームアイテム付きマンガ」です。

利用している技術についてはこちらの記事をご覧ください。

tech.gamewith.co.jp

MangaWith年表

f:id:tiwu:20190514113252j:plain

インフラエンジニアはGameWithも見ているためMangaWithフルコミットではありません。

そのため、後述するスクラム体制はインフラエンジニアを除くメンバーで組んでいます。

自分は7月にJOINしました。今思うとメンバー多くなったなと感じます。

リリース直前にフレームワークをLumenからLaravelに変更するといった事件もありました(笑)

事件の内容はLaravel JP Conferenceで詳しく解説しています。

tech.gamewith.co.jp

MangaWithの開発開始

12月にリリースを目指し、開発は6月から始まりました。

f:id:tiwu:20190507175500p:plain
記念すべき最初のコミット

開発当初はMangaWithの構想が決まっており、仕様等は全く決まっていませんでした。

そのため、最初はインフラをどうするか、フレームワークをどうするか、CI/CD環境の作成、カバレッジ環境の作成、利用する外部サービスの調査等を進めていました。

開発のスタイルは

  • タスクをGitHubのIssueで管理し、GitHubのProjectsを利用して管理
  • エンジニアのみで朝会をして昨日何したか、今日何するかを共有
  • 週1でエンジニアとPOで進捗の共有、仕様を詰める

といった進め方をし、タスクごとの見積もりはしていませんでした。

JOIN当初

自分は2018年7月にMangaWithにJOINしました。

透明性と不安

約1ヶ月MangaWithで働いてみて(この時点で8月)「このままだと12月にリリースできない気がする(漠然)(やばい)」と感じました。

この漠然とした不安は自分だけなのか確かめるためにエンジニア3人で振り返りを実施しました(KPTで行いました)。

チームで行う初めての振り返りだったので、「MangaWithの開発について」という割と広いテーマで振り返りをやってみました。

f:id:tiwu:20190514125445p:plain

f:id:tiwu:20190514125758p:plain

振り返りを行ったところ、自分以外のエンジニアも同じように不安に感じていることがわかりました。

特に「このまま開発を進めていたら絶対に間に合わないのでは?」という未来への不確実性が高く、課題となりました。

そこで「透明性」をキーワードに、スクラムを導入し、現状の可視化をし、どう対処していくかというステージに持っていくことを決め、POに提案をしました。

提案資料

f:id:tiwu:20190514144457p:plain

f:id:tiwu:20190514145033p:plain

スクラム体制の構築

POの同意を得て、スクラム導入が決定しました。

導入の際にいくつか、ワークを実施しました。

導入が決定した時点でPO1人、EN3人でした。

インセプションデッキ

インセプションデッキは本来10個の質問がありますが、ワークで実施したのは

  • 我われはなぜここにいるのか
  • エレベーターピッチを作る
  • 夜も眠れなくなるような問題は何だろう
  • トレードオフスライダー

の4つです。

f:id:tiwu:20190514173304p:plain

f:id:tiwu:20190514173351p:plain

ドラッカー風エクササイズ

写真には載っていないですが、5つ目の質問として「互いにどんなことを期待しているか?」を会話しました。

f:id:tiwu:20190514174946p:plain

星取表

一度作った後、新メンバーがJOINした際にうまくメンテナンスができなかったという反省がある星取表です・・・

f:id:tiwu:20190514175247p:plain

スプリント

2週間スプリントにして、スプリントレビュー・スプリントレトロスペクティブ・リファインメント・スプリントプランニングは1日にまとめました。

リファインメントは毎週水曜日に1時間開催しています。

リリースはまとめてリリースではなく、案件ごとにリリース可能状態になったらリリースしています。

f:id:tiwu:20190514175908p:plain

スプリントはMilestonesで管理をしています。

f:id:tiwu:20190516153613p:plain

プロダクトバックログ

ZenHubというGitHubの拡張アプリを利用してIssueを管理しています。

IceboxとProduct Backlogの中間的なSub Product Backlogを作っています。

カテゴリ的なもの「詳細」「トップ」「リファクタリング」等はGitHubのlabel機能を利用しています。

f:id:tiwu:20190514185140p:plain

リファインメント

プロダクトバックログにあるIssueの詳細な設計等をし、Story Pointを振ります。

見積もりはエンジニアのみで行っており、フィボナッチ数列を利用しています。

最後の方は良い感じに相対的なポイントとして見積もりができるようになりました。

スプリントプランニング

見積もってあるIssueをスプリントバックログに移動させます。

ベロシティは80くらいに落ち着いたので、80超えないようにしています。

スプリントレビュー

CloseしたIssueのデモやアウトプットの報告をし、MangaWithというプロダクトと向き合います。

アイデアを出し合うブレストに近い感じですが、こういった機能があったほうがいいのでは?と意見を出し合います。

スプリントレトロスペクティブ

KPTでレトロスペクティブを行っています。

TRYは必ずIssue化し、次スプリントで対応できるよう調整を行います。

利用ツール関連

タスクはGitHubのIssueで管理し、ZenHubを利用してIssueをボードで表示して、GitHub Wikiを利用しドキュメント等を書いていました。

利用ツールはできるだけ行き来しないようにGitHubに閉じ込めるのを意識しました。

リリースまで

リファインメントでポイントを見積もり、毎回のスプリントのベロシティを測っていたのでリリースまでどれくらいのIssueが対応できるか見える化されていました。

そのため、取捨選択し優先度順に並べてリリースまで高速にIssueを消化していきました。

基本的にIssueの優先度はサービスとして根幹の部分から進めていました(例:漫画が読める → 漫画を買える → 一覧)

こうして無事、当初の予定通り12月にリリースができました!

f:id:tiwu:20190607120847p:plain
リリース当初のMangaWith

リリース後

リリース後数ヶ月は、リリース時に取捨選択した入れる予定の機能の実装を行っていました。

リリース後は障害対応等々が発生し、ベロシティは安定せずぶれていました。

メンバーの増加

リリース後、3月頃になるとメンバーも増えGameWithの中でもかなり大きいチームになってきました。

メンバーが増えたので、スクラムのワークを再度実施しました(インセプションデッキ、ドラッカー風エクササイズ)

新たな不透明性と不安

リリース時に取捨選択した入れる予定の機能を作り終え、積んであったIssueが終わりかけた際に、新たな不透明性と不安にぶつかりました。

それは、大きな最終目標は見えていたのですが、道中の通過点が見えておらずどこに進めばいいかわからないという不透明性でした。

リリース前は、大きい最終目標の通過点の「リリース」があり、進むことができました。 (今思うとリリース前に、最終目標とリリースの間の通過点を決めて置くべきでした)

そのため、MangaWithチームは立ち止まってしまいました。

現在

立ち止まってしまったので、今どこに向かうべきか、課題の洗い出し、数値の分析を行っています。

通過点を明確にし、再び全力で走れるように、状況に合わせてチームをリファクタリングしています!

振り返って

リリースまではMangaWithに集中でき、全力を出せる状態だったので予定通りリリースができたと思います。

ツールの統一によるスイッチングコストの減少、スクラムによるスケジュール不安の解決、等々。

しかしリリース後は、マーケット不安をうまく解消できず現在に至ります。

スクラムを初めた頃から、最終目標からブレイクダウンした通過点をいくつか設置しておくべきなと感じています。

リリース後は軽い燃え尽き症候群みたいな状態になっていて、エンジンがかかるのに時間がかかってしまった印象がありました。

ただ、メンバーからとても良い雰囲気で良いチームというコメントを貰っており、チームビルディングはうまくいっていたと思います。

最後に

GameWithのDeveloper向けTwitterアカウントも開設しました。
もくもく会の告知やブログの更新情報などを発信するので良かったらフォロー宜しくお願いします!

twitter.com

GameWith フロントエンド もくもく会 #11 開催しました #GameWith #TechWith #gamewith_moku2

こんにちは。GameWithのエンジニアのtiwuです。

5月30日(水)にGameWith主催で第11回目のもくもく会を開催しました!

GameWith フロントエンド もくもく会 #11

gamewith.connpass.com

今回のテーマも前回に引き続き、僕自身が関心を高く持っているフロントエンドを採用しました。

毎回天候に恵まれていなかったのですが、なんと今回は快晴で、合計10名集まってもくもく会を開催しました!

f:id:tiwu:20190329134140p:plain

もくもく会は最初にお知らせ、次に自己紹介と今日のもくもく内容を発表して、もくもくし、最後に進捗発表という流れで開催しました!

自分は前回詳細画面をWeb Componentsにしたので、今回は投稿画面をWeb Componentsにする作業をしていました。

2時間ほどもくもくしたら本日の進捗の発表をしました!

といった様々なテーマの取り組みのもくもく会でした!

技術書店が最近あったからか、技術書店話で盛り上がったりしました!

次回告知

次回は6/27に開催します!次回もテーマはフロントエンドです!

gamewith.connpass.com

最後に

参加していただいた皆様ありがとうございました!

GameWithのDeveloper向けTwitterアカウントを開設しました。

もくもく会の告知やブログの更新情報などを発信するので良かったらフォロー宜しくお願いします!

twitter.com