👀 開発者裏話

1. はじめに

このサイトは，甲南大学 岡本キャンパスで 2023/08/06(日) に実施されたオープンキャンパス の学生企画「甲南生とクイズアタック」に関するものです．企画で使用したアプリの開発メンバーが執筆しました．アプリ開発の裏側として，開発の流れや苦労した点などを紹介します．

2. プロジェクトメンバー

甲南大学 知能情報学部 が主催する，スーパーIT人材育成プロジェクト｜競技プログラミング勉強会 に参加しているメンバーと， オープンキャンパススタッフを小出先生が繋げてくださったことがきっかけで，このプロジェクトがスタートしました．

小出先生へ：貴重な機会を作り出していただき，ありがとうございます．

• 小出 先生（知能情報学部. 以降 敬称略）, 研究室HP
• 木村（知能情報学部 4年）, HP
• 前原（知能情報学部 4年）
• 角谷（知能情報学部 2年）
• 久保（知能情報学部 4年）

3. 開発の流れ

この章では，アプリ開発の流れを紹介します．

3.1. 要件定義

担当：小出，木村

アプリを作るためには，まずどんなアプリを作るのか決める必要があります．これを要件定義と言います．

要件定義を適当にしてしまうとプログラムを書き始めてから困ったことになるので，最初の段階でしっかり考えておくことが大切です．

また，簡単そうに見えて実現が困難な機能というのもよくあります．適切な難易度の要件に落とし込むのは意外と難しいです．力の見せ所ですね．

このプロジェクトの要件は以下のように定めました．

• オープンキャンパスの企画で使用するアプリを開発する
• アタック25のような，複数色のオセロアプリを作りたい
  • パネルは5x5
  • チーム数は1～8で選べるようにする
  • 誤操作に対応するため，操作取り消し機能が欲しい
  • パネルとスコアのバックアップ機能も欲しい
• 動作端末はPCのみ．レスポンシブ対応はしない
• 開発期間：期末テスト期間を含む２ヵ月弱

3.1.1 追記

こんなに偉そうなことを書いておきながら，直前のリハーサルでクライアントとの認識違いが発覚し，急遽仕様変更することになりました．

「クライアントが当然だと思っていて教えてくれない，開発者は知らないこと」をいかに聞き出すか，要件定義は難しいですね．

3.2. デザイン

担当：小出，木村，前原，角谷

次に，どんな画面が欲しいか，定義した要件を元にデザインします．

Figmaなどのデザイン用ソフトを使いたかったのですが，デザイン用ソフトの使い方を学ぶ時間が取れなかったので，今回はホワイトボードにお絵かきしました．

3.2.1. デザイン指導（カラーユニバーサルデザイン）

担当：久保

配色については，カラーユニバーサルデザイン推奨配色セット などを意識して，C型，P型，D型色覚の人を含めどんな人でも認識出来るデザインを目指しました．

今回のアプリではチームカラーとして8色用意する必要があり，任意の組み合せで隣り合った時に区別出来る，8色の配色セットを決めるのには苦労しました．

3.3. 技術調査・技術選定

担当：小出，木村

次に，どんな技術を用いてアプリを作成するか決めます．

技術調査はこの段階でやるものではなく，普段の積み重ねです． 日頃からアンテナを張って色々調べて，触っていることが大切ですね．

日頃の調査結果を元に，このプロジェクトで使えそうな技術をリストアップします．

• Windows のネイティブアプリ
  • Python
  • C#
  • Java
  • .NET？
  • …
• Webアプリ
  • フロントエンド
    • JavaScript, TypeScript
    • ReactやVueなどのJSフレームワーク
  • バックエンド
    • JavaScript, TypeScript
    • Python
    • Ruby
  • …

このプロジェクトでは以下の考慮事項がありました．

