前回はBackendlessというサービスをご紹介させて頂きましたが、今回はバックエンドに特化した機能をノーコードで作成できるツール、Xano（ゼノ）についてご紹介します。
Xanoをご紹介する背景としまして、
3月17日にbubbleの新料金プランが公表されましたが、各プランのデータベースのレコードに制限があるというもので
bubble forumの中でも波紋を呼んでおりました。
現在はプランの見直しが行われ、いままで通りのプランでの利用となっておりますが、
今後レコードが制限された場合に、bubbleの利用をそのままに、データベースのみ
外部サービスを利用することも増える可能性があると考えまして、今回の記事を作成させていただきました。
bubbleと連携できるバックエンドのノーコードツールとなっておりますので、
ぜひ一度目を通していただければと思います！
- 1. Xanoとは
- 2. Xanoはこんな人におすすめ
- 3. Xanoはどんなことができるの？
- 4. Xanoはだれでも使えるの？
- 5. 実際にXanoを試してみよう！
- 6. Google OAuthを使ったサインアップをしてみよう！
- 7. まとめ
1. Xanoとは
1.1. ノーコードでスケーラブルで安全なバックエンドを構築できるツール
コード無しでビジネスロジックを構築し、ワークフローを組むことが可能なツールで、
サーバーを管理せずに数分でバックエンドを起動することができます。
1.2. レコード制限なしのデータベース
DBはオープンソースのPostgreSQLを利用しており、レコードの制限なしで利用できます。
bubbleではレコード制限の可能性が高い中、これは大きい利点ですね。
ただし、レコード数が制限がない代わりに、容量の制限はプラン毎にあるので注意が必要です。
1.3. 任意のフロントエンドに接続可能！
ReactやFlutterなどのフレームワークから、BubbleやBildrなどのノーコードツールにも対応しています。
フロントはbubbleで、バックエンドはXanoを使うといった利用の仕方もできます。
2. Xanoはこんな人におすすめ
・ノーコード開発に興味がある人
・データベースの管理を手軽に行いたい人
・MVPをすぐに作りたい人
3. Xanoはどんなことができるの？
Xanoではいろいろな機能がありますが、以下抜粋して紹介させていただきます。
・csvからDBにインポートできる。
・独自のエンドポイントを作成可能。
・webhookの利用が可能。
・任意のフロントエンドに接続できる。
・sendgridを用いたemail送信。
・一般的な操作（メール送信等）を関数に変換して再利用可能。
・if文等を用いた関数の利用。
これだけでも他サービスとの連携等数多くのことができるのがわかりますね。
4. Xanoはだれでも使えるの？
Xanoはアカウントさえ取得すれば誰でも使用できます。
個人で使用する分には下記のようなプランが選べます。
| プラン | BUILD | LAUNCH | SCALE | AGENCY |
|---|---|---|---|---|
| 料金（月額） | 無料 | $59 | $199 | $308 |
| ワークスペース | 1個まで | 3個まで | 5個まで | 12個まで |
| DBのレコード制限 | 10000レコードまで | 制限なし ※ただし3GBのストレージ |
制限なし ※ただし10GBのストレージ |
制限なし |
| APIのレート | 制限あり | 制限なし | 制限なし | 制限なし |
| メディアアップロード | 画像のみ（透かし入り） | 画像、ビデオ、ファイル | 画像、ビデオ、ファイル | 画像、ビデオ、ファイル |
他にもいろいろございますが、詳細は以下ページをご確認ください。
フリープランがありますので、まずは無料で試してみるのがいいですね。
5. 実際にXanoを試してみよう！
5.1. アカウントを作ってログインしてみよう。
まずはXanoのホームページよりサインアップしてみましょう。
サインアップ
GoogleアカウントまたはGithubのアカウントでアカウントを作成することもできます。
サインアップ_2
目的や接続したいフロントエンド等を入力して次にお進みください。
ワークスペース名設定
ここでは作成するワークスペースを入力してください。 ここでは仮に「start_xano」と入力しております。
how do start
ここではデータベースをどのような状態で始めたいかを選択します。
まずは初めてなので、「Start from scratch」を選択しましょう。
Airtableからインポートすることも可能です。
データテーブル設定
テーブルの初期値をここで作成できます。
後で追加でできますので、こちらもまずはデフォルトの user だけにしておきましょう
APIにもデフォルトでチェックがはいっておりますが、上記のデータベースとフロントエンドに接続するために、
必要なチェック項目となりますのでそのままにしておきましょう。
拡張機能
xanoにはアプリケーションの機能を有効にする拡張機能が組み込まれています。
・sendgridを用いたメール送信
・slackのwebhook送信
など複数ありますが、こちらもあとで追加可能ですので、一旦は無視して次へ進みましょう。
登録事項が多いですが、あと少しです！
ワークスペースへのログイン方法
xanoへのログイン方法についてouthでのログインが可能です。
Email以外にもgoogleやfacebookといった主流のサービスを介したログインが可能です。
必要なサービスにチェックをしておきましょう。
これで登録に必要な入力が終わりましたので、完了を押して開発画面へ進みましょう。
5.2. サインインできたら触ってみよう
開発画面にサインインすると、左下にクイックスタートガイドが表示されています。 こちらのスタートガイドがかなり優秀で、beginner（初心者）コース、Intermediate（中級）コース、Advanced（上級）コースで 順に進めていくことで、Xanoのあらゆる機能を理解できるようになるので、まずはガイドに従って 進めていくのがよいですね。
ここでは実画面に従って簡単に機能を紹介させていただきます。
5.3. データベースについて
5.3.1. データベースの更新、削除、修正方法について
まずはサイドバーより Databaseをクリックしましょう
Databaseを開くと、現在作成しているテーブルが表示されます。
サインアップの際に特にチェックをせずデフォルトのまま登録を進めた場合は
・My First Table
・user
この二つのテーブルが表示されていると思います。
ではまず My First Tableをクリックしてみましょう！
My First Tableを開くと、デフォルトで3行のレコードが保存されています。
5.3.2. カラムの追加
右上の「+」ボタンを押すと、右側にサイドバーが表示されます。
ここで必要な型を選択し、追加することができます。
5.3.3. レコードの追加
テーブルの一番下に + Add new record が表示されていますので、そちらをクリックすることでレコードを追加することができます。
5.3.4. レコードの削除
レコードの一番左にチェックボックスがありますので、不要な行をチェックすると、テーブルの上に delete アイコンが表示されますのでそちらで削除することができます。
5.3.5. 各種機能について
テーブルの上には検索機能等様々な機能がございますので簡単にご紹介します。
・Search：任意のワードを検索して、そのワードを含むレコードのみを表示します。
・Filter：必要なワードと一致するもののみを表示させるようフィルターをかけることができます。
・Sort：任意のカラムでソートをかけることができます。
・Hide Fields:任意のカラムを非表示にさせることができます。
・Related API endpoints：テーブルとAPIを紐づけることができます。
・Hide Schema：JSON形式で各カラムの型を表示させることができます。
・indexes：インデックスを設定することができます。
・Keyboard Shortcuts：テーブルで使用できるショートカットキーの一覧が表示できます。
かなり多くの便利機能があり、直感的でわかりやすいのが良いですね。
5.4. APIについて
まずはサイドバーより APIをクリックしましょう
APIを開くと、現在登録されているAPIのendpointが表示されます。
サインアップの際に特にチェックをせずデフォルトのまま登録を進めた場合は
・defalult：フロントエンドへの接続、またその情報を取得するためのendpointがまとめられています。
・My first API Group：フロントエンドからデータベースにアクセスし、情報を取得するためのendpointがまとめられています。
この二つのAPIのグループが表示されていると思います。
ここではAPIのグループを作成することができ、その中にendpointを設定することができます。
では、My firtst API Group をクリックしてみましょう。
My First API Groupを開くと、複数のendpointを確認することができますが、
今回は例として一番上に表示されているGet メソッドの/My_first_endpointをクリックして
中身を見ていきましょう。
こちらのAPIは3つのセクションで構成されておりますが、簡単にご説明します。
5.4.1. input
このendpointでは空ですが、例えばフロントエンドのユーザーがログインしている状態での
実行としたい場合は、inputに値をいれることで制御を行うことが可能です。
5.4.2. Function stack
このAPIが呼び出されたときに実行される関数をここで入力します。
デフォルトでは、my_first_tableのすべてのレコードに対してクエリを実行し、値を取得しています。
5.4.3. Responce
Function stackで取得した値をどこにどのように返すか、を設定する箇所となります。
デフォルトでは、モデルとして自分自身に返すように設定してあります。
5.4.5. APIの実行
では早速APIを実行していきましょう。
右上のrun&debugのボタンをクリックすると以下の画面が表示されます。
右下のrunをクリックすると結果が表示されます。
上記のように、各レコードの値が表示されていることが確認できます。
これらのendpointを利用して、他サービスとの連携を自由にカスタマイズできるのが
Xanoの大きな特徴の1つといえるでしょう。
5.5. taskについて
まずはサイドバーより taskをクリックしましょう。
ここではバックグラウンドで実行させるスケジュールを組むことができます。
設定した時間になったら、関数（endpoint）を実行させることなども可能です。
ただし、無料版ではこの機能は利用できませんので、利用する場合は
BUILD プラン以上のアップグレードが必要になります。
5.6. libraryについて
ここでは作成したendpointは再利用可能な形でAPIに組み込むことができます。
この機能を利用することで、柔軟に関数を利用することができ、複数あるendpointの実行を
一つにまとめたり、関数に少し別の関数を追加したいときなど役立ちます。
5.6.1. function の利用方法
まずは、右上のAdd functionからfunciton（関数）を作成していきます。
作成すると、APIと同じように設定する画面が表示されます。
ここで作成したfunctionはAPI画面で自由に追加することができるようになります。
仮にtestと作成したこの関数をAPI画面で追加設定していきましょう。
上記は My First API Group の GET /my_first_endpoint の編集画面となります。
ここで2セクションめの + add をクリックします。
ここでCustom Funcitons をクリックして、先ほど作成した関数を追加することが可能です。
今回は空データで作成しているため、実行結果は変わりませんが、実際には作成した関数が実行されるような形となります。
また上記の赤枠箇所 Convert to Function をクリックすることで、このendpointを関数（function）として
登録することができます。
このように作成した関数をいろいろな形で登録、複製、再利用ができるのが便利な点ですね。
5.7. MarketPlaceについて
MarketPlaceでは、登録時にもあった拡張機能をここで追加することができます。
facebookやgoogleのAPIのendpointを自分で作成する必要はなく、ここでインストールすることで
APIやfunctionに追加され、さらに自由にカスタマイズすることができますのでぜひこちらもお使いください。
6. Google OAuthを使ったサインアップをしてみよう！
では5章ではいろいろ使い方を説明しましたが、これらのうち、APIとMarketplaceを用いて
Google OAuthを使ったサインアップをしてみましょう。
この6章では、実際にサインアップを行うまでの流れの中で、
・APIを利用するためのGoogle cloud platformでのプロジェクト作成
・Marketplaceでの拡張機能のインストール
・APIのAPI Group Base URLを用いたGoogle OAuthの利用設定
上記を一緒に進めていきたいと思います。
6.1 前準備をしよう
今回はoauth2.0を使用してGoogleAPIにアクセスしたいので、Google API Consoleからクライアントの資格を取得していきます。
6.1.1. Google Cloud Platformでプロジェクトを作成しよう
以下よりGoogle Cloud Platformにアクセスして、サインインを行います。
googleのアカウントを持っていない方は、無料で作成できます。
ログインができたら、まずは新しいプロジェクトを作成しましょう。
プロジェクト名：プロジェクト名は任意の名前で問題ございません。今回は仮に「Xano-google」としておきます。
場所：どこにプロジェクトを作成するかを選択できますが、デフォルトの「組織なし」のままで問題ありません。
これで作成に進みましょう。
6.1.2. oauth同意画面の設定を進めよう
次にoauth同意画面で設定を行っていきます。
左上のハンバーガーメニューより、AIPIとサービス→Oauth同意画面に進みましょう。
すべてのユーザーが利用できるように、外部にチェックを入れて作成に進みましょう。
次にアプリ情報を入力していきますが、今回テストでの利用ですので、必須項目以外は割愛させていただきます。
アプリ名：任意の値を入力してください。
ユーザーサポートメール：任意のメールアドレスを入力してください。
※こちらはユーザーがgoogleAPIを通じて認証の際に表示されるメールアドレスです。
デベロッパーの連絡先情報：こちらも任意のメールアドレスを入力してください。
上記が入力できたら、「保存して次へ」をクリックして進みましょう。
次に必要なスコープを追加していきましょう。
簡単に説明しますと、ユーザーがどういった情報に対してアクセスする許可を与えるか、というものになります。
スコープの種類については多岐にわたりますので、ここでは説明を割愛させていただきます。
必要なスコープの追加が完了したら「保存して次へ」で進みましょう。
※なお今回はサインアップ・サインインの検証になるので、空のままにしておきます。
ここには現在作成しているこのアプリで認証させるユーザーを追加しましょう。
アプリを本番公開させることで、不特定のユーザーに認証をさせることができますが、
今回はテストのまま進めたいと思いますので、一旦gmailのアドレスなどを登録しておきましょう。
6.1.3. OAuth 2.0 クライアント IDを取得しよう
次に OAuth 2.0 クライアント ID を取得していきましょう。
ではまずサイドバーの 認証情報 をクリックし、表示された画面から「+認証情報を作成」→OAuthクライアントIDをクリック。
設定については、あとで変更できますので一旦このまま作成に進みましょう。
※後ほどリダイレクトURIの追加を行います。
これで クライアントID と クライアントシークレットの準備ができました。
以下赤枠のアイコンよりクライアントIDとクライアントシークレットを取得できますので、
どこかに控えておきましょう。
事前準備はこれで完了です。
6.2 Xanoの設定を進めよう
6.2.1. MarketplaceからAPIの設定をしよう
Xanoの画面に戻り、サイドバーの MarketPlace のFeatured から User Authenticationをクリック。
複数のサービスでOauthを利用できますが、今回はGoogleのOAuthを利用しますので Google Oauth をクリック。
Google OAuthのインストールページに遷移するので、 Install Extension をクリックして、インストールしてください。
このとき、参照させるデータベースを選択できますが、デフォルトで作成しているuserを選択し、
Installをクリックしてください。
データベースの紐づけは随時変更できますが、一旦ここではuserで設定して進めます。
インストール完了後、続いて 先ほど取得したクライアントIDとクライアントシークレットを入力するために、
CONFIGURE をクリックして設定画面に進みます。
表示された画面にクライアントIDとクライアントシークレットを入力して Update をクリックします。
これでAPIの設定は完了になります。
6.2.2. Google OAuthを使ってサインインしてみよう。
では次にサインインするために、Google OAuthの画面から、 Explore live demo をクリックしましょう。
次に demo画面の説明ページに遷移しますので、赤枠の Test with Xano account... をクリックします。
すると、どのendpointを実行するか確認のウィンドウが表示されます。
endpointとなるBase URLを取得するために一度TOPに戻り、サイドバーからAPIに進みましょう。
新たにインストールしたGoogle OAuth のグループが作成されていますので、これをクリックしましょう。
右上に表示されている API Group Base URL をコピーし、先ほどのdemo画面に戻りXano Base URLに張り付けて、Update Setting をクリックします。
すると以下の画面が表示されて、OAuthを利用したサインアップができるようになります。
ここではリダイレクトURIの設定を行う必要があるので、画面真ん中に表示されている以下のURLをコピーして
再度Google Cloud Platformに戻ってリダイレクトURIの設定を進めていきます。
https://demo.xano.com/xano-google-oauth/assets/oauth/google/index.html
Google Cloud Platformではウェブ アプリケーション のクライアント IDの編集画面より設定していきます。
※6.1.3と同じ設定画面です。
承認済みのリダイレクトURIにXanoに表示されたURLを追加して保存しましょう。
ここまで設定ができたら、ようやくサインアップに進めます。
ではXanoの画面に戻って Sign up with Googleをクリックしましょう。
googleの認証画面が表示されるので、適切なユーザーを選択してください。
CONGRATURATIONS!と表示されたら無事サインアップができたことが確認できます。
※白枠にはユーザー名が表示されております。
同様にサインインも試してみてください！
7. まとめ
今回はノーコードツールのXanoについてご紹介させていただきました。
細かい使い方までは今回のブログでは割愛いたしますが、データベースがエクセルやスプシのように直感的に修正ができること、
またかなり柔軟にバックエンドを構築できると感じました。
ただし、こちらも日本語化はされていないため、英語に抵抗がある方は少し利用が難しいかもしれませんが
DBのレコード制限がないツールとしてはおすすめできるツールかと思いました。
興味が出た方は、ぜひ触ってみてください。
そして、コメントでも感想いただけると嬉しいです！
