GameWith Developer Blog

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

GameWithのリプレイスについて vol.2 ~Web Components を Vue で書いたら最高だった編~ #GameWith #TechWith

はじめに

こんにちは!Incremental Stream Team の@53able, @inosy22, @nog です!

前回のブログでは Gamewith で行っているリプレイスの概要について紹介しました。

tech.gamewith.co.jp

今回は Web Components を Vueで開発するための、システム( GameWithDesignSystem)を開発したので紹介したいと思います。

GameWithDesignSystem とは?

Vue で実装したコンポーネントを Web Components として配布をし、どんなプロジェクトでも利用できるコンポーネントを提供するシステムです。

実際に GameWith では下記のスクショのようにカウントダウンをする広告をGameWithDesignSystemで開発しました。

f:id:tiwu:20200416194434p:plain

GDS の目指す世界

  1. どんなプロジェクトでも簡単に利用できるHTMLコンポーネントの提供

  2. 将来的にデザイナーも UI/UX 改善に利用できるようにしたい

  3. 将来的にエコシステムを OSS として公開したい

作った背景

課題

リプレイスでは、Nuxt.js (Vue.js) を採用しています。

現在は BFF(Backends For Frontends)で Nuxt.js を動かして、SSRのみ行っています。(クライアントで Nuxt.js が動いているわけではありません)

リプレイスは段階的に行う計画のため、上記の対応によって既存のJSは後ほどまとめてリプレイスする予定でした。

しかし、既存のJSの部分的リプレイスを実施する必要が出てきました。

既存コードと新規コードを共存させる場合は、jQuery による DOM 操作と Vue で扱う仮想 DOM との相性が良いとは言えず、部分的にクライアントで Vue を取り入れるのは難しい状態でした。

部分的リプレイスの要件

  • 既存の jQuery で書かれている JS をモダンに実装
  • 将来的には完全な形で BFF にリプレイスする見込み
  • 既存のJSを Nuxt.js + TypeScript で実装し、BFFへ移行時に再利用
  • 既存のJSからの仮想 DOM の破壊を防ぐ

解決案

  • 仮想 DOM を破壊しない、ShadowDOM を採用
  • ShadowDOM を利用するために、Web Components を採用
  • SFC(Single File Component)を実装したあとに、Web Components へビルドできる環境

これまでリプレイスの BFF は Nuxt.js + TypeScript で実装してきていたので、技術的に要求されるギャップはなかったです。

また、SFCで実装してあれば、将来的にBFF(Nuxt.js)で再利用も可能です。

さらに、リプレイスチームだけでなく他のチームでも利用できるようにするため、リプレイスチームのプロジェクトに依存しない構成にしました。

技術構成

利用技術

  • Vue
  • VueCLI
  • @vue/web-component-wrapper
  • TypeScript
  • Storybook

@vue/web-component-wrapper

Vue コンポーネント をカスタム要素(Web Components)としてラップして登録します。

Vue 公式のラッパーです。

Composition API や Props や Vueの Life cycle method などの基本的な機能は、 Web Components にビルド後に問題なく動作します。

不要な Web Components のカスタム要素を生成しないようにするために、コンポーネント名は、prefix に _ で対応しました。Scss の仕組みを参考にしました。

vue-cli-service build --modern --target wc-async --inline-vue --name gds --dest 'dist/public' 'src/components/**/[!_]*.vue'"

@vue/web-component-wrapper

Storybook とどう連携するか

初期は、Storybook を導入していませんでした。

作成した Vue コンポーネントは App.vue に追加し、VueCLI の serve 機能を利用してブラウザに表示して確認しデバッグを行っていました。

しかし、そのままだと手間がかかる上に、リリースして実際に利用される Web Components での動作を常時確認したいので、カスタム要素を Storybook 上で管理できるようにしました。

Storybook では、利用するときに SFC をビルドしたコードを import する必要があります。

最初は新しいコンポーネントを追加する都度、該当するコードの import 文を書き換えてましたが、手間がかかっていたので下記コードでカスタム要素をすべてインポートするように自動化しました。

const fs = require("fs");
const scriptPath = "./dist/private";

// ファイル一覧からimportの文を作る
const makeIndexContent = files => {
  let content = "";
  files.forEach(item => {
    if (!item.endsWith(".min.js")) return;
    content += `import "./${item}";\n`;
  });
  return content;
};

