学園祭において混雑可視化マップを作成および提供した話

<h1>きっかけ</h1>
　昨年度の学園祭における来場者アンケートでは、最後の「学園祭について、よかった点や改善点はありますか？」という設問において、自由記述であるにも関わらず、模擬店での混雑に関するご指摘が有効回答数451件のうち、50件ほどにも及びました。そのため、学園祭における混雑緩和は喫緊の解決するべき課題であると考えました。そこで、かつての先輩方からのご意見や昨年度における事例を踏まえ、現状における問題点をメンバーと検討したところ、「混雑が集中していること」があげられました。販売品目に関わらず、人通りが多い通路に面している模擬店は人目につきやすいため、人が集まりやすく混雑になりやすいものの、閑散としている通路に面している模擬店は、これらの場所を来場者が通りにくいことあり、混雑になりにくく、お昼時でも混雑していないことがありました。
そこで、現状のこの問題点を解決するべく、この「学園祭における模擬店における混雑可視化マップのためのWebアプリケーション」を考案し、開発を決定いたしました。このアプリでは来場者にとって、使いやすく、分かりやすい形を目指し、開発をすることとしました。

<h1>利用した技術</h1>
<h3>バックエンド</h3>
    <h4>Amazon Web Service</h4>
    ・Cognito<br/>
    &ensp;&ensp;認証機能の実装のために利用<br>
    ・WAF<br>
    &ensp;&ensp;セキュリティ対策のため<br>
    ・AppSync<br>
    &ensp;&ensp;GraphQLサーバ実装のため<br>
    ・Lambda<br>
    &ensp;&ensp;バックエンドプログラム実行のため<br>
    ・DynamoDB<br>
    &ensp;&ensp;混雑データ保存のため<br>
    ・CloudFormation<br>
    &ensp;&ensp;Serverless Frameworkによるリソースのデプロイのため<br>
    ・Route53<br>
    &ensp;&ensp;ドメインのルーティングのため<br>
    <h4>IaCツール</h4>
    ・Serverless Framework<br>
    &ensp;&ensp;以前から個人的に学習していたこともあり、折角の機会であったため、利用しました<br>
    <h4>ホスティング</h4>
    ・AWS Amplify (学園祭実行委員向けページ)<br>
    &ensp;&ensp;Cognitoによる認証機能を利用したかったため<br>
    ・Vercel (来場者向けページ)<br>
    &ensp;&ensp;Next.jsアプリケーションデプロイのため<br>

<h3>フロントエンド</h3>
    ・Next.js<br>
    ・Material UI<br>
    ・Styled-Components<br>
    ・TypeScript<br>

<h3>構成図</h3>

![構成図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/c10d7f17-45a6-3f86-1145-15fd405811a6.png)

<h1>アプリケーションの様子</h1>

|アプリの全体|店舗情報表示の様子|他企画情報表示の様子|
|---|---|---|
|![11111.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/ef50a2c1-d534-4023-4474-a43b41fba44f.jpeg)|![あえwふぁs.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/2da87b92-3498-9a37-f519-b1edea6a862c.jpeg)|![33333.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/07fb6b88-4fa3-84d9-7f75-6c9f1f213f13.jpeg)


|店舗検索の様子|関連情報表示の様子|学園祭実行委員会用ページの様子|
|---|---|---|
|![4444.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/7adaa8f4-d343-62a3-7fbc-a094d0dcd041.png)|![55555.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/f08b8e04-b510-f4bc-c062-14bdc0aaf963.jpeg)|![66666.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/03f70c45-133d-d04b-b263-7c556705a7a4.jpeg)



<h1>アプリケーションにおいて工夫したこと</h1>
・IaCツールの利用<br>
&ensp;&ensp;IaCツールである「Serverless Framework」を用いてAWSリソースを管理することにより、保守性を向上させることができました。<br><br>
・広範なAWSサービスの特徴やその利用法<br>
&ensp;&ensp;今回のアプリケーションでは「AppSync」「Route 53」「Lambda」「DynamoDB」、「WAF」、　「Cloudformation」、「Congito」、「Amplify」など要件に適したAWSに関連するサービスを利用しました。<br><br>
・セキュリティに考慮したサービス設計<br>
&ensp;&ensp;学園祭実行委員会以外のユーザが混雑状況を変更できないようにするために、今回のアプリケーションでは　事業部員向けページと来場者向けページで分けるような設計にしました。そして、同様に来場者が混雑状況を変更できないようにするために、Next.jsのISRの機能を用いることやLambdaにて認証形式に基づいて実行できる関数に制限をつけることにしました。加えて、WAFを介してAppSyncにアクセスすることにより、Dos攻撃をはじめとしたサーバ攻撃への対策も施しました。<br><br>
・ドメイン駆動設計を意識したソースコードの設計<br>
&ensp;&ensp;ドメイン駆動設計を意識したソースコードの設計を図ることにより、保守性や設計の効率性を向上させることができました。<br><br>

<h1>このアプリケーションによって得られた実績</h1>
<h4>来場者アンケートの結果</h4>
来場者に向けて「模擬店における混雑可視化マップの満足度について教えてください」というアンケートを実施したところ、391件の回答を得ることができ、下のような結果になりました。グラフは数字が高いほど満足度が高くなっています。この結果から分かるように、来場者からは大きな満足度を得られていることが分かりました。また、その平均値も約3.96となっており、全体的にも大きな満足度を得ることができました。　

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/c3457ed5-8855-87ed-0c91-576ecbe0a49f.png)

<h4>出店団体へのアンケートの結果</h4>
出店した模擬店とフリーマーケット団体に対して「昨年度までと比べて混雑は解消されていましたか？」というアンケートを実施したところ、52店舗中24店舗の回答を得ることができました。昨年度の来場者が約10000人であったのに対し、今年度は来場者数が増加し、12/13(水)時点で判明している来場者が約14000人となっています。来場者数が約1.4倍に増加しており、店舗数も2店舗しか増えていないにも関わらず、昨年度よりも混雑を解消されていないと感じた店舗よりも混雑を解消されたと感じた店舗の方が多いことから、混雑解消を図ることができたと評価することができます。そのため、開発した「混雑可視化マップのためのWebアプリケーション」は模擬店の混雑解消の効果を示すことができたと考えています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/17562d75-563e-9e7e-621b-a5607578b914.png)

<h4>当日の様子</h4>
右の写真は当日の学園祭における午後２時ごろの昨年度において閑散としていた通路の様子です。昨年度は同時刻において同じ場所は人通りが少なく閑散としていましたが、今年度は下の写真から分かるように混雑している様子を見ることができました。そのため、混雑の分散化にも一定の効果を図ることができました。　

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/2fd1de81-366b-cf13-daa3-08dab9046b41.png)

<h4>当日のアクセス数について</h4>
来場者向けページにおける12/10(日)のアクセス回数は約1000回を記録することができました。来場者が約14000人であったため、およそ14人に1人がアクセスするような結果になりました。これは周知不足と言わざるを得なく、次年度以降はさらなる宣伝を図っていきたいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2699602/b1f9ce8f-d3de-69ee-898f-4c04b381f924.png)

<h1>さいごに</h1>
<p>長くなりましたが、最後までご覧いただき、ありがとうございました。混雑解消に一定の効果を示すことができたため、とても貴重な機会を得ることができました！しかし、宣伝不足やアクセス数の少なさなど、至らぬ点も多々あったため、次年度以降において改善を目指していきたいと思います！！</p>