みなさん、こんにちは！
今回は、以前にもご紹介した ncScale の Xano 編です！ちなみに前回は、Bubble との連携方法についてでした。
ncScale と Xano は公式的にもパートナーの関係となっていますので、Bubble との連携ではカバーされていなかった「Assets catalog（資産カタログ）」も「Log management（ログ管理）」と「Alerting（アラート）」に加えて利用することが可能です。今回の記事は ncScale の無料プラン内を使用して確認できる動作のみを対象としていますが、有料プランの場合は、この Assets catalog に加えて、「Versioning（バージョン管理）」や「Obfuscation（難読化）」といった機能も利用することができるとのこと。
Xano はバックエンド側の機能をノーコードで構築できる人気のサービスです。Xano については、以下の記事でもご紹介していますので、Xano が初めてという方は、是非併せてご参考くださいね！
- 1. Xano との統合
- 2. サンプルアプリの作成
- 3. 動作確認
- 4. 具体的な活用例
- 5. まとめ
- 6. 参考リンク
1. Xano との統合
では、ここからは実際に ncScale と Xano を連携していきましょう。連携はとても簡単で、基本的には Xano で発行した APIキーを ncScale に登録するだけで完了です！
- Xano で APIキーを発行する
- ncScale で Xano 用のツールを作成する
- Xano で ncScale の接続を確認する
1.1. Xano で APIキーを発行する
Xano の「Instances」ページで、連携したい インスタンス設定（⚙️アイコン）から「Manage Instance」を開き、「Metadata API」を選択します。
次に「Manage Access Tokens」から「New Access Tokens」を選択します。
Scopes で「R（Read）」を有効にして「Create」をクリックします。これは、読み取りのみ可能（新規作成、更新、削除は権限なし）という意味です。
発行された API キーを安全な場所にメモしておきます。
1.2. ncScale で Xano 用のツールを作成
次に、ncScale で Xano から取得した API キーを使ってツールを作成していきます。
ncScale の tools list から「Xano」を選択します。
Create Xano tool で、先ほど取得しておいた APIキーを入力して「Select instance」をクリックします。この際「Monitoring」と「Assets」のチェックはオンのままにして有効としておきます。
API キーに問題が無ければ、設定しておいたインスタンスを取得していますので、「Connect this instance」をクリックして接続します。
1.3. Xano で ncScale の接続を確認する
最後に Xano の「Connect」メニューで「ncScale」を CONNECT して接続を確認したら準備完了です！
2. サンプルアプリの作成
では、実際に Xano を動かすための簡単なサンプルアプリを準備したいと思います。Postman などを使用して Xano に準備した API を実行することでも動作を確認することはできますが、今回は、より実践的なイメージとなるよう、データベースを Xano 、Bubble をフロントエンド側とした簡単な「タスク管理アプリ」を想定して作成してみました。
なお「タスク管理アプリ」に関する詳細な作り方については割愛しますが、基本的な仕様としては「メールアドレスでサインアップしたユーザーが自分のタスクを新規作成したり、タスク一覧を確認したりできるアプリ」といった一般的な仕様とします。
2.1. Xano：データベース
では、まずはバックエンド側の Xano から準備していきたいと思います。なお、設定方法の詳細は一部割愛しています。同様の設定を試される場合は、添付している図をご参考ください。
登録したタスクは Xano のデータベースに登録することとしますので、テーブルは「user（ユーザー）」「Tasks（タスク）」「TaskStatuses（未実施、完了 etc）」の3つとします。
2.1.1. user
user テーブルは Xano がデフォルトで作成した定義のまま使用します。
| フィールド名 | データ型 | 説明 |
|---|---|---|
| id | integer | ユーザーの一意識別子 |
| created_at | datetime | ユーザーが作成された日時 |
| name | string | ユーザーの名前 |
| ユーザーのメールアドレス | ||
| password | password | ユーザーのパスワード |
また、user テーブルは、ログイン機能を利用できるように Bubble、Xano の両方で管理し、Xano 側で発行された id を Bubble 側の User type に保存して紐づけるようにします。
2.1.2. Tasks
Tasks テーブルはトランザクションデータを登録するテーブルです。なお、Xano では、テーブルを作成するタイミングで、CRUD（Create/Read/Update/Delete）の API エンドポイントを作成することができますので、併せてエンドポイントについてもここで作成しておきます。
CRUD エンドポイントを自動生成するには、「Add table」する際に、Table details で「Add Basic CRUD Endpoints」のチェックをオンにしておきます。
なお、今回のサンプルでは Tasks テーブルのエンドポイントは「Transaction」という名前の API Group（API 群を管理しやすいように、API をまとめておくフォルダのようなもの） を用意して、そちらに保存しています。自動作成されたエンドポイントは次項でご紹介していきます。以下が Tasks テーブルの定義内容です。
| フィールド名 | データ型 | 説明 |
|---|---|---|
| id | integer | タスクの一意識別子 |
| created_at | datetime | タスクが作成された日時 |
| user_id | integer | タスクを作成したユーザーの一意識別子 |
| title | string | タスクのタイトル |
| description | text | タスクの詳細説明 |
| taskstatuses_id | integer | タスクのステータスを示す一意識別子 |
| due_date | datetime | タスクの期限日 |
2.1.3. TaskStatuses
TaskStatuses はマスタデータとして使用します。また、TaskStatuses は Bubble でも Option sets として準備します。
| フィールド名 | データ型 | 説明 |
|---|---|---|
| id | integer | ステータスの一意識別子 |
| created_at | datetime | ステータスが作成された日時 |
| name | string | ステータスの名称 |
2.2. Xano：API エンドポイント
Xano で作成した API を確認していきます。今回は「Authentication」と「Transaction」という名前の API Group で管理しています。
Xano の自動生成機能を利用して準備した API エンドポイントは全部で 8つ（Authentication 3つ + Transaction 5つ）になります。
2.2.1. Authentication 認証用エンドポイント
「Authentication」は、認証時に使用するエンドポイントをまとめているもので「login（ログイン）」「me（ユーザー情報）」「signup（サインアップ）」の 3つです。
エンドポイントの設定ポイントとしては、login/signupでは、パラメータとしてメールアドレスやパスワードを受け取り、認証を実行して Bearer トークンを発行します。meは Authentication Required のエンドポイントとして設定しています。具体的な設定については、下図も併せてご参考ください。
2.2.2. Transaction タスク操作用エンドポイント
「Transaction」は、ユーザーがタスク情報を操作するためのエンドポイントをまとめているもので、全部で 5つ自動生成されました。これらのエンドポイントは全て Authentication Required で作成しています。
設定については、自動生成の状態からユーザーで絞り込みを行うなど、一部更新している部分があります。具体的な設定については、下図も併せてご参考ください。
以上で、Xano 側の基本的な部分の設定は終了です。
2.3. Bubble：Data types / Option sets
次に Bubble でフロントエンド側を作成していきます。 Bubble のデータベースには、ログイン管理用に User type のみ作成します。
2.3.1. User type
User type には、Xano から取得したトークンを保存する token と、Xano の user テーブルと紐づけるための id を定義しておきます。
2.3.2. Status
Status は Xano の「TaskStatuses」と同様のものです。（今回は必ずしも必要ではありませんが、例えばステータス名に変更の可能性がある場合などは、Xano と一緒に管理している方が便利です。）
2.4. Bubble：API Connector
API Connector を設定していきます。なお、Xano 側のエンドポイント URL は、API の設定画面にある「🔗Copy Endpoint URL」から取得することができます。
API Name は任意で設定します。ここでは「My Xano」としました。
2.4.1. Authentication 認証用エンドポイント
認証用のエンドポイントは 3つでした。login / signup ではパラメータとしてメールアドレスやパスワードを引き渡します。自分のユーザー情報を受け取る場合は me で Bearer トークンをセットして Call します。設定の詳細は下図をご参考ください。
2.4.2. Transaction タスク操作用エンドポイント
タスクデータのやり取りのエンドポイントは 5つでした。これらのエンドポイントも、全て認証が必要なデータであるため Bearer トークンは必須となります。
詳細な解説は割愛していますが、メソッド（GET や DELETE、POST、PATCH）を正しく指定し、Use as を「Data」とするか「Action」とするかをタスクアプリの仕様に合わせて設定します。
なお、タスク一覧を取得するような場合は、タイムスタンプをパラメーターに含めることで、キャッシュされたデータではなく、最新のデータを取得するようにしておくことができます。
2.5. Bubble：Pages / Workflows
作成するページは login / signup ができるページと、ログイン後の dashboard とします。（login / signup 機能のページ詳細は割愛します。）
ダッシュボードページでは、ページロードしたタイミングで、ユーザーの「タスク一覧」を取得し Custom state（Tasks）に Set state しています。Repeating group の Data source には、この Custom state（Tasks）の値を設定しています。
タスク一覧の特定行をクリックしたら、選択した行を Custom state（Task）に Set state します。「タスク詳細」の項目では Custom state（Task）の情報を表示するようにしています。
その他、タスクを新規作成した場合は、API Connector で設定した「Create Task」、削除した場合は「Delete Task」を呼び出すように設定します。
サンプルアプリの基本的な部分は以上です！
3. 動作確認
では、サンプルアプリを Preview して、Xano へサインアップしたり、タスクを登録したりして ncScale との連携を確認してみます。
3.1. Assets 機能
Assets で、変更履歴を確認するにはアップグレードが必要ですが、最新の Assets を確認することは可能です。Dependencies（依存関係）を定義したり、テーブル定義の状態を確認することができます。
3.2. Logs 機能
Logs を確認すると、Bubble と Xano 間の実行結果を確認することができます。どのエンドポイントへの接続かや、リクエストヘッダー、レスポンス内容なども確認することができます。
Alerts 機能
Alerts では、前回の Bubble との連携でも定義したように SQL クエリを使用して通知の設定を行うことが出来ます。SQL クエリは、一般的な内容の定義が複数テンプレートとして準備されているので参考にすることが可能です。
実際にメールで送信した通知は、下図のようなものです。
4. 具体的な活用例
ncScale と Xano を連携した場合、Xano で Function 実行中にログを明示的に送信することができます。下図の例ではタスクが新規登録された時点で、どのユーザーがどのタスクを登録したのかをログとして送信する設定を行いました。
「Send Log」機能は、Function Stack の「＋」アイコンから追加することができます。「Connected」で「ncScale : Send Log」を選択して送信するログの内容を定義します。Function を更新したら「Publish」で API への適用を確定させておきましょう。
この「Send Log」機能を効果的に利用できれば、例えば、ユーザーが何かしらの特定のアクションを実行したタイミングでログを記録して、ユーザーの行動分析を行うなど、ユーザーエクスペリエンスを向上させるための洞察が得られそうですね！
今回は、ここまでです！
5. まとめ
本記事では、ncScale とバックエンドサービスである Xano との連携についてご紹介しました。
ncScale も Xano も日々進化しています。既存機能の改善に加えて AI や機械学習を活用した高度な監視機能の導入されれば、さらに高度な分析と自動化が可能になりそうですね！
ちなみに ncScale では API も公開していますので、後日 API の使い方についてもご紹介できればと思います。では、次回もどうぞお楽しみに～！
