React + GraphQL から成る Kaizen Ad のフロントエンド

追記: 2021年6月現在はアーキテクチャが変わってきています。 次の記事に詳細を書いていますので、一読をお願いします。 Kaizen Adのフロントエンドアーキテクチャの遷移について - Kaizen Platform 開発者ブログ

Kaizen Platform でフロントエンドエンジニアをしている山本です。この記事では、我々が運営するサービス「Kaizen Ad」のフロントエンド部分をご紹介します。

Kaizen Ad とは

Kaizen Ad は、動画広告をサポートするマーケットプレイスです。
カスタマーがクリエイティブを依頼すると、広告クリエイティブを作成するグロースハッカーから動画広告クリエイティブが納品される仕組みです。

カスタマーにとってはクリエイティブ改善の運用を省力化できると同時に、グロースハッカーにとっても新しい働き方が創造できるソリューションとして提供しています。

ja.kaizen-ad.com

技術選定

技術選定は、モダンシステム化を念頭に置きつつ、運用しやすい設計を目指して行われました。その中でも3つピックアップします。

1. React + TypeScript

Reactは、TypeScriptの親和性や、技術的に明るいエンジニアが在籍していたため選択されました。業界的なメインストリームの一つでもあり、導入に抵抗はありませんでした。 TypeScriptは以下に挙げる項目などメリットが大変多いため導入されました。

  • ランタイムエラーの削減
  • エディターとの相性（visual studio code / WebStorm などで修正箇所がわかりやすい）
  • コンポーネントに渡すpropsのデータがわかりやすくなる

数々のライブラリがTypeScriptへの移行が見受けられ、少なくとも静的型付け言語は今後も利用されていくことが予想されています。Airbnbの発表でも、38%のバグがTypeScriptによって防止された可能性があると報告されています。

www.reddit.com

2. Clean Architecture

Clean Architecture は後述でも説明します。
DDDを意識してドメインに設計の観点を寄せ、プロダクトの拡張性や保守性を高く保つために使っています。マイクロサービスを使ってアプリケーションを構築する昨今のフロントエンド開発において、各機能の凝集度をハンドリングしやすくできることなどがメリットになります。

3. GraphQL

当初、GraphQLをProduction環境で実装する会社は少なかったですが、早い段階で導入することが決定されました。RESTful APIの場合、APIから受け取ったデータを整形してviewにわたすなど、オーバーヘッドが生まれており、GraphQLの場合は、フロントエンドとして必要なデータの形をそのままリクエストすることが可能になるため、ユースケースによりマッチするGraphQLを利用することとなりました。

システム構成

Kaizen Ad のフロントエンドにおけるシステム構成は以下のようになっています。

f:id:kaizenplatform:20190325140005p:plain

続きを読む

Kaizen Cloud Engine の裏側をご紹介

Kaizen Platform で プロダクトマネージャーをしている河部です。今回は先日リリースされた Kaizen Cloud Engine がどのようにできているのかをご紹介したいと思います。

Kaizen Cloud Engine とは

Kaizen Cloud Engine は、これまでKAIZEN TEAM for Xとして提供させていただいているサービスの裏側で当社メンバーが活用していたシステムをユーザー様にも直接ご利用いただけるようにパッケージングしたものです。

Kaizen Platform、開発者向けパーソナライズ統合開発基盤「Kaizen Cloud Engine」を月額15万円から提供開始

f:id:kaizenplatform:20190221195910p:plain
Kaizen Platform が提供するソリューション

Kaizen Platform と聞くと ABテストのイメージがあるかもしれませんが、最近ではパーソナライズされたWebサイトを構築するサービスとしてご利用いただくケースが大半になっています。

パーソナライズといっても幅が広いのですが、例えば以下のような形でご利用いただいています。

f:id:kaizenplatform:20190221160747p:plain
ユーザーに合わせた、より身近なランキング表示に

続きを読む

Kaizen Platformの2019技術構想 : workplace

Kaizen PlatformでCTOをしている渡部です。 今回は2019年のKaizen PlatformのProduct開発の方向性としての技術構想を書いてみたいと思います。

Kaizen Platformが目指しているもの

https://recruit.kaizenplatform.com/aboutus こちらのページに詳しく書いてあるので詳細はぜひ読んでいただければと思いますが、本投稿で特に関連が深いのは以下の記述になります すでに存在している法人向けサービスと比較して10倍以上生産性が高く、圧倒的な競争力を保有するプラットフォームを構築する。