• メンバーの大半がアプリ開発初心者のため，環境構築，動作確認が容易な技術が良い
• せっかく新しい技術を学ぶなら，今後も使える技術が良い
• みんな忙しくてあまり時間が取れないため，チームメンバーが習得しやすい（もしくは，既に習得している）技術が良い

これらを踏まえ，

• Webアプリとして実装：環境構築，動作確認が容易
• HTML, CSS, JavaScript：Webアプリを作るための高機能なフレームワークは数多く存在するが，HTML, CSS, JSという，Webアプリの基礎を学んでおくことは決して無駄にはならないと思うので，あえて素のJSを使うことにした
• Processing（p5.js）：知能情報学部の授業で学ぶので，みんな知っている．プログラミングに慣れていないメンバーにはこれを使ってもらう

3.4. 環境構築

担当：木村

パソコンにプログラムを開発する環境を整えることを，環境構築と言います． 慣れている人だとスムーズに進みますが，プログラミング初心者だと，ここで躓いて挫折してしまう人も結構居ます．

エディタは VSCode，動作確認は VSCode の Live Server 拡張機能で行いました．

余談ですが，今回初めて VSCode の Git Lens という拡張機能を使ってみました． 意外と良いですねこれ．

Git の拡張機能と言えば，Git Graph もお気に入りです． 大人数で作業してブランチが沢山生えているとカッコ良いです．

ブランチの様子．ちなみに，このプロジェクトは GitHub Flow という方針で進めたつもりです．

3.5. 雛型の作成

担当：木村

プロジェクトメンバーの中で唯一Webアプリの作成経験がある木村が，プロジェクトの雛型を作成しました．

3.6. 授業

担当：木村

HTML, CSS, JSのマナーや，Gitコマンド（pull, switch, add, commit, push, stash, ...），GitHubの使い方（issue, Pull Reqest, review, ...）などを共有しました．

3.7.（いよいよ）実装

担当：木村，前原，角谷

ゲーム画面とエンディング画面に分かれて実装しました．

ゲーム画面のバックエンド実装パートは，競技プログラミング勉強会メンバーが担当しました．持ち前の実装力を存分に発揮し，スムーズに進めることが出来ました．楽しいですね．

エンディング画面の実装には，せっかくなのでオープンキャンパススタッフの角谷さんに担当してもらいました． アプリ開発未経験とのことで，かなり手助けしたものの，最終的には

• remoteからmainブランチをpull
• 新たに開発用ブランチを切る
• 実装
• add, commit
• remoteに開発用ブランチをpush
• Pull Request作成
• 自分のコードがmainにマージされる

という一連の流れを経験してもらうことが出来ました．アプリ開発の楽しさを味わってもらえたようなので，私は満足です．

3.8. 動作テスト

担当：小出，木村，角谷

実装が一段落した時点で，スクリーンとの接続テストを行いました．

フォントの大きさや色味など不安でしたが，良い感じだったので良かったです．

3.9. 完成

やっと完成です．

1週間もあれば出来るだろうと思っていたら，2ヵ月弱かかってしまいました．

チーム開発というのは初めて経験しましたがなかなか難しかったです． 1人では再現できない，色んなエラーを経験することが出来ました．

4. スクリーンショット

スクリーンショットと共に，アプリの機能を紹介します．

4.1. トップページ

この画面では

• チーム数の設定
• バックアップ機能を用いて途中から再開するか選択

を行うことが出来ます．ここで設定した値は，次のゲーム画面へクエリパラメータとして渡します．

4.2. ゲーム画面

メイン画面です． 右側でチームを選択し，左側のパネルをひっくり返します．

この画面に実装されている機能は次の通りです

• オセロのように，挟まれたパネルをひっくり返す
• バックアップ：画面クリックのたびに，ゲームの状態を保存．ゲーム中にブラウザを誤って閉じてしまっても，途中から再開可能．
• Undo / Redo：ひっくり返す場所を間違えた時，Undo出来る．また，Undoしすぎたときには，Redo出来る．
• 終了判定：盤面が全て埋まると，エンディングに誘導する．
• 強制終了：この企画に割り当てられた時間内にゲームが終わらなかった場合，その時点の結果を集計してエンディングに遷移可能．