// 非公開も含む全コンポーネントのindex.jsを作成
fs.readdir(scriptPath, (err, files) => {
  if (err) throw err;
  const content = makeIndexContent(files);
  fs.writeFile(`${scriptPath}/index.js`, content, err => {
    // eslint-disable-next-line no-console
    if (err !== null) console.log(err);
  });
});

コンポーネント開発をストレスなくやるために

  • stylelint-config-rational-order をStylelint に組み込んで、css プロパティの並び順を一律自動整形しています。

  • SFC を新規実装するときに、コマンドによってテンプレートからファイルを生成するようにして最低限必要なコードが揃っている状態から実装始められるようにしています。

リリースフロー

ビルドされたJSファイルをS3にアップロードします。

アップロード先は package.json の version を元にパスを切ることで、ブラウザキャシュのバグを防ぎ、カナリアリリースを実現させています。

利用したいバージョンのパスを指定して <script> タグで読み込むことによって、定義された Web Components のカスタム要素を利用できます。

利用する Web Components のJSだけが部分ロードされるので、コンポーネントの量が増えても問題ありません。

f:id:tiwu:20200416194503j:plain

苦労した点

  • ShadowRoot 内で document.* が使えずクッキーなどが取得できませんでした。

  • ビルドの監視や、 hot reload など行いたかったが、まだ対応できてないです。毎回全てのSFCをビルドしているので、確認まで数秒時間がかかってしまいますし、ビルド実行を自動化できてないです。

感想

SFC から Web Components へビルドし、利用できる方になるまでの過程で煩雑な作業をひとつひとつ解決してきており、 コンポーネント実装以外の工程は、設けているコマンドを実行することでまかなえるようしています。

初めてGDSを触る人にも易しい構成になっていきています。

独立したシステムで SFC を開発とテストすることは、配備される環境で考慮することが少なくて済むので、コアロジックに集中ができます。

しかし、SFC は Vue.js を前提に実装できることから容易にたくさんの仕様を詰め込んでしまうことが可能です。

コンポーネントの粒度は考慮する必要があります。

ただし、粒度が大きいコンポーネントを作ってしまっても、今回は TypeScript で実装しているので、後で分割するときにコードの整合性はコントロールしやすいと感じました。

レガシーな環境でも、モダンなコードで実装されたコンポーネントを追加できるので、今後は開発するのに継続的な効果が期待できそうです!

最後に

GDS の開発環境は、将来的には公開して利用できる様にしていきたいと考えているのでご期待下さい。

また、GameWith にイケてるコンポーネントがこれからたくさん作られていくので、ぜひ探してみてください!

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

twitter.com

GameWith iOS もくもく会 #20 開催しました #GameWith #TechWith #gamewith_moku2

こんにちは!
GameWithのiOSエンジニアのkyamです。
2月20日(木)にGameWith主催で第20回目のもくもく会を開催しました!

GameWith iOS もくもく会 #20

https://gamewith.connpass.com/event/166701/

前回のiOSの開催が9月だったので5ヶ月振りの開催となりました。
今回は社内1人、社外2人の計3人が集まってくれました!

当日の流れ

f:id:keeetaka:20190930141449p:plain

最初にお知らせ、次に自己紹介と今日の作業内容を発表して、軽食を挟みながら2時間程もくもくし、最後に進捗の発表という流れで開催しました!

進捗発表

以下がメンバーの取り組んだ内容です。

  • 個人アプリの開発環境整備
  • 個人アプリ(日記アプリ)のUIPageViewを使ったUIの実装
  • 個人アプリにFirebaseを使ったPush通知の実装

といった風に全員が個人アプリに関する取り組みでした!
今回は人数も少なかったため開発中のアプリについての雑談や知見共有など密なコミュニケーションも終了後に行われました。

以下はお知らせになります!

お知らせ1

GameWith iOSもくもく会参加者用のslackワークスペースを作成しました!

作業中に気軽に質問などを投げることができ、誰でも返答できるようにし、参加者にとって勉強会自体の効率をよりあげたり、勉強会前後のコミュニケーションを高めたいという意図からです。 またちょっとした事務連絡などもSlackで行えるようにしました。

既に6人の方が参加してくれました!

お知らせ2

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

twitter.com

最後に

参加していただいた皆様ありがとうございました!
3月以降も基本的に毎月開催していく予定なので、興味のある方は是非参加してください。

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

GameWith のエンジニアの tiwu です。

1月30日(木)にGameWith主催で2020年最初の第19回目のもくもく会を開催しました!

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

gamewith.connpass.com

新年1発目のテーマは僕自身が関心を高く持っているフロントエンドを採用しました。

