未完Foundationが掲げる”メイカー”は、「技術を使い、課題を解決する課題志向の技術者」。

彼ら彼女らは何をきっかけにしてサービスやプロダクトの開発を始めたのか、サービスのアイデアはどこから生まれたのか、という原点とともに、アイデアが形になるまでの過程を伝える技術の視点を中心の特集記事企画です。

第一弾となる今回は、北大生に特化した時間割サービス「Hupass」を開発されたJagaJagaの開発チームのお二人に、Hupassが誕生した経緯や思い、そして、Hupassに使われてる技術や普段どんなチーム体制で開発を進めているのかなどをお聞きしました。

プロフィール

田中 愛大（たなか まなと）

北海道大学工学部機械知能工学科3年生（2023年4月より4年生）。北大生応援メディア「JagaJaga」にエンジニアとして参加し、「Hupass」ではバックエンド開発を担当。2022年1月ごろに編集長の久保田から声をかけられ、Hupassの企画・構成段階から開発に関わる。文中「まなと」

塩澤 直生（しおざわ なおき）

北海道大学工学部情報エレクトロニクス学科電気電子工学コース3年生（2023年4月より4年生）。同じく編集長から声をかけられ参加。田中が作った構成を改善・サービス向上を促進する形で開発にジョイン。Hupassではフロントエンド開発を担当。文中「なおき」

 ー まずはじめに、お二人はプログラミングをいつ頃から始められたのでしょうか？

まなと：僕は高校時代にロボット部に所属していて、ロボットの制御プログラムを書く機会があり、そこで初めて触ったのがRaspberry PiとPythonでした。ハードよりのプログラミングから、カメラを使った画像処理まで幅広くやって、プログラムの基礎を学びました。

なおき：僕は中学校2年生ごろからですね。その頃マインクラフトが流行っていて、マルチプレイ用のサーバーがPHPで作られていたので、親のおさがりのパソコンでゲームのプラグインを作り始めたのがきっかけでした。

ー お二人とも大学に入る前からすでにプログラミングをやり始めていたんですね。そんな二人のお話をとても楽しみにしております。

北大生向け時間割サービス「Hupass」とは

ー 最初にサービスの概要を簡単に教えてください。

まなと：北大生による、北大生のための時間割サービスです。大きく２つの特徴がありまして、一つは北大成績分布検索サービス『iNAZO』との連携、2つ目がELMSやシラバスへのリンクなど、北大生向けの独自機能です。とにかく北大生にとって便利な時間割サービスとなっています。

ー北大生に特化した時間割なんですね。どういった経緯で作り始めたのでしょうか？

元々北大生向けの時間割サービスを作ろうとしていた北大生の方がいたのですが卒業にともなって開発が止まってしまって、JagaJagaとしてできることはないか、と思って引き継いだ形になります。JagaJagaが運営していたサービスに『iNAZO』があったので、時間割サービスを作るなら、「授業の成績分布が見れる」というのを特徴にしたいと当初から話していました。

ー なるほど。先ほどから話に出ている『iNAZO』についても簡単に教えてください。

まなと：『iNAZO』は成績分布検索サービスで、北海道大学が公開している成績分布データをより扱いやすい形で公開し、各講義の成績分布を検索できるサービスです。どの講義は単位が取りやすいのか、履修している人はどのくらいいるかなどを見て、自分の取りたいGPAや単位に合わせて授業を選ぶことができます。

ー Hupassは、iNazoとの連携が大きな特徴として挙げられていましたね。具体的には、どのような形で連携しているのでしょうか？

まなと：Hupass上にある授業ごとに、iNazoでの成績分布が確認できるようになっています。検索する際にGPAの昇順で授業を表示したり、A帯の人数や合格者の人数を絞り込んだりすることができます。そうすることで、自分がとりたい内容の授業、成績のとりやすい授業をうまく組み合わせて時間割を作成することができます。

北海道大学は総合入試というシステムで、入試の段階では学部を定めずに入学し、2年生に進級するタイミングで学部を決めるシステムがあります。その時に基準となるのがGPAなので、人気の学部に行きたい1年生が必要な成績をとるお手伝いができれば、と思って作っています。

ー これは学生にしか作れないというか、大学が公式に出すのは難しいサービスですね。学生が抱える課題を、学生自らで解決しようとする姿勢が素晴らしいです。

ユーザーにとって便利な操作性の追求

ー ここからは、より技術の部分に触れていこうと思います。まずは簡単に、Hupassの技術構成を教えてください。

まなと：フロントエンドはTypeScriptを利用し、フレームワークにReactを採用、バックエンドはPythonのフレームワークDjangoで書かれていて、両者をREST APIで繋げてそれぞれのサーバーで通信する形でできています。

 ー それぞれの言語を採用している理由はありますか？

なおき：フロントエンドについて１番大きいのは、ライブラリが豊富な点です。MUI（Material UI）という良質なUIコンポーネントが豊富なライブラリがあって、低コストでモダンな見た目にできるのでReactを選びました。他には、自分がReactを使い慣れていてAngularやVueに比べて学習しやすいこともあって選択しています。

まなと：バックエンドは、そもそも『iNazo』がDjangoを使って書かれていて、自分もずっとPythonを使ってきていて得意だったので、『iNazo』との連携をスムーズにしたりノウハウを生かすという点で迷わず選択しました。

ー フロントエンドはなおきさんのこだわりを生かすため、バックエンドはiNazoとの連携をうまく繋げるための採用なんですね。

