記事の概要
私が開発したWebアプリ（ポートフォリオ）の解説をします。
開発にいたる背景から、作成手順、機能、工夫したところ、課題などをまとめました。
開発したWebアプリはEventRunnerにて公開中。
以下のテストユーザーでログインできます。↓↓
アドレス ：test0001@gmail.com
パスワード：test0001
開発に必要な設計書や要件定義書は以下のリンクからご覧ください。
GitHub
設計書URL
開発の背景
私は、学生の頃から兵庫県に拠点を置く、ボランティア団体に所属しています。
この団体では、2ヶ月に1回のペースで、行事（地域奉仕活動やワークショップなど）が行われます。
それらの行事への参加者を募るために、毎回SNSで情報を共有し、出欠をとり、参加者をSNSグループに招待し、運営していました。
これが、かなり手間で、特に取りまとめする人「リーダー」の仕事量がかなり多く大変でした。
（私は、この「リーダー」の経験があり、とても大変だったと記憶しております）
行事の情報収集や参加表明などができるプラットフォームがあり、
「個人で、情報収集や登録などができれば良いなぁ〜〜〜」と思い、
イベントの参加や登録ができるWebアプリを作ってみることにしました。
また、Web系開発企業のバックエンドエンジニアへの転職を考えていたので、
このアプリを転職活動のポートフォリオとすることに決めました。
目的
- PHPを用いたWebアプリケーション開発経験を積む
- フルスクラッチ開発によってWebアプリの基本的な構成、動作を知る
- Webの仕組みの理解を深めて、自分の言葉でWebについて説明できるようになる
- 企画〜開発〜運用までを経験することで、アプリケーション開発の流れを掴む
- 成果品はポートフォリオとして、転職活動で使う
- 開発アプリによって所属団体の行事運営の円滑化を計る
スペック （as of 2020/08/01）
言語
PHP 7.2.31
DBMS
MySQL 7.4.6
CSSフレームワーク
bootstrap4
開発環境
MacOS Catalina 10.15.6
Apache 2.4.41
バージョン管理
Git 2.27.0
本番環境
Conoha
主な機能
開催イベントの登録
開催される基本情報を登録・公開することができる（開催場所・時間・概要など）。参加表明
ログイン済みの参加者が、「出席」ボタンを押すと、参加者として登録される。
また、参加の取り消しをすることもできる。トップページでは、本サイトの使い方を簡単に記載しておく
マイページで参加予定のイベント詳細情報が閲覧できる
絞り込み検索ができる
新着・定員数で絞り込み検索ができる
テーブル設計
以下の通り、テーブルを設計した。
ゼロからテーブル設計するのは初めてだったため、解説動画や解説サイトで情報収集し、行った。
会員テーブル（users）
| No | カラム名 | カラム名（日本語） | 型 | 必須 | AI | 主キー |
|---|---|---|---|---|---|---|
| 1 | user_id | 会員ID | integer | Yes | Yes | Yes |
| 2 | name | 名前 | string | Yes | ||
| 3 | メールアドレス | string | Yes | |||
| 4 | password | パスワード | integer | Yes | ||
| 5 | img | 写真 | string | Yes | ||
| 6 | introduction | 紹介文 | text | Yes | ||
| 7 | status | 会員ステータス | integer | Yes | ||
| 8 | create_datetime | 登録日時 | datetime | Yes | Yes | |
| 9 | update_datetime | 更新日 | datetime | Yes | Yes |
開催場所テーブル（location）
| No | カラム名 | カラム名（日本語） | 型 | 必須 | AI | 主キー |
|---|---|---|---|---|---|---|
| 1 | location_id | 開催箇所id | integer | Yes | Yes | Yes |
| 2 | location | 開催箇所名 | string | Yes | ||
| 3 | address | 住所 | string | Yes | ||
| 4 | create_datetime | 登録日時 | datetime | Yes | Yes | |
| 5 | update_datetime | 更新日 | datetime | Yes | Yes |
イベントテーブル（events）
| No | カラム名 | カラム名（日本語） | 型 | 必須 | AI | 主キー |
|---|---|---|---|---|---|---|
| 1 | event_id | イベントid | integer | Yes | Yes | Yes |
| 2 | user_id | 会員ID（主催者） | integer | Yes | ||
| 3 | location_id | 開催箇所id | integer | Yes | ||
| 4 | event_name | 題名 | string | Yes | ||
| 5 | introduction | 説明文 | string | Yes | ||
| 6 | date | 開催日時 | date | Yes | ||
| 7 | time | 開催時間 | time | Yes | ||
| 8 | create_datetime | 作成日時 | datetime | Yes | Yes | |
| 9 | update_datetime | 更新日時 | datetime | Yes | Yes |
参加者テーブル（paticipants）
| No | カラム名 | カラム名（日本語） | 型 | 必須 | AI | 主キー |
|---|---|---|---|---|---|---|
| 1 | paticipant_id | 参加ステータスid | integer | Yes | Yes | Yes |
| 2 | user_id | 会員ID | integer | Yes | ||
| 3 | event_id | イベントID | integer | Yes | ||
| 4 | create_datetime | 作成日時 | datetime | Yes | Yes | |
| 5 | update_datetime | 更新日時 | datetime | Yes | Yes |
開発手順
1. 要件定義
まずは、開発するWebアプリの全体像を把握するため、以下のドキュメントを作成。
- アプリ概要
- 機能一覧
- テーブル設計書
- スケジュール
実際に、作成したものを以下のリンクからご覧ください。
アプリ概要には、開発にいたる背景や目的などをまとめた。
機能一覧には、Webアプリにつける機能をまとめた。
実際に、クライアントから依頼があったという想定で、進めるためスケジュールを作成。
納期まで、「2週間で完成させてクライアントに返す」、と想定した。
2. 環境選定
学習言語がPHPだったため、PHPでの開発を決める。
また、所有するラップトップにLAMP環境を構築したので、その環境を試したかった。
データベースは、スクールでMySQLの利用経験がある、かつ、情報量が多いことを考慮し、選んだ。
（開発途中で、Conohaサーバー内にCloud9を置いたので、開発後期ではCloud9を利用して開発した）
データベース設計
必要機能から、どんな情報を保存するか、それらをどう関連付けて管理するかを考えながらデータベース設計を行った。
コーディング
- MVCモデルで開発をする。 繰り返しのプログラムをなるべく避け、ユーザー関数を利用するなどし、第三者にも理解しやすいソースコードを心がけた。
まずは、フロント部分を開発し全体のイメージを掴めるように開発した。
ある程度、全体像が掴んでから、サーバーサイドの開発をした。Gitを利用し、バージョン管理
チーム開発を想定しているので、開発内容をissueで管理した。
ひとつの課題を終えるごとに、都度、pull request/mergeなどを利用した。
（これは、gitコマンドの練習にもなって、本当によかったと思っています）
CSSフレームワーク実装
PHPを書くことに集中するため、
CSSフレームワーク「Bootstrap4」を使用し、フロントは最小限の労力で実装した。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
本番環境へ（Conoha）
初めてのレンタルサーバーを契約し、作ったWebアプリを公開した。
SFTPとして、FileZillaを使用した。
公開鍵を設定し、セキュリティを高めた。
バージョン管理
GitHubにソースコードをシェアした。
工夫したところや感想
開発直後は、MVCの考え方を理解できずなかなか進まなかった。。。
どうなることかと心配したが、納期に間に合うように開発することができた。
工夫したことを以下に記録する。
実際の現場に近い状況で開発
実際の開発現場に近い状況で取り組みたかったので、開発に取り掛かる前に、
スクールのメンター先生に、現場の開発の流れを事前に情報収集し実行した。
メンター先生からのアドバイスとしては、以下があった。
- フロント画面を先に作成し、客先承認をもらう。承認をもらったフロント部分には、PHPをなるべく書かない。
- グループ開発なら、GitHubでバージョン管理（pull request/mergeなど）する。
- グループ内の情報共有はSlack。
Gitでバージョン管理
グループ開発を想定し、gitHubでバージョン管理した。
開発中に遭遇した課題に対して、都度issueを発行し、その課題を解決することを目指した。
積極的にGitコマンドを利用することで、苦手だった、黒い画面でのやりとりへの苦手意識が少なくなった。
サーバー契約し、実際に公開する
当初は、一般公開までするつもりはなかった。
「自分のPCの中だけで、運用できて、ポートフォリオ になればいいなぁ」
くらいに考えていた。
開発していくに連れて、作ったWebアプリに愛着が湧いてきて、
「本番環境に置いて、みんなに見てもらいたい」
と思うようにり、
結果的には、サーバーを契約していた！！！
本番環境に置いたことで、web全体の仕組みの理解を深めることにつながったように思う。
開発後期では、Conohaサーバー内にCloud9を置いた。
それにより、直接サーバーのディレクトリを編集することができたので、作業が捗った。
実際に抱えている問題を解決する
やるなら、自分の身の回りにある課題を解決できるようなシステムを作りたいと思った。
10年近く所属している、団体で感じていた悩みから、このテーマを思いついた。
まだまだ、実運転するには、問題があるので、今後も継続して小さな問題点を解消していきたい。
実際に、使えるアプリになるまで作り込んでいきたい。
その他
スクールで学んだことを盛り込んだWebアプリができた。
ものづくりの楽しさに触れられたのが、一番大きな収穫だったと思う。
実際に開発したことで、Webの仕組みについて、理解が深まった。
レスポンスやリクエスト、サーバーや、IPアドレスなど、
言葉としてしか理解できていなかったことが、実体として理解することができた。
学習してスキルを身につければ身につけるほど、より洗練されたモノが作れるようになることが、
本当に、楽しい。
一方で、自分の苦手とすることや、今後の課題が明確になった。
以下で、課題について記述している。
課題点と今後の展望
フィードバックもらった箇所を改修する
所属している団体の友人に、実際に使用感をフィードバックしてもらった。
（フィードバック内容は、要件定義書の「今後の課題」に記載。）
継続して、開発していく。ひと昔前のWebサイトのよう。。。
Bootstrapの力を借りて、なんとなく良い感じにできているが、、、
PHPを書くことに集中しているため、フロントがダサい。。
JavaScriptを学び、動きのあるWebアプリに改修していきたい。本当は、もっと実装したい機能がたくさんある。例えば、登録したイベントを編集できる機能とか、会員同士の友達登録（フォロー）など、、、、
それらを実装していく
参考文献
HTMLクイックリファレンス
サル先生のGit入門
データベース設計入門#3 テーブル設計の手順【実戦形式で解説】
最後まで、読んでいただきありがとうございます。