クライアント
ニジボックス
「『スタディサプリ 中学講座』ベーシックコース」は、何かと忙しい中学生でも、ちょっとしたスキマ時間を利用した学習を可能にするサービスです。移動中にはスマホで授業動画や演習問題に手軽にアクセスでき、定期テスト前にはタブレットやパソコンを利用して、テキストを見ながらじっくり学習に取り組むこともできます。
また、学校での授業の進行度や学習記録から、今やるべき学習を一目で分かるようにまとめたミッション機能を搭載しています。一週間の学習を「今週のミッション」として提案してくれるので、迷わず学習を開始できるのが特長です。
既存のプロダクト開発時には、ドキュメント化されないAPIが続々と生まれ、仕様への理解が特定の個人に依存してしまう課題がありました。
リニューアルに際しては、この課題を解決するためにGraphQLが技術スタックとして選定されました。GraphQLを使用することで自然とスキーマ駆動の開発体制となり、結果としてドキュメントが整理されます。
実際の開発では、クライアント側でスキーマを確認してクエリを決定することができるため、無駄なコミュニケーションを省くことができました。
また、デザインシステムの管理にAtomic Designを採用しているプロジェクトであったため、今回はFragment Colocationを意識。各コンポーネントに対して、GraphQLのFragmentを定義することをグループ内で認識を合わせた上で開発を進めています。
ビジネス要件のリリース期日を達成するため、開発速度を上げながら品質を担保すべく、開発基盤のアップデートを行いました。
具体的には、開発生産性の向上を目的として、Storybookを活用した画面の自動テスト機能を追加し、画面のデグレーションを検知できる環境を整備しました。プロダクトとしてのコード開発のみでなく、開発環境を継続的に整える施策を並行して実施している形です。
結果として、予定通りのスケジュールでリリースを完了し、リリース後も大きな不具合はありませんでした。
ユーザーが問題を解く学習画面は、下記のようにUI要件の難易度が高いページとなっていました。
これらの条件がある中、ニジボックスが担当するPC版Webアプリケーションの開発とは別にスマホ・タブレット用のNative Appの開発も進行していました。ですが、学習画面については、Native AppにおいてもPCアプリケーションと同じ画面をWebviewで表示させる仕様となっていたため、両環境で適切な表示を実現する必要がありました。
特に縦書きの文章については、既存のプロダクト開発時にはHTMLとCSSでの実装が断念され、やむなく画像で表示させていたのですが、この機会にデバイス種別ごとに綿密な調査をおこない、問題作成チームとも認識をすり合わせながら進めたことで、実装を実現できています。
中学生の学習アプリケーションというサービスの特性上、学年が切り替わる前の2月にリリースをするということはとても重要でした。スケジュールの限定される中、モダン開発体制を整えることで品質と開発スピードを両立。無事クライアントのビジネス要件を達成し、高品質なサービスニューアルを実現することができました。
