ノーコードでお手軽BFF開発！マッシュアップAPIを作ろう
背景
APIのレスポンスをただただ引き回すような処理を何度も書くことはありませんか？
初めて使うWEBフレームワークならまだしも、同じ処理を何度も書くことに飽きてしまってはいないでしょうか？
例えば、AというAPIのレスポンスを使って、BというAPIにリクエストし、
フロントエンドでは、そのBのレスポンスを利用する場合です。
もっと分かりやすくいうと、
A：ユーザーにおすすめの商品カテゴリ
B：カテゴリに紐づく商品
フロントエンド：ユーザーにおすすめのカテゴリごとの商品リストを表示
などのケースですね。
そんな同じような処理は、簡単なデータフローだけ書いて完了としちゃいましょう！！
以下、ノーコードツール『TUNA-Mayonnaise（ツナマヨ）』で実践していきます。
使ってみよう
TUNA-Mayonnaise（ツナマヨ）は、
各設定群を繋いでいくだけで、データフローを作成できるノーコード/ローコードツールです。
インストール
Macなら、brewで簡単に導入できます。
brew install solaoi/tap/tuna
データフローの作成
0. 練習 - シンプルにAPIを引いてみる -
0-1. ツールの起動
下記コマンドを実行すると、ブラウザでUIが起動します。
tuna tool
以下、UI上で作業をしていきます。
0-1-1. エンドポイントを設定
まずは、ツール上に表示されているEndpointノードを設定していきます。
今回は、/fooにリクエストして、APIの結果を表示してみようと思います。
EndpointノードはPathがデフォルトで/fooに設定されているため、そのままにしておきましょう。
| 設定名 | 内容 |
|---|---|
| Preview | インプット内容をプレビューします |
| Enabled | オフにすると、エンドポイントが非公開となります |
| Method | 受け付けるメソッドを指定します |
| Path | 受け付けるパスを指定します |
| BotBlocker | Botからのリクエストを遮断します |
| RateLimit | 過度なリクエストを遮断します |
0-1-2. APIを設定
次に、引くAPIの設定をしていきます。
ノード以外の空白部分を右クリックして、メニューを表示してみてください。
メニューが表示されましたらカーソルをNewの位置に合わせ、
APIをクリックして選択しましょう。
すると、APIノードが作成されるので、こちらの設定をしていきます。
| 設定名 | 内容 |
|---|---|
| Method | リクエスト時のメソッドを指定します |
| Headers | リクエスト時のヘッダを指定します |
| Cached(In-Memory) | オンにすると、レスポンス結果をキャッシュします |
APIノードの左側をみると、それぞれURLとクエリとレスポンスの期待値が要求されているので、
それぞれ設定していきます。
まずはURLは、APIノードを作成したとき同様に右クリックのメニューから、URLを作成してください。
このURLが実際に叩くAPIとなりますので、https://example.comから叩きたいAPIのURLへと編集します。
今回は、下記のようなレスポンスを返すhttp://localhost:9999/nameというダミーのAPIサーバーを作ったのでこちらを指定します。
{"name": "solaoi"}
URLを編集し終えたら、URLノードのURLの緑丸部分をドラッグし、
APIノードのURLの緑丸部分へとドロップしてあげてください。
これでURLの設定はできたので、次にクエリの設定をしていきます。
APIノードのクエリ部分をみるとQuery（JSON）と、JSONノードを要求しているので、
メニューからJSONを追加してください。
クエリについては今回は設定不要ですので、JSONは空オブジェクトにして
ドラッグ・アンド・ドロップでAPIノードに紐付けます。
最後にレスポンスの期待値ですが、このAPIの想定されるレスポンスを設定します。
TUNA-Mayonnaise（ツナマヨ）上では、このダミーのレスポンス値をもとにデータフローを組み立てます。
期待値部分をみるとExpected（DummyJSON）と、DummyJSONノードを要求しているので、
メニューからDummyJSONを追加してください。
実際のAPI（http://localhost:9999/name）のレスポンスは下記としたので、
{"name": "solaoi"}
期待値があくまでダミーであるとわかるように、今回はDummyJSONは下記として、
ドラッグ・アンド・ドロップでAPIノードに紐付けます。
{"name": "dummy"}
これでAPIの設定も完了です。
0-1-3. APIからのレスポンスをエンドポイントと紐付け
最後にエンドポイントの/fooパスへと、アクセスがきたら、
設定したAPIのレスポンスを返せるよう紐付けていきます。
これまで同様にAPIノードのJSONの緑丸部分を、EndpointノードのContent(JSON/HTML)の緑丸部分にドラッグ・アンド・ドロップしてください。
0-1-4. 設定内容を保存
これで設定が完了したので、設定内容を保存します。
メニューからSaveを選んでください。
tuna toolコマンドを実行したディレクトリにtuna-mayonnaise.jsonという名前で保存されたのが確認できるかと思います。
0-2. 設定ファイルからAPIを起動する
tuna-mayonnaise.jsonのあるディレクトリで、下記コマンドを実行します。
tuna api
すると、ツールで設定した内容でAPIが立ち上がります。
先程の/fooパスにアクセスしてみて、レスポンスのJSONのnameがdummyではなくsolaoiという名前に変わっているのを確認してみましょう。
下記レスポンスが返っているのを確認でき、シンプルにAPIを引けることがわかったかと思います。
{"name": "solaoi"}
1. マッシュアップ - Aの結果からBにリクエストし、Bの結果を返す -
では、本記事の本題のマッシュアップ（複数のAPIを組み合わせる）処理をやっていきます。
1-1. ツールの起動
先程のtuna-mayonnaise.jsonがあるディレクトリで、ツールを起動します。
tuna tool
先程の状態が復元されるので、ここから作業を進めていきます。
1-1-1. APIノードの追加
メニューからAPIをもう一つ作成してください。
こちらは、クエリのnameをキーに年齢を返すhttp://localhost:9999/age?name=solaoiというAPIとします。
そのため、下記のようなURLとExpected(DummyJSON)をもつAPIノードを作成しました。
今回も期待値があくまでダミーであるとわかるように、年齢は永遠の18歳としておきました。
1-1-2. 練習のAPIノードのレスポンスを、クエリに紐付け
そして、クエリですが練習で作成したAPIのレスポンス結果を指定します。
つまり、練習で作成したAPIノードのJSONの緑丸部分をEndpointノードから、
今回のAPIノードのQuery(JSON)の緑丸部分にドラッグ・アンド・ドロップします。
1-1-3. APIからのレスポンスをエンドポイントと紐付け
最後に今回追加したAPIノードのJSONの緑丸部分をEndpointノードのContent(JSON/HTML)の緑丸部分にドラッグ・アンド・ドロップしてください。
1-1-4. 設定内容を保存
では練習と同じようにメニューからSaveを選び、設定を保存します。
tuna toolコマンドを実行したディレクトリにtuna-mayonnaise.jsonという名前で保存されたのが確認できるかと思います。
1-2. 設定ファイルからAPIを起動する
tuna-mayonnaise.jsonのあるディレクトリで、下記コマンドを実行します。
tuna api
すると、ツールで設定した内容でAPIが立ち上がります。
先程の/fooパスにアクセスしてみて、レスポンスのJSONのageが18ではなく33という年齢に変わっているのを確認してみましょう。
下記レスポンスが返っているのを確認でき、マッシュアップされているのが分かります。
{"age": 33}
2. マッシュアップ - Aの結果とBの結果を結合して返す -
今度は、単純に２つのAPIのレスポンス結果を結合してみましょう。
先程のAPIが年齢を返却していたので、
{"age": 33}
趣味を返却するAPIのレスポンス結果も合わせてみます。
{"hobby": "programming"}
2-1. ツールの起動
先程のtuna-mayonnaise.jsonがあるディレクトリで、ツールを起動します。
tuna tool
先程の状態が復元されるので、ここから作業を進めていきます。
2-1-1. APIノードの追加
メニューからAPIをさらに作成してください。
今回はシンプルに趣味を返すhttp://localhost:9999/hobbyというAPIとします。
2-1-2. 年齢レスポンスと趣味レスポンスのマッピング
JSONを操作するために、JSONManagerというノードが存在します。
メニューからJSONManagerを選択してください。
このJSONManagerノードは複数のJSONを受け付けれるので、
年齢をレスポンスするAPIノードと、趣味をレスポンスするAPIノードのJSONの緑丸部分を、JSONManagerノードのJSONsの緑丸部分にそれぞれドラッグ・アンド・ドロップします。
JSONManagerノードのInputs内にそれぞれのJSONのキーであるageとhobbyが表示されます。
あとは、JSONManagerノードのOutputsに利用するキーをドラッグ・アンド・ドロップしてください。
今回は両方とも利用するのでageとhobbyをそれぞれドラッグ・アンド・ドロップします。
2-1-3. JSONManagerのマッピング結果をエンドポイントと紐付け
JSONManagerノードのJSONの緑丸部分をEndpointノードのContent(JSON/HTML)の緑丸部分にドラッグ・アンド・ドロップしてください。
2-1-4. 設定内容を保存
Saveを選び、設定を保存します。
tuna toolコマンドを実行したディレクトリにtuna-mayonnaise.jsonという名前で保存されたのが確認できるかと思います。
2-2. 設定ファイルからAPIを起動する
tuna-mayonnaise.jsonのあるディレクトリで、下記コマンドを実行します。
tuna api
すると、ツールで設定した内容でAPIが立ち上がります。
先程の/fooパスにアクセスしてみて、レスポンスのJSONにageとhobbyが含まれているのを確認しましょう。
下記レスポンスが返っているのを確認でき、マッシュアップされているのが分かります。
{"age": 33, "hobby": "programming"}
まとめ
ノーコードでマッシュアップAPIを簡単に作ることができましたね。
TUNA-Mayonnaise（ツナマヨ）はバイナリでも配布されているので、
あとはサーバー上にtuna-mayonnaise.jsonと一緒に配布すれば、立派なマッシュアップAPIサーバーの完成です。
他にもRatelimitやBotのブロック設定、APIのレスポンス結果のキャッシュなど、
今回触れていない便利な機能があるので、ぜひTUNA-Mayonnaise（ツナマヨ）を使ってみてください。
また、テンプレートエンジンを利用してHTMLを出力することも可能です。
以下記事で簡単にブログを作ってみたので、良かったら御覧ください。
最後に、この記事を書こうと思った動機についてお話させてください。
記事内でノーコードツールとして利用したツナマヨですが、私が個人開発しております。
様々なWEBフレームワーク・言語で同じ処理を書くのであれば、いっそデータフローだけ表現して使いまわしたい。
いっそ皆でデータフローを共有して使いまわしたい。
そんな怠惰な未来に向けての概念実証として開発しているのですが、
そのユースケースとして足りない機能は何だろう？というのを確認してみたかった次第です。
共感いただけましたら、スターいただけますと励みになります。
お読みいただきありがとうございました！
Discussion