ウイイレのデータ解析ソフトをWEBアプリ化してみよう！二歩目！

## ウイイレのデータ解析自動化してくよ！Part6

## ■はじめに
* どうも **[ヤジュン](https://qiita.com/junya0001000/items/ccb673ba7c07a57e6d8a#%E8%87%AA%E5%B7%B1pr)** です。  
    お久しぶりです。最近twitterの名前に「eスポーツエンジニア」をつけてみました！  
    言ったもん勝ちでしょ！！笑  
![ツイッター紹介.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572321/70ad1177-fab9-55f8-ff57-a1080a714925.png)

## ■本記事の内容
* 今回は、 **「ウイイレのデータ解析アプリの拡張内容の紹介」** です。   
    ※アプリはPythonで書いてます。[■参考URL](https://qiita.com/junya0001000/items/4c90590bdd6b300a74b5#%E5%8F%82%E8%80%83url)    
    
     
## ■アプリどれだけ進化したの！？
* 前回記事から以下の機能が拡張されました。
    1. クリックのみで全てのグラフ作成ができるように調整
    2. データ入力部の作成
    3. 試合結果の各パラメータ一覧の作成（Gauge Chart）
    4. 試合結果の各パラメータ一覧の作成（Radar Chart）
    5. ボール奪取/ロストのヒートマップの作成

### ▼アプリ操作の様子
![](https://i.imgur.com/dDteZL7.gif)


* UI/UX系のデザイン系の知識がないので、各グラフをタブで分けただけです。
    ユーザ操作の導線だけ意識して、以下のようにタブを並べました。
    1. データ読み込み
    2. 試合結果の全体パラメータの平均値一覧
    3. 試合結果の各パラメータの分散をみるための散布図
    4. ボール奪取とボールロストのヒートマップ

* 「データ読み込み」で入れている[データセット例](https://www.dropbox.com/s/e3jgpchbw6k83g0/output_demo.csv?dl=0)も公開しますね！（私ヤジュンの30試合分の結果です。。。照）  
各グラフの見方については、[過去の記事](https://qiita.com/junya0001000)や、[まさ太郎さんの解析レポート](https://www.dropbox.com/s/zqeo69ugst6jfdx/%E8%A7%A3%E6%9E%90%E7%B5%90%E6%9E%9C_Masataro%E9%81%B8%E6%89%8B.pdf?dl=0)をご確認ください。

## ■ちゃくちゃくと集まるデータ
* テスターの皆様のおかげで、データが貯まってきました♪  
    あの **[mayagekaさん](https://www.youtube.com/channel/UC0QJfUvlqqbqNhUMYTFrB2w)** もテスターとして急遽参加してくれました！笑  
    参加してくれたテスターには、データ解析レポートを作成して提供しています。  
    今回 **[まさ太郎さん](https://twitter.com/masataro_19)** のご好意で、レポートを公開してもいいと許可いただきました！[▶興味ある方はクリック](https://www.dropbox.com/s/zqeo69ugst6jfdx/%E8%A7%A3%E6%9E%90%E7%B5%90%E6%9E%9C_Masataro%E9%81%B8%E6%89%8B.pdf?dl=0)  

### ▼レポートのイメージ

![](https://i.imgur.com/zRSQ47b.png)

## ■リリースの予定
* せっかくここまで育ててきたので、リリースを考えています。  
    ウイイレ2021発売後、１か月以内が目標です。  
    完成させるための残課題を棚卸ししました。  
    本プロジェクトは、[git](https://github.com)で管理しています。（ソースコードは非公開ね♡）  
    個人プロジェクトで開発してみたい人にオススメ！！  

## ■残課題
* **①データ管理をcsvファイルから[SQL](https://www.w3schools.com/sql/sql_intro.asp)へ移行**
    * サーバーレンタルが必要で、お金かかるんですよ～。エンジェル投資家いませんか？笑
* **②ユーザ認証機能**
    * SQLでデータ管理する以上、他人のデータの秘匿性を担保しないといけません。  
        ライバルがデータを勝手に見てくる！とか恐怖ですもんね笑
* **③コナミ側との渉外活動**
    * これが一番難易度高いかも。  
        揉め事は嫌なので、コナミの担当者と認められる活動範囲を整合します。      
        コナミの担当者とつなげてくれるエンジェルはいないかな。。。
* **④テスターによる評価**
    * 今までテスターのデータを評価していましたが、テスター側に本アプリを評価してもらわないといけません。
* **⑤グラフの読み方の説明**
    * 「グラフを作る」という「プログラマー」としてのスキルが求められる障壁は本アプリで排除出来ました。  
    残りは「グラフの読み方」という「数学」的なスキルが求められる障壁を排除します。

## ■終わりに
* 楽しんでいただけたでしょうか？
    リリースしたら、ぜひとも皆様に使ってほしい！
    使われたら私のエンジニアとしての実績になります。
    
* 余談ですが、転職活動を始めました！
    業界研究と自己研究のマッチングをしています。
    日々の努力のおかげで、「やってみたいこと」が「やれること」に変わっているのを感じます。
    一度きりの人生なので、ゲームだけでなく職でも自己実現したいですね！

    私に興味持っていただけた方は、気軽にTwitterへDMください♪

## ■参考URL
* [Gauge Charts in Python](https://plotly.com/python/gauge-charts/)  
[InfluxDB+Grafana persistence and graphing](https://community.openhab.org/t/influxdb-grafana-persistence-and-graphing/13761?page=31)  
[Gauge Examples and Reference](https://dash.plotly.com/dash-daq/gauge)  
[Plot dcc graph on callback not working](https://community.plotly.com/t/plot-dcc-graph-on-callback-not-working/11520)  
[Upload Component](https://dash.plotly.com/dash-core-components/upload)  
[Using dash upload component to upload csv file and generate a graph](https://stackoverflow.com/questions/60223161/using-dash-upload-component-to-upload-csv-file-and-generate-a-graph)  
[複数のグラフを重ねる](http://harmonizedai.com/article/%E8%A4%87%E6%95%B0%E3%81%AE%E3%82%B0%E3%83%A9%E3%83%95%E3%82%92%E9%87%8D%E3%81%AD%E3%82%8B/)  
[Built-in Continuous Color Scales in Python ](https://plotly.com/python/builtin-colorscales/)
[かっこいいReadme](https://github.com/plotly/dash-alternative-viz)  
[class plotly.graph_objects.Scatterpolar](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Scatterpolar.html)  
[Udemyのplotly dashの学習コース](https://www.udemy.com/course/interactive-python-dashboards-with-plotly-and-dash/learn/lecture)