Published Date : 2020年12月21日23:55
YouTubeにアップした動画の説明記事です。
This is a blog post about a video I uploaded to YouTube.
細かい部分は動画を参考にしてください。
Please refer to the video for details.
目次
Table of Contents
今回説明する給与所得者と個人事業主等の所得税及び住民税を計算するアプリは、あくまで簡易的なお遊び用のアプリです。
正確な数値、計算方法は各自で調べて下さい。
このアプリは大雑把に大体の見積りを計算して楽しむ為のアプリです。
決して従業員の年末調整や個人の確定申告等に使用しないでください。
さらに、税金の計算方法は変更される場合があり、控除についても同様です。
また、控除や税金の計算方法が間違っている可能性もありますので、
あまり信用せずに、各自で調べてから実験してみてください。
このアプリを使って何かしらの損害が発生したとしても、私は一切の責任を負いません。
The app I'm going to show you for calculating income and residence taxes for salaried workers and Individual employers, etc. is just a simple application for playing.
Please check the exact number and calculation method by yourself.
This app is used to calculate rough estimates and enjoy them.
Do not use for year-end adjustment of employees or for individual tax return.
In addition, the method of calculating taxes and deductions may change.
Also, there is a possibility that the deduction and tax calculation methods are incorrect.
Don't trust it too much, and test it yourself.
I will not be liable for any damage caused by using this app.
二つのアプリを合体させたDjangoプロジェクトをHEROKUにアップしていきましょう。
Let's upload the Django project, which combines the two applications, to HEROKU.
仕上げとして、個人事業主用の税金計算アプリに、特別控除有りと無しの場合の税金額が比較ができるような機能を追加しましょう。
As a finishing touch, let's add a function to compare the tax amount with and without special deduction to the tax calculation application for sole proprietors.
Bootstrapのモーダルをapplication.htmlに追加し、ID名等を変えます。
Add the Bootstrap modal to application.html and change the ID name, etc.
<!-- Button trigger modal -->
<div class="container text-center p-4">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#comparisonModal">
白色申告と青色申告を比較
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="comparisonModal" tabindex="-1" role="dialog" aria-labelledby="comparisonModalTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title w-100" id="comparisonModalTitle"><b>白色申告</b>と<b
class="text-primary">青色申告</b>(<b>65万円</b>を使用)の比較</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row justify-content-around">
<div class="col">
<table class="table table-hover">
<tbody>
<tr>
<td class="align-middle"><b>白色(合計)</b></td>
<td><input type="text" readonly class="form-control text-danger"
id="sp-total" value="0">
</td>
</tr>
<tr>
<td class="align-middle">所得税(円)</td>
<td><input type="text" readonly class="form-control text-danger"
id="sp-income-tax-modal" value="0">
</td>
</tr>
<tr>
<td class="align-middle">住民税(円)</td>
<td><input type="text" readonly class="form-control text-danger"
id="sp-resident-tax-modal" value="0">
</td>
</tr>
<tr>
<td class="align-middle">健康保険(円)</td>
<td><input type="text" readonly class="form-control text-danger"
id="sp-nhip-modal" value="0">
</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table table-hover">
<tbody>
<tr>
<td class="align-middle text-primary"><b>青色(合計)</b></td>
<td><input type="text" readonly class="form-control text-danger"
id="sp-sd-total" value="0">
</td>
</tr>
<tr>
<td class="align-middle text-primary">所得税(円)</td>
<td><input type="text" readonly class="form-control text-danger"
id="sp-sd-income-tax-modal" value="0">
</td>
</tr>
<tr>
<td class="align-middle text-primary">住民税(円)</td>
<td><input type="text" readonly class="form-control text-danger"
id="sp-sd-resident-tax-modal" value="0">
</td>
</tr>
<tr>
<td class="align-middle text-primary">健康保険(円)</td>
<td><input type="text" readonly class="form-control text-danger"
id="sp-sd-nhip-modal" value="0">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
ボタンを押したら税金の比較がモーダルで表示できるようにします。
If you press the button, you will be able to see the tax comparison modal.
新たにモーダル用のJQueryファイルを作成します。
Create a new JQuery file for the modal.
そして、index.htmlにJSファイルのパスを追加します。
Then add the path of the JS file to index.html.
寄付金の控除の値の取得処理が抜けていたので二つのアプリのJSファイルに処理内容を追加します。
I added the processing content to the JS file of the two applications because the processing of obtaining the value of donation deduction was omitted.
ローカルサーバーを立ち上げて、動作を確認します。
Start the local server and verify that it works.
settings.pyの内容をHEROKU用に修正します。
Modify the contents of settings.py for HEROKU.
本番環境用とは別にローカル環境用のsettings.pyを作成します。
Create settings.py for the local environment separately from the production environment.
シークレットキーはHEROKUで使う時はHEROKUの環境変数に格納して使用し、ローカル環境はそのまま使います。
The secret key is stored in the HEROKU environment variable when using HEROKU, and the local environment is used as it is.
DEBUGをFalseにして、ALLOWED_HOSTSも変更します。
Set DEBUG to False and also change ALLOWED_HOSTS.
ミドルウェアにホワイトノイズを追加します。
Adds whitenoise to the middleware.
本番環境でのデータベースはHEROKUのpostgresqlを使用するように設定します。
Set the production database to use HEROKU's postgresql.
最後にdjango_herokuを使用してsettings.pyの内容が反映されるように設定します。
Finally, use django_heroku to reflect the contents of settings.py.
.gitignoreにアップしたくないフォルダやファイルを書きます。
Write folders and files that you don't want to upload to .gitignore.
runtime.txtにはHEROKUで使用できるPythonヴァージョンを書いたほうが良いです。
You should write a python versions available for HEROKU at runtime.txt.
django_herokuをpipでインストールします。
Install django_heroku with pip.
Procfileにgunicornを使用してサーバーを立ち上げるように設定します。
Set the Procfile to boot the server using gunicorn.
HEROKUに必要なモジュールをインストールさせる為、pip freezeを使用してインストールしているモジュールをrequirements.txtに書き込みます。
To have HEROKU install the required modules, use pip freeze to write the installed modules to requirements.txt.
まずはローカル環境でアプリが動くかテストしてみましょう。
First, let's test whether the application works in a local environment.
いつものように、HEROKUにログインして、新しいアプリを作成してください。
As always, log in to HEROKU and create a new application.
HEROKU CLIを使用してPowerShellでHEROKUにログインします。
Log in to HEROKU in PowerShell using the HEROKU CLI.
git initを使用して、ローカルリポジトリを作成します。
Create a local repository using git init.
そして、HEROKUという名前のリモートリポジトリとHEROKUに登録したアプリを紐づけます。
Then, you link the remote repository named HEROKU with the application registered in HEROKU.
つまり、HEROKUリモートリポジトリの変更内容がそのままアプリに反映されるわけです。
In other words, the changes made to the HEROKU remote repository are directly reflected in the application.
そして、HEROKUに登録したアプリのsettingsタブを開いて、環境変数としてSECRET_KEYとその値を設定します。
Then, open the settings tab of the application registered to HEROKU, and set SECRET_KEY and its value as an environment variable.
それから、[git add .]を使用してコミットしたいファイルをステージングさせます。
Then use [git add .] to stage the files you want to commit.
最後に、git commitと[git push heroku master]を使用してローカルリポジトリの内容をリモートリポジトリに反映させます。
Finally, use git commit and [git push heroku master] to reflect the contents of the local repository to the remote repository.
成功したら、表示されたURLにアクセスします。
If successful, access the displayed URL.
後は適当に遊んで楽しんでください。
After that, please play and enjoy.
以上です。お疲れ様です。
That's all. Thank you for your hard work.
各自で創意工夫してもっと良いアプリに仕上げてください。
Please devise your own ideas and make it a better application.