お二人それぞれのこだわりやポイントはありますか？

なおき：自分もユーザーの1人なので、まずは全体的に違和感がなく操作性が良いUIになるように意識して開発しています。なんでここにボタンがあるんだろう？とかの違和感を無くして、頻繁にアクセスする機能は使いやすいところに設置するなどです。

もう一つ、隠された機能として、時間割を週表示から曜日表示にして、さらに横にスクロールして見ることができるようになっています。

ー おお！そんなこともできるんですね！それはとても便利ですね。

なおき：そうなんです。スマホだとどうしても画面が小さくなって情報に限りが出てしまうので、日ごとに拡大表示できるようにしました。

この機能を開発するのがかなり大変で、これを作るために元々まなとが作っていた時はVueだったものをReactに変えて作ったりしています。自分がVueに慣れていなくて、この機能を作るのにとても苦労しそうだったので。

まなと：意外と注目して欲しいのはログインシステムです。Googleアカウントと連携してログインすることで、スマホで登録した時間割がパソコンでも見れるようになっています。Webアプリでリリースしている1つの利点でもあって、スマホアプリにするとパソコンでは見れないので。HupassからMoodleやELMSなどの大学ポータルサイトにアクセスする導線もあるので、まずHupassを開いて移動するという形がパソコンでもスマホでもしやすくなっています。

ー ユーザーが使いやすいように徹底されたUI/UXと、そのために選ばれた技術なんですね。まさに未完が掲げる”メイカー”の意識に通ずるところがあります。

Hupass最大の特徴である『iNazo』との連携を担っているのはバックエンドだと思いますが、どういった仕組みで動いているのでしょうか？

まなと：実はかなり原始的な方法で連携してるんです。内部的にサーバーとの連携を行わず、『iNazo』の開発者からデータベースのバックアップをもらって、Hupassは独自のデータベースを持っていて、2つのデータベースをつなぐ形で共有しています。

本来は一つのデータベースがあって、HupassとiNazoと繋がっているというのが理想の形なので、今のところ問題は出ていませんが今後はそこを改善していけたらと目標にしています。

HupassとiNazoが存続の危機！？

ー ユーザー目線を徹底した素晴らしい機能の数々ですが、これらの開発はどんなチーム体制で進めているのでしょうか？

まなと：Hupassについては、基本的に僕ら2人で開発・運用しています。

ー お二人だけなんですか！結構厳しいと思うのですが、実際どうなんでしょうか？

まなと：正直にいうと、かなりきついです。そもそもJagaJagaの開発メンバーが人手不足で、現在所属しているのは4名になります。1人は JagaJagaメディア本体のWebサイト、1人はiNazo、そして僕ら2人がHupassという役割分担です。

そして、大きな問題なのが、この開発メンバー4人全員が新4年生で、来年になると卒業するのでずっと後継者どうしようね、とみんなで話しているところです、

ー それはまさに、存続の危機といった感じじゃないですか！普段はどんな感じで開発を進めているんでしょうか？

まなと：基本的にはDiscordとzoomを用いてコミュニケーションをとりながら、各自が自分の分の開発を進めるといった感じです。特に場所の縛りとかもないですし、それぞれ使っている技術がそんなに癖があるわけでもないので、授業でちょっとプログラミングやって興味ありますって人も、しっかり教えながら引き継ぎしていくので大丈夫です！

ということで、新メンバー募集しています！！

ー 絶賛新メンバー募集中ということですね。TypeScriptもPythonも人気のプログラミング言語なので興味がある北大生はぜひ！

ー 最後に、同世代のエンジニア仲間や今後プログラミングをやりたい後輩の方に向けて一言メッセージをいただいても良いでしょうか。

まなと：はい、学生時代に何か一つでもプロダクトを開発して公開する経験があると、自身の成長のためにもなるし就活にもとても役に立つのでおすすめです！

なおき：同世代のエンジニアというよりは、パソコンが苦手だし嫌いだよ！っていう人に向けて。あんまりパソコンや技術に嫌悪感を抱かずに少しでも多くの人が興味持ってくれたらいいなと思います。そんな意味も込めて、今回のHupassはパソコンとか使い慣れない人でも簡単に使えるようにっていうのを意識しているので、ぜひ利用してみてください！

ー お二人とも素敵なメッセージありがとうございます！最後の最後に、この記事を見ている学生の方に向けてメッセージがあればお願いします！

まなと・なおき：リリースしたばかりのHupassですが、これから便利な機能をたくさん追加していく予定ですので楽しみにしていてください！

そして、一緒に開発してくれる運営メンバーも絶賛募集しています！学生のうちからプログラミングの技術や考え方を身につけて損することは無いと思うので、本当に気軽に参加して欲しいです！

以上でインタビューは終了です。

今回は、大学生の立場から、大学生のためにあったらいいな！と思うサービスを開発しているJagaJaga・Hupass開発チームのお二人の、徹底してユーザー目線に立った開発のお話でした。

少しでも皆さんの自主制作やプログラミングのドアを叩くきっかけになれば嬉しいです！

開発メンバーなど気になった方はぜひJagaJagaさんのSNSをチェックしてみてください！

Tweets by JagaJagaHU

▼今回紹介した北大生向け時間割サービス『Hupass』はこちら

Twitter：https://twitter.com/Hupass_info

Web：https://hupass.hu-jagajaga.com/

取材・文：高堂