もくもく会は社内1人、社外5人の合計6人で開催しました!

f:id:tiwu:20190329134140p:plain

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

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

  • web components で作られた 格闘ゲーム便利ツールにフレーム比較機能を追加
  • Chart.js を利用したグラフの表示
  • python + django で作られた Web アプリのコードリーディング
  • Udemy で Vue.js の勉強
  • gulp + jQuery で作られたポートフォリオを Vue.js に置き換え&Netlify で公開
  • Vue.js + TS で Web アプリを作成

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

最後に

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

今年もよろしくおねがいします!!

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

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

twitter.com

PHPerKaigi 2020 にスポンサーとして協賛します #GameWith #TechWith #phperkaigi

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

この度、2/09, 10, 11 に開催されるPHPerKaigi 2020 に協賛をさせていただきます!!!

PHPerKaigi 2020

phperkaigi.jp

PHPerKaigi は去年も開催されており、弊社は去年の PHPerKaigi も協賛させていただきました!

tech.gamewith.co.jp

今年もとても楽しみにしています!

PHPer チャレンジ

去年も開催された PHPer チャレンジが今年も開催されます!

blog.phperkaigi.jp

PHPerチャレンジとは

PHPerチャレンジは会場内外に隠された「PHPerトークン」を探しだし、イベントサイトに入力して得られたスコアを競う企画です。 PHPerトークンは「記号の# + 任意の文字列」の形をしています。

PHPer トークン

弊社もこの PHPer チャレンジに参加しており、このブログのどこかに、 PHPer トークンを仕込みました!!!!

頑張って見つけてみてください🙏

最後に

GameWith では一緒に働く仲間を募集中です!

毎月もくもく会なども開催しているので、気軽に連絡ください!

recruit.gamewith.co.jp

ツイッターアカウントを開設しました!

ブログ更新情報や、イベントの開催など告知していきます!

twitter.com

社内 LT を8ヶ月続けてみて気づいた15個の続けるコツ #GameWith #TechWith

はじめに

こんにちは!

コミュニティでは、ごーと呼ばれていますが、社内では本名で呼ばれています。

只野です。

今回は GameWith で毎週開催している社内 LT について書いていきたいと思います!

社内 LT の紹介

毎週金曜日の19:15 ~ 19:45 の30分開催しています!

登壇者はエンジニア・デザイナーだけでなく、ディレクターや管理部の方、技術顧問など社外の方にも登壇していただきました!

登壇の内容はとても幅広く、GameWith のコードの話や、最新の技術、チームマネジメントの話や、サウナの趣味話など多岐に渡っています!

毎回の登壇者は立候補制ではなく、スタッフが勧誘し調整を行っています。

運営スタッフは自分を含めて3人です。

場所は会議室ではなく、執務エリアに近いオープンスペースで開催しています!

f:id:tiwu:20200117150959p:plain

飲み物として、レッドブルとノンアルコールビールを用意し乾杯しています!

タイムテーブル

登壇は一人15分(内5分の質問タイム)です。

19:10 ~ 19:15 前座

19:15 ~ 19:30 一人目

19:30 ~ 19:45 二人目

数字で見る社内 LT

最初の開催は2019年5月24日で、今までに合計25回開催しました!

現在までに、約40名ほどいるサービス開発部メンバーの9割の方に登壇していただきました!

社内 LT の開催のきっかけ・始め方

最初の LT 会の開催は、自分が Roppongi.vue で登壇予定でその練習をするため、自ら社内 LT を行いました。

こちらが実際に登壇をした Roppongi.vue です。

roppongi-vue.connpass.com

LT 開催後に部長から他にも LT をできる社員がいると共有を受け、それならばと毎週開催することにしました。

また、丁度この時期に他の社員が外で登壇をしており、その登壇内容を社内で話す機会がないのはもったいないと思ったのも理由の1つです。

始めは自分が所属していた web の開発チーム内で社内 LT 会を開催しました。

徐々に巻き込む人数を増やして、今はサービス開発部全体を巻き込んでいます。

社内 LT を続ける15個のコツ

1. LT のテーマを絞らない

慣れてきたらテーマを絞っても良いかもしれませんが、導入時はどんなテーマでも良いことを強調します。

登壇のハードルを低くし、誰でも登壇できるメリットがあります。

2. 写真を撮る

振り返りやすく、LT についてまとめているドキュメントが文字だけにならず豪華になる!

サッカーの試合前に撮影するみたいな感じです。

