グラフ

資産記録アプリ開発④～フロントエンド実装・資産残高管理画面～

# 事前準備 
Django REST frameworkを使用してAPI（バックエンド）を開発していきます。 
まずは、下記コマンドでインストールします。 

```bash
pip install djangorestframework
``` 

config/settings.pyに下記の記述を追加します。 

```python
INSTALLED_APPS = [
 'django.contrib.admin',
 'django.contrib.auth',
 'django.contrib.contenttypes',
 'django.contrib.sessions',
 'django.contrib.messages',
 'django.contrib.staticfiles',
 'asset_management',
 'rest_framework', # この行を追加する
]
``` 

これでDjango REST frameworkを使用するための準備が出来たのでAPIを作っていきます。 
 
 

# Serializerの作成 
DBから取り出したモデルオブジェクトをJsonに変換するためのSerializerを用意します。 
asset_managementフォルダ配下にserializers.pyを作成し、rest_frameworkの「serializers.ModelSerializer」を継承することで下記のように作ることが可能です。 

```python
from rest_framework import serializers
from .models import Asset

class AssetSerializer(serializers.ModelSerializer):
 class Meta:
 model = Asset
 fields = "__all__"
``` 
 
 

# Viewの作成 
Django REST frameworkにはViewSetsを使った方法なども存在しますが、今回はAPIViewを継承して作成していきます。 
APIViewを継承して作成する場合は、必要なHTTPメソッドを全て自分で記述する必要があります。 
まずはテーブルのデータをすべて取得するためのGETメソッドを「asset_management/views.py」に作成してみます。 
「order_by('created_at')」とすることで、日付順に並べる様にしました。

```python
from rest_framework.views import APIView
from rest_framework.status import HTTP_200_OK
from rest_framework.response import Response
from .models import Asset
from .serializers import AssetSerializer

class AssetListAPIView(APIView):
 def get(self, request):
 asset = Asset.objects.all().order_by('created_at')
 serializer = AssetSerializer(asset, many=True)

 return Response(serializer.data, status=HTTP_200_OK)
``` 
 
 
# URLの設定 
先ほど作成したAPIを呼び出すためのルーティングの設定を行います。 
「config/urls.py」「asset_management/urls.py」をそれぞれ下記のように修正します。 
■config/urls.py 

```python
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
 path('api/asset-management/', include('asset_management.urls')), # この行を修正
 path('admin/', admin.site.urls),
]

```

■asset_management/urls.py 

```python
from django.urls import path
from . import views

urlpatterns = [
 path('v1/assetlist/', views.AssetListAPIView.as_view()), # この行を修正
]
``` 
Class-based Viewsを読み込むとき、「as_view()」と記述する必要があるので注意が必要です。 

 
 

