見出し画像

Create.xyzでページを作成してみたら簡単だったけど、むしろZapierで行き詰った

某イベントにてCreate.xyzさんを知り、何か凄そう!と思った所で、
以前にお客様から「こんなことできますかね?」のご相談を受けていただので作ってみました。

今回は割と上手くいった方だなと思いますが、まぁ挫折しそうなタイミングはありましたので共有でございます。


やりたいこと

企業の名称・代表者名・住所を入力したら、電話番号やホームページURLを検索した上で、検索結果についてGoogleスプレッドシートに保存したいです。
大企業などはわざわざそんなことしなくても…という世界ですが、中小企業向けの与信審査などされている会社さんの場合、それなりに同じ企業名があったりして必要みたいです。

レッツチャレンジ

Create.xyzにて、
サインアップ(無料)>New Project > New page
右側のPromptウィンドウに、上記の「やりたいこと」を入力して、右下のGenerateを押すだけです。
簡単でとってもイイ感じ。

短文でも良い感じ

ちなみに少し、「Prompt Generator」も触ってみていますが、複雑になり過ぎて自分で修正依頼かけづらいくらいなら、これでも大差無さそうというのが今の時点の感想です。

最初のPrompt入れた時点で、検索窓や検索機能は実装できました。(驚き!)

残るピースはGoogleスプレッドシートへの出力だけなので、
別途「New Function」から構築します。
色んな実装方法がありそうですが、Zapierとの連携が良さそうということで、オフィシャルのYoutubeを参考にしました。

https://youtu.be/BJvJHMUXSSM?si=_uAzBQtNVfTAviI3

基本的な操作は、Promptで機能を指定して、SecretにAPI Keyを入れて、Testするだけ

FunctionもPrompt入れる

Zapierで行き詰る

ちなみに、前々からZapierは気になってましたが触ったことが無かったので、今回初めて構築しました。
こちらもまあ直感的で、サクサク作れるハズでした。

最終的なフロー

テストを進めていくと、何か上手いこと「データが入っている最後の行を特定して、その下に追加する」が設定できません。
絶対アルアルなケースだし、GASとかだとサラッと出てくるのに、そんなに大変なんだっけ?!って状態です。

でもどうやら”Update Spreadsheet Row”単体では難しいようで、Lookup のStepを追加します。
しかも単に「空白行を探す」は上手くいかず、試行錯誤。
Perplexity経由でZapierコミュニティ見たら、検索キーの設定からと言われまして…ホントかよと思いながらもとりあえず実装します。
(実はGASかました方が早い説も…)

一番右にKey設定
Keyを検索(Bottom-up)するように設定

よしこれでOKかと思いきや、ダメです。
Lookup の結果が”4”だとして、5行目にデータ追加したいのに、”4+1=5”ではなく”41”になってしまいます。

ダメだったVer(設定)
ダメだったVer(テスト結果)

いくつか試行錯誤をして、Chat-GPTやClaudeにも何回か聞いてダメで、いったん心折れて一晩寝かせます…
(Row Number への数式の入れ方変えるとか、データのFormatterを使うとか…)
気を取り直して、もう一度ゼロリセットでClaudeに聞いたら、”Code By Zapier”という新たな手法を提案されます。

結果良かったアイデア
なんか思ったよいも大げさ

これまた思ったよりも大げさな話ですが、このようなコードを経由することで上手くいきました。
そして何なら、下記コードはClaudeからの提案ではなく、Zapierの中で「Generate With AI」機能で書いてもらいました。

// Extract the row number from the input data
const rowNumber = inputData.rowNumber;

// Convert the row number to a number type and add 1 to it
const newRowNumber = Number(rowNumber) + 1;

// Create an output object with the new row number
output = { newRowNumber };

この結果を後続Stepに入れるとかなりイイ感じでした。

成功Ver(Row Number にJavaScriptの結果を入れる)
イイ感じにrowが足される

出来上がったページ

結果、Create.xyzに戻り実行をすると、期待通りに動作しています。

「エクスポート」ボタンを押す
正常動作時のメッセージ
スプレッドシートに追加される

めでたしめでたし、ということで満足です。

このページそのものは、完全に私のプライベートなスプレッドシートに接続されているので公開はできませんが、共有用のページを作成しました。
共有用にZapierの連携を切っています。
この辺りのDuplicateなどはかなり簡単に作れました。

今後の改善余地

冒頭の通りで、今回はかなり上手くいった方の事例かなと考えています。

しいていえば、「社名」「代表者名」「住所」について、曖昧な情報でも検索してヒットしてくれるのは良いですが、スプレッドシートには正式な情報を入れたいものです。
もう一歩頑張るなら、企業ホームページをHTML解析して、正式名称や代表者のフルネームなどを取得してスプレッドシートに返したいですね。
(実は30分ほど試行錯誤しましたが、"/Web Scraper”では上手く値が取れず逆に情報過多だったので一旦諦めました)

もしくは、検索先をGoogleではなく、官公庁系データ(https://www.houjin-bangou.nta.go.jp/webapi/) とかにすれば良いような気もしますが…ちょっと大変そうなので一旦おきます。

まとめ・感想

Create.xyzはとても早いし良い感じです。
まさに私のように、ノンエンジニアがちょっと作りたいんだけどエンジニアに頼むほどでも無いんだよね…なニーズにとっての救世主な気がします。

なお、今回の一連の構築はあえて無料プラン内でやっています。
実はイベントにてプロモーションコードをもらったので、今後はPROプランにアップグレードして試していきたいと考えています。
こうなると、「作ってみたい」モノが沢山あるので、しばらくはChat-GPTなど以上にCreate.xyz中心にしようかと思っています。

なお、正直イベントなどでは、「セキュリティ面がちょっとね…」といった声をちらほら聞きましたが、個人的DIYには全く問題無いです。
むしろ、BubbleやDifyのようにローコード・ノーコードとはいえ気持ちハードル高めのツールに比べると随分と使いやすいです。
ということで、セキュリティやインフラ面については乞うご期待です。

いいなと思ったら応援しよう!

この記事が参加している募集