初心者が6ヶ月で6本のアプリを開発してみた

##はじめに
会社の同期3人を集め、個人でアプリ開発を行いました。
使ったことのない技術・流行りの技術を使って試行錯誤した結果、
1ヶ月で1本(計6本)の作成まで漕ぎ着けました！

今回はそのアプリの紹介ページになります。
初心者でもここまでできるんだと、参考になれば幸いです。

##第１作目
[作ったもの]
![スクリーンショット 2019-10-13 20.32.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/24e5d7d7-b57c-e1c1-a147-2ab9d9a0cbb1.png)

[ページはこちらをクリック（Man In The Mirror）](https://s3-ap-northeast-1.amazonaws.com/upallnightfirstproduct/inputName.html)
※最初に名前入力を求められますが、空白のまま「起動」ボタンをクリックしていただいて構いません。

[概要]
架空のゲーム紹介サイト

[やりたかったこと]
HTML5をフルに使った、見応えのあるWebページ

[仕様技術]
・HTML5
・CSS
・javascript
・AWS S3

[こだわりポイント]
webStorageを使って、入力した名前データをブラウザーのストレージに保管しています。
これにより、遷移先のページ上で主人公の名前が入力した値になるUXデザインを体験できます。

より詳しく知りたい方は[Qiitaの別記事](https://qiita.com/UpAllNight/items/9f8a368866f3c7220688)を参照してください。

##第2作目
[作ったもの]
![login.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/4cf80a49-1b94-e89f-4a6c-b8da7e729858.jpeg)
[ページはこちらをクリック（Chat Room）](https://s3-ap-northeast-1.amazonaws.com/upallnightsecondproduct/index.html)

[概要]
匿名のチャットを行えるWebサイト

[やりたかったこと]
WebAPIをフルに使った、デザイン特化のチャットアプリ

[仕様技術]
・HTML5
・CSS
・javascript
・AWS S3
・AWS lambda(python3)
・AWS DynamoDB
・AWS APIGateway

[アーキテクチャ]
![Untitled Diagram-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/f1868ace-d767-a76c-2a82-ec3a410d785d.png)

[こだわりポイント]
最初に入力したルーム名を元に、過去のチャット情報を表示します。
チャットの内容は全て英語に変換され、ネオンの装飾付きで表示されるため、
まるで夜のニューヨークに紛れ込んでしまったのかという、想像力を掻き立てる仕様になっています。

より詳しく知りたい方は[Qiitaの別記事](https://qiita.com/UpAllNight/items/6bd9886a892fe495fe8b)を参照してください。

##第3作目
[作ったもの]
![image1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/8b9e9324-cdb5-526b-dce7-ad0d41f1cf21.gif)

※LINE無料アカウントの友達上限数の関係で、公開していません。

[概要]
LINEから[Benefit Station](https://bnft.jp/smp/m/t/top.faces)上のクーポン情報を検索できるツール

[やりたかったこと]
LINEAPIを使ったシンプルなアプリケーションの作成

[仕様技術]
・LINE API
・スクレイピング
・AWS lambda(python3)
・AWS APiGateway

[こだわりポイント]
Benefit Stationのクーポン検索がごちゃごちゃしてわかりにくかったため、
LINEAPIを使用して、LINE上の操作のみでクーポンの検索から使用までを実現しました。

より詳しく知りたい方は[Qiitaの別記事](https://qiita.com/UpAllNight/items/6cc0eb3fde637b9fe614)を参照してください。

##第4作目
[作ったもの]
![スクリーンショット 2019-10-14 19.29.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/e30c855c-cd8b-1cb5-f09a-4b97f2019e36.png)

※Colaboratoryのソースになるため、外部公開はしていません。

[概要]
Google Colaboratory(無料python実行環境)を使用した、競艇予想

[仕様技術]
・Google Colaboratory
・スクレイピング
・機械学習ライブラリ(scikit-learn)

[こだわりポイント]
分類器を使用して、予測性能の良いモデルを選定しました。
3連単で約10%、2連単で約25%の正答率を誇るモデルになっています。

より詳しく知りたい方は[Qiitaの別記事](https://qiita.com/UpAllNight/items/75510eb4c501a6667f6a)を参照してください。

##第5作目
[作ったもの]
<img alt="originalAR.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/2939469a-70f0-b41e-75f2-450fcc149f04.gif">
※appleストアの公開は課金が必要なため、公開していません。

[概要]
空間上に好きな文字やアイテムを配置することができるARアプリ

[仕様技術]
・Unity
・ARKit
・C#

[こだわりポイント]
メニュー画面とアイテム配置画面を切り替えることで、好きなアイテムの選択を可能にしています。(地味にオープニングも作成しています。)
自分の好きな文字が大きく空間上に表示されるため、インスタ映えできる写真撮影が可能です。

より詳しく知りたい方は[Qiitaの別記事](https://qiita.com/UpAllNight/items/92982719ed1a55d26be3)を参照してください。

##第6作目
[作ったもの]
![BoatRace_predict (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/79444abe-5dbc-7511-f43c-f5ed28e632db.png)

※会員限定サイトとして作ったため、公開はしていません。(画像は開発中のものです)


[概要]
競艇の結果をリアルタイムで予想してくれる会員制Webサイト

[仕様技術]
・AWS Lambda(python3)
・AWS APIGateway
・AWS Cognito
・AWS S3
・スクレイピング
・HTML5
・CSS
・javaScript
・デープラーニングライブラリ(TensorFlow)

[アーキテクチャ]
![Untitled Diagram (2) (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378268/c7bc86cb-26bc-4128-bf24-41a883b6c9f2.png)
※Lambdaの箇所について実際は、複数のLambda関数を組み合わせて作成しています。

[こだわりポイント]
サーバーレスアーキテクチャで予想(デープラーニング)を行うよう作りました。
第4作目のモデルから大幅に精度を上げ、3連単的中率40%を実現しています。

より詳しく知りたい方は[Qiitaの別記事](https://qiita.com/UpAllNight/items/9e77a5ade72084ab2ba2)を参照してください。

##作った記事一覧(計36本)
作ってきた内容については、必ずQiitaの記事でアウトプットしてきました。
記事として書くことで、あいまいだった箇所について理解が深まったと思います。
よければ、見ていってください。(かなり頑張りました！)

**◆AWS (サービス解説)**
[【初心者向け】DynamoDBを理解する〜Pythonを用いた取得パターン特化編〜](https://qiita.com/UpAllNight/items/a15367ca883ad4588c05)
[【初心者向け】S3でWebページを公開するための究極完全体マニュアル](https://qiita.com/UpAllNight/items/7add9831f379274c557c)
[【Python3】LINE APIとLambda連携〜最速・速習メソッド〜](https://qiita.com/UpAllNight/items/6230a3a4b705e66c9177)
[【AWS】楽々SQS解説〜5分で理解〜](https://qiita.com/UpAllNight/items/7c5022661a1eadc8a88a)
[【AWS】これだけ見れば理解できるCognito〜認証機能つきサーバレスアーキテクチャの作成〜](https://qiita.com/UpAllNight/items/ec522da70a6fe86a1d16)
[【初心者向け】IAM完全攻略アルティマニア](https://qiita.com/UpAllNight/items/c675cad17221033efd21)
[【AWS】APIGateway・Lambda動作の流れをわかりやすく解説](https://qiita.com/UpAllNight/items/8a347be69db7653657d0)
[【AWS】決定版！最速でpython3.7仮想環境を１から構築](https://qiita.com/UpAllNight/items/62a02829cd291174016b)

**◆AWS (資格)**
[おめでとうございます。これであなたもAWS ソリューションアーキテクト アソシエイトに合格です。〜主要サービス編〜](https://qiita.com/UpAllNight/items/076ae92c21855fc3bec1)
[おめでとうございます。これであなたもAWS ソリューションアーキテクト アソシエイトに合格です。〜その他サービス編〜](https://qiita.com/UpAllNight/items/5e78c347d807f2b35406)

**◆AWS (実践編)**
[スクレイピングしてクーポンを取得するLINE Bot作ってみた！](https://qiita.com/UpAllNight/items/6cc0eb3fde637b9fe614)
[【初心者向け】初めてのチャットアプリ作成〜AWSを使ったサーバーレスアーキテクチャ〜](https://qiita.com/UpAllNight/items/6bd9886a892fe495fe8b)
[【初心者向け】初めてのチャットアプリ作成で詰まったこと](https://qiita.com/UpAllNight/items/ee817eefecac2e6ef85f)

**◆言語**
[【初心者向け】JavaGoldが解説するPythonの基礎 パート１](https://qiita.com/UpAllNight/items/dea9543741622a03bb13)
[【初心者向け】JavaGoldが解説するPythonの基礎 パート2](https://qiita.com/UpAllNight/items/1b25dd008cd0755e934a)
[【初心者向け】JavaGoldが解説するJavaScriptの構文について](https://qiita.com/UpAllNight/items/91441d12bad70f13615c)


**◆Unity**
[Unityでインスタ映え？するAR作ってみた。](https://qiita.com/UpAllNight/items/92982719ed1a55d26be3)
[空間の魔術師〜Unityで思うがままにデコるAR作ってみた〜](https://qiita.com/UpAllNight/items/35f8d611e8f8d48fec62)
[【PUN2】Unityでオンラインマルチプレイを爆速で実装する](https://qiita.com/UpAllNight/items/43e1b24301eb6029f18b)
[【Unity】自分の思い描いたキャラクターを作成し、最速で動かす](https://qiita.com/UpAllNight/items/317708069d1ed3ff0486)

**◆機械学習・ディープラーニング**
[【ディープラーニング】初心者が競艇予想ツールを作成するために学んだディープラーニングについて_知識編](https://qiita.com/UpAllNight/items/b2eae4fb598e1bfd5d49)
[【ディープラーニング】初心者が競艇予想ツールを作成するために学んだディープラーニングについて_実装編①](https://qiita.com/UpAllNight/items/deb6f42ef409c4f946d4)
[【ディープラーニング】初心者が競艇予想ツールを作成するために学んだディープラーニングについて_実装編②](https://qiita.com/UpAllNight/items/773396f3070eb9b3382d)
[【初心者向け】機械学習モデルをAWS Lambdaで使って競艇予想APIを爆誕させました！！　～with Serverless ~](https://qiita.com/UpAllNight/items/c081aa7f0ee1f40c1e89)
[【機械学習】初心者が競艇予想ツール作成して金儲け大作戦](https://qiita.com/UpAllNight/items/75510eb4c501a6667f6a)
[初心者が6か月学んだことを生かして会員制競艇予想サイトを作ってみた！](https://qiita.com/UpAllNight/items/9e77a5ade72084ab2ba2)

**◆Web技術**
[初めてのCSS〜ボックスモデルでの設計方法〜](https://qiita.com/UpAllNight/items/51592b7ea1f13e29381c)
[初めてのjQuery](https://qiita.com/UpAllNight/items/a0d9be73cf90902d0351)
[初めてのアニメーション！オススメライブラリ集](https://qiita.com/UpAllNight/items/378de397c899193403d9)
[初心者がチーム組んでWebサイトを立ち上げてみた](https://qiita.com/UpAllNight/items/9f8a368866f3c7220688)
[スマホ対応　〜レスポンシブWebデザイン実現に向けて〜](https://qiita.com/UpAllNight/items/5fd9206106924914da9f)

**◆その他**
[これから開発チームのリーダーになるあなたへ～最低限の標準化について～](https://qiita.com/UpAllNight/items/e1d020b6318db0de3176)
[【まとめ】決定版！現場でよく使うDb2コマンド集](https://qiita.com/UpAllNight/items/4ed089a22487d1856daf)
[【まとめ】ライバルには教えたくないIT用語100本ノック](https://qiita.com/UpAllNight/items/15a9fc205fdbdba24533)
[【PowerShell】爆速Excelグレップツール(詳細解説付き)](https://qiita.com/UpAllNight/items/68131d1ba3b56c6c89c3)
[初めてのGitHubの導入から利用方法まで。SVNとの違いも！！](https://qiita.com/UpAllNight/items/fbcd22c04891e50c9ec3)

##最後に
HTMLやpython、AWS、AI・ARなど一切使用したことない技術をふんだんに使い、
自分たちなりに面白いものを考え作ってみました。
個人開発でしか得られない知識や、充実感が得られ、とても良い経験ができたと思っています。

私たちの活動によって、他の誰かのやる気やアイディアに繋がり、
Qiita界隈の良い循環を生み出してくれればと願います。