アプリ開発未経験の一般大学生が、慶應の学園祭にアプリを導入した話

はじめに

この記事は慶應義塾大学理工学部アドベントカレンダーの16日目の記事です.

今年度, 慶應義塾大学理工学部の学園祭である矢上祭¹向けに, 情報提供アプリを新たに開発しました. 何を考えどのようにアプリを作ったのかという記録を残しておきたいとということが, 記事執筆のモチベーションになります. 学園祭にアプリを導入してみたいと思った方², そして本学園祭アプリの開発を引き継ぐ後輩のみなさん³の参考になればと思います. 記事の執筆⁴は初めてのことになるので, 読みにくい部分もあるかもしれませんがご容赦ください.

※ 参考として, 今年度制作したアプリのURLを置いておきます. 興味があればぜひ覗いてみてください. iOSはこちらから. Androidはこちらから.

⁵

アプリ開発をはじめるにあたって

なぜアプリを作ろうと思ったのか

情報工学科に所属していたこともありアプリ開発には前から漠然と興味を持っていましたが, 忙しい大学生活⁶の中で開発を続けていく自信が持てず, なかなか手を出せずにいました. 学科でGUIのプログラミングを扱うのは3年春のJavaの授業のみなので, ひときわ関心が高かったという理由もあります. ⁷

他の人も巻き込んだチーム開発であればやる気が続くかもしれないと考えた自分は, 当時所属していた矢上祭実行委員会⁸に注目しました. サークル内最高学年ということもあり, ある程度自由に活動が出来たため, 新たにアプリ開発企画を立ち上げ学園祭向けのアプリを作ることにしました. ⁹

そもそも学園祭にアプリは必要とされているのか？

先程も述べたとおり, プログラミングによって何かチームとしての作品制作を行いたいということが最初のモチベーションであり, 委員会側から必要に迫られて開発を始めた訳ではありません. そのため, 学園祭の企画として認めてもらうため, まず学園祭にアプリを導入する意義を考える必要がありました. 既にパンフレットやWebページが存在しているなかでの新規性としては, 次のようなものが挙げられるのではないかと思います.

• 通知機能 → 企画情報の変更を即時通知出来る
• 感覚的なタッチ操作 → バーチャル学園祭への応用
• カメラ機能 → AR機能
• YoutubeやWebページ, SNSといった, 他のデジタルコンテンツへの簡単なアクセス

ぱっと考えるとあまり学園祭とアプリは相性が良くないように思えますが, 使い道をよく考えれば少しは学園祭を便利に出来るのではないか, というのが自分の感想になります. これらの機能は来年度実装予定なので, 今年度版には搭載されていません. 今年度実装した機能は以下に示すような基本的な機能です.

こちら、Yagamyの機能紹介です！

矢上祭実行委員会をはじめとしたユーザーの皆様からご好評をいただいております😊
矢上祭に遊びに行く方、要チェックです！！ pic.twitter.com/q971Jph579

— Yagamy - 矢上祭公式アプリ (@Yagamy_app) September 16, 2022

今年の本祭期間¹⁰は台風が近づいていたことから企画の開催形態が大きく変わり, パンフレット記載の情報に大きな変更が生じました. 企画場所や開催時間といった情報のリアルタイムの変更に臨機応変に対応出来た点はアプリならではでとても良かったと思います. ¹¹

【矢上祭について】
明日明後日は矢上祭が実施されます
2019年台風で中止以降、コロナで現地開催できず、4年ぶりの対面開催です

今年も台風も迫っているという状況です
明日は向かう前に @YAGAMI_Festival の投稿を確認してください

今年はチケット制です(完売済)
入手した人は楽しんでください！ pic.twitter.com/xKHYHLYeqz

— 山田 健太 | 慶應義塾 塾生代表 (@yamada_ymkn) September 23, 2022

アプリ開発時のあれこれ

開発体制

チーム開発のノウハウが当時何もなかったため, 総勢2名という限界体制で開発を行いました. 期末試験も重なり2ヶ月間で未習の状態から各種ストアへのアップロード¹²をしなけれけばならないことになったこともあり, かなり大変でした. 開発人数が少ないと連絡も少なく済み楽な部分はありますが, 使っているPCが突然ビルドできなくなるとかなり焦るのである程度の人数は確保しましょう.

