名刺管理アプリをノーコードツールで作成してみた話

https://qiita.com/watanabe-tsubasa/items/12dc7ba9a6de55e8afd9

の記事が結構バズっていたので、ノーコードで実現できないか試してみました！

名刺管理アプリのユーザはほとんどが非エンジニアだと思うので、コード書いて実装すると、
エンジニアに委託して作ることになりますが、そうなると「要件定義〜実装〜確認」と少なからずV字モデルの開発が必要になり、サクッとつくります！とは中々いかないものです。

エンジニアが稼働するとなれば「それって本当に必要なの？」みたいな苦言を呈されることもあるでしょう。

そこでノーコードツールです！

ノーコードツールのメリットはなんといっても実現したいことソースコードが書けなくても自分の手で進めていけることです。今回は名刺管理アプリを国産SaaSのノーコードツール「Yoom」を使って作成してみました！

結論としてはおそらく、上記の記事で紹介されている名刺管理アプリと要件としてはほぼ同じものをソースコードを書くことなく構築できたんじゃないかと思います。


# 構成

成果物として以下のような構成のアプリ作成を目指します。
(LINEではなくスラックと連携していますが、 https://qiita.com/watanabe-tsubasa/items/12dc7ba9a6de55e8afd9 で紹介されているものとほとんど同じものを目指します。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/943f0230-4817-df4c-8dde-02cc7c9a5485.png)

結論としてはすべてノーコードで作成して動かすところまでの実現ができました！

# コスト感

大事だと思いますので、まずはじめに書いてしまいます。

今回はOCRやGPTを利用するためYoomはチームプラン以上が必要となります。（ https://lp.yoom.fun/plan ）（月2万4千円ほど＋従量課金）ここが結構悩みどころなポイントで「名刺管理アプリ」の構築のためだけに契約するんだと正直高いなーという印象を持ちました。

Yoomを用いると他にもいろいろなことを自動化することができるので社内で自動化どんどん進めていこう！という気運があるならかなりアリなんじゃないかなと思います。

自前でサーバ用意してGPTやOCRも使うことを考えるとAWSで構築すると最低でも月1~2万円はかかるので、ゴリゴリ自社開発よりかは遥かにおすすめできますが、「名刺管理アプリ」の構築のためだけに契約するなら、名刺管理アプリを探された方がハッピーかもしれません。

# 構築

早速やっていきましょう！

## Yoomの初期設定

Yoomに関する初期設定や基本的な使い方については、公式のドキュメントを見るのが良いと思います。
チームプラン以上を契約すれば、基本的な使い方とかはサポートしてくれると思います。（たぶん）
ここらへんは国産SaaSの良いところですね！

それでは、プロジェクトが作成できているところから進めていきます！

## スラックとの連携

### トリガーの設定

まずは「新規作成」をクリックして、はじめから作成を選択してフローボットを作成しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/05c898da-1475-113d-0698-de62385b0a89.png)

今回はユーザーインターフェイスとしてスラックを採用したので、フローボットを起動する条件として「特定のアプリイベントを受診したとき」を選択します。

![スクリーンショット 2024-04-07 18.06.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/8e70582f-4b78-e5e9-0632-206ae34c59f5.png)

「Slack」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/6f580510-3479-758f-8690-1ba81d5d11a1.png)

「ファイルがチャンネルに投稿されたら」を選択して「次へ」
![スクリーンショット 2024-04-07 18.49.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/9d71c47b-4737-b55a-02bd-4be22b2ea042.png)

「チャンネルID」には名刺画像が投稿されるチャンネルを指定します。

チェンネルに実際に名刺を投稿したら、テストをクリックして、リクエストに成功したら「保存する」をクリックしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/4f0cd1bd-745e-0d02-2f01-2d6f551aa0a2.png)

### ファイルのダウンロード

次にファイルのダウンロードのオペレーションを作成します。

アプリと連携するから再びslackを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/827a923d-2d06-b555-e753-2c4c10e3c1bb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/7e67d7bb-38b5-8eec-7108-82d16d6a2946.png)

「投稿されたファイルをダウンロード」をアクションとして選択しましょう

![e62b018c-451d-e032-4891-4f011e0c3693.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/25528757-6bf2-d07c-7b0e-c72a9f885580.png)

ファイルのダウンロードリンクに先ほど取得したダウンロードリンクを設定してテストしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/d99c0e79-dc56-a848-bc47-7a070afd07cd.png)

「テスト成功」となればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/26480073-4c1e-8ab2-daad-d1d6a10f88b6.png)


