組織でナレッジを共有できる新プロダクト「Strap」　その開発技術に「TypeScript」「Firebase」「PixiJS」「React」を選んだ理由

Goodpatchのエンジニアマネージャー

西山雄也氏：先日Goodpatchの新しいプロダクトとしてβ版をリリースしたStrapの紹介と、あとはそれにまつわるナレッジの紹介をもう1人の黄から発表します。

僕はGoodpatchのProduct Div.という自社プロダクト開発の部署でエンジニアマネージャーをやっています。プロトタイピングツール『Prott』とクラウドワークスペースツール『Strap』の開発責任者です。フルスタックエンジニアからフロントエンドエンジニアになり、今はGoodpatchに入ってマネージャーをやっているという経歴です。

僕はいわゆる日本のインターネット普及期の2000年以降に情報系の大学に行っていて、インターネットにすごくワクワクした世代なんですね。在学中に個人でいろいろなWebサービスを発信したり、Webアプリケーションを作ってブラウザだけでいろいろなことができてしまうというのを体験して、それ以来ずっとスタートアップを中心に開発をしているという感じです。

当時はオープンソースカルチャーというのも広がっていた時期で、それをリアルな他の分野にも考え方を広げていくという流れが出ていました。

大学の友人たちとモノづくりの中でも服作りをオープンにするというプロジェクトを立ち上げ、「60億人に60億通りのファッション」をテーマで「Open-Clothes」というのをやっていました。それを10年ぐらいやっていたんですけど、そこで自分でプロダクトを立ち上げていろんな人に使ってもらうというのを経験した感じです。

2004年にPrix Ars Electronicaのデジタルコミュニティー部門で準グランプリを受賞しました。これは単純に時代がかなり古いんですけど、まだSNSという言葉がない時代にソーシャルサービス的なものをやっていて、それをさらにモノづくりとほしい人たちをつなぐようなコミュニティを作っていたということで、そういった賞を受賞していたりしました。

ただ、まだ10年ぐらい早かったなという感じで、せっかく賞を取ったのになかなか日本では反響がなかったですね。その後も独立してスタートアップ、より技術にフォーカスしたくてアドテクのRTB（Real Time Bidding）、DSP（Demand-Side Platfor）だったり、ソシャゲーのサーバー開発をやったりとか、コミュニティ面だとやっぱり新しい技術が好きなのでNode.jsが普及し始めた段階で日本のユーザグループの立ち上げにも関わっていました。

その後UI/UXデザインカンパニーGoodpatchにフロントエンドエンジニアとしてジョインして、2年半目なのですが現在Product DivでProttとStrapの開発マネージャーを務めています。

Strapは同じものを見てチームで向き合うことができる

今日の発表ですが、僕は簡単にStrapのプロダクト紹介と簡単にアーキテクチャ概要を説明させてもらいます。メインは僕の次の黄です。彼は台湾出身のエンジニアで、ニックネームはFishです。彼の発表でより具体的なUI、デザインとその実装についてナレッジを話してもらいます。

Strapというのは、今画面でスライド代わりに表示しているこの画面がそうなんですけど、これはプロジェクトを進めるすべての人向けのチームで使うクラウドワークスペースですね。リアルタイムでこういった図表を作ったりテキスト情報や共同編集が可能で、コミュニケーションの効率化や、共創・コラボレーションできるような価値を提案します。

先日4月23日にStrap β版の利用登録をスタートしました。こちらが予想した以上の大きな反響があり、約1800件もの申込みがあって、一部の方に限定的に公開しています。正式版リリースまでは、ウェビナーやオンラインワークショップで、少しでもStrapを使う機会を用意しようと思っています。正式版のリリースは今年の夏ごろを想定しています。

Strapができることは、情報を素早く視覚化できるということです。ビジュアル情報だけでなくテキスト情報や画像の情報などを簡単に共有、フィードバックをすることもできて、一元管理できる。そして共同作業ができるというものになっています。

