PythonとGoogle スプレッドシートを併用して銀行口座の残高を管理webアプリを作ります。
前回は自動で銀行口座にログインして、残高を取得する方法を紹介しました。
今回は、取得した残高をスマホから確認できるようにします。
動作環境：Windows11 64ビット Python 3.12.0
※この記事は後編です。前編はこちら
目次
取得した残高をGoogle スプレッドシートに保存
Pythonで取得した残高をGoogle スプレッドシートに保存します。
使用したのは以下のライブラリです。
インストールしていない方は以下のようにしてインストールしてください。
pip install google
pip install gspread
pip install requestsGoogle CloudのAPIを利用するので認証が必要です。
ヘルプはこちら
初期設定はこちらのサイトがわかりやすいです。
取得した認証情報を以下のようにしてコードに記述するとこでPythonからスプレッドシートを操作できるようになります。
from google.oauth2.service_account import Credentials
import gspread, requests
CREDENTIAL_FILEPATH = "hogehoge.json" #APIの認証情報
scopes = [
'https://www.googleapis.com/auth/spreadsheets',
'https://www.googleapis.com/auth/drive'
]
credentials = Credentials.from_service_account_file(
CREDENTIAL_FILEPATH,
scopes=scopes
)
gc = gspread.authorize(credentials)スマホからスプレッドシートにアクセスするには、スプレッドシートの権限の設定が必要です。
共有方法は↓の動画のようにしてください。
コピーしたリンクにopen_by_url()メソッドを使用してアクセスしてシートにアクセスします。
spreadsheet_url = "https://docs.google.com/spreadsheets/d/1wA7q1G_1f8oonVcxwknLxdDps2TmpBM88zmPHYA_QmQ/edit#gid=0"
spreadsheet = gc.open_by_url(spreadsheet_url).sheet1アクセスしたシートに対してupdate()メソッドを使用してスプレッドシートに値を書き込みます。
spreadsheet.update(range, value) #rangeは'A1', 'A1:B1'等記述 valueは2次元配列で書き込みたい値を書くrangeには書き込みたいセルを指定します。シングルクォーテーションで囲んでください。
valueには指定したセルに書き込む数値、文字列などを書いてください。
valueは[[]]で囲んでください。
指定したセルが1つなら[[‘hogehoge’]]、複数セルを指定した場合は[[‘hogehoge’, 123],[‘hogehoge2’, 456]]といった感じで2次元配列で値を設定してください。
GASで残高を表示
スプレッドシートの拡張機能のGoogle Apps Scriptを使用してスマホからもアクセスできるWebアプリを作ります。
簡単に仕組みを説明しますと、
GASでシート上の数値を取得し、それをUIになるhtmlに埋め込んで表示するといったイメージです。
GASのエディターは画像のApps Scriptから開きます。
するとこんな感じのエディターが開きます。
ここにシートの数値を取得するコード、htmlを読み込むコードを書きます。
htmlファイルはここから追加してください。
外部からアクセスした時に書いたコードを実行するために、関数名をdoGet()に変更してください。
まずはシート上の値を取得しましょう！
今回は画像のような3✕2の表から銀行名と残高を取得します。
let sheet = SpreadsheetApp.getActive().getActiveSheet(); //アクティブなシートを取得
let values = sheet.getRange(1, 2, 3).getValues(); //getRange(行番号、列番号、行数、列数)
let labels = sheet.getRange(1, 1, 3).getValues();1行目でアクテイブなシート(今開いているシート)を取得して、それに対してgetRange()メソッド、getValues()メソッドを使用しています。
getRange()で範囲を指定して、getValues()で指定した範囲の値を取得しています。
範囲指定は(1行、2列(B列)、指定したセルから3行)という感じで指定します。
次は、ここで取得した値をhtmlファイル側で使用できるようにします。
まず、htmlファイルのheadの中に、使いたい変数を書いておきます。
書き方は<? let htmlファイルで使う変数 = gsファイルで使っている変数 ?>です。
次はgsファイル側です。
先ほどシートから取得した値をhtmlで使う変数に埋め込みます。
let index = HtmlService.createTemplateFromFile("index"); //indexにはhtmlファイルの名前を書いてください
index.label1 = labels[0];
index.label2 = labels[1];
index.label3 = labels[2];
index.balance1 = values[0]
index.balance2 = values[1];
index.balance3 = values[2];htmlファイルの名前.htmlファイルの変数に代入する側の変数 = 値
と書きます。htmlファイルではイコールの右に書く変数です。
あとはhtmlファイルを編集して好きなように表示するだけです。
今回は簡単ではありますが、テーブルで表示されるサンプルを用意しました。
味気ないデザインなので、ぜひご自身でカスタマイズしてください。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<? let l1 = label1; ?>
<? let l2 = label2; ?>
<? let l3 = label3; ?>
<? let b1 = balance1; ?>
<? let b2 = balance2; ?>
<? let b3 = balance3; ?>
<style>
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
thead{
background-color: rgb(228 240 245);
}
th,td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
td:last-of-type {
text-align: center;
}
tbody > tr:nth-of-type(even) {
background-color: rgb(237 238 242);
}
</style>
</head>
<body>
<h1 class="text" , id = "main">Total Assets</h1>
<table>
<thead>
<tr>
<th scope="col">銀行</th>
<th scope="col">残高</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><?= l1 ?></th>
<td><?= b1 ?></td>
</tr>
<tr>
<th scope="row"><?= l2 ?></th>
<td><?= b2 ?></td>
</tr>
<tr>
<th scope="row"><?= l3 ?></th>
<td><?= b3 ?></td>
</tr>
</tbody>
</table>
</body>
</html>最後に、gsファイルにhtmlを読み込むコードを追加すれば完成です！
htmlOutput = index.evaluate();
htmlOutput.addMetaTag('viewport', 'width=device=width, initial-scale=1.0');
return htmlOutput;作ったwebアプリに外部から接続する場合にはデプロイを作成する必要があります。
ここで、次のユーザーとして実行の欄を自分、アクセスできるユーザーは全員にしてください。
これでスマホなど外部からのアクセスが可能になります。
次に表示されるURLにアクセスすれば、作ったwebサイトにアクセスできます！
こんな感じで作ったwebサイトが表示されるはずです。
上に表示される警告みたいなのは、無料なので我慢しましょう。
なお、デプロイ作成後にコードに手を加えた場合は、デプロイの管理からデプロイのバージョンを変更して、URLを更新してください。
生成したURLは、生成した瞬間のコードの内容が記録されているようですので、コードに手を加えた場合は都度URLの生成が必要です。
コードの変更を試すだけでしたら、デプロイのテストを押すとテスト用のURLが発行されますので、そこにアクセスして確認できます。
おわりに
今回はPythonだけでなく、GASやhtmlを使用したアプリをつくりました。
これだけいろいろできた全て無料というのが驚きです。
最後まで読んでいただきありがとうございました。
コメントを残す