ウイイレの解析ソフトをWEBアプリケーション化してみよう！一歩目！

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

## ■はじめに
* どうも[ヤジュン](https://qiita.com/junya0001000/items/ccb673ba7c07a57e6d8a#%E8%87%AA%E5%B7%B1pr)です。
    最近本業が忙しくて、記事を書くことができませんでした...（ださすぎ）  
    今回の記事は、 **作成してきたソフトの「WEBアプリケーション化」を目指した一歩目の軌跡** を紹介します。  
    ※本記事は[シリーズもの](https://qiita.com/junya0001000)なので、前回記事と読み合わせることをお勧めします。  
※本記事のソフトは、Pythonで作成しています。[■参考URL](https://qiita.com/junya0001000/items/036b3e612aeca21c013d#%E5%8F%82%E8%80%83url)
    
## ■目的
* WEBアプリケーション化の第一歩として、  
    「ブラウザで対話的に動作するグラフを作成する」ことにしました。  
    ※筆者はWEBアプリ作成の経験も知識もありません。


## ■ライブラリの選定
* 今回使用したのは[Dash](https://dash-gallery.plotly.host/Portal/)です。
    グラフ表示と相性がよく、APIが綺麗にラップされているので、簡単に使用できます。

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

    （図は、[Dashで作成されたアプリの例](https://dash-gallery.plotly.host/dash-manufacture-spc-dashboard/)！かっこいい！）
    
    今後、どこまでアプリをリッチしていくかは何も計画してないので、
    [django](https://www.djangoproject.com/)で作っても良かったかも！！
    プロジェクトの終着点が見えてない場合は、拡張機能ベースでライブラリを選定しておいて問題ないと思っています。

## ■実際に使用してみよう！
* デモとして作成した図の外観はこちら！   
 
![](https://i.imgur.com/TaYBTl1.png)
    
* 中央図は、[part2の記事で書いたもの](https://qiita.com/junya0001000/items/d97e1d3596b85892e767#%E3%83%92%E3%82%B9%E3%83%88%E3%82%B0%E3%83%A9%E3%83%A0%E6%95%A3%E5%B8%83%E5%9B%B3)と同じです。   
    X/Y軸の2つのパラメータ分布に対して、3つ目のパラメータがどのような関係を持っているかを、マーカーの色や形で分かるグラフです。  
   
    右の２つの図は、中央図のX/Y軸パラメータの[カーネル密度推定](https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%BC%E3%83%8D%E3%83%AB%E5%AF%86%E5%BA%A6%E6%8E%A8%E5%AE%9A)です。 
    ※ざっくり「計測してない未知のデータを推定するために、計測データから作られたモデル」です！ 
    
    左のドロップリストからの入力で、グラフの各種パラメータを変更することが可能です。  
    では、左のドロップリストをベースに、操作方法を説明していきます！
    
### ▶X-axis & Y-axis
* X/Y軸にセットするパラメータを選択できます。  
    ここにセットされたデータは、上で述べたように、右図の分布図ともリンクしています。  
    下のGifでは、X軸に「攻撃エリア中央の比率」Y軸に「パス成功率」をセットしています。  

![](https://i.imgur.com/NCsgzec.gif)


### ▶Color & Shape
* プロットの形と色を、どのパラメータによって分けるかを指定できます。  
    Colorのセット値は、右図の分布図の線ともリンクしています。  
    下のGifでは、試合結果の「勝」「敗」「分」で、プロットの色と形を変更しています。

![](https://i.imgur.com/kLqiWQO.gif)


### ▶Divide_Col & Divide_Row
* 情報が多すぎて図を見づらい場合、X/Y軸のパラメータによってグラフを分割できます。
    下のGifでは、試合結果の「勝」「敗」「分」でグラフを分割しています。

![](https://i.imgur.com/GI5XbVR.gif)

## ■本変更のメリット
* メリットは、以下の２つです。
     「情報毎にソフトウェアを書き換える必要がない」
     「解析者とユーザがデータをリアルタイムに見れる」
    例えば、大会の解説者が
    
        「この大会ではカウンター主体のチームは、苦戦してますね」
        
    といっても、解説者の感覚は観衆に伝わらないことがあります。
    そういった場面で、大会のデータから、「ポゼッション」や「ボール奪取数」などをグラフで見せることで、観衆の理解を助けるのです。
    
        「たしかに！データからもポゼッション45%以下のチームはほとんど勝ててないですね！」みたいな感じ

    市場やコミュニティを広げるには、何も分からないエントリー層への敷居をどれだけ下げれるかが重要です。データの可視化は手段の一つとして有力だと思います。

## ■ソフト開発の裏話
* 実は、アプリ開発より内部で使用するAPI作成のが難しかったりするんです。  
    アルゴリズムを組み合わせて、期待する能力にするには数学的センスが必要だったりするんです。 
    ただ、導線を考えて「使いやすい」「分かりやすい」「カッコいい」UIを作るのは、API作成と同じくらい難しいと思います。  
    ユーザを意識した開発は楽しくて、燃えますけどね！笑

## ■今後の展望
* 以下の機能を追加します。  
   1. アプリのデザイン設計  
   1. アカウント登録機能  
   1. データ管理付与
   1. 動画解析  
          （[オプティカルフロー](https://ai-scholar.tech/articles/deep-learning/optical-flow-89)を実装予定です。  
          得失点時の全選手の動きを軌跡で見れたら、何か分かりそうだよね～。  
          現実のサッカーでも取り入れられてますね。[参考URL](https://www.jstage.jst.go.jp/article/bplus/10/1/10_29/_pdf)  
          ざっくり業界調査したけど、現在のサッカー業界の分析だったら、俺に給料払った方が色んな解析してあげられるに！って思ったのはナイショ）
        
### ▼将来は、ソフトの基本機能は無料で使えるようにして、一部のサービスはマネタイズしたい
   1. 動画解析
   1. 他プレイヤーのデータライブラリへのデータアクセス権
   1. データアナリスト（しかも国体準優勝者）による個人用レポート分析
   1. 月次/週次くらいでユーザ全体の傾向をまとめたレポート配信
   1. 大会ごとの分析  
         とか

## ■おわり
* 今回はここまで！！
    アプリの配信はまだまーだ先です。力と工数不足です(´;ω;｀) 
    これからも続けて行くので、Part5をお楽しみに！！

    PS:テスターの方にお願いした30試合って多かったかも。。。汗
    30試合分提出してくださったのは、ちゃまさんとFDさんだけです笑

## ■参考URL
1. [Graphing Libraries](https://plotly.com/python-api-reference/generated/plotly.express.histogram.html)
1. [Dash Layout](https://dash.plotly.com/getting-started)
1. [Plotlyで複数のグラフを表示させる](https://python-analytics.hatenadiary.jp/entry/2018/07/08/174409)
1. [Two graphs, side by side](https://community.plotly.com/t/two-graphs-side-by-side/5312/2)
1. [In depth documentation](https://community.plotly.com/t/in-depth-documentation/8190)
1. [【Dash】Pythonでデータ可視化その2【コールバック導入】](https://biz-navi.site/python-dash2/)
1. [ Introducing Plotly Express ](https://medium.com/plotly/introducing-plotly-express-808df010143d)