KITHUB夏アドカレ8/30（何日目?）です。
高校内で2万人が利用する成績確認アプリを開発しました。
経緯
私が通っていた高校ではレポートを毎月期限内に終わらせないといけない決まりがありました。
ですが、当時レポートの進捗率を確認するサイトが非常に見づらく、期限内のレポートがどれかわからない状況でした。
この画像を見て、9/15締め切りまでにやらないといけない教科をぱっと見でわかりますか？
正解は（ここに写っている分で）
- 国語2個
- 日本史2個
- 数学1個
です。
高校入学して初めてのレポートということもあり見落としていないかすごく不安でした。
そこでレポート進捗確認、成績確認できるアプリがあればいいなという思いでこのアプリを作成しました。
既存のUI/UXの悪いところはなにか
アプリを作ろうということでまず既存のUI/UXの悪いところをリストアップしていきました。
- 月単位で見られない
- どの行の列かがわからない
- 進捗率がわからない
月単位で見れて進捗率がいい感じに見れるデザインにすればいい！
ということになりました。
デザイン
大まかの機能が決まったので次はデザインをしました。
このような形で色々模索した結果、
このようなUIに落ち着きました。（リリース当初とUI少し変わってますが...）
成績取得
次は成績取得です。どのようなしくみで動いてるのでしょうか。
このアプリを開発するにあたり、一番恐れているのは個人情報の管理でした。
アプリ内で完結するような仕組みを構築する必要がありました。
とりあえず適当にDeveloper Toolを開いてログインしてみます。
ログインボタンを押してそれっぽいデータを見つけます。
ログインに必要なデータは、
| k | v |
|---|---|
| loginId | 生徒番号 |
| password | パスワード |
| url | 空（多分成功した場合のリダイレクト先） |
| _token | ??? |
_token、謎の文字が出てきました。これは多分CSRF対策のワンタイムトークンだと思います。しらんけど。
トークン自体はログイン画面のinputに隠れています。
| k | v |
|---|---|
| loginId | 生徒番号 |
| password | パスワード |
| url | 空（多分成功した場合のリダイレクト先） |
| _token | ワンタイムトークン |
ということがわかりました。
ログインの処理がわかればあとはパースするだけです。tableはアホカスパースし辛いですが頑張るしかないです。
とりあえずPythonで実装してみました。
自分のサーバーを介せず、直接取得しているのでドワンゴの素晴らしい強固でセキュアなシステムを生かした実装となっています。
なので、このアプリでは攻撃の影響というのはこのアプリに関しては基本的にございませんということになります。🎤
アプリ作成
デザイン、大まかな成績の取得方法がわかったのでiOSアプリ開発に着手しました。
技術スタックとして
Swift: iOSネイティブで書きたかったので
UIKit: 単純に使い慣れていた
MVPアーキテクチャ: できるだけシンプルに責務を分けられると思った
以上のことからUIKit, MVPアーキテクチャを採用しました。
また、ライブラリは、
- Alamofire
- HTTP networking
- Kanna(鉋)
- htmlパーサー
- MarkdownView
- 利用規約、ライセンス表示
- loading-buttons-ios
- ログインボタンのローディング
- SkeltonView
- ローディング中のスケルトン
- MBCircularProgressBar
- 進捗バー
- PanModal
- 共有モーダル
- SPPerspective
- 共有モーダルに表示される画像をおしゃれに表示
- xcodegen
- .xcodeproj衝突回避
を利用しています。
実装面では特に目新しいものはないので割愛します。
リリース
N高エンジニア2人、ドワンゴエンジニア2人にレビューしてもらい、黙認(問題が生じたら生徒の責任)という形で2021年の6月にリリースしました。
アプリ名をどうするか迷いましたが考えるのがめんどくさくなったので開発ネームだったNuixo（N UI/UX クソ）になりました。読み方たまに聞かれますが好きに詠んでください。
Android, Chrome Extension
iOS版の他にAndroid版、Chrome Extension版をリリースしました。
雑な技術スタック
- Android
- Kotlin
- Jetpack Compose
- jsoup
- Chrome Extension
- react
- react-circular-progressbar
- react-icons
- recoil
- vite
- tailwind
- typescript
の構成になっています。
反響
初めてたくさんの人々に利用されるアプリをリリースして、知らない人からこのアプリ便利だよって言われたときは嬉しかったです。
最後に
おかげさまでiOS, Android, Chrome Extension版合わせて2万人超もの方に利用されています。ありがとうございます。
買い取ってくれる方、開発継続してくれる方募集中です！