f:id:tiwu:20200117151501p:plain

3. 始めはスモールスタート

一番初めは1人で登壇をし、次に同じチームのメンバーを巻き込みスタートしました。

当初は3回程度開催したら止めようと思っていましたが、登壇者の調整などが順調に進み、ここで止めるのはもったいないと思い続けました😎

少ない人数で何度か開催することで、GameWith に合った社内 LT 会の形を模索することができ、サービス開発部全体にスケールがしやすかったです。

4. 開催する日時は固定する

毎週金曜日の 19:15 から 19:45 と固定することで、予定を確保しやすくしました。

5. 日中ではなく夜に設定する

金曜日の夜なので仕事が一段落している人が多く、参加しやすいです!

6. 前座を設ける

19:15 スタートですが最初は参加者がまばらなので、場を暖める役割として前座の方が5分ほど喋るシステムにしました。

始まっている感が出て、人が集まりやすくなるメリットがあると思います。

7. 登壇者の勧誘は直接会話し依頼する

テキストより直接会話したほうが主旨の説明がしやすく、また熱意を伝えやすいです!

8. 登壇者が決まらなかったらスタッフが登壇する

「今日は登壇者がいないので中止にします」というのは絶対にしないように考えており、決まらなかったときはスタッフが登壇しています。

9. 飲み物を用意する

社内 LT 会はレッドブルとノンアルコールビールを用意しています!

飲み物があることで、それっぽい良い雰囲気になります!

週末ですしね。

10. タイムラプスの撮影

社内 LT 会の様子を iPhone で定点撮影しています。撮影は後で見やすいようにタイムラプスで撮影しています。

社内 LT 会を知らない方に雰囲気を伝えやすいです!

11. 活動報告をしっかりする

社内 LT 会の様子を毎回 Slack で周知し、次の登壇者の紹介をして次回の社内 LT 会のエンゲージメントを高めています。

12. 登壇者へのリマインド

登壇日が決まった後、その日まで放置するのではなく、リマインドを兼ねて次の登壇者の紹介をしています。

13. 社内 LT 会の目標を共有する

サービス開発部の8割の方に登壇経験を持ってもらうのを目標としており、毎月のサービス開発部の共有会で進捗報告などを行っています。

14. 登壇者の予定をできるだけ先まで埋める

自分たちは1ヶ月先くらいまでの登壇予定を埋めています。

15. どこまでも前向きに

いろいろコツを書いてきましたが、最終的には前向きな気持が大切だと思います!

終わりに

特に苦労することなく8ヶ月続けることが出来ました😉

いろいろなテーマで LT 登壇をしていただいたので、続けて良かったと思いました。

部内みんなのプレゼンスが上がったと感じます。

他の社内 LT 会などで取り組みのコツなど知りたいので、やってみて良かったことを教えてほしいです!

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

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

twitter.com

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

あけましておめでとうございます! GameWith のエンジニアの tiwu です。

12月26日(木)にGameWith主催で2019年最後の第18回目のもくもく会を開催しました!

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

gamewith.connpass.com

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

2019年最後のもくもく会は社内2人、社外4人の合計6人で開催しました!

f:id:tiwu:20190329134140p:plain

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

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

  • web components で作られた Web アプリのバグ改修・機能追加
  • Udemy で React の勉強
  • ドットインストールで React の勉強
  • Vue.js, Vuetify で作られた Web アプリの機能追加
  • Nuxt.js の翻訳
  • Vue.js の本の精読

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

次回告知

2020年1回目のもくもく会は 1/30(木) に開催します!次回のテーマもフロントエンドです!

gamewith.connpass.com

最後に

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

2019年お世話になりました!

今年もよろしくおねがいします!!

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

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

twitter.com

GameWith サービス開発部の開発チーム体制の紹介 #gamewith #techwith

はじめに

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

今年も始まったアドベントカレンダーはいよいよこのブログで最終日です!

qiita.com

長かったようで短い1ヶ月でした!

最後のブログは GameWith のエンジニア・デザイナーが所属するサービス開発部がどのようなチーム体制で普段業務を行っているか紹介したいと思います!

サービス開発部

エンジニア・デザイナーは基本的にサービス開発部に所属しています。

GameWith では KPI グループと品質改善グループの2つのグループに分かれており、そのグループの中にいくつかのチームを作り、日々業務を行っております。また分析、デザインチームが独立して存在しています。

f:id:tiwu:20191225112101p:plain

業務のサイクルやイベント(朝会や振り返り)や、利用するツールは各チームそれぞれで最適化されています。

