GASとPythonを使って便利なWEBアプリを作ってみたお話

きっかけ

いつも使っているメジャーな家計管理アプリがあるのですが、管理をしやすくするためにもっと色んな数字が見れたらいいなーと考えていました。

しばらくの間はGoogleのスプレッドシートを使っていたのですが、もちろんスプレッドシートと家計管理アプリとは連携していないので、数値を手入力して更新するという事を続けていました。

それでも問題なかったのですがせっかくだからもっと便利に、なんならWEBアプリにしてみたいなという興味が湧いてきてチャレンジしてみる事にしました。

作ったもの

いきなり完成品ですが、こんな感じの物を作りました！。実際はもう少しごちゃごちゃしてますが、イメージのため簡略化しています。

このアプリはgoogleが提供しているサービス、Google Apps Script （以下GAS）を使ってWEBページとして見れるようにしたものです。スマホからもURLにアクセスすることで、データを確認できます。

GAS自体はスプレッドシートのマクロ処理的な事も出来たり色々な事ができるのですが、その機能の一つとして、このようなWEBアプリも作れてしまう訳です。

表示している情報はすごく単純で、今までスプレッドシートで実現できていたのですが、裏側で家計管理サービスの情報を取得してWEBアプリに反映させる仕組みにしています。

必要な物

必須

• PC（ブラウザがサクサク動くくらいの性能）
• Googleのアカウント (無料)

任意（必要に応じて）

• 取得したい情報がある目的のサイト（必要に応じて）
• Pythonの実行環境

単純なWEBアプリであればPCとGoogleアカウントさえあれば作れます。今回は自動化の仕組みも入れたかった為、Pythonが必要になっています。

どんなことができるか

今回は手入力の作業を無くしたかったので、

という流れになっています。また、アプリで手動で入力した際にはスプレッドシートの値が上書きされます。

流れとしてはこんなイメージです！

GASとPythonの間にスプレッドシートがありますが、これはGASで直接Pythonの処理を実行する事ができない為です。Pythonでスプレッドシートにデータを書き込む→WEBアプリの起動時にスプレッドシートを読みに行くという形で弱い連携を実現しています。

手入力の自動化機能を省けばGASとスプレッドシートのみでもWEBアプリは実現可能です！

GASを使う利点として、アプリの見た目をアレンジできることがあります。WEBサイトを表示している仕組みであるHTMLとCSSを使ってアプリを作っていくので自由度の高い表現が可能となります。スプレッドシートでは表現できないようなデザインにする事が可能です。ただぼくの場合、なんか色々やってみたという感じでセンスが無いですが、そこは見逃してください💦

もう少し具体的にすると、、

WEBアプリ製作の具体的なステップ

このようなステップで作っていくことになります。少し難しそうに思えますよね・・・

でも安心してください！初心者のぼくでもGoogle検索と、最近なにかと流行りのChatGPTを駆使してカタチにすることができました。

ただ、結構つまずきポイントが多かったのは事実です（笑）

GASについてはHTML、CSS、JavaScriptといったWEB系の知識が必要となりますが、先人の方々の知恵や、ChatGPTを活用することで、完璧な理解はできなくともカタチにしていくことはできます。

ステップごとにそれぞれ記事1本書けてしまうボリュームがありそうなので、今後少しづつ記事を増やしていきます！

というわけで簡単ではありますがGASで作るWEBアプリの大枠について説明させていただきました！

まとめ

今回の記事では、Google Apps Script（GAS）とPythonを使用して、GoogleスプレッドシートをデータベースとしたWEBアプリの基本的な構築手順を紹介しました。

GASとPythonの連携方法は、

具体的なステップは、

次回以降の記事では、具体的なコードや詳細な手順について掘り下げて解説します。初心者の方でもWEBアプリ製作に挑戦してみたいという方々に向けて、役立つ情報を提供していきますので、お楽しみに！