ChatGPT✖️LINE✖️AppSheetでSansanのような名刺管理アプリを個人で作ってみた

2024年12月9日2025年10月26日

はじめに

仕事で日々増えていく名刺をどう管理しよう、、、。
私は整理整頓が苦手なので、本来はカードファイルのようなもので管理すべきと分かっていながら、引き出しに乱雑にしまう習慣から抜け出せずにいました。

どうやったら効率的に管理できるか、と考えたところ、やはり紙で保管していることが全ての元凶だと考え、良いアプリはないかと探しました。しかし、良さそうなものは全て有料。。

それなら自分で作ってしまえ！ということで、LINEとGPT-4oを利用して名刺を効率的に管理するアプリを作成してみたので、ご紹介します。

参考にした記事と改良点

今回作成したアプリは以下記事のアイディアをベースにして、いくつか改良点を加えています。
特にAppSheetを活用することで、使用感を大きく向上させることができました。

参考記事：GPTが人知れず既存の名刺管理アプリを抹殺していた話
本アプリの改良点
- OCRではなく、VDU (Visual Document Understanding)の利用
  - 参考記事ではGoogle Vision APIで文字読み取り後、GPT-4で構造化していましたが、本アプリでは、GPT-4oのVDU機能を利用して、画像から直接文字を構造化しています。
  - これによりOCR部分の実装が省略できます。
- 名刺画像参照を可能に
  - 撮影した名刺画像をGoogle Driveに保存することで、名刺画像も参照可能になりました。
- UIの改善
  - Google AppSheetを活用して、スマホアプリとして利用可能な直感的なUIを作成しました。

VDUとは、画像から直接文字を構造化する技術です。
OCRはただ文字起こしをするだけですが、VDUは構造化まで行います。
構造化とは、例えば名刺画像であれば、”名前”、”会社名”、”部署名”、”メールアドレス”、”電話番号”などのタグ付まで行ってくれるイメージです。

アプリの仕組み

本アプリ処理フローは図の通りです。
画像送信の窓口としてLINEを利用し、サーバー上にデプロイしたWebアプリによって画像を処理します。
WebアプリはPython + FastAPIで実装し、サーバーはRenderの無料版を使用しました。

以下処理フローについて解説します。

名刺画像の送信（LINE）
- あらかじめLINE Botを作成しておき、そのチャネルに名刺画像を送信
- Line Botの設定で、転送先にサーバーのURLを設定しておくことで、名刺画像がサーバーへ送信される
- サーバー側で送信された画像に対して2, 3の処理を実施
名刺画像の処理
- OpenAI APIを利用してGPT-4oに画像を渡し、文字情報の構造化
- 以下項目で構造化するよう指示
  - 会社名、部署名、氏名、会社住所、電話番号、e-mailアドレス
抽出した文字情報と画像の保存
- Google OAuth2認証を実装することで、個人のGoogleアカウントへアクセス
- Google Driveに名刺画像を保存
- 抽出した文字情報と名刺画像リンクをGoogle Spreadsheetへ書き込み
スマホでの閲覧・管理
- Google Spreadsheetのデータを基にAppSheetでアプリ化。スマホで簡単に名刺情報を管理。

実行環境

Python 3.12.4
パッケージ管理：miniconda
Web API フレームワーク：FastAPI
サーバー：Render（無料プラン）
データベース：Vercel Postgres（無料プラン）

以下にソースコードも公開しています。

GitHub

GitHub – ichyy-n/biz-card_reader Contribute to ichyy-n/biz-card_reader development by creating an account on GitHub.

コード内容紹介

OpenAI API実装例

OpenAI API実装部分を紹介します。基本的には最初に紹介した参考記事をベースに、画像を扱うために必要な修正をしています。
公式サイトのAPI Referenceを参照しました。

import os
import base64
from dotenv import load_dotenv
from openai import OpenAI

load_dotenv()

def read_image(image_content):
    base64_image = base64.b64encode(image_content).decode('utf-8') # 画像をbase64にエンコード
    client = OpenAI(api_key=os.getenv("OPEN_API_KEY"))
    schema = {
        "会社名": "string",
        "部署名": "string",
        "氏名": "string",
        "会社住所": "string | null",
        "電話番号": "string | null",
        "e-mailアドレス": "string | null",
    }

    #gpt-4へのリクエスト
    response = client.chat.completions.create(
        model = 'gpt-4o',
        response_format={ "type": "json_object" },
        messages=[
            {'role': 'user', 
            'content': [
                {'type': 'text', 'text': f'次の画像から文字を読み取り、{schema}に従って構造化し、JSON形式で出力してください。'},
                {'type': 'image_url', 'image_url':{
                    'url': f"data:image/jpeg;base64,{base64_image}"
                    },
                },
                ]
            },   
        ],
    )

    return response.choices[0].message.content  #json型(文字列)

