見出し画像

フルリニューアルの裏側 開発メンバーインタビュー(前編)


2019年7月17日、フルリニューアルをリリースしたStudyplus for School。実は、リニューアルの裏にはエンジニアチームの新しい技術への挑戦や徹底した努力があり、それを経て公開に至りました。

今回はいつもは裏方に徹している開発メンバーにリリースまでの裏話を聞き、「なぜリニューアルをしたのか?」「リニューアルはどのように行われたのか?」「どんなことが大変だったか?」などをお伝えします!

日ごろ先生方に使っていただいているStudyplus for Schoolが、どういった経緯で今の新しいプラットフォームの姿に変化したのか。その裏側をぜひご覧ください。

今回お話を伺ったのは、こちらの4人。
宮坂:プロダクトオーナー
石上:エンジニア
冨山:エンジニア
秋間:デザイナー

プロダクト全体をディレクションした宮坂さんと、開発チームのなかでも今回のリニューアルをメインで担当した3人にお話に座談会形式で色々とお話していただきます!

先生方の使いやすさを考え、細やかな違いで利便性を向上させる

-リニューアルの期間、本当にお疲れ様でした!早速ですが、まずは今回のリニューアルの目的を教えてください。
宮坂:Studyplus for Schoolを導入してくださっている先生方が、もっと使いやすく、もっと便利に使えるようにいろいろな要望や課題を把握し、今回はフルリニューアルをしました。

コミュニケーションプラットフォームとして、今後、塾の先生方はPCに向かって作業するだけではなく、スマートフォンを使って働くことが当たり前になっていくと思います。そのため、スマートフォンでも使いやすいよう、改善を行いました。IT企業である私たちがその流れをいち早く取り入れて、先生たちがモバイルでも仕事がしやすいようにしていこうと思いました。

-スマホでの使い勝手をよくするには、どんな工夫が必要だったんでしょうか?
秋間:まずはデザイン面の変更が必要でした。パソコンで見るのとスマホの画面で見るのとでは、同じ配置でも印象や見やすさが違います。スマホで見たときでも、すぐに生徒の状況が把握しやすいように、直感的に使えて、一貫性のある汎用的なデザインにしたいと思いました。

石上:それから操作性も重要です。技術面において、SPAを導入することでモバイルでも使いやすいようにしようという話になりました。それに、Studyplus for Schoolは毎日使うものですし先生もお忙しいと思うので、SPAにすることでサクサク使えるようにこだわりたいと思っていたんですよね。

SPAとは「Single Page Application」の略で、単一のWebページでWeb アプリケーションを構成する設計構造の名称。Studyplus for Schoolのアプリそのものを支えている骨格部分を抜本的に変更し、SPAを導入することで、操作のスピードを高められます。


-「使いやすさ」は今回のリニューアルで重要なキーワードだったんですね。
宮坂:そうです。毎日利用するプラットフォームだからこそ、先生方も「こう使いたい」「こうなったらいいな」という使いづらさを感じられていて。そういった要望を先生方のサポートを行うCXプランナーのメンバーから話を伺っていました。

生徒たちと真摯に向き合う先生たちだからこそ、プロダクトに対しても誠意のある意見をしてくださっています。そのため、細かい操作性の違いなども分かっていただけるはずだと思っているんです。先生方へのリスペクトがあるからこそ、今回のようなリニューアルに踏み切ることができました。

-先生方が違いを理解してくださると思ったからこその決断だったんですね。
宮坂:はい、そう信じているからこそ、人・時間・資金を投資することができました。新機能開発はたしかにできることも増えるし、正直に言えばセールストークの目玉にもなります。でもそうではなくて、現場の先生に本当にいいと思っていただけるものを作らないといけないと思うんですよ。

だから品質の低い新機能を作るのではなく、先生方がストレスなくStudyplus for Schoolを使えるようにしたかったんです。

社内からも「断念すべき」という声が出るほどの新たな挑戦

-リニューアルの話はいつ頃から出ていたんですか?
秋間:2018年の春には話しがでていて、実際に着手したのは8月ごろです。リニューアルのキックオフミーティングでは、宮坂さんから「イケてるプロダクトにしたい」という話と共にスタートしました。

