株式会社tyottoのロゴ

学習支援アプリtyotto meができるまで by 伊藤 哲志

塾・予備校での活用に役立つ学習支援アプリを作っています!

こんにちは。tyottoエンジニアのイトウです。

株式会社tyottoでは、自社で運営する大学受験専門個別指導塾での指導をサポートするための学習支援アプリを開発しています。

ざっくりとした機能としては、

  • 一日ごとの計画を入力して、取り組むときはタイマーで時間を計測
  • 学習の後と授業の後にリフレクション(振り返り)のアンケートを提示
  • 講師と生徒をつなぐメッセージ機能

となっています。

今や中高生のほとんどがスマホを持っている時代です。生徒たちは自身のスマホにtyotto meをインストールして、勉強に活用しています。

今回はそんな自社開発アプリ tyotto me ができるまで(新しく機能が追加されるまで)を簡単にご紹介します。

アプリに新しい機能が追加されるまで

1. 現場の生徒・講師・教室長からの要望を元にアイデアを練る

tyotto meは自社で運営する学習塾Withdom(ウィズダム)の全生徒が利用しています。教室は神奈川県川崎市の武蔵小杉にあり、生徒たちは日々アプリを活用して勉強に取り組んでいます。

僕は今年の4月から教室の常駐ではなくなり、武蔵小山にあるオフィスで開発に専念しています。頻度こそ多くはないものの、毎週月曜日の会議や、隔週で実施されるキャリア教育授業「ProgressTime(プログレスタイム)」のときは教室に行きます。

教室に行くと、初めましての生徒さんがいるときもあるので挨拶をします。

この間は新しく入った高校3年生の女の子に「アプリを作っている人です」と名乗ったら、その日のうちに改善点を端的に伝えてくれました。

余談ですが、自分で意見を持ち、それを的確に言葉にできる力はこれからの時代絶対に必要なスキルですよね。

 

さて、tyotto meはWithdomだけでなく、興味を持っていただいた他塾様にも導入していただいています。導入の初期登録から運用のサポートまで全て僕が担当させていただいているのですが、どの塾の運営者の方も新しい教育に対して前向きで、学ばせていただくことばかりです。

導入に当たってわかりにくい部分の質問を受けたり、直接改善案をいただくことも多々あります。このような他塾の運営者様との関わりの中で、新しい機能や既存の機能の改善案が生まれてきます。

2. アイデアを元に、設計を練る — iPad Proが大活躍!

iPad ProとApple Pencilの組み合わせは最強です。無限に長いノートにガシガシ書いて行きます。拡大・縮小はもちろん、ペンの色を変えたり、画像を貼ったりと紙ではできないことが色々とできます。

また、ノートのテンプレートも自分で作って保存することができます。今まではルーズリーフの紙を買ってきて、設計に便利な形式で独自に作った枠をプリンタで印刷して使っていたので、この手間が一気になくなりました。

書いては消し、を繰り返して細部を詰めていきます。自動的にGoogle Driveに同期される設定になっているので、カフェで書いた設計をPCで見返す、なんてこともあっという間にできてしまいます。

あれ、またAppleの宣伝タイムになってしまっていますね…

ノートアプリ「Notability」も有料ですがとても使い勝手が良くおすすめですよ!

3. Adobe XDでワイヤーフレームを作成

アプリを作るには、よく耳にする「プログラミング」をします。最終的には黒い画面に文字を打ち込んで…というイメージ通りの作業をしますが、まだ慌てる時間ではありません。

見た目を作って、それっぽさが出ているか、動作に違和感は無いかを確認するためにプログラミングまでやってしまうと、時間がかなりかかってしまいます。

ですので、「ワイヤーフレーム」と呼ばれる見た目だけを作ったものをまず作ります。ワイヤーフレームを作るためのツールはAdobeのXD(エックス・ディー)を使います。

これは無料で使うことができるので、アプリやWebの設計に携わる方は気軽に触ってみてほしいツールです。

このXD自体もここ数年で出たツールのようで、そのアップデートもかなりのスピード感で行われています。アップデートする機能はWeb上のコミュニティでのユーザーからの投票で行われており、かなり利用者に注目した改善方法を取り入れているツールです。

操作や保存がとてもスピーディで、使っていて心地よいです。

さて、ワイヤーフレームができたら、スマホで実際のサイズで確認します。

