進数変換ツールを作ってみた。

flaskで2進数、10進数、16進数変換toolを作成してみました。

## 環境
Python version:3.9.7
OS: windows 10.0

## イメージ
ドロップダウンメニューで入力する基数を選択し、値を入力し、計算ボタンを押すと、変換した結果が出力されるようにしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176158/5cf4db7c-eb3b-a383-e606-eb93f6b306ae.png)

## ファイル構成
ファイル構成は、下記のようにしています。app.pyでcalc.html内で行う処理を入れています。
flsk_*.ps1は、windowsでflaskを起動する設定を毎回入力する手間だったので、scriptにしています。api内のradix_conversion.pyでは、関数として変換する処理を置いています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176158/55926fcc-5d11-498c-467c-ee6d31491194.png)

### flaskの起動方法
flaskを扱ったことがなかったので、起動方法を書いておきます。powershellにて、下記コマンドを入力すると、サーバーが起動します。私は、シェル化し```./flask_normal.ps1```を実行して、起動するようにしました。Flaskサーバが起動したら、ブラウザへ「http://127.0.0.1:5000/」を入力すると、アクセスすることができます。

```powershell
$env:FLASK_APP = "app"
flask run
```
flaskのデバックモードで起動すると、エラーを出してくれます。デバックモードでの起動は、下記のコマンドで行えます。

```powershell
$env:FLASK_APP = "app"
$env:FLASK_ENV = "development"
flask run
```

#### PowerShellのshellと実行方法
簡略化のため、shellとして実行できるようにします。PowerShellは、```xxx.ps1```のテキストファイルでスクリプトを作成できます。実行方法は、```powershell .\xxx.ps1```または、```.\xxx.ps1```で実行できます。

## プログラム

コードは、[githab](https://github.com/yutti/study/tree/main/flask/radix_conv/templates
)にあげていますので、参考にして下さい。

app.pyについて、簡単に説明します。```app.route("/")```は、ルーティングです。ルーティングとは、URLと処理を対応づけています。```request.form```では、```calc.html```内で設定する基数と数値を取得しています。その後、基数に応じて```radix_conversion.py```にある変換処理をさせて、結果を出力するようにしています。

```app.py
from flask import *
from api.calclate import radix_conversion

app = Flask(__name__)

radix_list=["bin","dec","hex"]

@app.route("/")
def index():
    return render_template('index.html')
 
@app.route("/calc", methods=['GET','POST'])
def calc():
    if request.method == 'GET':
        return render_template('calc.html', radix_list = radix_list)
    elif request.method == 'POST':
        radix_name = request.form['radix_name']
        radix_num = request.form['radix_num']
        if   radix_name == "bin":
            result = radix_conversion.bin_to_dec_hex(radix_num)
            return render_template('calc.html', base_radix=radix_num,conv1_radix=result[0],conv2_radix=result[1],base_name="bin",conv1_name="dec",conv2_name="hex", radix_list = radix_list)
        elif radix_name == "dec":
            result = radix_conversion.dec_to_bin_hex(radix_num)
            return render_template('calc.html', base_radix=radix_num,conv1_radix=result[0],conv2_radix=result[1],base_name="dec",conv1_name="bin",conv2_name="hex", radix_list = radix_list)
        elif radix_name == "hex":
            result = radix_conversion.hex_to_bin_dec(radix_num)
            return render_template('calc.html', base_radix=radix_num,conv1_radix=result[0],conv2_radix=result[1],base_name="hex",conv1_name="bin",conv2_name="dec", radix_list = radix_list)
        else:
            return render_template('calc.html',error=result)

if __name__ == '__main__':
    app.run()
```
```radix_conversion.py```は、pythonの基数変換できる関数を用いて変換処理をし、結果を```app.py```へ戻しています。

```radix_conversion.py
def bin_to_dec_hex(bin_num):
    try:
        return int(bin_num,2), hex(int(bin_num,2))
    except :
        return '--'

def dec_to_bin_hex(dec_num):
    try:
        return bin(int(dec_num)), hex(int(dec_num))
    except :
        return '--'

def hex_to_bin_dec(hex_num):
    try:
        return bin(int(hex_num,16)), int(hex_num,16)
    except :
        return '--'
```
```calc.html```は、app.py内で設定したlistをドロップダウンに表示させるようにしました。nameの値は、app.pyのリクエストフォーム文で読み込むことができ、それを用いてapp.pyで処理をしていまます。結果の出力は、app.pyで記述して変数と{{xxx}}が対応しています。

```calc.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>radix converte page</title>
	</head>
	<body>
	<h1>2進数/10進数/16進数変換ツール</h1>
	<form action='/calc' method='POST'>
		<p>入力する基数：
			<select name="radix_name">
			{% for i in radix_list %}
				<option value="{{ i }}">{{ i }}</option>
			{% endfor %}
			</select>
		</p>
		<p>bin: 2進数 / dec: 10進数 / hex: 16進数</p>
		<input name='radix_num' type='text' placeholder='20'>
		<input type='submit' value='計算'>
	</form>
	{%if base_radix%}
	<p>{{base_name}}は、{{base_radix}}</p>
	<p>{{conv1_name}}は、{{conv1_radix}}</p>
	<p>{{conv2_name}}は、{{conv2_radix}}</p>
	{%else%}
	<p>{{error}}</p>
	{%endif%}
	</body>
</html>
```

### 参考リンク
参考にしたリンクです。
[【Python Flask入門】使い方の基礎からWebアプリケーション作成までの流れ](https://engineer-lifestyle-blog.com/code/python/flask-usage-tutorial-for-beginner/)
[PowerShellのPS1ファイルの作成と実行](https://techinfoofmicrosofttech.osscons.jp/index.php?PowerShell%E3%81%AEPS1%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8%E5%AE%9F%E8%A1%8C)