-今回、実際にイケてるプロダクトができましたね。
石上:そうだといいです。でも困難の連続で、一度本当に心が折れそうだったんですよ。想定よりも規模の大きなリニューアルになってしまい、スケジュールがどんどん遅れていって。社内のメンバーからも「SPAはもうやめたら?」と言われました。

-SPAの導入は大変ということですが、これを導入すると実際にどんなことが実現するのでしょうか?
石上:Webページを見ているときに、違うコンテンツを見ようとするとページが切り替わり、そのたびに読み込み時間がかかりますよね。SPAを導入すると、同じページ上でコンテンツを切り替えられるようになるんです。

サーバーとの通信量が抑えられ、ページの読み込み時間も短くなり動作性が高まりました。

―SPAは利用者からは使い勝手がよくなるものの、導入するには技術的な難しさがあったんですね。
石上:はい、SPAを導入するのはエンジニアチームにとって大きな挑戦でした。これによって今回実際は、リニューアルというより新しいサービスを作るような作業になったんです。

今回の作業は建築に例えると、表向きはビルのフロアを改装しただけのように見えます。でも実際の作業としては、一度ビルを更地にして、基礎から組みなおしていったようなイメージだったそうです。 

石上:それだけの大幅な構築作業が必要なのに、リソースも足りていなくて。少ない人数であらゆる仕事をカバーしなくてはならない状況でした。そんな風に問題が複合的に重なっていって、作業がどんどん滞った結果、予定していたスケジュールから遅れてしまいました。

-具体的にどんな問題がありましたか?
石上:例えば、コードを書いてから他のメンバーにチェックしてもらうのをコードレビューというんですが、それはなるべくこまめにするべきなんですね。でもそこまで手が回らなくて、ものすごい量になってからやってもらっていて。レビューする側も一気に見ないといけないから大変なんです。

塾の先生方も、1、2人のテストを採点するならすぐ終わるかと思います。しかし一気に500人分を見ないといけないとなったら、厳しいもの。コードレビューもそれと同じく、作業自体は同じでも、量が増えると大変になります。

-なるほど、それは時間もかかるし大変ですね。
冨山:他には、スケジュールの見立てがあいまいになっていました。そのうえ、全員やることが多すぎて連携もうまく取れなくて、何かが上手くいかず予定通りいかなくても、うまく相談できていませんでした。

当初は三か月単位で予定を立てて、遅れているけどなんとか休日を使って取り返すというサイクルで動いていたんです。でも、それではもうダメだったんですよ、全然よくない状態で。

-スケジュールを立てる段階で失敗していたと。
石上:リニューアル準備が2018年の夏からスタートして、うまくいっていなかったので今年の正月に一度スケジュールを考え直しました。そこで調整して「何とかやるぞ」と頑張っていたんですけど、それでもまだ無理があったんですよね。

年始から一か月もやっているとやっぱり間に合わないとなって。だんだん土日も出るようになって、GWも仕事してました。

-まさに休日返上ですね。
石上:それでも終わらなくて。そういう状況だったので、「技術的に難しいならSPAをやめることも考えて」と言われましたね。結局、SPAをあきらめても劇的に早くリリースできるわけではないと説明して、理解してもらいました。

秋間:今後の開発のためにも、SPAをやる方が価値が高いとチーム内で判断しました。

-大変ではあるものの、やり切る選択をしたと。
冨山:はい。それにチームの動きも最後の方は改善していったんですよ。毎週、定例ミーティングを開いてみんなで進捗を話していました。ここがずれているが大丈夫かとか、こっちはいつ終わるのかとか。

これを始めてからは、ある程度上手くいっていたと思います。遅れた分はチーム全体でタスクを割り振って何とかカバーしようと考えられるようになったんですね。

-結果、SPAを導入した形で無事リリースできましたね。
宮坂:私も開発チームから話を聞いていて、SPAをやめたところで二か月くらいしか変わらないということだったから、それならやろうよと。