ボタンが小さすぎないか、動作が混乱させるようなものではないかなど、ぼーっとしながらアプリを触って調整する項目を探します。

4. いよいよ設計を形にする「プログラミング」

ワイヤーフレームが完成して、動作に問題がなければ早速これを組み込むための実装を行います。「実装」とは、設計を実際にシステムに反映させていく作業を指します。

実装に使っているプログラミング言語は「JavaScript(ジャバスクリプト)」です。よく間違えられますが、「Java(ジャバ)」とは全く別の言語です。

Webブラウザでボタンを押したらメニューが出てきたり、アニメーションしたりする機能はJavaScriptで作られることが多いです。

Android版とiOS版のアプリがある製品は、大きい開発チームではそれぞれ別の人が担当して、別のプログラミング言語で作ることが多いかと思いますが、tyotto meはAndroid版とiOS版を同時に作っています。

現時点で開発は一人なので、同じ機能をAndroid版とiOS版の2パターンで実装するのは時間的にロスが大きいため、同じコードで二つのOSで動かせるようにしました。

機能にもよりますが、一つの画面を新しく追加して、機能まで実装するのにだいたい1〜2時間くらいかかってしまいます。

インターネット越しに通信してデータをやり取りする機能なら、アプリからのデータを受け付ける「サーバー」の変更も必要になります。

一つの機能を追加するために、色々な領域に手を出してちょっとずつ変更していかなければならないのがWebやアプリ開発の特徴です。

5. テスト

追加した機能にミスがないかをチェックリストに沿って丁寧に検証していきます。

教育業界ではおなじみの「テスト」という単語が、エンジニアリングの世界ではシステムの検証という意味で使われます。

実装する時間より、実装した機能が正しく動いているかをチェックする時間の方が長いかもしれません。

「こうしたら理想の機能を実現できるんじゃないか?」という仮説を元にソースコードを書き、動かしてみる。

思い通りに動かなければ何が悪かったかを振り返り、また新たな仮説を立ててソースコードを書き、動かしてみる。

これをひたすら繰り返す作業です。

現時点での多くの座学では、自分の回答がすぐに採点されるような状況は極めて稀だと思いますが、プログラミングの世界ではそれが日常です。

プログラミングのチェックをしてくれるのは先生ではなく、ソースコードを機械語に変換するコンパイラであり、最終的に自分が意図した機能かを確認するテスト項目なのです。

この取り組みへのフィードバックの速さが癖になりますね。15年やってもまだ飽きません。

6. リリース

テストがうまく行ったら、あとは新機能を公開するだけです。新機能の公開作業は「リリース」と呼んだりします。

tyotto meの新機能の公開はコマンド一つを実行するだけでできるようにしてあります。

最新版のアプリのリリース後、アプリをインストールしている生徒がアプリを開くとすぐに最新版に自動的にアップデートされます。

アプリストアを開いて、アップデートボタンを押してしばらく待つ、という操作は必要ありません。

最新の機能にストレスなくアクセスできて、個々の取り組みに集中できるように配慮しています。

tyotto meの開発に込める想い

(アプリを開発するデスク。ここで全てのシステムが開発されます)

僕自身、大学受験はかなり苦労しました。一日10時間勉強することは当たり前、どんなに頑張っても結果でしか認められないという日々の中で、なんとなく効率が悪いと感じる取り組みも多々ありました。

そんな中で、たどり着いたのはいかに取り組みの質を上げていくかという、課題発見からの問題解決のプロセスを磨くことでした。

tyotto meは、「言う通りにすれば成績が上がるアプリ」ではなく、「自ら課題を発見し、それを乗り越えていける逞しさを育むアプリ」にしていきたいです。

アプリの改善点や要望を引き続き歓迎しておりますので、お気軽にご連絡いただければと思います。

伊藤 哲志
伊藤 哲志
tyotto Inc. リードエンジニア / 1994 / 幼い頃からロボティクス・コンピューターサイエンスに触れたことでテクノロジーに深く興味を持つようになりました。AO入試で東京工業大学の情報工学科に入学してからは、学業と並行してIT企業でのインターンや教育工学研究室での研究を行い、教育×ITをテーマに活動を続けてきました。考えを文章で発信したり、組織づくりを行ったりすることも好きで、日常的に社内・社外に発信しています。