# サンプルデータの追加 
最低限の動作確認を行うため、とりあえずphpMyAdminの画面からデータを追加しておきます。 
![20221120193200](//images.ctfassets.net/g03afh073hzw/63aXv0iDZ49UHgWI8446s/f8866d7165c4b9a224a174903d51faa6/20221120193200.jpg) 
![20221120193300](//images.ctfassets.net/g03afh073hzw/3ULdWLkJ3ynqN3CioJDlna/b2ee167210fd1c671a62d228e6c51f1f/20221120193300.jpg)

 
 

# API動作確認 
http://localhost:8888/api/asset-management/v1/assetlist/ 
にアクセスし、想定通りのデータが取得できているかどうかを確認します。 
![20221120193700](//images.ctfassets.net/g03afh073hzw/6dOrq64y5qmlijUzw3kv2R/03c15bf691faa49e4713b7fa72750738/image.png)

DBに登録した通りの値が取得できることが確認できました。 

 
 

# データ追加・更新・削除用APIの作成 
合わせて新規データ追加、更新、削除用APIも作成しておきます。 
先ほどと同じようにPOST、PUT、DELETEメソッドを作成して処理を記述するのみです。 
この時点でフロントエンドのとIFを決めておき、記述していきます。 
また、POST時には「diff」「diff_rate」は自動計算。「date」はとりあえず今日の日付を取得して自動で入れるようにします。 

```python
from rest_framework.views import APIView
from rest_framework.status import HTTP_200_OK, HTTP_201_CREATED, HTTP_400_BAD_REQUEST
from rest_framework.response import Response
from .models import Asset
from .serializers import AssetSerializer

class AssetListAPIView(APIView):
 def get(self, request):
 asset = Asset.objects.all()
 serializer = AssetSerializer(asset, many=True)

 return Response(serializer.data, status=HTTP_200_OK)

 # ここから追加した内容
 def post(self, request):
 date = dt.date.today()
 asset_amount = int(request.data['asset'])
 managed_app = request.data['app']
 memo = request.data['memo']
 last_data = Asset.objects.filter(managed_app=managed_app).order_by("created_at").last()
 diff = asset_amount - last_data.asset_amount
 diff_rate = round((asset_amount/last_data.asset_amount-1)*100, 2)
 data = {'asset_amount': asset_amount,
 'created_at': date,
 'diff': diff,
 'diff_rate': diff_rate,
 'managed_app': managed_app,
 'memo': memo
 }
 serializer = AssetSerializer(data=data)
 if serializer.is_valid():
 serializer.save()
 return Response(serializer.data, status=HTTP_201_CREATED)
 return Response(serializer.errors, status=HTTP_400_BAD_REQUEST)

 def put(self, request):
 req_data = request.data
 data = {'id': req_data['id'], 'asset_amount': req_data['asset_amount'], 'diff': req_data['diff'],
 'diff_rate': req_data['diff_rate'], 'created_at': req_data['created_at'],
 'managed_app': req_data['managed_app'], 'memo': req_data['memo']}
 pre_data = Asset.objects.get(id=data['id'])
 serializer = AssetSerializer(pre_data, data=data)
 if serializer.is_valid():
 serializer.save()
 return Response(serializer.data, status=HTTP_201_CREATED)
 return Response(serializer.errors, status=HTTP_400_BAD_REQUEST)

 def delete(self, request):
 req_target = request.query_params.get('target')
 data = Asset.objects.get(id=req_target)
 data.delete()
 return Response(status=HTTP_204_NO_CONTENT)
``` 
こちらもSerializerを使って簡単に実装することが出来ます。 

先ほどと同じように動作確認してみます。 
http://localhost:8888/api/asset-management/v1/asset/ 
へアクセスすると、画面下にPOST用の欄があるのでこれを使います。 
![20221120194200](//images.ctfassets.net/g03afh073hzw/6QRmhuBOjbT9ZSMfwgGufL/87d81eeeb7894cb7d96485cfef1fd7e3/20221120194200.jpg) 

下記の様なデータを追加してみます。 

```yaml
{
"asset":"2600000",
"app":"1",
"memo":""
}
``` 

成功すると下記のように表示されます。

![20221120194700](//images.ctfassets.net/g03afh073hzw/2vr3KzztuwxthYQ1pKOglh/c2f2bd0fbb6fb8a8935de9db635ba4c3/20221120194700.jpg) 

# その他のAPI作成 
とりあえずAssetモデルからデータの取得・更新・削除・追加を行うための基本的なAPIは作成しましたが、これだけでは使いにくいので他のAPIも用意しておきます。 

## 特定の情報のみ取得するAPI 
例えば、「Zaim」として登録したデータのみ取得するようなAPIです。グラフ表示用データ取得などに使うことを想定しています。 
基本的には同じことをやっていくだけなのですが、今回は「query_params.get()」でクエリパラメータを取得するようにします。ここでアプリを指定する想定です。 
また、資産額（asset_amouunt）のみを返すように作成するので、先ほど作成したSerializerは使わず、自分で配列を作り、それをreturnするようにしました。 

```python
class AssetAmountAPIView(APIView):
 def get(self, request):
 req_target = request.query_params.get('target')
 if req_target:
 asset = Asset.objects.filter(managed_app__name=req_target)
 asset = asset.values('asset_amount')
 asset_list = [
 {
 'amount': a['asset_amount']
 }
 for a in asset
 ]
 data_list = []
 for a in asset_list:
 data_list.append(a['amount'])

 return Response({'data': data_list}, status=HTTP_200_OK)
``` 

## グラフラベル取得API 
グラフは縦軸：資産額、横軸：登録日とする予定なので、日付の一覧を取得するAPIを作成しておきます。 
とりあえず全アプリ同じ日にデータを登録することを前提とし、1つのアプリの情報のみ取得するようにします。
今回は「Zaim」決め打ちで作成しました。ここを各アプリごとに取得したい場合は、先ほどと同じように 
「req_target = request.query_params.get('target')」 
とすることで対象アプリを指定できるような作りにすればいいでしょう。 

```python
class AssetDateAPIView(APIView):
 def get(self, request):
 asset = Asset.objects.filter(managed_app__name='Zaim')
 asset = asset.values('created_at')
 asset_list = [
 {
 'created_at': a['created_at']
 }
 for a in asset
 ]
 date_list = []
 for a in asset_list:
 date_list.append(a['created_at'].strftime('%Y/%m/%d'))

 return Response({'data': date_list}, status=HTTP_200_OK)
``` 

## アプリ一覧取得API 
アプリマスタからアプリ一覧を取得するAPIです。例えば、データ登録画面を作る際に、セレクトボックスを作ったりするときに使います。 

```python
class AppListAPIView(APIView):
 def get(self, request):
 app = AppMaster.objects.all().order_by('id')
 serializer = AppSerializer(app, many=True)

 return Response(serializer.data, status=HTTP_200_OK)
``` 

最低限の作成・確認が出来たので、今回は一旦ここまでとしておきます。

資産記録アプリ開発③～Django REST frameworkを使ったAPIの実装～

# 環境 
Docker、docker-compose以前入れた物なのでバージョンは少し古めです。 
OS：Windows 11 Home（21H2） 
Docker：version 20.10.2, build 2291f61 
docker-compose： version 1.27.4, build 40524192 
Python： 3.8 
 
 

# MySQL環境構築 
MySQLは最新版ではなく5.7を使用します。
ついでにGUIで色々出来るようにphpMyAdminもインストールしておきます。 

この2つをdocker-composeを使って構築していきます。 

まずはdocker-compose.yamlを作成します。 

```yaml
version: '3'

services:
 mysqldb:
 image: mysql:5.7
 container_name: mysql57_container
 environment:
 MYSQL_ROOT_PASSWORD: root
 MYSQL_DATABASE: money
 TZ: 'Asia/Tokyo'
 volumes:
 - ./docker/db/data:/var/lib/mysql 
 - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
 - ./docker/db/sql:/docker-entrypoint-initdb.d
 ports:
 - "3306:3306"
 command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
 phpmyadmin:
 image: phpmyadmin/phpmyadmin
 depends_on:
 - mysqldb
 environment:
 - PMA_ARBITRARY=1
 - PMA_HOSTS='mysqldb'
 ports:
 - "8000:80"
 volumes:
 - ./docker/phpmyadmin/sessions:/sessions
``` 

データ永続化などを考慮した作りにしておきます。 
合わせて下記の様なフォルダを作成しておきます。 

```yaml
D:mysql
├─docker-compose.yml
│
└─docker
 ├─db
 │ ├─my.cnf
 │ │
 │ ├─data
 │ │
 │ └─sql
 └─phpmyadmin
 └─sessions
``` 

準備が出来たら立ち上げます。

```bash
docker-compose up
``` 

「http://localhost:8000」へアクセスし、下記の様な画面が表示されログインできれば、立ち上げ成功です。 
![20221010120100](//images.ctfassets.net/g03afh073hzw/HgnQfAZxSsB8LCzM9NP62/ee9bd556becdc13fe907813a419ec175/20221010120100.jpg) 

![20221010121200](//images.ctfassets.net/g03afh073hzw/7mmkx4nUdCZlNw27TZyBkN/b91ec40dcbcd1b1e17d723cc640d4668/20221010121200.jpg) 
 
 

# テーブル作成 
まずは以前の手順を参考にDjangoの環境を構築します。 

```bash
conda create -n assetmanagement python=3.8
conda activate assetmanagement
conda install -c conda-forge django
django-admin startproject AssetManagement
``` 

参考： 
[Djangoを使ってみる①(環境構築～プロジェクト作成)](https://hachidev.com/posts/Django%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B%E2%91%A0(%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%EF%BD%9E%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90) 
[Djangoを使ってみる②(アプリケーションの作成)](https://hachidev.com/posts/Django%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B%E2%91%A1(%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90) 
[Djangoを使ってみる④(Modelの作成～管理画面の使用)](https://hachidev.com/posts/Django%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B%E2%91%A3(Model%E3%81%AE%E4%BD%9C%E6%88%90%EF%BD%9E%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%81%AE%E4%BD%BF%E7%94%A8)

下記の様なファイルが生成されます。 
今回はわかりやすいように「settings.py」等が入っているフォルダを「config」という名前に変更しておきます。 
「manage.py」「settings.py」の修正が必要なのでプロジェクト内を「AssetManagement」で検索して全て「config」に修正します。 

![20221010153500](//images.ctfassets.net/g03afh073hzw/4IqCcwZSq7qs6yVXSDvhjl/2258128fea5077e67a3435a640c3becb/20221010153500.jpg) 

続いて、アプリを作成します。ついでにMySQLを使用するためのライブラリもインストールしておきます。 

```bash
python manage.py startapp asset_management
pip install mysqlclient
``` 

次にテーブルを作成するためにモデルの定義を行います。 
今回は資産総額管理画面のためのモデルだけ作成します。 
「asset_management\models.py」を下記のように編集します。 

```python
from django.db import models

class AppMaster(models.Model):
 name = models.CharField(max_length=128, unique=True)

class Asset(models.Model):
 created_at = models.DateField()
 asset_amount = models.IntegerField()
 diff = models.IntegerField()
 diff_rate = models.FloatField()
 managed_app = models.ForeignKey(AppMaster, on_delete=models.CASCADE, related_name='asett_app')
 memo = models.CharField(max_length=256, null=True, blank=True)
``` 

Djangoはデフォルトではsqliteを使用する設定になっているため、settings.pyを下記のように修正し、MySQLに接続するようにします。 
今回は環境変数から値を読み取る様記載しました。 

```python
DATABASES = {
 'default': {
 'ENGINE': 'django.db.backends.mysql',
 'NAME': os.environ['DBNAME'],
 'USER': os.environ['DBUSER'],
 'PASSWORD': os.environ['DBPASSWORD'],
 'HOST': os.environ['DBHOST'],
 'PORT': os.environ['DBPORT'],
 }
}
``` 
 
 

環境変数設定例 : 

| 変数名 | 値 |
| ---------- | ---------- |
| DBNAME | money |
| DBUSER | root |
| DBPASSWORD | root |
| DBHOST | 127.0.0.1 |
| DBPORT | 3306 |

 
 
その他、エラーが出ない様settings.pyやuils.pyを修正しておきましょう。 
環境が整ったら、マイグレーションを行います。 

```bash
python manage.py makemigrations
python manage.py migrate
``` 

マイグレーションが成功後、再度phpMyAdminへアクセスすると下記のようにテーブルが作成されています。 
![20221010163100](//images.ctfassets.net/g03afh073hzw/2fg9ZjHEanqAVhOpqPeHFO/dade936dbc7d97cc66123f8319d2aed8/20221010163100.jpg) 
![20221010163200](//images.ctfassets.net/g03afh073hzw/3aZKu1fqjNvzcWvPEU19Wl/f757bdbdead8010d4cfa827d14754b39/20221010163200.jpg)

資産記録アプリ開発②～DB作成～

# 今回やりたいこと 
資産の記録をするためのアプリケーションを作成していきます。 
例えば、総資産額や株式の配当金などを記録・可視化するためのアプリケーションです。 

普段家計簿アプリ等を使ってお金の管理をしているのですが、いまいち自分の使い方に合わず、部分的にエクセルを使用して管理していたりします。 
データ数も増えてきたので自分の管理しやすいようなアプリケーションを作ってみようと思います。 

 
 
# 使用するもの
下記を使ってブラウザで閲覧できるものを作ります。 
・Next.js 
・Django 
・MySQL 
外部公開などはせず自分のみが使用する想定なので、ユーザー管理機能などは作りません。 

 
 
# イメージ 
最近は色々なサービスがありますが、今回は[Figma](https://www.figma.com/ja/ "Figma")というサービスを使ってみました。 
まずは簡単なものとして下記のようなものを作ってみようと思います。 
■資産総額管理画面 
現在複数の家計簿アプリで管理し、それぞれ微妙に連携している口座等が異なるという面倒くさい使い方をしているので、複数のグラフが表示できるようにします。 
![資産総額](//images.ctfassets.net/g03afh073hzw/3u9OZ2S8Mle1dUTaQmHNJf/0314fbe22ff9f9a3e2e621ac6c205507/____________.png) 

■配当金管理画面 
![配当管理](//images.ctfassets.net/g03afh073hzw/6jy01XAxDuhv36avtNclGp/b959213cf0e6f44d7ba52cfe2624a1b8/____________.png) 

データ登録や編集・削除は面倒なので省略 

 
 
# DB構成 
複数ページを作成する予定ではありますが、それぞれ関連するようなものではないのでとりあえず各ページに対応した独立したテーブルを作成します。 
また、アプリ名や会社名などはマスターテーブルを用意して管理することとします。 

| 資産総額管理テーブル |
| ---------- |
| No（PK） |
| 登録日 |
| 金額 |
| 増減額(前月比) |
| 増減率(前月比) |
| 管理アプリ |
| メモ |

 
 

| アプリテーブル |
| ---------- |
| No（PK） |
| アプリ名 |

 
 

| 配当金管理テーブル |
| ---------- |
| No（PK） |
| 登録日 |
| 会社名 |
| 株数 |
| 金額 |
| メモ |

 
 

| 会社テーブル |
| ---------- |
| No（PK） |
| 会社名 |
| 証券コード |
| 市場 |

 
 

| 市場テーブル |
| ---------- |
| No（PK） |
| 市場名 |
| 国 |

何となくイメージが出来てきたので、次回から環境を作っていこうと思います。 
あまり深く考えていないので、作っている間に色々変わってきそうですが、好きに開発できるのも個人開発のいいところです。