その他の実装部分

以下記事で紹介しています。

実行結果

Googleスプレッドシートへの登録

和文・英文で様々な名刺を読み取りましたが、かなり珍しい漢字以外は誤字なく、読み取ることができました。
やはり、GPT-4oのVDU精度はかなり高いです。

・ぼかしばかりですみません。。
・ちなみにGPT-4o miniでも試しましたが、間違いが多くみられました。

AppSheetでの表示

以下左図は、スマホでAppSheetを立ち上げた状態です。AppSheetで設計したUIにより、Google Spreadsheetに登録された名刺情報が非常に見やすくなりました。各カードをタップすると、右図のように個々の詳細情報が表示されます。

今回設計したUIでは以下のようなことが可能です。

会社ごとにグループ化して表示可能
メールボタンや電話ボタンを押すと、メールアプリ、電話アプリが立ち上がる
画像リンクから名刺画像を参照可能
AppSheetからCRUD (Create, Read, Update, Delete) 操作が可能

AppSheetとは？

Google Spreadsheet, Excel, SQLサーバや、独自のAppSheet Databaseをデータベースとして、多様なUIを設計できるツールです。前述したように、UI上からDBのCRUD操作が可能です。設計したUIはWebからも参照できますし、スマホにAppSheetアプリをインストールすることで、アプリとして開くことも可能です。

AppSheetの設定については以下記事を参考にさせていただきました。

note（ノート）

Chat-GPTとGASで名刺管理を無料で自動化する(前編)｜tiger はじめに今回は名刺を撮影するだけで、会社名と名前とメールアドレスを自動でピックアップしてくれるアプリを完全無料で開発してみました。きっかけは私が営業職をしてい…

その他工夫した点

Render無料版の制限への対応

Render無料版は無料で使えるだけありがたいのですが、色々と制限があります。
今回のアプリを作成するにあたって、困った制限として、以下のようなものがありました。

15分間アクセスがないと、シャットダウンしてしまい、再起動には数分かかる
ファイル保存ができないため、Googleの認証情報を保存できない

シャットダウンされてしまう問題は、GAS (Google App Script)を利用して定期的にサーバーへアクセスすることで、解消しました（参考）。

また、Googleの認証情報を保存できない問題については、別途無料DB (Vercel Postgres)を利用し、認証情報をこのDBに保存することにしました。

ngrokを利用してローカルでのテスト

ローカルでのテストにはngorkを利用しました（参考）。
ngrokはlocalhostを外部公開できるサービスです。

ngrokを起動して表示されるURLを、Line Botの転送先URLへ登録しておくことで、ローカルでのテストが可能となります。

Google OAuth2.0 参考資料

Google Drive APIやGoogle Sheets API を利用するためにはGoogle OAuth 2.0 認証が必要ですが、FastAPIで実装した記事がなく、結構難しかったです。

その中でも参考になった資料を紹介します。

Google for Developers

ウェブサーバーアプリケーションに OAuth 2.0 を使用する | Authorization | Google for Developers

Correcord Dev Blog

[Python開発初心者必見]Google OAuth2.0の仕組みと実装の方法を解説！自分は今アプリを開発しているのですが、Googleスプレッドシートへデータに保存したくて、Google OAuth2.0を勉強せざるを得なくなり、他にも困っている人がいるのではない…

最後に

費用

OpenAI API利用料は以下になります（支払いはドル建てなので、為替により変化するとは思います）。これ以外は全て無料です。

GPT-4oを利用
名刺画像1枚あたり約0.7円

一般的な名刺管理アプリを利用するよりもはるかに安価ですが、さらに利用コストを削減するには、高精度な無料OCRツール（例：Google Vision API）を活用し、文字データを抽出後にGPT-4oで構造化処理を行うのがおすすめです（OCR部分の追加実装が必要になりますが）。なぜなら、画像を入力すると、トークン量が増えてしまうからです。この方法なら1枚あたり約0.07円程度に抑えられるはずです。

使ってみたい

ソースコードを公開していますので、ご自由にお使いください。
特にGoogle OAuth 2.0認証周りの実装はかなり苦労したので、同じような部分で苦労している方の参考になれば幸いです。
このアプリを活用することで、ビジネスの効率化が期待できます。ぜひ試してみてください！