Python

PythonのFlaskで簡単なWebアプリケーションを作ってみよう!

macとsurface
ウマたん
ウマたん
当サイト【スタビジ】の本記事では、Pythonの軽量WebアプリケーションフレームワークであるFlaskを使って簡単なWebアプリケーションを作成していきたいと思います。Pythonを開発言語としても使えるようになると、幅が広がりますよー!

こんにちは!

データサイエンスに携わっているウマたん(@statistics1012)です。

Webブラウザで動くアプリケーションのことをWebアプリケーションと呼びます!

アプリケーションと言えば、スマホのネイティブアプリのイメージが強いかもしれませんがWebブラウザで動くWebアプリケーションも負けていません!

そして、そんなWebアプリケーションであればPython・Javascript・HTML・CSSを使って簡単に作ることが可能です!

Pythonは普段データ解析用の言語として用いているのですが、実はWebアプリケーションを開発するサーバーサイド言語としても使えます。

Pythonは非常に優秀なプログラミング言語なのです。

この記事では、PythonのFlaskというモジュールを用いて簡単なWebアプリケーションを作っていきます!

ウマたん
ウマたん
Pythonの勉強は以下の記事をチェック!
Python 勉強
【Python独学勉強法】初心者が3か月で習得できるロードマップ!当サイト【スタビジ】の本記事では、過去僕自身がPythonを独学を駆使しながら習得した経験をもとにPythonを効率よく勉強する方法を具体的なコード付き実装例と合わせてまとめていきます。Pythonはできることが幅広いので自分のやりたいことを明確にして勉強法を選ぶことが大事です。...

PythonのFlaskとは?

Webアプリケーションを実装する言語としてはRubyやPHPなどもありますが、Webアプリケーションのロジック部分で数値計算を行うのであればPythonを同時に使用してしまった方がラクです。

高度な数値計算もWebアプリケーション開発も同時に出来てしまうのがPythonの特徴であり最強である所以なのです。

そんなPythonでWebアプリケーションを開発するためにはDjangoを使うパターンとFlaskを使うパターンがありますが、Flaskの方が軽量で簡単に実装が可能なため最初はFlaskでWebアプリケーション開発に慣れたほうが良いでしょう。

Flask Django
Flask vs Django!PythonのWebアプリケーションフレームワークを徹底比較!当サイト【スタビジ】の本記事では、PythonのWebアプリケーションフレームワークである「Flask」と「Django」の違いを徹底的に比較していきます!なんとなーく分かっているようで分からない2つのフレームワークの違いをこの機会にしっかりおさえておきましょう!...

複雑なWebアプリケーションを実装する際にはDjangoの方が良い場合があります。

