初心者が6か月学んだことを生かして会員制競艇予想サイトを作ってみた！

#はじめに
今年の3月から6か月間にわたってWebサイトから機械学習、ARなど様々な技術を学び、
1か月ごとに成果物を作成してきました！

最後の6か月目となる今回はその集大成として会員制の競艇予想Webサイトを作成しました！

会員制ですので残念ながら皆様にWebサイトをご利用いただくことはできませんが、
今回のプロジェクトについて共有させていただきます！

#アジェンダ
######1.作ったものについて
######2.環境について
######3.Webサイトの構成について
######4.実装・サービスの設定内容について
######5.最後に

#1.作ったものについて
今回作成したのは以下のような競艇予想のWebサイトです。
![BoatRace_predict.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/48c5d670-77c5-257b-5c07-f36a0acd366b.png)
こちらのサイトは[以前投稿したディープラーニングの記事](https://qiita.com/UpAllNight/items/773396f3070eb9b3382d)で説明した競艇の順位予想を行う機械学習モデルを使用し、単勝予想・3連単予想結果を画面に表示するようになっています。

これであわよくばお金儲けができればなぁ　と考えておりますw

![tngw.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/bb96ab6c-7022-76dc-3f23-5fd16c8e906f.jpeg)

#2.環境について
使用した言語は以下の通り
・HTML
・CSS
・javascript
・Python

今回もAWSのサービスを使用しています。
使用したサービスは
・S3
・Lambda
・API Gateway
・Dynamo DB
・Cognito  
 です。

#3.Webサイトの構成について
![Untitled Diagram (2) (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/c7bc86cb-26bc-4128-bf24-41a883b6c9f2.png)

こちらの図では説明が簡略化されているため、各AWSのサービスごとに何をしているのかをもう少し詳しく説明します。

######①Cognito
会員制Webサイトを実現するために、ユーザはまずCognitoにて認証を行います。
認証結果が問題なければ（＝登録済みのユーザであれば）リダイレクトによりS3で公開している競艇予想のWebサイトにアクセスします。

######②S3
競艇予想のWebサイトをホスティング機能を使用して公開しています。
Webサイトでは予想したいレースの基本情報（日付、競艇場名、レース番号）を入力し、API Gatewayを経由してLambdaにアクセスします。
Lambdaからのレスポンスには競艇の予想結果が含まれています。
こちらを画面に表示することで競艇の予想結果が確認できる仕組みとなっています。

######③API Gateway
API GatewayはLambdaのエンドポイントとして使用します。

######④Dynamo DB
Dynamo DBには機械学習モデルで予想した結果を格納します。

######⑤Lambda
Lambdaでは最初にDynamo DBに入力されたレースの予想結果が格納されているのかを確認します。
予想結果が存在する場合はそのレコードをWebサイトに返却します。
まだ予想が行われていない場合は機械学習モデルを使用して予想を行い、その予想結果はWebサイトに返却し、Dynamo DBに登録しておきます。

#4.実装・サービスの設定内容について
前章ではWebサイトの構成について説明しました。

各サービスごとの実装・設定内容については別記事で説明しておりますので、そちらを紹介させていただきます。

######①Cognito
Cognitoの設定については以下の記事で説明した内容を元に行いました。
・[【AWS】これだけ見れば理解できるCognito〜認証機能つきサーバレスアーキテクチャの作成〜](https://qiita.com/UpAllNight/items/ec522da70a6fe86a1d16)

######②S3
S3ではHTML・CSS・jacascriptをアップロードし、Webサイトを公開しています。
S3については以下の記事を元に静的ウェブサイトホスティングの設定を行いました。
・[【初心者向け】S3でWebページを公開するための究極完全体マニュアル](https://qiita.com/UpAllNight/items/7add9831f379274c557c)

######③API Gateway
API Gatewayの設定は以下の記事を元にS3とLambda間のアクセスを行えるように設定しました。
・[【AWS】APIGateway・Lambda動作の流れをわかりやすく解説](https://qiita.com/UpAllNight/items/8a347be69db7653657d0)
・[【初心者向け】初めてのチャットアプリ作成で詰まったこと](https://qiita.com/UpAllNight/items/ee817eefecac2e6ef85f#2s3api-gatewayのcors設定-の解決について)

######④Dynamo DB
Dynamo DBはプライマリパーティションキー(日付と競艇場番号の組み合わせ)とプライマリソートキー(レース番号)を元にレース結果をList形式で格納するように設定しております。

格納されるレコードは以下のようなイメージです。
![スクリーンショット 2019-10-22 22.31.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/6109da32-44c4-c733-e331-fd854023091c.png)

格納されているレコードはLambdaから以下の記事で説明した方法で取得しております。
・[【初心者向け】DynamoDBを理解する〜Pythonを用いた取得パターン特化編〜](https://qiita.com/UpAllNight/items/a15367ca883ad4588c05)
######⑤Lambda
Lambdaの実装・設定については以下の記事で説明した通りです。
・[TensorFlowをAWS Lambdaで使って競艇予想APIを爆誕させました！！](https://qiita.com/UpAllNight/items/c081aa7f0ee1f40c1e89)

#5.最後に
今回で6ヶ月間の開発は終了となりました。

6ヶ月の開発期間で当初からやりたかったこと（Web開発、機械学習、AWSサービスの利用）に加えてARの開発も実施できました！
開発中はもちろん苦労したことや詰まったこともありましたが、最終的には毎月成果物を作成できたことは自分達にとって大きな自信となりました！

今後の開発は未定ですが、もしまた何か作りましたら紹介させていただきます！