ここまでが一番の山場でしたので、あとはYoom上でポチポチしていくだけでアプリが完成します！
あとは簡単ですのでサクサク進めていきましょう！


## OCRの利用

再びオペレーション選択から、「画像・PDFから文字を読み取る」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/cedd6f71-3ae3-5dd5-f05f-211287b0466f.png)

「名刺を読み取る」をアクションとして選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/a479a835-6834-c477-cace-31d7c184f960.png)

ファイルの添付方法として先ほど取得したファイルを選択して、テストを実行します。
うまくいけば会社名やメールアドレスが取得できます。これはちょっと感動しますね！

![スクリーンショット 2024-04-08 1.56.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/49608163-2005-a44b-4ce6-76d22ab43330.png)

保存して次に進みましょう。

## スプレッドシートに書き込む

まずは書き込み先のスプレッドシートを用意しましょう

私は以下のようなシートを作成しました。ヘッダー行（１行目）が無いとYoomでの入力ができなそうだったので、追加しています。もちろん好みのヘッダー名にすることもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/25349f84-5289-d2fb-13ba-3e937013c638.png)



「データベースを操作する」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/2b3b612d-03e9-ffc8-67ce-9b9842ce1137.png)

「Googleスプレッドシートを選択」します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/a3ace12d-29a2-9b89-fd06-5fb9ec33cfd1.png)

連携するアカウントを追加するから認証を行い、認証後「実行アクション」から「レコードを追加する」を選択します。連携先のスプレッドシートやタブを選択します。

![スクリーンショット 2024-04-08 2.25.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/b54ac35c-62a8-e73e-e95b-585cf0cb5430.png)

テーブル範囲はとりあえず「A1:G30」と設定しました。（テーブル範囲の設定意義と意味はあまり良くわからなかったので気になる方はサポートに聞いてみていただきたく。。。）

「次へ」をクリックします。

以下のようにどのカラムにどの値を入力するか設定していきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/97f6d158-8439-63c3-0b8a-4e325403aa87.png)


## スラックに完了を通知する。

最後にスラックに完了通知を送りましょう。

再びアプリ連携より「slack」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/35d7b5e1-9b8f-784e-1135-588122d288b0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/a44eb769-09b3-4469-abe5-684d3cb4dac5.png)

通知先チャンネルを選択して、通知メッセージを作成してテストしましょう。
このあたりの構築はニーズが多いオペレーションなのか公式のドキュメントも充実していたので、そちらを参照しても詳しく書いてありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/4c23cfbc-1c92-d7c4-467d-7b850d5c28cc.png)

テストを押してスラックに通知が来たら完成です！！

## トリガーをONにする

最後にフローボットの作成ページに戻りトリガーをONにしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764991/ca5f25c0-57c0-3689-52ec-d3f6e92d2f5f.png)

最後に結合テスト（スラックに名刺をアップロードしたら、スラックに読み取り結果が届く）を実施して完了です。

トリガーが最短でも５分に１度しか設定できないため、アップロードからOCR完了まで最大で５分のラグが発生してしまうところが最大の難点に感じました。スラックにもwebhookがあるのでそれをYoomが受け取れるようになると本当にノーコードで仕様の完全再現ができると思います。Yoomの開発に期待したいところです！

# 感想

結果として、https://qiita.com/watanabe-tsubasa/items/12dc7ba9a6de55e8afd9
で紹介されているアプリとほとんど同様の仕様のものが数十分で作成できたので（慣れたらもっと早い）
速さ・簡単さといった点ではすごいなと思いました。

また、ノーコードで作れるので、スラックの通知内容を変えたくなったり、スプレッドシートではなくてキントーンに連携したかったりしたときにそれが自分で作成できるのはノーコードの何よりの強みでしょう。（エンジニア動くと遅いし高いよ！）

月24,000円が最大の懸念事項ですが、
もし、他の業務の自動化でもYoomを使う予定があったり、すでに使ってる方であれば、従量課金については名刺１枚あたり10円程度の試算なので、今回の選択も全然アリだと思います！（毎月千枚以上の名刺とOCRしたりするのであれば、特化した専用のSaaSを利用された方がハッピーかと思います。）

Yoomを利用した業務の自動化は他にもいろいろできそうですし、チームプラン以上であれば、自動化支援のサポートも付いてるみたい( https://lp.yoom.fun/plan )なのでなんかしらには他の業務や部署でも活用はできそうです。

今回は、自社開発・専門アプリ（ツール）の２つに加えて、ノーコードツールも第三の選択肢として全然アリやで！という提案でした！！

おわり