2/2 連続して成功する確率について、PythonとFlaskを使った簡単なWEBアプリを作成してみましょう
2/2 Let's create a simple web app using Python and Flask for the probability of continuous success

YouTubeにアップした動画、「【日本語解説】2/2 連続して成功する確率について、PythonとFlaskを使った簡単なWEBアプリを作成してみましょう。」の補足説明の記事です。

Here's a little more about the 「【Python】2/2 Let's create a simple web app using Python and Flask for the probability of continuous success.」 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.

それでは必要なモジュールをインポートして、いつものようにスクリプトを作成していきましょう。

​Now let's import the necessary modules and create the script as usual.

from flask import Flask, render_template, request

app = Flask(__name__)

HTMLファイルを作成して、Pythonファイルに戻り、レンダーテンプレートメソッドを使って内容をブラウザに表示させます。

Create an HTML file, return to a Python file, and use the render template method to display the contents in a browser.

いつものようにBootstrapを利用させて頂きます。

​I will use Bootstrap as usual.

@app.route('/', methods=['GET', 'POST'])
def calcutates_prb():
    return render_template('application.html')
if __name__ == "__main__":
    app.run(debug=True)

それでは試しにアプリを動かして挙動を確かめましょう。

​Let's run the app and see how it works.

python application.py

次にHTMLファイルに入力フォームを作成します。

​Then create an input form in the HTML file.

<div class="container" style="padding: 15px;">
    <form method="POST">
        <div class="form-group">
            <label for="probability">成功する確率は？(％) : probability of success</label>
            <input type="number" step="0.0001" class="form-control" name="probability"
                placeholder="1%なら1と入力、0.1%なら0.1">
        </div>
        <div class="form-group">
            <label for="count">何回挑戦する？または個数をいくつ上げる？ : Number of attempts</label>
            <input type="number" step="1" class="form-control" name="count" placeholder="500">
        </div>
        <button type="submit" class="btn btn-primary">Calculate</button>
    </form>
</div>

インプットのタイプをナンバーにすれば数値以外は入力を受け付けないようになります。

​​If the input type is set to number, non-numeric input is not accepted.

ステップで指定した数値で入力した数値を0からの基準で増やしたり減らしたりすることが出来ます。

​You can increase or decrease the value entered by the value specified in step by the reference from 0.

マイナスの数値と、100より大きい数値を入力した場合にエラーを返すようにします。

Enter a negative value and a value greater than 100 to be notified of the error.

成功する可能性の確率を導き出し、その結果を基にHTMLのフォーマットの文字列にします。

​It determines the probability of success and uses the result as an HTML formatted string.

そして前回同様に、99.9%以上の成功確率になる試行回数を計算して、同じ様にHTMLフォーマットの文字列にします。

​As in the previous video, the number of attempts with a probability of success of 99.9% or higher is calculated and the string is generated in HTML format in the same way.

後はいつものように、レンダーテンプレートメソッドに引数としてPython辞書を渡してあげます。

​As always, you pass the Python dictionary as an argument to the render template method.

content = {
    'possibility_message': possibility_message,
    'count_required_message': count_required_message,
    'error_message': error_message,
}

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

計算結果をHTMLファイルに表示する箇所を加えます。

​Add a section of HTML to display the result of the calculation.

セイフについての詳細は以前の動画を参考にしてください。

​See the previous video for more information on safe.

簡単にいうと、HTML文字列がエスケープされてただの文字列にされてしまうのを無効化することによってHTMLとして表示できるようになります。

​In a nutshell, it turns off escaping HTML to just strings so that it can be rendered as HTML.

<div class="container" style="padding: 15px;">
    {% if error_message %}
    <p class="text-danger"><b>{{ error_message }}</b></p>
    {% else %}
    <p>{{ possibility_message | safe }}</p>
    <p>{{ count_required_message | safe }}</p>
    {% endif %}
</div>

試しにマイナスの値、100以上の確率を入力してみましょう。

​Try entering negative values or probabilities greater than 100.

では色々な確率を試してみましょう。

​Let's try different probabilities.

様々な確率を紹介しているサイトにアクセスします。

​Go to the site that introduces various probabilities.

このサイトの管理者が記載している通り、このサイトに掲載されている色々な確率には確かな根拠はありません。

As stated by the administrator of this site, there is no firm basis for the various probabilities listed on this site.

なので、お遊び程度にとどめておいてください。

​So please think of it as a playful experiment.

ちなみに、このサイトはありがたいことにフリーリンクです。

By the way, Thankfully, this site is a free link.

自動販売機で当たりが出る確率はおよそ100分の一らしいですね。

The probability of winning of the vending machine seems to be about one in 100.

つまり689回買い続ければ、少なくとも一本は当たるかもしれないということです。

​So if you buy 689 times in a row, you might win at least one.

しかし、一本につき120円かかったとして、運悪く689回目でようやく当たりが出たとすると、費やしたお金は総額82,680円になります。

But let's say one drink in this vending machine costs 120 yen. And if you're unlucky and try 689 times and you finally win, the total amount you spend is 82,680 yen.

では次回は期待値について別のアプリを作成してみましょう。

Next time, let's create another app for mathematical expectations.

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

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