ビジュアルベースのコラボレーションの価値についてです。いわゆる非デザイナーの人が気軽に図を描くツール、しかもそれを簡単にしたツールとなってます。

情報を素早く視覚化できるというのが価値としてあって、それはつまり情報というのは自分の中にある情報、アイデアというのを素早くかたちにできるツールでもある。それを外に出してかたちにすることで、同じものを見てチームで向き合うことができる。そうすることでチームの中で思考のプロセスを共有することができる。これが端的にStrapというビジュアルコラボレーションの価値だと思っています。

Prottの価値をStrapが引き継ぎ、誰でも簡単にコラボレーションできることを目指す

今回Strapはそれをテーマにしているんですけど、Prottも似たような価値をもっているプロダクトだったんですね。

Prottというのはプロトタイピングツールで、「1000の会議より、1つのプロトタイプ」とキャッチコピーがあるように、高速で素早くアイデアをかたちにしてデザイナー以外の人もアイデアを手で描いて、UIとして取り込んで動くプロトタイプにできて、それをチームで共有するという価値をもっているプロダクトです。

それをStrapが引き継ぐかたちになります。それはもうプロトタイプだけではなくてより幅広いプロジェクト開発のすべてのフェーズでコラボレーションができるようになっています。

Strapのチームとして目指すものは「非デザイナーであっても、職種を超えて誰でも簡単にコラボレーションできること」ですね。リテラシーがそれほど高くない方たちも使えるものを目指しています。けっこう思い切った目標なんですけど、それはGoodpatchのフルリモートデザイン組織Goodpatch Anywhereが切り開いてくれた未来であるとも感じています。

Strapのプロジェクトが立ち上がった段階でAnywhereはあったので、具体的に確実に来る未来として僕らは実感することができたんですね。それをさらにAnywhereがやっている試みを促進するような、誰でも使えるようなツールを提供したいと考えて作ってきたツールになります。

強みとしてはとにかくシンプルな操作感、誰でも使えるものですね。僕らのコンセプトとして「スマート・デフォルト」というんですけど、サッと作ったものでも綺麗に作れる。デザイナー以外の人って絵を描くこと自体に抵抗があったりするんですけど、そういった方でも簡単に図を描くことができる。

Prottと同じくなんですけど、そこで培ってきた経験として日本語のUIサポートと国内事情に沿ったセキュリティという強みがあります。あとはGoodpatchのノウハウが詰まったテンプレートやワークショップのセットでこのツールをチームにインストールするところまでサポートしようとしています。ここまではStrapの話ですね。

Strapの基本的なアーキテクチャ

ここからは基本的な利用技術のアーキテクチャの話をします。Strapは今Web版をファーストリリースとさせてもらっています。WebフロントエンドとバックエンドはGCP（Google Cloud Platform ）で今作っています。

フロントエンドから見ていくと、言語はTypeScriptでReactとReduxですね。こういったフレームワークが基本的なアプリケーション管理の仕組みになっているんですけど、このボード内、こういったいろんなエレメントを表示しているボードですね。そんな中で使っているツールはPixi.js、WebGLです。

そこでこのStrap全体のアプリケーションの中でReact中心のDOMの世界と、PixiとWebGLの世界というのがあって、その橋渡しとしてreact-pixi-fiberというライブラリでステートのやり取りをしています。このボードの中のベースで表示しているものはWebGLのレイヤーですけど、例えばこの右の部分ですとか、その他上にフローティングしているオブジェクトとかはDOMで描画していたりして、けっこう細かいやり取りがあります。

バックエンドとしてはGCPなんですけど、本当にFirebaseを使い倒してる感じです。コンテンツの配信はFirebase Hostingを使って認証もFirebase Authで、これは今Google認証とメールリンクもこれからサポートするというところです。

データベースはFirestoreとRealtime Databaseの両方使っています。Firebaseは基本的に永続化データはFirestoreのほうで、揮発してもいい情報はRealtime Databaseで即時性の高い情報のやり取りをしています。