Django 学習
Djangoの学習におすすめのサイトと勉強を進める注意点 こんにちは! 消費財メーカーでデータサイエンティスト・デジタルマーケターをやっているウマたん(@statistics101...

ちなみに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の細かい知識がなくても比較的簡単に綺麗な画面を作成することができますが、ある程度の知識は必要です。

BootstrapはTwitter社が作成したフレームワークです。

以下細かいリファレンスが載っているので参考にしてみてください。

https://getbootstrap.com/

以下で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>
&nbsp;
  <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>
  &nbsp;
  <button class="btn btn-info" id="button1">有意差算出</button>
  <div></div>
  &nbsp;
  <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>

Flaskのルールとして、HTMLファイルはPythonファイルと同じディレクトリ内に「templates」という名前のファイルを作成し、その中に格納しておかなくてはいけませんので注意しましょう。

CSSファイルやJSファイルは「static」ファイルに入れる必要があるのですが、今回はHTMLの中で全て完結させたので問題ありません。

デプロイはherokuというアプリケーションを使っておこないました。

heroku
herokuを使ってPythonのflaskで作ったアプリケーションをデプロイする方法と注意点!当サイト【スタビジ】の本記事では、PythonのWebフレームワークであるFlaskを使って作成したWebアプリケーションをインターネット上に公開するためにHerokuというサービスを使ってデプロイしていきます。Herokuを使えば簡単にWebアプリケーションを公開することが可能なんです。...

見てみてください!

→有意差アプリケーション

※少し読み込みに時間がかかる場合があります

Python flask まとめ

これで有意差計算Webアプリケーションが完成しました。

Flaskを使ってWebアプリケーションを作るのは比較的簡単であることが分かってもらえたと思います。

Flaskに関しては以下の僕のUdemy講座で勉強できるのでぜひチェックしてみてください!

【実践】ビジネスケースとつなげてPythonで出来ること5つを学べる3日間集中コース

Udemy python
【オススメ度】
【講師】僕!
【時間】3.5時間
【レベル】初級~中級

Pythonで出来ることのうち以下の5つを網羅して学んでいきます。

・データ集計・加工・描画
・機械学習を使ったモデル構築
・Webスクレイピング
・APIの利用
・Webアプリケーション開発

データ集計・加工・描画と機械学習モデル構築に関してはKaggleというデータ分析コンペティションのWalmartの小売データを扱いながら学んでいきます。

WebスクレイピングとAPI利用とWebアプリケーション開発に関しては、楽天の在庫情報を取得してSlackに自動で通知するWebアプリケーションを作成して学んでいきます。

Pythonで何ができるのか知りたい!という方には一番はじめにまず受けていただきたいコースです!

Twitterアカウント(@statistics1012)にメンションいただければ最低価格の1200円になる講師クーポンを発行いたします!

\30日間全額返金可能/

またAidemyというプログラミングスクールでガッツリ学ぶことができるので是非チェックしてみてください!

Aidemy
【体験談】評判の良い「Aidemy」を受講して分かったメリット・デメリット当サイト【スタビジ】の本記事では、AidemyのPremium planについて実際に自分で受講してみた体験談をもとに分かったこと・メリット・デメリットについてまとめていきます。僕の主観だけでなく口コミや評判に関してもまとめていくのでAidemyを検討している人はぜひ参考にしてみてくださいね!...

Pythonはデータ解析やスクレイピングそしてWebアプリケーション作成まで出来る幅広いプログラミング言語!

以下の記事で、FlaskとDjango2つのWebアプリケーションフレームワークを用いた開発についてまとめていますので合わせてチェックしてみてください!

Webアプリ開発
【入門初心者向け】PythonのフレームワークでWebアプリを開発する方法を徹底解説!当サイト【スタビジ】の本記事では、PythonのWebアプリケーションフレームワークを用いてWebアプリを開発していく方法を徹底解説していきます。実際にDjangoでの実装とFlaskでの実装をおこなっていったあと、勉強法についても見ていきましょう!...

また、以下の記事で初心者がPythonを習得する方法についてまとめていますのでよければご覧ください!

Python 勉強
【Python独学勉強法】初心者が3か月で習得できるロードマップ!当サイト【スタビジ】の本記事では、過去僕自身がPythonを独学を駆使しながら習得した経験をもとにPythonを効率よく勉強する方法を具体的なコード付き実装例と合わせてまとめていきます。Pythonはできることが幅広いので自分のやりたいことを明確にして勉強法を選ぶことが大事です。...

また以下の記事でPythonが学べるスクールをまとめていますよ!

チェックしてみてくださいね!

Python おすすめ スクール
【2020年最新】Python学習に最適なオンラインスクールおすすめ6選当サイト【スタビジ】の本記事では、実際にスクールに通ったりWebサービスを利用したりしながらPythonを習得した僕がおすすめするオンラインメインのスクールを紹介していきます。正直Python学習スクールは乱立し過ぎていてどれを選べばよいのか難しい!そんな人にぜひ読んで欲しいです...
Pythonを初学者が最短で習得する勉強法

Pythonを使うと様々なことができます。しかしどんなことをやりたいかという明確な目的がないと勉強は捗りません。

Pythonを習得するためのロードマップをまとめましたのでぜひチェックしてみてくださいね!