Brythonを使用したランダム抽選ウェブアプリ作成 #Python

9月の振り返りと使用した技術のプログラミングノート①

書いたソースコードの復習件記事として概要を残します。

①god_simulater
https://kaminuma.pythonanywhere.com/
デプロイ

アプリ要約
内部的に8192分の1の抽選を繰り返し、実際に当選するまでに要した試行回数を返します。
BrythonはWebアプリケーション開発のフロントエンドをPythonで動かすためのライブラリで、
これを使うことでJavascriptの記述をPythonに置き換えることができます。

ソースコード全体像

god_simulater制作

#random とbrython使用のためのimport#
import random
from browser import document

#抽選の条件#
num = 1
atari = int(100)
while True :
    random_num = random.randint(1,8192) 
    if  atari == random_num : 
        break
    else :
        num += 1

#結果を返す関数#
def god_kekka(ev):

    kekka = str(num)
    
    rslt = document["result"]
    rslt.text = kekka


#ブラウザ側のbuttonのclickで関数を呼び出し
sub_elt = document["submit_button"]
sub_elt.bind("click", god_kekka)

技術メモ・from/import

#例2. fromでモジュールの記述を省略する
from browser import document

コード内の記述をもっと短くするパターン。

「import」は「browser.document」の「document」をインポートするという意味です。

これにより「browser.document」を記述する必要はなく、
「document」だけでよくなります。

技術メモ・while True基礎文法

while True :
    random_num = random.randint(1,8192) 
    if  atari == random_num : 
        break
    else :
        num += 1

ブレイクになるまで（True）状態の時、while文を繰り返す。

技術メモ・関数定義とドキュメントの使用

#例2. fromでモジュールの記述を省略する
def god_kekka(ev):

    kekka = str(num)
    
    rslt = document["result"]
    rslt.text = kekka

関数の定義、定義した関数は上記であればgod_kekka(ev)で呼び出すことができる。
rslt内に冒頭で読み込みしたdocumentモジュールを呼び出して、god.htmlのresultにrslt.textとして変数kekka返している。
（htmlのソースは最後に記載）

上記プログラムのフロントエンドhtml

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./stylesheet.css" type="text/css">
        <title>Brythonで何回転で当たるか実験</title>
        <meta charset="utf-8">
	<script src="static/brython.js"></script>
        <script src="static/brython_stdlib.js"></script>
    </head>
    <body onload="brython(1)">
	<div style="text-align: center">
	<script type="text/python" src="static/god.py"></script>
	<h1 style="font-size: 300%;">GODシミュレーター（1/8192)</h1>
	<button id="submit_button" style="font-size: 200%;">回す!</button>
	<br>
	<div style ="font-size: 200%"; id = "result">
	</div>
    <p><a href="https://img.pachist.jp/article_images/o365/pggen08.jpg" class="http-image"><img src="https://img.pachist.jp/article_images/o365/pggen08.jpg" class="http-image" alt="https://img.pachist.jp/article_images/o365/pggen08.jpg" width="367" height="206" /></a></p>
	<br>
	<h2 style="color : red">【説明】</h2>
	<p>「回す」をクリックしてください。8192分の1の確率を何回転で引けたかの結果が表示されます。</p>
	<p>内部的に8192分の1の抽選を繰り返し、実際に当選するまでに要した試行回数を返します。
	<h2>【注意点】</h2>
	<p>一回ボタンを押すと処理が終了するため、複数回試したい場合はブラウザを更新してください。
    </div>
    </body>
</html>