Published Date : 2020年11月27日17:14

2/2 PythonとFlaskを使った期待値を計算する簡単なWEBアプリ
2/2 ​Simple web app that calculates expectations using Python and Flask


This blog has an English translation


YouTubeにアップした動画、「【日本語解説】2/2 PythonとFlaskを使った期待値を計算する簡単なWEBアプリ」の補足説明の記事です。

Here's a little more about the 「【Python】2/2 ​Simple web app that calculates expectations using Python and Flask」 video I uploaded to YouTube.

字幕を付けるなら、英語音声と日本語音声の二つに分けたほうが良いと思ったので、今回から同じ動画だが音声が日本語と英語に分かれたものをアップしました。

I thought it would be better to separate the video into English audio and Japanese audio instead of adding subtitles to the video, so I uploaded the same video with Japanese and English audio separately.

ページの頭に日本語解説動画、ページの最後に英語解説動画のリンクが貼られてます。

There is a Japanese explanation video at the top of the page, and an English explanation video link at the end of the page.


目次

Table of Contents


① 動画の説明

① Video Description

ページの最後へ

Go to the end of the page.


① 動画の説明
① Video Description



それでは前回の続きです。

Let's continue from last time.

確率計算の時と同じように、適当なフォルダを作成します。

Create the appropriate folders as you did for the probability calculation.

そのフォルダ内にpythonファイル、templatesフォルダ内にHTMLファイル、staticとjsフォルダ内にjsファイルを作成します。

Create a python file in that folder, an HTML file in the templates folder, and a js file in the static and js folders.

新しいフォルダ
    static
        js
            script.js
    templates
        application.html
    application.py

Pythonファイルの中身は前回とほぼ変わりません。

The contents of the Python file are almost the same as before.

application.py
from flask import Flask, render_template, request
import string

app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def calculates_ev():
    names = ''
    probability_text = ''
    earnings_text = ''
    expected_values = ''
    expected_value = ''
    error_message = ''

    content = {
        'names': names,
        'probability_text': probability_text,
        'earnings_text': earnings_text,
        'expected_values': expected_values,
        'expected_value': expected_value,
        'error_message': error_message,
    }

    return render_template('application.html', **content)


if __name__ == "__main__":
    app.run(debug=True)

続いて、Bootstrapを用意したHTMLファイルを簡単に作成し、挙動を確かめます。

Next, you'll quickly create an HTML file with Bootstrap and see how it works.

application.html
<html>
<head>
    <link rel="stylesheet" href="bootstrap">
</head>
<body>
    <div class="container">
        <div class="container" style="padding: 15px;">
            <h1>期待値計算機です。</h1>
            <p>得られるお金とその確率を入力してくだちぃ。</p>
        </div>
    </div>

    <script src="jquery"></script>
    <script src="popper"></script>
    <script src="bootstrap"></script>

    <script src="../static/js/script.js"></script>
</body>
</html>

続いて、HTMLファイル内にユーザーの入力用のフォームを作成します。

Then create a form in the HTML file for the user to fill out.

application.html
~~~~~~~~~~~~~~~~~
<div class="container" style="padding: 15px;">
    <form method="post">
        <div id="prob-form" class="form-group">
            <label for="probabilities">確率は？(％)</label>
            <input type="number" step="any" class="form-control" name="probability"
                placeholder="1%なら1と入力、0.1%なら0.1" min="0.000001" max="100">
        </div>
        <button type="submit" class="btn btn-success" id="calculate-btn">Calculate</button>
        <input type="reset" class="btn btn-danger" id="reset-btn" value="Reset">
    </form>
</div>
~~~~~~~~~~~~~~~~~

今回はinputタグの属性のminとmaxを使用して、入力の値の制限をかけます。

This time we use the min and max attributes of the input tag to limit the input values.

次に、jsファイルにJQueryを加えます。

Next, add JQuery to the js file.

「addボタン」や「removeボタン」を押せば、9個以内でinputタグを増やしたり、減らしたりできるようにします。

Press [add] or [remove] button to increase or decrease the number of input tags within 9.

制限を越えるとポップアップが立ち上がり、制限があることをユーザーに知らせるようにします。

​If the limit is exceeded, a popup will appear informing the user that there is a limit.

POSTメソッドで送られたパラメーターをpythonファイル内で処理できるようにして、その結果を表示させるようにします。

​Allows the parameters sent by the POST method to be processed in a python file and the results to be displayed.

Stringモジュールを使用して、各イベント名を取得したパラメーターの数の分だけ大文字アルファベット一文字で表示させるようにします。

Use the String module to make each event name appear as a single capital letter, corresponding to the number of parameters retrieved.

static/js/script.js
$("input#add-prob").click(function () {
    ~~~~~~~~~~~~~~~~~~~
    $("div#prob-form").append('<label>確率は？(％)</label><input>');

    ~~~~~~~~~~~~~~~~~~~
    var note = "注意：9個以下にしてね！"
    alert(note)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
if (earnings_label.length > 1) {
    $('div#earnings-form label:last').remove();
}

再度アプリが正しく動作できているか確かめます。

​Check if the application is working properly again.

前回作った宝くじの確率分布表の値を入力してみましょう。

​Let's input the value of the probability distribution table of the lottery made last time.

指数表記の読み方ですが、[e マイナス]の後の数字がゼロの数です。

In scientific notation, the number after [e minus] is the number of zeros.

つまり、[1.17 e マイナス　七]と書かれているなら、[0.000000117]となり、ゼロが七つ続いた後に117がつきます。

That is, if it says [1.17 e minus 7], then it's [0.000000117], seven zeros followed by 117.

パーセントの表記に直すので、100を掛けてあげます。

​We will change it to the percentage, so I will multiply by 100.

これだと操作がしにくく、見づらいので、表に直接入力するような形のほうがいいかもしれません。

​In this case, it is difficult to operate and also hard to see, so it may be better to input directly into the table.

各自で工夫をしてみてください。

Please try to devise it by yourself.



以上です。お疲れ様です。

That's all. Thank you for your hard work.