KPI グループ

KPI グループは主に、サービスの数値(例えばUU、CVR、継続率などなど)を上げることを目的として業務を行っています。

アプリチーム

GameWith の iOS、Android それぞれのアプリを運用しています。

GameWith ゲームウィズ

GameWith ゲームウィズ

  • GameWith, Inc.
  • ニュース
  • 無料
apps.apple.com

play.google.com

GameWith アプリは「ゲームユーザーの第一想起を取る」ということをミッションに掲げ、日々業務を行っています。 第一想起とは、「攻略情報を見るのもゲームを探すのも、真っ先に GameWith アプリを使ってくれる状態」をイメージしています。

開発体制としてはスクラムを採用しており、KPI 達成のためのロードマップをチーム内で議論し、具体的な施策として形にしてプロダクトバックログに落とし込み( JIRA を運用)、スプリントごとにプロダクトバックログの優先順に計画をして開発しています。

tech.gamewith.co.jp

探す Webチーム

GameWith の Web の「ゲーム紹介」事業を担当しているチームです。

サイトの UI/UX 改善、ゲーム紹介動画機能、ライターが利用するダッシュボードの改善など幅広く業務を行っています。

開発体制としてはスクラムを採用しており、ZenHub を利用したバックログの運用を行っています。

攻略・広告 Web チーム

GameWith の Web の「ゲーム攻略」事業を担当しているチームです。

また、広告の改善等も行っています。

サイトの UI/UX 改善、ツールの開発、ライターが利用するダッシュボードの改善など幅広く業務を行っています。

最近ではドラクエウォークのこころ確定マップなどをリリースしています!

gamewith.jp

開発体制としてはスクラムを採用しており、ZenHub を利用したバックログの運用を行っています。

価値検証チーム

価値検証チームは、 GameWith の Web ・アプリ問わず、数値の大幅改善(30%改善)を目標とした施策を担当するチームです。

開発体制としてはスクラムを採用しており、 JIRA を利用しています。 また様々なアイデアを出すために Scrapbox を採用し各メンバーがアイデアを日々追加し、それをもとに議論する MTG なども開催しています。

品質改善グループ

品質改善グループは主に GameWith の品質の保証、改善を担当しています。

インフラチーム

GameWith のインフラを担当するチームで、メンバーはいろいろなチームから兼務で所属しており、 GameWith の安定稼働を守っています。

スロークエリの改善やサーバー台数・スペックの最適化などを行っています。

CS チーム

カスタマサポートの方と共に、GameWithのSNSをより健全な環境でユーザに利用してもらうための改善を行っているチームです。 荒らしへの対策やカスタマーサポートの方の業務効率化などを行っています。

QA チーム

QA チームは他のチームと協力をして、 GameWith の当たり前品質を死守し、各チームと共に魅力品質の保証をサポートしています。

また、E2E テストの改善を行ったりもしています。

SRE チーム

PHP のバージョンアップや、古いバージョンで稼働したサービスをリプレイスしたり、開発環境の改善等を行っています。

インフラチームと同様にメンバーは他チームとの兼務で所属しています。

tech.gamewith.co.jp

tech.gamewith.co.jp

リプレイスチーム

GameWith の長期的な成長を見据えて、サービスの設計や利用技術の見直しを行なっています。詳しくは下記ブログをご覧ください。

tech.gamewith.co.jp

分析チーム

GameWith の数値を分析しているチームになります。 ユーザーにより高い価値を届けるために、データに基づいた検証を日々行なっています。

Google Big Queryと Data Portal をメインに、専用のダッシュボードを作成し、各施策の数値出しやユーザー分析などを行なっております。

以下は Google Big Query と Data Portal を用いたブログの紹介になります。

tech.gamewith.co.jp

tech.gamewith.co.jp

デザインチーム

他のチームのデザイン業務や、コーポレート関係の業務など多くの業務を行っています。

PHP カンファレンスで配布したグッズや UX MILK Fest 2019 で配布したチラシなども GameWith のデザイナーがデザインしています!

tech.gamewith.co.jp

tech.gamewith.co.jp

終わりに

このように GameWith のサービス開発部には計11チーム、35人前後のメンバーが所属しています。

最適・最高のチーム体制を組めるよう日々変化し、より良い状態を探し続ければと思います。

来年も「ゲームをより楽しめる世界を創る」という GameWith のミッション実現を目指し、日々業務を行っていきたいと思いますのでよろしくおねがいします!