【Bubble】法人番号を入力することで会社名や住所が表示されるアプリを作る

Bubble
2024.01.18

はじめに

ノーコードツール「Bubble」を利用してタイトルのようなアプリを作ります。
このシステムは法人番号を入力すると会社情報が表示されるものです。

システムの概要ですが、まず事前準備としてAmazon S3に国税庁の公表データを保存しておきます。
その後以下のような動きを目指します。

① Bubble側で法人番号を入力すると
② 入力した法人番号を元に、S3に保存したデータを検索し
③ 対応する会社情報をBubbleに返す
④ Bubble側で住所や会社名などの情報が表示される

②、③の部分にはAWS Lambdaを利用しますが、データが多いとLambdaの実行時間を超過します。

以下のツールを使用します。

  • Bubble
  • Bubble Plugins API Connector
  • Amazon S3
  • AWS Lambda

※2024年1月10日時点のバージョンです。

BubbleとAWSのアカウント登録は済んでいるものとします。

手順

１．CSVデータの準備

① 国税庁の法人番号公表サイトからUnicodeのCSVファイルをダウンロードします。

② Amazon S3に汎用バケットを新規作成し、ダウンロードしたCSVファイルをアップロードします。

２．Lambdaの設定

① 関数を「一から作成」します。

② 任意の関数名を入力し、ランタイムはNode.js 18.xに設定します。

③ ダイアグラムにある「トリガーを追加」でAPI Gatewayを選択します。

④ API endpointに記載されているURLをコピーしておきます。（Bubbleの設定で使用します）

⑤ 作成ができたらコードソースのmjsファイルに以下の実行コードを適宜変更しながら記入し、Deployします。

import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3";
import csvParser from 'csv-parser';
import { Readable } from 'stream';

// リージョンを適宜設定
const s3 = new S3Client({ region: "ap-northeast-1" }); 

// CSVファイルが存在するS3のバケット名とキーを設定します。
const BUCKET_NAME = 'バゲット名';
const CSV_FILE_KEY = 'CSVファイル名';

export async function handler(event) {
  // queryStringParameters（Bubbleから送られるパラメーター）から検索値を取得します。
  const Corporatenum = event.queryStringParameters?.Corporatenum;
  if (!Corporatenum) {
    return {
      statusCode: 400,
      body: 'Missing required query parameter: Corporatenum'
    };
  }

  try {
    // S3からCSVファイルを読み込みます。
    const command = new GetObjectCommand({ Bucket: BUCKET_NAME, Key: CSV_FILE_KEY });
    const { Body } = await s3.send(command);

    // CSVデータを検索します。
    const matchedRows = [];
    for await (const row of Readable.from(Body).pipe(csvParser({ headers: false }))) {
      if (row[1] === Corporatenum) { // データ2列目（法人番号）を検索
        matchedRows.push(row);
      }
    }

    // マッチした行のみを返します。
    return {
      statusCode: 200,
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(matchedRows)
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: `An error occurred: ${error.message}`
    };
  }
}

⑥ テストイベントには以下のコードを記入します。

{
  "queryStringParameters": {
    "Corporatenum": "S3のCSVファイル内に存在する法人番号"
  }
}

⑦ コードタブに戻り先ほど作成したテストイベントを指定しTestを行います。

⑧ 2-⑥の”Corporatenum“に入力した法人番号のデータが出力されていたらLambdaの設定は完了です。

※エラーが出た場合は内容を確認し、適宜修正を行ってください。

例）

・”Task timed out after 〇〇 seconds“
　タイムアウト時間を超えています。
「設定」 > 「一般設定」 > 「編集」よりタイムアウト時間を延ばしてください。（最大15分）

・”Access Denied“
　LambdaがS3バケットにアクセスするための権限を持っていません。
　IAMコンソールにアクセスし、作成したLambda関数に関連付けられているIAMロールを検索します。
　許可ポリシーの「許可を追加」 ＞ 「ポリシーをアタッチ」よりAmazonS3のポリシーの許可を追加してください。

・csv-parserのインストールが必要な場合
　ローカル環境にNode.jsをインストールし、csv-parserをインストールするためのフォルダを作成します。
そのフォルダに移動し、npm init コマンドを実行します。
npm install csv-parser を実行し、必要なパッケージをインストールします。
同じフォルダに上記の実行コードを記入したmjsファイルを作成します。
　フォルダをZIP形式に圧縮し、作成したLambda関数のコードタブ「アップロード元」から.zipファイルを選択し、アップロードします。

３．BubbleのAPI設定

① Add pluginsでAPI Connectorをインストールします。

② API Nameを入力し、Nameにも適当な名前を入力してください。

③ 「expand」をクリックしGETの右に2-④でコピーしたAPI endpointを入力します。

④ ParametersのKeyにはLambdaで設定していた変数を記入します。（Corporatenum）

⑤ ValueにはS3のCSVファイル内に存在する法人番号を記入してください。

⑥ 「Reinitialize call」をクリックし、データが取得出来れば接続完了です。「SAVE」をクリックします。
ParametersのValueは削除してかまいません。

４．Bubbleの出力画面設定

① Inputで法人番号の入力ボックスを作成します。

② Groupを作成し、Type of contentに先ほど作成したAPIを選択します。

③ Data sourceにはGet data from an external APIを選択し、3で作成したAPIを選択、(param.)に①で作成した入力ボックスのvalueを指定します。Data sourceに戻ったら:first itemを選択します。

④ Groupの中にTextを作成しInsert dynamic dataを選択し、Parent group‘ｓ〇〇を選択、表示したい内容に対応する番号を選択します。

郵便番号：15
都道府県：9
市区町村：10
町名番地：11
法人名：6

⑤ Previewで法人番号を入力し対応する情報が表示されたら完了です。
※数秒待つことがあります

さいごに

今回の内容は以上です。
レスポンスに時間がかかるため実用的ではありませんがBubbleでアプリを作る参考になれば幸いです。

タイトルとURLをコピーしました