アプリの設計

画面の実装はFlutterで行い, データはFirebaseから取ってきました¹³ . Flutterを選んだ理由は, iPhoneとAndroidの両方でリリースすることを考えたときに, 2人の開発体制だとクロスプラットフォーム開発¹⁴以外の手法では人手が足りないからです. また, 元々Flutterの知識が少しあり, ネイティブの知識・開発経験がなかったというのも理由の一つです. FlutterはHot Reloadなどスムーズな開発のための機能が充実しており, とても使いやすかったです. Firebaseは無料¹⁵かつ簡単にデータベースが使えるということで, お試し感覚で使ってみました. Firebaseは簡単に使える反面, データの入力は少し大変という特徴があります. 矢上祭の企画等全てのデータを手作業で打ち込んだため, 果てしない労力でした.¹⁶ Firebaseを組み込むと少しビルドが遅くなるのがやや不満でした.

行きあたりばったりで開発を行うと, アプリ機能の拡張に際してコードがぐちゃぐちゃになりとても人が読めるものではならなくなるので, 事前にある程度の設計方針を立ててから作るようにしましょう. また, ディレクトリ構成もある程度整理しておかないと大規模プログラムでは大変なことになります¹⁷. 自分たちはそんなことを微塵も考えていなかったので, 目的のプログラムの場所がわからずディレクトリの迷路に何度も迷い込みました.

開発に際して, Udemyの講座, 本を参考にしましたが, 一通り読む時間が無かったため基本的にはウェブで「flutter 画面遷移 やり方」のようにその都度調べて, コードを書いてみるという作業の繰り返しになりました. こんなずさんなやり方で作っても案外ちゃんと動いてくれます.

アプリの広報

意外と盲点だったのが, この広報活動でした¹⁸. 素晴らしいアプリを作ったとしても, 誰にも知られなければ意味がありません. 言われてみれば至極当たり前のことですが, 開発だけに関心を寄せていた自分たちにとっては忘れていたことでした. 開発班公式Twitterを開設し, 一応宣伝をしたつもりですが, ほぼ意味をなしていなかったと思います. 関係各所に土下座をして周ってチラシ¹⁹を6000部刷り, 当日の配布で宣伝を行いました. チラシだけ配布するのでは効果が薄いので, 列の待機時間でインストールしてもらうといいと思います.

アプリ完成 & 周りからの反応

怒涛のコーディングと地獄のデータ入力²⁰作業を終えて, やっとアプリが完成しました. 自分達の名前がApp Store, Play Storeに初めて載ったときは本当に嬉しかったです. アプリ開発はとても難しいことだと思っていましたが, 簡単なアプリを作る分にはそこまで難しくないのだな, と感じました. 初心者大学生でも簡単に世界中にアプリをリリース出来るようなプラットフォームを作った人は本当に尊敬します.

実際の反響はどうだったのかと言うと, リリースが遅れに遅れ宣伝した期間がほぼ無かったにもかかわらず, のべ847名の方にインストールをしていただくことが出来ました.²¹ App Store ナビゲーションアプリ部門にて全国59位にランクインするという快挙を果たす事ができたほか, 学園祭実行委員長や塾生代表, 現在慶應義塾大学の学長を務める伊藤塾長にも喜んでいただきました ^ ^

59位行ってたみたいです😍😍 pic.twitter.com/vsAF9U4kpt

— Yagamy - 矢上祭公式アプリ (@Yagamy_app) September 25, 2022

アプリ開発を終えて思ったこと

思い返してみると, アプリ開発という自分にとって初めての経験を通して, 様々なことを学ぶことが出来たと思います. 開発を通して学んだことを以下にまとめます.

開発にもコミュニケーション能力は必要

ここで言うコミュニケーション能力とは, 居酒屋で女の子を落とす会話術でなく, 関連するグループにおいてメンバーとのコンタクトをしっかりと確保したうえで, 正確に要件を伝達する能力のことを指します. 天才エンジニアは会話もせず黙々と一人でコードを書くイメージがありますが, 基本的に開発はチームでやるものであるためスムーズに意思伝達を行う会話力が必要です. また, 様々な部署の人と連絡をする必要があるため, 事前に人脈・連絡手段は確保しておいたほうが良いです.

思い立ったらとにかく手を動かしてみる