最終的にお客様が喜んでくれるものを出すことが大切です。ちょっとデザインを変えて終わるんじゃなくて、先生たちが使いやすいように動きが根本的に変わった方がいいだろうということでやり切ってもらいました。

ひとりでアプリを丸ひとつ作り上げるほどの量のコードを書く

緑が追加行数、赤が削除行数を表し、各個人がどれだけ作業を行ったかがわかる。

-ここからはエンジニアチームのメンバーそれぞれに、リニューアルを振り返っていただきます。まずは石上さんの役割について教えてください。
石上:リニューアルをする過程で、フロント側、つまり先生たちが見ている画面を作る人が必要です。同時に、表からは見えないシステムの仕組みとなるサーバー側も作っていかなくてはいけません。

塾で例えると…試験の日に教室でテスト用紙を配布して試験監督をする先生と、テストの問題用紙を作る先生が必要です。生徒からは監督の先生しか見えませんが、そもそも問題用紙がないと試験ができません。それと同じく、Studyplus for Schoolも見える部分(フロント側)と見えない部分(サーバー側)を作りこむ必要があります。

石上:その中で私はフロント側を担当し、ひたすらコードを書いていました。リニューアルを始めたころはフロントを担当していたのが自分だけしかいなくて、一人でどうやればいいんだろうと不安でした。冨山さんが入るまではAPI側も自分がやるかもしれないと思っていたので、そこも心配で。

APIとは、Application Programming Interfaceの略。ソフトウェアのデータを他のプログラムから呼び出すときに定まっている、手順やデータ形式などのこと。

特に後半になるにつれて、スケジュールがどうにもならなくて大変でした。途中から冨山さんが入社されてAPI側を担当してくれて、それが終わってからは二人でフロントの実装ができるようになったので心強かったです。

-一人でやるのと二人でやるのでは大違いなんですね。
石上:はい、やっぱり心強いですね。自分が書いたコードをレビューしてもらえるし、私もレビューができるし。一人だと設計が間違っているんじゃないかと葛藤しますが、それでもどんどん次に進まないといけないですから。

-リニューアルをする中で、気を付けていたポイントはどんなことですか?
石上:すでに利用されている機能はそのままに、秋間さんが作ってくれた画面のデザインをできるだけ忠実に再現するというところですね。出来上がってみると、ものすごい量のコードになりました。

-どのくらいになったんですか?
石上:コードでいえば、合計11万行くらい足したり消したりしました。「コミット」という試行錯誤を実行してみる作業があるのですが、それは約1100回していました。

某有名レシピ共有アプリのコードが10万行くらいと言われているので、自分一人でそれだけ書いた計算になりますね。もちろん、他のチームメンバーも書いているので総数でいったら遥に上回っています。

今回の作業は、前からあったものの延長というより、新しいサービスをゼロから作るのとほぼ同じ大変さでした。

-なぜそんなに大変な作業が必要だったんでしょうか?
石上:SPAを導入したことが主な理由です。最近はwebとアプリの境目があいまいになってきていて、技術の発展にともなって「webブラウザ上でもアプリのように使おう」という流れがトレンドになっています。だからStudyplus for SchoolもSPAでやっていこうとなりました。

秋間:キックオフミーティングのときに「イケてるものを作ろう」という話がありましたが、技術的にイケてるものにするためにも、SPAにしようとなったんですよね。

-SPAを導入した結果、膨大な作業が必要になったんですね。
石上:はい、SPAにするため一からコードを書いたのは大変でした。やる前も大変そうだと思っていましたが、いざやり始めたら本当に厳しくて。 

何もベースがないところから書いていたので、途中で作りが甘いところに気づいて手戻りが発生するんです。行ったり来たりしながらの作業でした。

-そこまで大変なSPAを導入しようと思ったのはなぜですか?
宮坂:今回のリニューアルの目的である、先生方の使い勝手のよさを向上するためですね。

***
今回は、リニューアルの目的と、フロント側を担当されたエンジニア・石上さんのお話を伺いました!後編では同じくエンジニアの冨山さんと、デザイナーの秋間さんを中心に裏話を伺います。

みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!