【python, flask, heroku】賃金階級年齢階級別労働者割合のWEBアプリ part4
【python, flask, heroku】Web application for ratio of workers by wage class and age group part 4

YouTubeにアップした動画、「【python, flask, heroku】賃金階級年齢階級別労働者割合のWEBアプリ part4」の補足説明の記事です。

Here's a little more about the 「【python, flask, heroku】Web application for ratio of workers by wage class and age group part 4」 video I uploaded to YouTube.

前回の続きです。

This is the continuation of the last time.

前回のアプリを少しだけ改良してみました。こんな感じです。

I improved the previous application a little. It's like this.

インデックスからアプリへのリンクボタン作成、

A link button is created from the index to the application,

アプリ側では表が動的に色を付けたり、説明文が付け足されています。

and on the application side, the table is dynamically colored and the description is added.

全体のコードを修正して、Gitを使ってHerokuにアップしたアプリの変更を行いましょう。

Modify the entire code to make changes to the app you uploaded to Heroku using Git.

まずはコードの修正と追加から行いましょう。

Let's start by modifying and adding code.

ボタンのテキストとリンク先を変数にします。

Make the button text and link to a variable.

インデックスページで使うPythonの変数を一つにまとめます。

Combine Python variables for use in index pages.

btn_text = 'Try out the app'
link = '/app'

index_content = {
    'title':title,
    'description':description,
    'btn_text':btn_text,
    'link':link
}

retrun render_template('index.html', **index_content)

インデックスページの表示を変更します。

Changes the display of index pages.

<div class="container">
    <p class="text-center">{{ description }}</p>
    <div class="text-center">
        <a href={{ link }}><button class="btn btn-primary">{{ btn_text }}</button></a>
    </div>
</div>

いらない変数を削除します。

Delete the variables you do not want.

HTMLのテーブルタグ用と年収別用の変数を分けます。

Separate variables for HTML table tags and for annual income.

age_options = l[0][1:]
ai_options = [l_[0] for l_ in l[1:25]]
wage_class = [l_[0] for l_ in l[1:]]

table = l

統計用の変数を用意します。

Prepare variables for statistics.

select_age = request.form.get('age')
select_ai = request.form.get('ai')

select_age_index = 0
select_ai_index = 0
statistics_index = wage_class.index('平均値(千円)')
d1_index = 0
first_quartile_index = 0
median_index = 0
third_quartile_index = 0
d9_index = 0

セレクトする年収には幅があるので、判定用に文字から数値に変換する。

There is a wide range of annual income, so we will convert it from letters to numbers so that it can be processed for judgment.

ai_range_list = [ai.replace('(千円)','').split('～') for ai in ai_options]

for idx, ar in enumerate(ai_range_list):
    if ar[0] == '':
        ai_range_list[idx][0] = 0
        ai_range_list[idx][1] = float(ai_range_list[idx][1])
    elif ar[1] == '':
        ai_range_list[idx][0] = float(ai_range_list[idx][0])
        ai_range_list[idx][1] = 1800.0
    else:
        ai_range_list[idx] = [float(ar[0]), float(ar[1])]

Pythonのrange関数はフロートの値を処理できないので、独自関数を用意する。

Python's range function cannot handle float values, so let's create our own.

import decimal

def float_range(range_list, step):
    start = decimal.Decimal(range_list[0])
    stop = range_list[1]
    while start <= stop:
        yield float(start)
        start += decimal.Decimal(step)

先ほどの関数を使用して、0.1刻みの年収のリストを作成します。

Use the previous function to create a list of annual income in 0.1 increments.

d_l = [list(float_range(arl, '0.1')) for arl in ai_range_list]

セレクトされた年収の間を取って、みなし年収とします。

The median annual income selected by the user is regarded as the deemed annual income.

答えの文字列をHTMLコードにして、細かい色付けをします。

Make the answer string an HTML code and apply fine coloring.

Jinja2側の値渡しにsafeを付けることによって、HTMLコードをそのまま表示できます。

You can display the HTML code as is by appending safe to the value passing on the Jinja2 side.

通常はエスケープされてHTMLコードがただの文字列として表示されてしまうからです。

This is because HTML code is normally escaped and displayed as just a string.

ユーザーが選択した年齢に対応した統計情報を取得します。

Gets statistics for the age selected by the user.

選択した年齢と年収の統計情報を表示させます。

Displays statistics for the selected age and annual income.

先ほど作成したみなし年収と統計情報を元に、ユーザーが全体の中でどの位置に属しているのかを判定します。

Based on the deemed annual income and statistics we created earlier, we can determine where the user is in the total.

表に統計値毎に色を付けるため、それぞれのインデックス番号を変数に格納しておきます。

To color the table for each statistic, store each index number in a variable.

HTMLファイル側で必要な変数をまとめます。

Combine the variables needed for the HTML file.

アプリを表示するHTMLに出典を明記しておきます。

In the HTML file that displays the application, we display the source and link of the table we are using.

表をHTMLに表示させる為に、BootstrapのTableタグを利用させてもらいます。

To display the table in HTML, I use the Table tag in Bootstrap.

jinja2を使って細かく条件分岐をして、テキストや表の色付け等を行います。

I use jinja2 to do conditional branching because I want to specify text and table coloring in detail according to conditions.

ご覧の通り、非常に見にくく、分かり辛くなります。これはやりすぎだと思いますので、各自工夫してください。

As you can see, it's very hard to see and understand. I think this is going too far, so please improve it yourself.

後はHerokuにログインして、Gitを使って変更内容を更新してください。

Then log in to Heroku and use Git to update your changes.

C:\Users\user> heroku login
C:\Users\user> cd "your project folder"
C:\Users\user\project> app_test\Script\activate
(app_test) C:\Users\user\project>
(app_test) C:\Users\user\project> git add .
(app_test) C:\Users\user\project> git commit -m "App and HTML changes"
(app_test) C:\Users\user\project> git push heroku master

このようにまた変更が必要になっても、再度同じようにGitを使って更新しましょう。

If you need to make changes again, update again using Git.

幾つかの変更点はこのアプリを拡張して、他のアプリに応用できるようにしてあります。

Some of the changes in this video allow us to extend the app and apply it to other apps.

各自で色々と思いついたアプリを作成してみてください。

Please try to create an application that comes to your mind.

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

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