あとは画像とかストレージとかですね。サーバーサイドのロジックではCloud Functionsを使っているという感じです。

慎重に検討した技術選び

僕らもこのプロジェクトはそれなりに長く大きなプロジェクトになると思っていたので、未来予測をしてから始めました。まずTypeScriptとReactとReduxを選んだ理由について。

きっとシステムの規模的にも大きくなるし関わる人数も多くなると思ったので、型が欲しかったというのがあります。あとバックエンドはFirebaseだけで行くと固まったのでドキュメントに型が付けられるようにTypeScriptが役に立つはずだと考えていました。

ReactかVueかAngularかという判断になってますけど、プロジェクト開始時期のタイミングで、1年ほど前なんですけど、VueはTypeScript対応が不十分だったと感じています。Vue 2ですね。使えなくはなかったと思うんですけど、その点でReactを選択した形です。あとはProduct Div.内でも社内実績もあったということがありますね。

今のVue 3になればTypeScriptがデフォルトで対応していたかなと思うので、今ならもう少し慎重に検討したかなと思います。

同じ開始時期のタイミングでReact HooksはExperimentalだったんですね。もう出てたんですけど、もどかしかったんですけど、やっぱりまだExperimentalな状態では導入を見送りました。その後に出たRedux Hooks対応も出ているんですけど、そこはまだちょっと使っていなくて必要性を見極めて移行していくかというところです。

なぜPixi.jsを使っているか。やっぱり広大なボード上、ボードが広いことにすごい価値があると思っているんですね。

やっていることはPowerPointとかと変わらないかもしれないんですけど、PowerPointは制約があると感じています。逆にそれが集中しやすいという人がいるかもしれないんですけど、僕はそれが窮屈でチームがコラボレーションするには舞台として小さいなと感じていました。

その広大なボード上で大量のエレメントを描画するには、DOMではちょっとパフォーマンスが厳しいかなと考えたりして、最初からWebGLを使うことを考えていました。この規模でWebGLを直接使うとダイレクトに生のAPIを書くとちょっと大変だなとなったので、その中でもいろいろライブラリを考えて最終的にPixi.jsをチョイスしました。

一応このあとThree.jsとかも含めて検討したんですけど、2D限定でのパフォーマンスを考慮したことでPixi.jsを選んだところですね。

あとはなぜFirebaseかというところなんですけど、僕らGoodpatchはUI/UXの会社なので、とくにUIの体験に集中したかったというのがあり、バックエンドはまず素早く立ち上げるというところでマネージド・サービスから選びました。そこでいろいろ選んだ結果、Firebaseにしました。

ゲームの技術を使ったStrapは体験もゲームに近い

そうしたおかげでバックエンドエンジニアがフロントエンドを書いたり、逆にフロントエンドエンジニアがFirebaseのCloudFunctionsとかセキュリティルールとかのバックエンドのコードを書いたりしていました。

かなりポジションチェンジをするようなチームになっています。スポーツで言うといろいろポジションを変えながらゴールを目指していくようなかたちになりました。なんならモバイルエンジニアもフロントとFirestoreのコードを書いたりしていますね。

あとはマネージドにした理由はProttでWebSocketサーバーというのを運用しているんですけど、リアルタイム通信のためのWebSocketのサーバーを安定して運用させるというのはなかなか大変なんですよね。なのでなるべくそういったマネージドに近いかたちをインフラの選定基準にしています。その思惑どおり運用コストをかけずともFirestoreとRealtime Databaseも簡単にスケールしてます。

ここまで開発してきた所感としては、Pixi.jsとかFirebaseも本当にリアルタイム性の高いデータベースで、ゲームの技術なんですよね。今回StrapはB2Bのプロダクトになるんですけど、ゲームの技術でB2Bを作るのは新しいトライです。難しさもありますけどおもしろさもあると思って僕らはやっています。

作っているとStrapの体験もゲームに近く、ボード上で一緒にアイデアを練っていくというのがすごいゲーム性が高いなと感じています。

僕からは以上です。