4.3. エンディング画面

結果を表示する画面です．ゲーム画面でバックアップ用に保存しているスコアデータを参照し，スコア順にチームをソートして表示します．

背景には幾何学模様を複数配置し，それぞれ回転しています． この幾何学模様は角谷さんが作ってくれました．なんと直線だけで表現されているらしく，すごいですね．

※縦のalignがズレているのは，プロポーショナルフォントを使用しているためです．

5. 苦労した点

この章では，苦労した点を紹介します．

5.1. 役割分担

メンバー間の技術力の差が大きく，役割分担が難しかったです．

つよつよメンバーが1人でやる方が精神的には楽なのですが，そんな時間が無かったのと，チーム開発をやりたかったので，頑張って役割分担しました．

5.2. パラパラ演出

パネルをひっくり返す処理をパラパラとさせる部分は JavaScript の setTimeout()関数で遅延させて実現しているのですが，setTimeout()は非同期処理されるので，そのままだと順番にめくってくれません．Promise でラップして await することで解決しましたが，他の同期処理部分に影響が出たりして大変でした．

5.3. コンフリクト

チーム開発あるあるですね．

バージョン管理システムを使用してファイルを共有しながら開発する際，同じファイルの同じ部分を同時に複数人が編集した時に，どっちの変更を採用すれば良いか分からない，という現象です．どっちの変更を採用するかは，人間が一つ一つ判断する必要があり，コンフリクトの解消は非常に面倒です．

チーム開発をしたことがある人なら一度はやらかしたことがあるんじゃないでしょうか．

5.4. …

もっと他にもあった気がしますが，このページを書くの疲れてきたのでこのへんにしておきます．

6. やり残したこと

もう少し時間があればやりたかったことは沢山ありますが，まあ最低限必要なものは完成出来たので良しとしましょう．

以下にやり残したことを供養しておきます．

6.1. モダンな技術の使用

• TypeScript：共同作業をするとなると，JavaScriptはクソ．自由度が高すぎるし，変数の値や型が不正でも，エラー出さずに謎の挙動をしたりする．
• React：個人的にはVueよりReactの方が好き
• RustでWASM：最近Rustを勉強してるので，使ってみたい

6.2. デザインツール

• Figmaでデザインしてみたかった

6.3. テスト

• テストを全く書けなかった
• 本当は書くべき

6.4. CI / CD

• GitHub Actionsを用いた CI / CD
• LintやTypoチェックなどを自動で
• ユニットテスト

6.5. スマホアプリ

• 会場で参加者が使えるスマホアプリ．現在の順位表見れたり，解答ボタンになったりしたら面白そう．
• 認証機能を付けたり，技術的に面白そう

7. 数字で見る，今回のプロジェクト

さまざまな数値を確認して，今回のプロジェクトを振り返ります．

7.1. Gitの記録

7.1.1. 編集行数

1

git log --numstat --pretty="%H" --author='hoge' | awk 'NF==3 {plus+=$1; minus+=$2} END {printf("%d (+%d, -%d)\n", plus+minus, plus, minus)}'

7.1.2. コミット数

1

git rev-list --count main

83

stashしたものを含めるともう少し多くなります．

7.1.3. ブランチ数

1

git branch | wc -l

17

7.2. GitHubの記録

7.2.1. issue, PR数

• issue : 18 (5 open, 13 closed)
• Pull Request : 24 (0 open, 24 closed)

7.3. 各ファイルの行数など

1

wc `find . -name "*.js" -or -name "*.html" -or -name "*.css" -or -name "*.md"`

8. おわりに

最後まで読んでくれてありがとうございました．

このページを読んで面白いと感じた人は，知能情報学部に進んでみてはいかがでしょうか．

きっと楽しい日々を過ごせますよ．