はじめまして、nefrockのWebシステム開発コースでインターンシップに参加した東京工業大学の積田です。
今回のインターンシップでは、ハイスピード文字読み取り「Edge-OCR」を今後運用する上で必要になる社内の顧客管理システムの開発を行いました。
インターンのテーマ
Edge-OCRを利用する顧客の情報を容易に管理がしたい、というnefrockの方々の要望のもと、要求に沿った社内用システムを完成させることが主な目的でした。
というのも、Edge-OCRは毎日の利用可能台数を契約した上で顧客に運用してもらうという方針のため、各顧客の運用情報等を管理できるシステムが必要になっていました。
顧客が契約したライセンスには具体的に「どれほどの台数が使えるか」「どの期間で利用可能か」「ライセンスは有効かどうか」などの情報が含まれています。
こういった顧客に紐付いたライセンス情報も含めて閲覧、編集などができる社内用の仕組み作りがテーマになりました。
元々顧客情報をFlutterとFirebaseを用いて管理していたことから、社内システムの開発もフレームワークとしてFlutterを、バックエンドはFirebaseを利用しました。
担当箇所
本インターンには同期間にもう一人参加していたため、開発を分担することになりました。私は上記テーマの内、ライセンスを含めた顧客情報の一覧と詳細表示の部分を担当しました。
実装物
インターンでは以下のように表示される画面を実装しました。
左が顧客の一覧表示画面で、右が顧客の詳細画面になります。
顧客の一覧表示画面
実装したものとして、
- 会社名・代表者名・Emailを一覧で表示する
- 会社名・代表者名・Emailの中から選んで検索ができる
- デフォルトで有効なライセンスを所持したユーザーを表示し、無効なライセンスを所持するユーザーの表示・非表示を選択できる
- 該当の列をクリックすると詳細ページに移動できる
以上の機能があります。
画面の小さいスマートフォンで見た際にも詰まった表示にならない方がいい、という意見をいただいたため画面幅に応じて表示の仕方を変えるような工夫も行いました。
顧客の詳細画面
こちらで実装したものとしては、
- 顧客の情報を表示する
- 顧客が所持するライセンスの情報を表示
- 顧客が所持するライセンスの情報を編集できる
- 顧客のライセンスの有効・無効化ができる
- ライセンスの使用量と使用可能量を可視化できる
の5つです。
所持するライセンスの表示と編集に関しては、画面遷移なしで情報を変更できるようにしました。ライセンスの有効期間はDatePickerを用いてカレンダーから変更できたり、ライセンス数は編集マークをクリックすることでTextFileldが表れ、値を変更できるようになっています。
個人的に実装が楽しかったのはライセンスの使用量を可視化するグラフの部分で、Firestoreにある情報を日付によるソートや検索を繰り返してなんとかまとめることに成功しました。
特に実際にライセンスを使用した量(オレンジの線)はEdge-OCRの実際の運用時で生成されるデータから作成しているため、より社内システムとして現実味がある楽しい部分でした。
ローディングに時間がかかると感じたため、暇つぶしに紙吹雪も出せるようにしました
併せて変わった画面
ライセンスの情報は開発当初、ライセンス数しか管理されていなかったところ、他にユーザーの有効・無効を切り替えられる機能や有効期間を見られるようにしてほしいと要望の追加がありました。
それに伴い、新しく顧客のアカウントを追加する時にも有効期間を設定できるように変更を加えました。
非常に細かい部分ですが、タブ移動に適応した入力フォームの作成にかなりの時間がかかりました。
Start/End Date of Licenseはクリック時にDatePickerが開く都合上、元々必ずマウス操作が要求される部分でした。それでは入力がしづらいとなり、FocusNodeなどの利用を何度も試行錯誤し、タブ移動でも開け、キャンセルや入力の有無に応じて次の入力に進むようなUIを完成させることができました。
まとめ
今回のインターンでは、Flutter / Firebaseを利用して今後運用されるEdge-OCRの顧客情報を管理する社内システムを作成しました。
その中でも特に顧客とそのライセンスに関わる部分の実装を担当いたしました。
振り返ってみて
私はインターンを申し込む当時、「実務による開発経験」が全くなく、実際の運用に値するものを開発してみたい！という気持ちで今回のインターンに申し込みました。
また、フロントエンド側に興味の方向が向いていたため、UI部分も相談しつつ作れる環境であるといいなとも思っていました。
実際に1ヶ月開発をして、求めていた以上のものまでできた！というのが正直な感想です。
実際に利用する社内の方々が常にフィードバックをくれる環境で開発ができるため、「どうすれば使いやすいのか」を常に考え、進化させながら各ページの作成に取り掛かることができました。
また、入念にコードレビューをしていただけたため、今後の機能拡張に対応できるようなリファクタリングやその考え方までも教えていただくことができました。講義やハッカソンなどでは、時間の制限からなかなか丁寧にできないリファクタリングを、レビューありきでじっくり行うという贅沢すぎる経験ができました。
またそれだけにとどまらず、普段手探りで学んでいたgitやエディタのより良い扱い方までも教えていただくことになり、インターン中毎日が成長の日々でした。
特に今まで恐怖の対象であったforce pushもrebaseも扱えるようになったことが本当に嬉しいです。
もっと早くここでインターンをさせて貰えていれば、と心の底から思うほど開発者として良い経験をさせてもらいました。
自分の腕に自信がある人はもちろん、実務経験ってものをしてみたいけど実力が不安だ、と思う人こそぜひ参加してほしいインターンだと思います。
謝辞
今回のインターンでメンターをしていただいたPeterさんに心から感謝します。
FlutterもDartもFirebaseも初心者だった私に対して、大変丁寧にレビューをしてくださりありがとうございました。好意的なフィードバックも大変励みになりました。
社内システムの一部を先んじて実装していただき、困っている時に手を差し伸べてくださった岩崎さんに感謝いたします。全くの0から手探りで開発を進める必要がないと知って得られた安心感は今でも忘れません。
また、インターン参加に対して非常に暖かく迎え入れてくださった株式会社ネフロックの皆様に心から感謝いたします。
最後に、Nefrockビルの皆様、定期的に楽しい会を開いてくださりありがとうございました。1ヶ月間、本当に楽しかったです。
