Part 2 - Pyhonを使ったドルと円の為替レートを使った簡単な計算アプリ
Part 2 - 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.

前回データフレームの日付列を文字列にしたまま保存しました。

Last time I saved the date string of Dataframe as a string.

ですが、検索する際に重複が発生してしまう問題がでてきました。

However, there is a problem that duplicates occur when searching.

なので、日付列をTimestampとして保存し直す作業を行います。

So I'll save the date column back as a Timestamp.

dolla_to_yen['年月日'] = pd.to_datetime(dolla_to_yen['年月日'])

この問題はreモジュールをインポートして正規表現を使用することでも解決できますが、複数のパターンを用意しなければならず、作業が少しだけ複雑になります。

Another way to solve this problem is to import the re module and use regular expressions, but it requires multiple patterns and is a bit more complicated.

後は入力された日付をデータフレームから直接検索するか、queryメソッドを使用して検索すれば、指定した年と月の行が簡単に抽出されます。

You can then retrieve the date directly from the Dataframe, or use the query method to retrieve the year and month rows you specify.

print(dollar_to_yen['年月日'].dt.year)
print(dollar_to_yen['年月日'].dt.month)
year = 2004
month = 11
print(dollar_to_yen[dollar_to_yen['年月日'].dt.year == year) & dollar_to_yen['年月日'].dt.month == month])
print(dollar_to_yen.query(f'年月日.dt.year == {year} & 年月日.dt.month == {month}'))

それではピックルファイルに保存し直して、スクリプトを書いていきましょう。

Let's save it back to the pickle file and write a script.

filename = 'dollarToYen.pickle'
dollar_to_yen.to_pickle(filename)

いつものようにFlaskアプリに必要な環境を整えていきます。まずは必要なフォルダとファイルを用意しましょう。

As always, we'll create the necessary environment for the Flask app. First, prepare the necessary folders and files.

project folder/
    scripts/
    static/
        bootstrap-4.5.3-dist/
            js/
            css/
        js/
        css/
    templates/
        application.html
    application.py
    dollarToYen.pickle

いつものようにアプリケーション用のpythonファイルに必要なモジュールのインポートとサーバー起動のスクリプトを記述していきます。

As usual, you will write a script for importing the modules and starting the server that are required for your application's python file.

いつものようにHTMLファイルを作成して、CSSとJSのパスを記述して、ユーザーからの入力用のインプットタグを記述していきます。

As usual, create an HTML file, write CSS and JS paths, and input tags for user input.

グリッドシステムを使って、インプットタグを横並びに表示させて、購入と売却の項目を分けます。

Use a grid system to display input tags side-by-side to separate purchase and sale items.

そして、計算ボタンとリセットボタン、計算結果を表示させるエリアを用意します。

Then, prepare the calculation button, the reset button, and the area to display the calculation result.

いつものようにJSファイルを作成して、JQueryとAJAXを利用して計算結果を表示させるようなスクリプトを書いていきましょう。

As usual, create a JS file and write a script that uses JQuery and AJAX to display the results of your calculations.

今回はまずブラウザのコンソールに結果を表示させるテストから開始していきましょう。

Let's start with a test that shows the results on the browser console.

そして、リセットボタンが押された時の処理も書いていきましょう。

Next, let's write the action processing when the reset button is pressed in the JS file.

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

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