こんにちは！今回は、アプリ構築AIサービス「Create.xyz」（以下Create）の新機能Functionについてご紹介します。
Createに関する前回の記事では、Createで統合機能が提供されていない外部データベースと連携するにはSwagger APIを使うしかないとご紹介しました。しかし、この度Function機能が提供され、無料プランでも自然言語のプロンプトを入力するだけで簡単に外部サービスと連携できるようになりました。
今回は、Function機能を使って外部サービスと連携する方法をご紹介します。実際にTwilioとXanoと連携するFunctionを作成しサインアップページを作成していくので、皆さんもぜひ一緒にお試しください！
▼前回のCreate紹介記事
1. Function概要
Function機能は、Create上で外部サービスのAPIを実行する機能を自然言語プロンプトで作成できるものです。作成したFunctionはPageに実装して、外部サービスとの連携が必要な処理等を実行することができます。
Introducing Functions: turn your words into logic
— Create (@create_xyz) 2024年6月4日
Functions let you build backends. So you can now build most apps with @create_xyz.
Here's why they're powerful 👇 pic.twitter.com/mRIs2z5cOL
Functionのビルダー画面の「Prompt」で連携したいサービスと実行したいことを入力するとFunctionを作成します。「Test」タブでテスト用の情報を入力して作成したFunctionをテスト実行し、結果を確認できます。API Keyなどの機密情報は「Secrets」タブで保存してFunctionの実行時に使用することができるようになっています。
2. Fuctionビルダー画面
まず、Functionビルダー画面を紹介します。Createにログインし、DashboardでProjectを選択すると、上部に「New Function」というボタンが表示されます。このボタンをクリックすると、新しいFunctionを作成してFunctionビルダー画面を開きます。
Functionビルダー画面の構成はPageやComponentビルダー画面とほぼ同じになっています。異なる部分は、「Test」と「Secrets」タブがある点です。
「Test」タブは「Prompt」タブの隣のタブで、作成したFunctionのテストを行うことができます。
上部ではプロンプトを元にパラメータとその入力欄が自動で生成表示され、テスト用のデータを入力し「Run function」をクリックするとテストを実行します。実行後、タブ下部の「Tests」に表示される履歴をクリックしてInputとOutputが確認できます。
「Secrets」タブは「Test」タブの隣のタブで、Fuction実行に必要なAPI Keyなどの機密情報を安全に保存することができます。
SecretはProject内の全てのFunctionで使用することができます。なお、現在Secretはユーザー名とパスワード、ベアラートークン等の保存に使用することは可能です。OAuthトークンについては、期限切れ時の更新機能のサポートがまだできていないことから非推奨となっていますのでご注意ください。
3. Functionの作成
ここからは、Functionを作成する方法をご紹介していきます。今回は下記を作成していきます。
- Twilioを経由してSMSを送信するFunction
- Xanoと連携してサインアップするFunction
- サインアップ(2のFunction）し、SMSを送信する機能（1のFunction）を実装したPage
3.1. Twilioを経由してSMSを送信するFunctionの作成
Twilio経由でSMSを送信するFunctionを作成します。ここではSecretの使い方が確認できます。
3.1.1. Twilio
まずはTwilioにログインし、下記の値を確認します。Console>Account Infoに記載されています。
- Account SID
- Auth Token
- My Twilio phone number
3.1.2. Create
では、CreateでFunctionを作成していきます。「New Function」から新規Functionを作成したら、下記のプロンプトを「Prompt」欄に入力して「Generate」ボタンをクリックします。
Twilio経由でSMSを送信する機能
下記のような結果となりました。
「View code」からコードを確認すると、特に指定していないにも関わらずSMSを送信するTwilioのAPIが使用されているのが分かります。Account SIDやAuth Token等が使用される場所も明確です。
「Test」タブを開くと、「to」から「accountSid」までSMS送信APIリクエストに必要なパラメータが全て表示されています。しかし、これらのパラメータのうちfromは毎回同じで、Auth TokenとAccount SIDは秘密鍵です。そこで、この3つをSecretとして保存しておきます。
「Secrests」タブを開き、「Add new secret」ボタンをクリックして下記の通りAccount SID、Auth Token、My Twilio Phone numberを保存します。正しくSecretを使用するには、APIリクエストで使用されるパラメータ名と全く同じNameで保存する必要があります。
保存できたら、プロンプトはそのままで再生成します。「Generate」をクリックし、生成完了後に「Test」タブを確認すると、パラメータ入力欄は「to」と「body」しか表示されていません。この2つを入力して再度「Run function」ボタンをクリックしてSMSが届けば、Secretを使用してSMS送信が正常に行われているということになります。
SMSが届きました。Testタブでも正常に実行できているのを確認できました。
3.2. Xanoと連携してサインアップするFunctionの作成
次に、Xanoと連携してサインアップするFunctionを作成します。ここではユーザー固有値等が含まれるAPIを使うFunctionの作成方法が確認できます。
3.2.1. Xano
まずは、Xanoで連携するAPIを含むAPIグループのBase URLを確認します。XanoにログインしたらAPI>APIグループ右上のクリップアイコンをクリックしてコピーします。今回はサインアップ機能を実装したいので、auth/signupエンドポイントを含むグループのものをコピーします。
また、念のためauth/signupの設定が「Public」になっていることを確認します。XanoではPublicになっているエンドポイントは認証なしで接続できます。
3.2.2. Create
それでは、CreateでFunctionビルダー画面を開きます。「Prompt」欄で下記のプロンプトを入力し、「Generate」ボタンをクリックします。プロンプト内の「BASE-URL」の箇所ではコピーしたBase URLを使用します。
Xanoを使ったサインアップ機能の作成 次のAPIに接続します。 BASE-URL
下記のような結果となりました。また、「View code」をクリックしてコードを確認すると、エンドポイントがサインアップエンドポイントになっています。
では、正常にサインアップできるかテストしてみます。「Test」タブを開き、email、password、usernameを入力し「Run function」をクリックします。
「Run function」ボタン下部に表示される履歴をクリックすると、authTokenと"success": trueが返されていることから正常に実行されたようですが、Xanoでデータベースを確認すると「Name」欄が空欄になっています。
パラメータ名をよく確認すると、「name」で値を送信しないといけないところを「username」と送信していることが原因なようです。
名前を「name」で送信できるよう、プロンプトを下記に修正して「Generate」ボタンをクリックします。
Xanoを使ったサインアップ機能の作成 次のAPIに接続します。 BASE-URL 名前は「name」とします。
結果は下記の通りとなりました。コードを確認すると、「name」となっています。
「Test」タブからもう一度テストを実行すると、今度は入力した通りの値がNameに保存されています。
XanoはAPIグループによってBase URLが異なり、プロンプトで直接URLを入力して指示する方が早いのでこのような方法でFunctionを作成しました。しかし、プロンプトで実装したい内容を入力するだけでCreateが適切なエンドポイントを設定してくれると確認できましたね。
4. FunctionのPageでの実装
それでは、作成した2つのFunctionを使ってサインアップページを作成します。今回は、サインアップに成功したらSMSを送信する仕様のページを作成します。
2つのFunctionを作成したProjectで「New Page」をクリックして新規Pageを作成します。ビルダー画面が開いたら下記のプロンプトを入力します。
サインアップページの作成 Xano Signup Function（XanoサインアップFunctionの名前）でサインアップします。 サインアップに成功したら、サインアップボタンの下部に「成功！」と表示します。さらに Twilio SMS Sender（Twilio SMS送信Functionの名前）で入力した電話番号にSMSを送信します。
PromptでのFunctionの呼び出し方ですが、ComponentやAdd-onsの呼び出しと同じくFunctionを呼び出したい部分で/を入力します。すると候補が表示されるので、Functions>呼び出したいFunctionを選択します。
入力できたら「Generate」ボタンをクリックします。下記のような名前、メールアドレス、パスワード、電話番号の入力欄と、「サインアップ」ボタンが配置されたページが生成されました。
Functionから必要な情報が分かることもあり、特に指示しなくてもプロンプト通りの処理に必要な入力欄が作成されるのは感動ですね。
5. 動作確認
それでは、正常に処理が完了するのか確認してみます。Demoモードにすることでビルダー画面上で動作確認を行うことができます。画面左上の「Demo」をクリックしてDemoモードに変更します。
ビルダー画面上で入力欄を全て埋めて「サインアップ」ボタンをクリックします。
「サインアップ」ボタン下部に「成功！」と表示され、SMSが届き、Xanoのデータベースで保存されていれば成功です！
ちなみに、今回SMSの本文は特に指示しなかったのですが、文脈に合わせて日本語で「サインアップが成功しました！」という内容のSMSが送信されました。設定もれの部分もカバーしてくれるのはありがたいですね！
6. まとめ
今回は、CreateでFunctionを使って外部サービスと連携する方法をご紹介しました。自然言語プロンプトを入力するだけで外部APIと連携ができ、秘密鍵を保存して使うこともできます。既存の外部データベースとの連携や、外部APIを使用したサービスの機能拡張等が実現できそうです。
また、FunctionではZapierと連携することも可能です。Zapierを使えば様々なサービスと簡単に連携することができますね。ZapierはFunctionでは未対応のOAuthにも対応しているので、ぜひご活用ください！