おもしろそうだと思ったら, 何事もやってみるという姿勢は大事だと思いました. 自分にとって遠い存在だと思っていたことも, やっとみると案外簡単だったりします.

締切さえあればなんとかなる

締切1分前のレポート提出を毎週平気でやる自分としては, 動かせない締切があることはとても重要でした. 自分でモチベーションが維持できない人は, 進捗を出さざるを得ない環境²²に身を置きましょう.

自分の好き嫌いを考えるきっかけになる (情報系学生向け)

修士に進学する理系大学生にとって, 研究室選び²³は大学生活後半に大きく影響する一大イベントです. 情報工学科といっても, その内容はコンピュータグラフィックスから機械学習, 通信, ハードウェアなど多岐にわたります. アプリ開発は, このような選択肢の中から自分に合った進路を決定するために必要な自己理解の助けになったと思います. 最終的に, 自分はパーツを組み合わせてアプリを作ることよりも, どのようにプログラムが動くのか, というようなより深い部分の処理に興味があることがわかりました. システムソフトウェア²⁴の研究室に進むことになる大きなきっかけになったと思います.

チーム開発に何が必要なのかという実感が持てる

チーム開発にGitは必須, ということはよく耳にしますがどうして重要なのか・なぜこのような機能があるのか, イマイチ理解出来ていませんでした. 今回の脳筋開発を通して, チーム開発にはどのような手続きが必要なのか, 何が大変なのかということを具体的な経験をもって実感することが出来たと思います.

コードを綺麗に書くことの大切さ

これは先程の「チーム開発に必要なこと」という話に関連する部分でもあります. 今まではそんなに長いコードを書いたことがなかったのですが, 今回のアプリ開発を通して初めてある程度長いコードを書きました. それによって感じたことは, コードの可読性・保守性の大切さです. 基本的に「動けばよかろう精神」でコードを書いてきましたが, 開発していく中で特定の場所を見つけるのが大変, どこか直したいときの修正箇所多すぎ, という問題にたびたび直面しました. 今回は2人で開発していたので何とかなりましたが, 大人数での開発では自分のコードは通用しないのだろうということを実感しました.これからはできるだけ綺麗なコードを書いていきたいです.（できるだけ...）

最後に

簡単にではありますが, 学園祭にアプリを導入したいきさつについて紹介させていただきました. この記事を読んで, アプリ開発に興味をもってくださる方がいれば幸いです. 最後まで読んでいただきありがとうございました.

ご意見などがありましたら, [e-mail]までお願いいたします.

1. 慶應義塾大学の学園祭の一つである矢上祭は, 周辺地域の方から協力をいただきながら23年にわたって開催されているお祭りです. 理系キャンパスの学祭として理系力の強い企画をウリとしており, 毎年1万人以上の方が来場されます. ↩

2. 学園祭にアプリを導入している他の例としては, 早稲田大学理工学部の学園祭である「理工展」が挙げられます. ↩

3. 昨年度のFlutterのソースコードが見るに堪えない出来であったことから, 昨年度のソースコードを直接引き継ぐことは考えていません. 開発班の後輩にとって技術として直接的に参考になる部分は少ないかもしれませんが, 開発時の雰囲気を感じていただければと思います. ↩

4. 本記事は, 第23回矢上祭アプリ開発班2名による執筆になります. 2名とも理工学部情報工学科に在籍するB3です.(2022年現在) ↩

5. ちなみにこのかわいい生き物は, 学園祭のマスコットキャラクターであり「やがぽん」と言います. もともとは先輩がLINEスタンプ用に描いた絵ですが, 開発班に絵心のある人間が一人もいなかったためこれらの画像は無断借用されています. ↩

6. 特に2年秋は憎むべき理工学基礎実験があったので, かなり厳しいものがありました. 半年の間, 毎週A4サイズで20ページほどのレポートを書かされる理工学基礎実験は全慶應理工学部生の敵です. 実験レポートを書かない数理科学科は理工学部生にあらず, という有名な言葉が慶應にはあるとかないとか. ↩

7. 情報工学科では, 2年から3年末まで全ての学期でプログラミング科目が設置されています. 具体的には, 2年春プログラミング基礎同演習:Python, 2年秋プログラミング第1同演習:C初級, 3年春プログラミング第2同演習:Java, 3年秋プログラミング第3同演習:C中級といった感じです. ↩

