こんにちは！
データサイエンティストでありながら最近はWeb開発に没頭しているウマたん(@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://msiz07-flask-docs-ja.readthedocs.io/ja/latest/
Flaskを使って実現したいこと
ここでは、数値を入力したら有意差を算出してくれるWebアプリケーションを作成していきたいと思います。
データのやり取りや有意差計算を行うのはPythonになりますが、表示する画面を作るのはHTML・CSS・Javascriptになります。
まずは、有意差計算のための数値を入れる画面をHTML・CSS・Javascriptを使って作ります。
そしてAjaxで非同期にデータをサーバーサイドに渡しPythonで有意差計算をしてクライアントサイドに戻し表示するという流れになります。
有意差に関しては詳しく以下の記事にまとめていますのでご覧ください！
Flaskを使ったロジック部分の例を見てみよう
まずは、PythonのFlaskを使ってロジックを作っていきます。
以下がコードになります。
順番にコードを見ていきましょう！
nc = Flask(__name__)こちらはFlaskを定義する部分。おまじないみたいなモノです。
最終的にここで定義したncをrunしてWebアプリケーションを走らせていきます。
@nc.route("/")
def check():
return render_template('sig.html')続いて@nc.routeでルートを指定します。Webサイトで言うURLにあたります。
ここでsig.htmlという画面表示部分をレンダリングしています。
sig.htmlについては後で見ていきましょう！
@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テストなどを実装できます。
if __name__ == '__main__':
nc.run(host="127.0.0.1", port=8080)
最後にこのWebアプリケーションを実装して終了です。
Webアプリケーション表示部分の例を見てみよう
ロジック部分が出来上がったので、続いてWebアプリケーションの表示部分を作っていきます！
コードは以下です。
ここでは、簡単に見やすいUIを作成することの出来るBootstrapというフレームワークを使っています。
HTMLやCSSの細かい知識がなくても比較的簡単に綺麗な画面を作成することができますが、ある程度の知識は必要です。
HTMLやCSSについて勉強したい方は以下の記事をご覧ください。
BootstrapはTwitter社が作成したフレームワークです。
以下細かいリファレンスが載っているので参考にしてみてください。
以下でBootstrapを使って画面部分を記述していきます。
<!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>比較的見やすい画面表示が出来上がりました。
続いて入力された数値を非同期にサーバーサイドに送信していきます。
<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>ここでJavascriptの出番です。Javascriptは少し複雑なのですが、非常に重要なのでおさえておきましょう。
以下の記事で勉強方法についてまとめています。
ここでは、非同期処理（Ajax処理）といってボタンを押すと同時にサーバーサイド側にデータを送り計算結果を受け取り画面に表示する処理をJavascriptで記載しています。
画面遷移せずに処理を行う非同期処理は様々な場面で使うので覚えておきましょう。
ちなみにFlaskのルールとして、HTMLファイルはPythonファイルと同じディレクトリ内に「templates」という名前のファイルを作成し、その中に格納しておかなくてはいけませんので注意しましょう。
CSSファイルやJSファイルは「static」ファイルに入れる必要があるのですが、今回はHTMLの中で全て完結させたので問題ありません。
続いて簡易的にアプリを一時的にデプロイできるngrokというツールを使っていきます。
ngrokに関しては以下の記事をチェックしてみてください！
https://toukei-lab.com/ngrok
今回作ったアプリをベースにGoogle Colabにてngrokで有意差計算アプリを実行するコードを置いていきますので参考にしてみてください。
途中のAuthtokenは自分でngrokに登録して取得し記載する必要があります。
https://colab.research.google.com/drive/19Vl_y4UOsI2JFNE0EOB5rHscBAstj4Yi?usp=sharing
Python flask まとめ
これで有意差計算Webアプリケーションが完成しました。
Flaskを使ってWebアプリケーションを作るのは比較的簡単であることが分かってもらえたと思います。
Flaskに関しては以下の僕のUdemy講座で勉強できるのでぜひチェックしてみてください！
【実践】ビジネスケースとつなげてPythonで出来ること5つを学べる3日間集中コース
| 【オススメ度】 | |
|---|---|
| 【講師】 | 僕！ |
| 【時間】 | 3.5時間 |
| 【レベル】 | 初級～中級 |
Pythonで出来ることのうち以下の5つを網羅して学んでいきます。
・データ集計・加工・描画
・機械学習を使ったモデル構築
・Webスクレイピング
・APIの利用
・Webアプリケーション開発
データ集計・加工・描画と機械学習モデル構築に関してはKaggleというデータ分析コンペティションのWalmartの小売データを扱いながら学んでいきます。
WebスクレイピングとAPI利用とWebアプリケーション開発に関しては、楽天の在庫情報を取得してSlackに自動で通知するWebアプリケーションを作成して学んでいきます。
Pythonで何ができるのか知りたい！という方には一番はじめにまず受けていただきたいコースです！
Twitterアカウント(@statistics1012)にメンションいただければ2000円以下になる講師クーポンを発行いたします！
さらに詳しくPythonやWebアプリの勉強がしたい！という方は当サイト「スタビジ」が提供するスタビジアカデミーというサービスで体系的に学ぶことが可能ですので是非参考にしてみてください！
AIデータサイエンス特化スクール「スタアカ」
| 【価格】 | ライトプラン：1280円/月 プレミアムプラン：149,800円 |
|---|---|
| 【オススメ度】 | |
| 【サポート体制】 | |
| 【受講形式】 | オンライン形式 |
| 【学習範囲】 | データサイエンスを網羅的に学ぶ 実践的なビジネスフレームワークを学ぶ SQLとPythonを組み合わせて実データを使った様々なワークを行う マーケティングの実行プラン策定 マーケティングとデータ分析の掛け合わせで集客マネタイズ |
データサイエンティストとしての自分の経験をふまえてエッセンスを詰め込んだのがこちらのスタビジアカデミー、略して「スタアカ」！！
当メディアが運営するスクールです。
24時間以内の質問対応と現役データサイエンティストによる複数回のメンタリングを実施します！
カリキュラム自体は、他のスクールと比較して圧倒的に良い自信があるのでぜひ受講してみてください！
他のスクールのカリキュラムはPythonでの機械学習実装だけに焦点が当たっているものが多く、実務に即した内容になっていないものが多いです。
そんな課題感に対して、実務で使うことの多いSQLや機械学習のビジネス導入プロセスの理解なども合わせて学べるボリューム満点のコースになっています！
Pythonが初めての人でも学べるようなカリキュラムしておりますので是非チェックしてみてください！
ウォルマートのデータを使って商品の予測分析をしたり、実務で使うことの多いGoogleプロダクトのBigQueryを使って投球分析をしたり、データサイエンティストに必要なビジネス・マーケティングの基礎を学んでマーケティングプランを作ってもらったり・Webサイト構築してデータ基盤構築してWebマーケ×データ分析実践してもらったりする盛りだくさんの内容になってます！
・BigQuery上でSQL、Google Colab上でPythonを使い野球の投球分析
・世界最大手小売企業のウォルマートの実データを用いた需要予測
・ビジネス・マーケティングの基礎を学んで実際の企業を題材にしたマーケティングプランの策定
・Webサイト構築してデータ基盤構築してWebマーケ×データ分析実践して稼ぐ
以下の記事でその他にPythonが学べるスクールをまとめていますよ！チェックしてみてくださいね！
Pythonはデータ解析やスクレイピングそしてWebアプリケーション作成まで出来る幅広いプログラミング言語！
以下の記事で、FlaskとDjango2つのWebアプリケーションフレームワークを用いた開発についてまとめていますのであわせてチェックしてみてください！
最近ではPythonのWebアプリのフレームワークで「Streamlit」や「Gradio」がデータサイエンスの分野でよく利用されているのでチェックしてみて下さい。
PythonではWebアプリ以外にゲーム開発をすることも出来ます、興味がある方は以下の記事をチェックしてみて下さい。
また、以下の記事で初心者がPythonを習得する方法についてまとめていますのでよければご覧ください！
スタビジのコンテンツをさらに深堀りしたコンテンツが動画と一緒に学べるスクールです。
プレミアムプランでは私がマンツーマンで伴走させていただきます！ご受講お待ちしております！