これを実現するためにPlatformとしては以下を実現していく必要があります

  • オフラインで働くのと同等以上の環境(= workplace)をオンライン上に用意する
  • 時間と場所にとらわれない環境(=クラウドソーシング)がこれまでよりも多くの才能を惹きつけることができる
  • 結果として従来よりも精度の高い仕事のマッチングを提供できる

f:id:kaizenplatform:20190115103600p:plain

これをスケールさせる仕組み

f:id:kaizenplatform:20190115103641p:plain

Kaizen PlatformはもともとWebサイトのABテストから始まった会社です。そこからサービスが進化して、マーケティング活動の改善を包括的に行うKAIZEN Team for Xというサービスになりました。それにくわえてKaizen Adという動画改善のサービスが2018年初から立ち上がってきました。

Kaizen Platformはこれらのサービスをクラウドソーシングを通じて提供しているので、サービス提供者側の視点で見ると、この2つのサービスはかなり共通点が多いことがわかりました。

f:id:kaizenplatform:20190115103707p:plain そこでこれらのサービスを分解したものが上図になります。

  • Platform Core
    • Creatorの制作活動を支えるworkplace
  • Domain
    • ビジネスドメインに特化した機能
    • 例 :
      • Webサイト : ABテスト、 Analytics
      • 広告 : 広告Platform(Facebook, Google等)API連携

技術でこれをどう実現していくか

f:id:kaizenplatform:20190115103757p:plain

当社のビジネスのコアである「クリエイティブな仕事を提供するPlatform」としてのPlatform Core部分をしっかりと分離することで、今後新サービスを立ち上げて行くことのコストを大幅に減らすことができると考えています。 取らぬ狸の皮算用ですが、Kaizen Adを立ち上げてきた1年を振り返ると、同様の新サービスを立ち上げるときは1/5くらいのコストと時間で立ち上げができる様になるのではないかと目論んでいます。

f:id:kaizenplatform:20190115103819p:plain

workplaceって考えてみると、我々が日々オフィスで行っている仕事と結構似てるんですよね。なので、採用~受け入れ~教育~業務管理~情報共有~評価~給与支払い、みたいに会社で行われていることをPlatform Coreとしてはオンライン上でサポートしていくとClient&Creator双方の生産性がかなり上がるんじゃないかと思っています。 (内部向けに2019年に開発したいと思っていることをプロットした図なので分かりづらい点もあると思ったのですがご容赦ください)

これ、言うのはまぁ簡単なのですが、現実の仕事環境はじゃあきれいに整理されてるかというとそうでもないんですよねw (皆さんの会社でも完璧!といえる状態ではない部分は多いと思います)

なので、適切な抽象度での設計をしていくことはやってみると意外と難しく、だからこそ面白い。

Kaizen Paltformのものづくりチームはこんなことに取り組んでいますというご報告でした!

BigQueryの新機能を使ってクエリ料金を1/1000にする

こんにちは、エンジニアの大迫です。

Kaizen Platformでは、以前からGoogle BigQueryを利用して、ウェブサイトの行動ログや広告の配信レポートなど様々なデータを保存・活用できるような仕組みを整え、お客様のウェブサイトや広告クリエイティブの改善に取り組んできました。特にここ最近では、非エンジニア向けにBigQueryやSQLの社内勉強会が行われたり、 @ikedayu によりProduction以外のメンバーでも気軽にデータ分析ができる仕組みが作られたりして全社的にBigQueryの利用が広がっています。

その一方で、データを活用できる人が増えた結果として、BigQueryのクエリ料金も増えていく傾向になっています。 せっかくエンジニア以外でも分析できる仕組みがあるのに、クエリコストが気になってクエリ書くのが怖くなってしまってはもったいないので、こちらの記事にあるように @ikedayu によってBigQueryコストの可視化をしながら必要のないクエリが定期的に実行されてないか、不必要に多くのデータをスキャンしていないかといった傾向を把握して改善する仕組みを回し始めたりしています。

developer.kaizenplatform.com

そんなある日、BigQueryのドキュメントを読んでいたところ、 Clustered Tableというβ機能の存在を知りました。これを活用するとKaizen PlatformのBigQueryの利用料の大きな割合を占めるクエリ料金を削減できる可能性があったので調べてみたところ、この機能を適切に活用すると、クエリにもよるものの、クエリ料金を大きく削減できそうなことが分かったので、調べた結果を簡単にまとめたいと思います。

続きを読む