8. 慶應義塾大学の公認団体で, 矢上祭という理工学部の学園祭の運営全般を担当しています. 個人的な意見ですが, 忙しく灰色のイメージのある理工学部でも華やかな大学生活がある程度保証されるので, 迷ったらとりあえず入りましょう. ↩

9. 個人的な意見ですが, サークルという団体は, 開発インターンなどと異なり裁量の大きい仕事が出来るので, 新しいチャレンジをする格好の場であると思います. ↩

10. 毎年矢上祭は台風シーズンの9月末に開催されます. 何度か中止に追いやられたにも関わらず, 学園祭期間を変更しないのはなぜなのでしょうか. ↩

11. 一方で, アプリへの情報入力を間違えて毎年矢上祭に来てくださる熱心なおじさんを1名, 開場3時間前に招待してしまうという事件も引き起こしました. 入力情報のチェックは入念に行いましょう. ↩

12. アプリ開発はコーディングに目が行きがちですが, 初心者にとってはストアのアップロードもなかなかの鬼門です. アプリをストアにアップロードするためにはアプリの紹介ページを作成をする必要があり, 何十枚ものスクリーンショットやプライバシーポリシーの提出が義務付けられています. これらの準備がなかなか面倒なのと, ストアからの審査待ち時間があるので開発期間にはゆとりを持ったほうがいいです. 審査はそこまで厳しくなく, App Storeであれば平均2日ほどで許可が降ります. ↩

13. アプリのソースコードにそのまま情報を掲載すると, 情報を更新してもアプリをストアでアップデートしない限り変更が反映されないので使い物になりません. そのため, 学園祭アプリにおいてサーバーの利用はマストになります. ↩

14. iOSとAndroidのコードが1つになるといっても, 作業量が完全に半分になる訳ではありません. info.plistやAndroidManifest.xmlなどの設定は個別で行う必要がありますし, ストアリリースも別途なのでこの部分はどちらも勉強する必要があります. ↩

15. アクセス数があまりに多い場合には, 課金プランへの以降が必要になります. 学園祭の規模であれば, 無料プランで十分でしょう. ↩

16. 素朴な疑問なのですが, Firebaseのデータベースを実用として導入している企業はあるのでしょうか. いくらなんでもテーブルの操作性が悪すぎませんか...？？？ (データを格納するテーブルをコピペすることさえ出来ない) ↩

17. この辺の設計・テストといった開発フローの話は, 3年秋学期のプログラミング方法論で学びます. ↩

18. そもそもアプリ開発企画は, 広報局という学園祭の広報活動全般を担当する部署に属する企画なのですが, 広報活動のことを考えていた人は誰一人としていなかったようです. ↩

19. デザインにはCanvaというサイトがとても便利です. App Storeの宣伝画像も本サイトを使って制作しました. illustratorを使うよりも直感的なので, 誰でも簡単に使えるかと思います. ちなみにチラシを6000部も刷る意味は全くありませんでした. 当日配布されることの無かった可哀想なチラシ達は現在矢上キャンパスのメディアセンターで生存が確認されています. 彼らは計算用紙として第2の人生を歩んでいるようです. ↩

20. 体感ですが, データ入力もコーディングと同じくらい大変な作業になります. Web班やパンフレット班とともに, 入力データを予め共有しておくと非常に楽です. Web, パンフ, アプリといったチームごとに別々で各企画長に連絡を入れると2度手間3度手間になり非常に迷惑なのでそのようなことは控えたほうがいいです. ↩

21. このようなダウンロード状況はApp Storeコンソールや, FireBaseのAnalyticsで確認できます. 国や機種ごとのインストール状況が確認出来るので見ていて結構楽しいです. ↩

22. 例えばこのアドベントカレンダーに登録するということも, 一つの強制力なのかなと思います. 周りが友人でない分, 締切に間に合わせないといけない緊張感があってよかったです. ↩

23. B4(もしくはM2)の就職戦争, B2の学科分け戦争に並ぶ, 理工学部3大戦争の1つです. 人気研究室のイスは奪い合いになるので, 研究室決め期間には熾烈な情報戦が繰り広げられます(?). ↩

24. オペレーティングシステムなど, アプリケーションを動かす上で土台となるソフトウェアの総称です. ↩