こんにちは！デジタルマーケターのウマたん(@statistics1012)です！
WebブラウザでアプリケーションのことをWebアプリケーションと呼びます！
アプリケーションと言えば、スマホのネイティブアプリのイメージが強いかもしれませんがWebブラウザで動くWebアプリケーションも負けていません！
そして、そんなWebアプリケーションであればPython・Javascript・HTML・CSSを使って簡単に作ることが可能です！
Pythonは普段データ解析用の言語として用いているのですが、実はWebアプリケーションを開発するサーバーサイド言語としても使えます。
Pythonは非常に優秀なプログラミング言語なのです。
この記事では、PythonのFlaskというモジュールを用いて簡単なWebアプリケーションを作っていきます！
PythonのFlaskとは？
Webアプリケーションを実装する言語としてはRubyやPHPなどもありますが、Webアプリケーションのロジック部分で数値計算を行うのであればPythonを同時に使用してしまった方がラクです。
高度な数値計算もWebアプリケーション開発も同時に出来てしまうのがPythonの特徴であり最強である所以なのです。
そんなPythonでWebアプリケーションを開発するためにはDjangoを使うパターンとFlaskを使うパターンがありますが、Flaskの方が軽量で簡単に実装が可能なため最初はFlaskでWebアプリケーション開発に慣れたほうが良いでしょう。
複雑なWebアプリケーションを実装する際にはDjangoが必要になってきます。
ちなみにFlaskのリファレンスは以下のサイトを参考にすると良いでしょう！
https://a2c.bitbucket.io/flask/
Flaskを使って実現したいこと
ここでは、数値を入力したら有意差を算出してくれるWebアプリケーションを作成していきたいと思います。
データのやり取りや有意差計算を行うのはPythonになりますが、表示する画面を作るのはHTML・CSS・Javascriptになります。
まずは、有意差計算のための数値を入れる画面をHTML・CSS・Javascriptを使って作ります。そしてAjaxで非同期にデータをサーバーサイドに渡しPythonで有意差計算をしてクライアントサイドに戻し表示するという流れになります。
有意差に関しては詳しく以下の記事にまとめていますのでご覧ください！
Flaskを使ってロジック部分を作る
まずは、PythonのFlaskを使ってロジックを作っていきます。
以下がコードになります。
順番にコードを見ていきましょう！
1 | nc = Flask(__name__) |
こちらはFlaskを定義する部分。おまじないみたいなモノです。
最終的にここで定義したncをrunしてWebアプリケーションを走らせていきます。
1 2 3 | @nc.route("/") def check(): return render_template('sig.html') |
続いて@nc.routeでルートを指定します。Webサイトで言うURLにあたります。
ここでsig.htmlという画面表示部分をレンダリングしています。
sig.htmlについては後で見ていきましょう！
1 2 3 4 5 6 7 8 9 10 11 12 | @nc.route('/output', methods=['POST']) def output(): #json形式でURLを受け取る allA = int(request.json['allA']) allB = int(request.json['allB']) CVA = int(request.json['CVA']) CVB = int(request.json['CVB']) a,b,c,d=chi2_contingency(np.array([[allA,CVA],[allB,CVB]])) return_data = {"result":b} return jsonify(ResultSet=json.dumps(return_data)) |
この部分では、画面上で入力してもらった数値を動的にAjaxでPOST形式でサーバーサイドに送信しています。送信形式はPOSTとGETがありますが、POSTの方が秘匿性が高くなっており今回はPOSTを用いています。
json形式でデータをもらった後は、有意差を計算していきます。今回はAとBのパターンの有意差はカイ二乗検定を行って算出しています。WebマーケティングでありがちなメールのABテストなどを実装できます。
1 2 | if __name__ == '__main__': nc.run(host="127.0.0.1", port=8080) |
最後にこのWebアプリケーションを実装して終了です。
Webアプリケーション表示部分を作る
ロジック部分が出来上がったので、続いてWebアプリケーションの表示部分を作っていきます！
コードは以下です。
ここでは、簡単に見やすいUIを作成することの出来るBootstrapというフレームワークを使っています。
HTMLやCSSの細かい知識がなくても比較的簡単に綺麗な画面を作成することができますが、ある程度の知識は必要です。
BootstrapはTwitter社が作成したフレームワークです。以下細かいリファレンスが載っているので参考にしてみてください。
以下でBootstrapを使って画面部分を記述していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テキスト分析</title> <!-- <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}" /> --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <body> <div class="container"> <h1 class="text-info"> <br>ABテストの有意差計算</h1> <form class="form-inline"> <div class="form-group"> <label>A</label> <div class="row"> <div class="col-md-6"> <input class="form-control" type="text" id="allA" name="allA" placeholder="全体数" required/> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-6"> <input class="form-control" type="text" id="CVA" name="CVA" placeholder="CV数" required/> </div> </div> </div> </form> <form class="form-inline"> <div class="form-group"> <label>B</label> <div class="row"> <div class="col-md-6"> <input class="form-control" type="text" id="allB" name="allB" placeholder="全体数" required/> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-6"> <input class="form-control" type="text" id="CVB" name="CVB" placeholder="CV数" required/> </div> </div> </div> </form> <button class="btn btn-info" id="button1">有意差算出</button> <div></div> <font color='696969' size=5><div id="match1" >有意差は</div></font> |
比較的見やすい画面表示が出来上がりました。
続いて入力された数値を非同期にサーバーサイドに送信していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script type="text/javascript"> $(function(){ $("#button1").on("click", function(){ var textData = JSON.stringify({"allA":$("#allA").val(),"allB":$("#allB").val(),"CVA":$("#CVA").val(),"CVB":$("#CVB").val()}); $.ajax({ type:'POST', url:'/output', data:textData, contentType:'application/json', // 非同期通信が成功したら実行される success:function(data){ var result = JSON.parse(data.ResultSet).result; if(result>0.05){ $("#match1").text("有意であるとは言えない"); } else if(result>0.01){ $("#match1").text("95％有意である"); } else{ $("#match1").text("99％有意である"); } } }); }); }); </script> |
Flaskのルールとして、HTMLファイルはPythonファイルと同じディレクトリ内に「templates」という名前のファイルを作成し、その中に格納しておかなくてはいけませんので注意しましょう。
CSSファイルやJSファイルは「static」ファイルに入れる必要があるのですが、今回はHTMLの中で全て完結させたので問題ありません。
デプロイはherokuというアプリケーションを使って行いました。見てみてください！
※少し読み込みに時間がかかる場合があります
Python flask まとめ
これで有意差計算Webアプリケーションが完成しました。
Flaskを使ってWebアプリケーションを作るのは比較的簡単であることが分かってもらえたと思います。
Pythonはデータ解析やスクレイピングそしてWebアプリケーション作成まで出来る幅広いプログラミング言語！
以下の記事で初心者がPythonを習得する方法についてまとめていますのでよければご覧ください！
