cluster webの2019年を振り返る

イベントページのデザイン刷新

2019年、クラスター社は特に「イベント」に力を入れた１年でした。
当時のwebページはシンプルなデザインでしたが、「イベントに力を入れるから、webでもワクワク感を出そう！」という目的から、イベントページのデザイン刷新を行いました。
配置の見直しやキーカラー・ダークテーマなどの機能追加により、開催するイベントの特徴をwebページでも表現できるようになっています。

* 現在、再度イベントページのデザイン見直しが行われており、新しい見た目のページが近々リリースできると思います。

イベント情報の露出を増やした

トップページの構成を見直し、カルーセルや「本日開催されるイベント」を追加することで様々なコンテンツを伝えるようになりました。
カルーセルは「アーカイブ開始を大々的に伝えよう！」という目的から急遽（公開１週間ほど前に）実装された経緯があります。

またイベントを探すページができたことで、ユーザーのみなさんが開催されるイベントも、漏れなく案内できるようになりました。

ライブ配信

クライアントが使えない人でもclusterを体験できるように。という目的からストリーミング視聴機能も実装されました。
配信に関する複雑な部分はバックエンド側で担っていただけてるため、web側はその複雑さを意識せずに配信機能を実装できています。
実は360度動画でclusterに参加する、という検討も行われていましたが、実装が現実的かどうか考えpendingとなりました。

aboutページ

clusterの使い方を紹介するページが、参加者向け、イベント主催者向けの２種類が追加されました。
アカウントの新規登録に繋がる率が他のページよりかなり高い、という数値が得られています。

ファイル管理

clusterでスクリーンに投影するスライドや動画を、以前はclusterからしか登録できなかったものが、webからも登録・削除できるようになりました。

トリガー管理

元は社内向けに作られたツールとして存在していましたが、メンテナンスコストが高かったこともあり、webに機能が移植されました。
webに移植するにあたり、（JSONを読み込む必要があるなど）使い勝手の課題がありつつも、社内に閉じる必要が無くなったため、一般開放されています。

写真ページの改善

メンテナンスが後手にまわっていた写真ページにもメスが入り、パフォーマンスの改善や、選択削除など機能の見直しが行われています。

MaterialDesign、Material-UIの採用

webの改善を進めるにあたり、新しく作る画面ではなるべくMaterialDesignを取り入れてく事になりました。
実装にはMaterial-UIというライブラリを採用しています。

Prettier

web業界で広く使われているコードフォーマッターPrettierを導入しました。
改行やインデントを自動で行うことで、コードに書いた人の癖が出にくくなります。

TypeScript化

以前までcluster webの実装は9割がFlow、1割がKotlinJSで組まれていましたが、web業界でより普及しているTypeScriptに移行しました。
KotlinJSを気合いでFlowに直し、FlowからTypeScriptは自動で置換しました。TypeScriptのstrictルールは全てoffにし、１つずつonにしていくことで、徐々に安定したコードに差し替えを進めています。

styled-components

スタイルの設定を、Sassからstyled-componentsに変更しています。
コンポーネントの記述が1ファイルに完結し、個人的には好みの実装になりました。

re-ducksパターン

webの状態管理には以前からreduxを使っていますが、stateの管理方法にばらつきがあり、それをre-ducksパターンに置き換えています。

E2Eテスト

クラスター社はリリースの前にQAテストを行っていますが、人手によるテストでは抜け漏れがどうしても起きてしまいます。
そこでアカウント登録やチケット購入のような、バグが起きたらまずい部分について、自動でE2Eテストを動かすようになりました。
人手によるテストの負荷を減らし、またバグにすぐ気付けるという安心感からノビノビと開発ができるようになりました。
テストにはWebdriverIOを使っています。