はじめに

このブログでは、PythonでWEBアプリの作成を進めています。少しづつ機能を追加して、ローカルの仮想環境で動作確認をするという作業を地道に行っている状況です。

そして、進捗がある都度、このブログで紹介しています。

前回までの状況

現在、WEBアプリで家計簿のページを作成をすすめています。（→参考）

前回は、複数ある家計簿関連のページにつながりを持たせてみました。TOP画面を作って、そこからurl_for関数やアンカータグで画面遷移できるようになっています。（→参考）

現在は、画面1のように表示されます。

■画面１:ログイン後の家計簿画面■

改善が必要な点

収支計算をするためには、金額入力時に収入、支出のいずれかをマイナスで入力しないといけないため、入力間違いのもとになります。

また、収支一覧に表示される金額もマイナスで表示されるため、見映えが悪いという問題もあります。

金額を3桁毎に区切るカンマが無いという点も見映えの悪さに１役をかっています。

今回実施すること

そこで、改善策として、今回は以下の2点の修正を行います。

（１）収入と支出の欄を分けて表示

（２）数値を3桁カンマ区切りにして表示

関連ファイルの説明

今回の改善のために次のファイルを修正又は追加します。

この後紹介するプログラムの修正は、関連する部分のみを抜粋して説明しています。

全体のどの部分を修正しているのかを確認される場合は、こちらを必要に応じてご覧ください。（→参考)

このプロジェクトで使用するファイルやフォルダ構成を、このページで解説しています。

（１）収入と支出の欄を分けて表示

　　　　

class Pay:
    def __init__(self, pay_data):
        # ペイ(収支)データの初期化
        self.month   = pay_data["month"]       
        self.day     = pay_data["day"]
        self.content = pay_data["content"]
        self.amount  = pay_data["amount"]
        self.id      = pay_data["id"] #---　追加10-2
        self.user    = pay_data["user"] #---　追加10
        self.amount2  = pay_data["amount2"] #---　追加13
        

　　　　

    if request.method == 'GET':

        search_list_amount_list = [d.get('amount') for d in search_list] #--- 修正13 # 追記
        amount_sum = sum(int(i) for i in search_list_amount_list) #--- 修正13 # 追記 # 文字列を整数に変換してsum()を実行
        search_list_amount2_list = [d.get('amount2') for d in search_list] #--- 修正13 # 追記
        amount2_sum = sum(int(i) for i in search_list_amount2_list) #--- 修正13 # 追記 # 文字列を整数に変換してsum()を実行
        amount_sum_total = amount_sum - amount2_sum #--- 修正13 # 追記
        
        # 更新した辞書型リストを送信し、HTMLをレンダリング        
        return render_template('kakeibo_test_json/kd.html', title='kakeibo',user_name = user_name , pay_list = search_list , amount_sum = amount_sum ) #--- 修正13 # amount_list = search_list_amount_list 追記 #--- 修正10 '''修正前''''''# return render_template('kakeibo_test_json/kd.html', title='kakeibo', pay_list = pay_manager.pay_data_list) #--- 修正7-4 

 
        
残高
        {% set amount_list = [] %}
        {% for payy in pay_list %}
        {%- set _ = amount_list.append(payy.amount|int ) -%}       
        {% endfor %}    
        {% set amount2_list = [] %} 
        {% for payy2 in pay_list %}
        {%- set _ = amount2_list.append(payy2.amount2|int ) -%}       
        {% endfor %}  

（２）数値を3桁カンマ区切りにして表示

CSSで簡単に設定できるのかと思っていましたが、調べてみると、PHPやJavaScryptで実装しないといけないようです。

PHPのほうが少ないコードで実装できるようですが、今回は、JavaScryptで実装することにします。

まず、3桁カンマで区切る部分を、HTML上でclass="comma”で定義します。

　　（略）

         
        残高:
        {{ amount2_list|sum - amount_list|sum }}
        (支出合計:
        {{ amount_list|sum  }}
        収入合計:        
        {{ amount2_list|sum }}
        )     

　　（略）
  




        
収支一覧


　　（略）


        

                
番号
                
月
                
日
                
内訳
                
支出
                
収入
 
        

        

                
{{ cnt[0]      }}
                
{{ pay.month   }}
                
{{ pay.day     }}
                
{{ pay.content }}
                
{{ pay.amount  }}
                
{{ pay.amount2 }}
 
        

残高と収支一覧の数字を３桁表示します

次に、class="comma”部分を、装飾するためのコードをJavaScryptで記述し、ファイル名をindex_body.jsとして新たに作成します。

  ■コード４■

　　　
  

$('span.comma ').each(
    function(){
        var commatxt = $(this).text();
        $(this).text(Number(commatxt).toLocaleString());
    }
);



$('td.comma ').each(
        function(){
                var commatxt = $(this).text();
                $(this).text(Number(commatxt).toLocaleString());
        }
);

■解説■

JavaScript のNumber().toLocaleString()について

•  text(Number(commatxt).toLocaleString()) は、commatxt という文字列を数値に変換し、それをロケール（地域）に合わせた文字列形式に変換する JavaScript のコードです。
• toLocaleString() の引数にロケールを指定することで、特定の地域に合わせた文字列形式に変換できます。
• 例えば、Number(commatxt).toLocaleString("ja-JP") は、日本語のフォーマットで3桁ごとにカンマを挿入します。
• commatxt は、数値の文字列表現を表す変数の名前です。
• commatxt が "1234567890" の場合、「1,234,567,890」というな結果を表示します。

jQueryのeachメソッドついて

• jQueryはWebブラウザ用のJavaScriptのコードをより短く容易に記述できるように設計されたJavaScriptのライブラリです。
• jQueryのeachメソッドで、繰り返し処理を行うには$(…).each(処理内容)という形で実装します。
• HTML要素に対してeach()を実行し、繰り返し処理を記述する関数を指定します。

　　　　HTML要素.each(function(index, element) {

　　　　　　    //繰り返し処理を記述する

　　　　})

最後に、HTMLからindex_body.jsとjQueryにリンクします。

（head内に記述）

 
 


（body内に記述）

実施結果

では、ブラウザで表示してみます。

仮想環境ですので

http://127.0.0.1:5000/index

として表示すると、このように表示されます。

表示画面

■画面２■

■解説■

金額の数字には３桁ごとにカンマが入って、収入と支出の欄も分かれて表示されています。

おわりに

以上、今回は改善策として、

（１）収入と支出の欄を分けて表示

（２）数値を3桁カンマ区切りにして表示

の2点の修正を行いました。

画面がずいぶん見やすくなった印象です。

これからも、見やすさ、使いやすさの向上に努めてまいりたいと思います。