Vol.2ハグカムの技術スタック紹介

おはようございます。こんにちは。こんばんは。

ハグカムでCTOをやっておりますPontoです。

本日はハグカムの技術スタックに関して記事を書いてみようと思います。

現状と今後の流れについてかんたんに記述していきます。

はじめに

弊社には大きく3つのサービスがあります。

1. グローバルクラウン … 子ども向けのオンライン英会話。1対1のレッスンを行います。
2. グローバルクラウン (グループレッスン）... こちらも子ども向けオンライン英会話ですが、レッスン形式がグループレッスンとなります(先生1 生徒n)。
3. カラダンス！ … 子ども向けのオンラインダンス。1対1形式です。

それぞれ独立したアプリケーションになっており、採用している技術も異なっています。

大きくはそれぞれのサービスで共通して以下のような構成になっています。

• アクター
• • 生徒
  • 先生
  • 管理者
• システム
• • 生徒(=子ども)はアプリ(iOS/Android)からレッスンを受ける・復習等を行う
  • 生徒の親はウェブもしくはアプリからレッスンの日程調整や支払い等を行う
  • 先生はウェブからレッスンを行う
  • 管理者はウェブで管理業務を行う

それでは、細かい技術に関して以下で一つずつ見ていければと思います。

グローバルクラウン

まずはメインのサービスであるグローバルクラウンから見ていきましょう。

ウェブのバックエンドはFuelPHPをベースとして、管理画面・先生画面やAPIなどをモノリスな環境で提供しています。またURLはできるだけRESTに寄せる、テストはなるべく作るようにしてきています。

フロントエンドはjQueryとVue.jsを利用しています。

アプリはiOSがSwiftベース、AndroidがJavaベースになっています。

インフラはGCPを利用しています。コンテナを利用してGoogle Cloud Runにてアプリケーションをホストしています。

その他、通信周りはOpenTok (WebRTC)、復習教材用の発音判定エンジン(Chivox)なども利用しています。OpenTokにはシグナル機能というものがあり、授業でお互いに同じ教材を見たりするのに中々便利でおすすめです。

今後に関して。FuelPHPは軽量フレームワークのため開発のスピードという意味ではとても良かったのですが、現状フレームワーク自体の更新が止まってしまっていることもあり、常に新しい状態を保っていくため、フレームワークの変更を計画しています。

大きくはまずバックエンドとフロントエンドの分離を進め、バックエンドのロジックを最小限にした後に少しずつ別フレームワークでバックエンドを置き換えていく流れを考えています。現在も少しずつ置き換えが進んでおり、一部の画面はバックエンドとフロントエンドを切り離しています。こちらにおけるフロントエンドはNext.JSで提供しています。

グローバルクラウン for Group

ウェブ側はRuby on Railsで提供しています。グループレッスンの立ち上げの際、マンツーマンとは違うフレームワークを採用することになりました。立ち上げ速度を優先して考えたときにベストな選択肢としてRailsを利用しました。

選択した背景としては以下になります。

• マンツーマンのシステムはサービス立ち上げという状況に対して大きすぎる、またメインの機能のデータ構造を変更する必要もあったため、その後の柔軟性に悪影響を与える可能性が高いと考え、1から制作することにした
• FuelPHPの更新が止まってしまっている
• 当時のメンバーの中で知見が一番あるのがRailsであった

またフロントエンドはReactを採用しました(こちらは好みで選びました笑)。インフラはherokuを利用しています。こちらも立ち上げのスピード・サービスの改善の速度を優先するため考えることを減らせるようにherokuを選択しました。ちなみにheorkuのReview Appsという機能はとても便利なのでおすすめです。GithubのPR毎に独立したテスト環境を用意してくれ、PRがクローズされると勝手に環境が破棄されます。こちらもherokuを採用した一つの理由です。

アプリに関してはiOS側はSwiftで、AndroidをFlutterで書いています。初期はiOSのみでサービスを提供していましたが、今後の開発工数の最適化も視野に入れ、Flutterにチャレンジしてみることにしました。現状全く問題ない形で運用できております。

カラダンス！

こちらはグループレッスンとほぼ同じスタックになっています。 グループレッスンよりも少しフレームワーク等使用技術のバージョンが新しい状態になります。アプリに置いては現状iOSのみの提供となっており、Androidは非対応となっています。

その他

メインのサービスに関して説明してきましたが、その他にも各所で色々なシステムが動いています。例えばコーポレートサイトはNext.jsを利用してNetlify, Contentfulで提供しています。

分析関連はredash, Google AnalyticsのAPIなどを利用しています。

終わりに

全体を通して言えることですが、ベンチャーで常にベストな技術選択をするということはなかなか難しいと思います。ビジネスターゲット・メンバーの得意分野・工数・将来性など、各方面で競合する要求を上手くバランスして選択していく必要があります。

その時ベストだった選択が次のタイミングでは悪い方向に働いたり、逆に失敗したなと感じたものが良い方向に進むこともあります。

常に選択の連続になりますが、子どもの好奇心を育み、ユーザーにとってより良い利用体験を提供するべくベストな選択を一緒に模索しながら進めて頂ける方、もしくは少しでも興味を持っていただけましたら、ぜひ一度お話しましょう！

採用情報はこちらから！