Part 3 - Pyhonを使ったドルと円の為替レートを使った簡単な計算アプリ
Part 3 - Simple calculation app using dollar-yen exchange rate using Python

ニコニコ動画にアップした動画のまとめ記事です。

This is a summary blog post about a video I uploaded to NicoNico.

細かい部分は動画を参考にしてください。

Please refer to the video for details.

前回の動画の続きです。計算用のPythonスクリプトを別のフォルダに作成します。

This is a continuation of the previous video. Create a Python script for the calculation in a separate folder.

scripts/
    base.py
    transaction.py

基本的には前のシリーズと同じようなスクリプトです。

It is basically the same script as the previous series.

初めにベースとなるクラスファイルを作成してから、それを継承させて実際の計算をさせるためのクラスファイルを作成していきます。

First, we create a base class file. You then create a child class file that inherits the parent class and performs the actual calculation.

scripts/base.py

import pandas as pd

class Base:
    def __init__(self):

scripts/transaction.py

import pandas as pd
from scripts.base import Base

class Transaction(Base):
    def __init__(self):
        super().__init__()

やっていることはシンプルで、ユーザーから入力された値をインスタンス変数に格納して、エラーメッセージと計算結果をHTMLのテーブルタグにして返すだけです。

What we're doing is simple, store the value entered by the user in an instance variable, and return the error message and the result of the calculation as an HTML table tag.

後はシリーズの最初に作成したスクリプトの内容をコピペしていくだけです。

All you have to do is copy and paste the contents of the first script in the series.

そして、アプリケーション用のPythonスクリプトに戻り、クラスファイルをインポートして使用します。

Then return to the Python script for your application to import and use the class file.

application.py

from flask import Flask, render_template, request, jsonify
import json
from scripts.transaction import Transaction

app = Flask(__name__)

transition = Transaction()

@app.route('/')
def index():
    return render_template('application.html')

JSファイルに移動して、いつものようにAJAXの処理を書いていきます。

Go to the JS file and write the AJAX processing as usual.

後は同じ処理内容を売却時用のHTMLとJS、Pythonファイルに記述していくだけです。

All you have to do is write the same thing in the HTML, JS, and Python files for sales processing.

全ての入力値をリセットするボタンを作成します。

Creates a button that resets all input values.

仕組みは単純で、ルートパスにGETリクエストを送るだけです。

The mechanism is simple. just send a GET request to the root path.

後はちょっとした計算用に電卓をモーダルで表示させて使えるようにしてみましょう。

Now, Let's turn the calculator into a modal display so you can use it for simple calculations.

static/
    bootstrap-4.5.3-dist/
        css/
        js/
    css/
        modalcalculator.css
    js/

電卓用のCSSとJSを作成してHTMLファイルにパスを記述しましょう。

Create CSS and JS for the calculator and write the path in an HTML file.

application.html

<link rel="stylesheet" href="../static/css/modalcalculator.css">

見た目と動作は各自で好きなようにカスタマイズしてください。

You can customize the look and behavior as you like.

今のところこの電卓は簡単な四則計算しかできません。

At the moment, this calculator can only do simple arithmetic.

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

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