Part 4 - Pythonを使って複利による利息の計算をするアプリを作ろう
Part 4 - Create an app that calculates compound interest using Python

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

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

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

Please refer to the video for details.

前回までに作成したPythonスクリプトのアプリをFlaskを使ってWEBアプリにして、HEROKUにアップロードしてみましょう。

Use Flask to re-create the previously written Python script as a web application and upload it to HEROKU.

前回の続きです。アプリケーション用のHTMLファイルに戻り、チェックボックスを作成しましょう。

Continued from last time. Let's go back to the HTML file for our application and create a checkbox.

Bootstrapのform-rowを利用して横並びにチェックボックスを作成していきます。

Use Bootstrap's form-row to create a side-by-side checkbox.

まずは端数処理のオプションを選べるチェックボックスの作成です。

First, create a check box to select the rounding options.

インプットタグの属性にcheckedを指定すると、そのチェックボックスがデフォルト値として、チェックされた状態になります。

If you specify checked for the attribute of the input tag, that checkbox will be checked by default.

作っておいたチェックボックスを3回コピペして、それらを編集していきます。

Copy and paste the check boxes you made three times and edit them.

複利の方法、利息の組み入れ時期を選択、課税方式等のオプションを作成していきます。

We will create options such as compounded interest, whether to include interest at the beginning or end of the period, and taxation.

この時、チェックボックス毎に属性値としてnameを同じにしないと、複数選択できてしまう状態になるので注意が必要です。

At this time, it is important to note that if the name is not the same as the attribute value for each check box, multiple selections may be made.

そしてJSファイルに戻り、チェックボックスにチェックされた値を取り出すように、処理を書きます。

Then return to the JS file and write the action to retrieve the checked value of the checkbox.

AJAXによるPOST通信が成功したら、結果を表示させる領域のプレイスホルダーを削除してから、計算結果を表示させます。

After successful AJAX POST communication, remove the place-holder in the area where you want the results to appear, and then display the results.

この時、前回の計算結果のテーブルタブが残っていたら、それらを削除して新しいものを表示するようにします。

In this case, if the table tab of the last calculation result remains, delete it to display the new one.

リセットボタンが押されたら、チェックボックスもデフォルトに指定した箇所にチェックされるようにします。

When you press the reset button, the check box corresponding to the default box specified by ID is checked.

Pythonファイルに戻り、チェックボックスから取得した値に対する処理を書いていきます。

Return to the Python file and write the action for the value obtained from the checkbox.

後は前回のFlaskを使わないで作成したPythonファイルのアプリの内容を加えていくだけです。

All you have to do is add the contents of the Python file app you previously created without Flask.

結果を格納する空のリストを作成してから、For文の中で作成した辞書をそのリストに加えてきます。

Create an empty list to store the results, then add the dictionary you created in the For statement to that list.

後は前回同様、利息の組み入れ方法や、端数処理毎に計算方法を変えていくようにします。

As before, we will change the method of including interest and the calculation method for each fraction.

結果はBootstrapのテーブルを使用して表示させます。

Use the Bootstrap's table to view the results.

結果はあらかじめ一つずつ計算されてリストに辞書で格納されているので、それらを適切に表示させるために条件文等を使用してHTMLフォーマットの文字列としてレスポンスするように調整します。

Because the results are calculated one by one and stored in a dictionary in the list, they are adjusted to response as strings in HTML format using conditional statements, etc. in order to display them appropriately.

時折サーバーを起動させて挙動を確かめて、間違ったスクリプトの箇所の修正をしていきましょう。

Let's start the server from time to time to see how it works and fix the wrong script.

それでは仕上げとしていつものようにHEROKUにアップロードしていきましょう。

As a finishing touch, let's upload it to HEROKU as usual.

static/
templates/
application.py
Procfile
requirements.txt 

Prockfile

web: gunicorn application:app --log-file=-

requirements.txt

pip freeze > requirements.txt

heroku login
git init
heroku git:remote -a your-app-name
git add .
git commit -am "へ六へうｐ"
git push heroku master

元本の表示が間違っていますので、修正して再度HEROKU CLIとGITを使ってデプロイし直しましょう。

The display of the principal is incorrect, so fix it and deploy again using HEROKU CLI and GIT.

成功したら、色々な値を入力して楽しんでみてください。

If you succeed, try typing in different values and have fun.

後は各自で工夫してより良いアプリに仕上げてみてくだちぃ。

After this, please try to make it a better application devise it by yourself.

アディオス。

Adios.

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

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

各自で創意工夫してもっと良いアプリに仕上げてください。

Please devise your own ideas and make it a better application.