ノーコードでお手軽BFF開発！マッシュアップAPIを作ろう

インストール

Macなら、brewで簡単に導入できます。

brew install solaoi/tap/tuna

データフローの作成

0. 練習 - シンプルにAPIを引いてみる -

0-1. ツールの起動

下記コマンドを実行すると、ブラウザでUIが起動します。

tuna tool

以下、UI上で作業をしていきます。

0-1-1. エンドポイントを設定

まずは、ツール上に表示されているEndpointノードを設定していきます。

今回は、/fooにリクエストして、APIの結果を表示してみようと思います。
EndpointノードはPathがデフォルトで/fooに設定されているため、そのままにしておきましょう。

0-1-2. APIを設定

次に、引くAPIの設定をしていきます。
ノード以外の空白部分を右クリックして、メニューを表示してみてください。

メニューが表示されましたらカーソルをNewの位置に合わせ、
APIをクリックして選択しましょう。

すると、APIノードが作成されるので、こちらの設定をしていきます。

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という名前に変わっているのを確認してみましょう。

http://localhost:8080/foo

下記レスポンスが返っているのを確認でき、シンプルに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という年齢に変わっているのを確認してみましょう。

http://localhost:8080/foo

下記レスポンスが返っているのを確認でき、マッシュアップされているのが分かります。

{"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が含まれているのを確認しましょう。

http://localhost:8080/foo

下記レスポンスが返っているのを確認でき、マッシュアップされているのが分かります。

{"age": 33, "hobby": "programming"}

まとめ

ノーコードでマッシュアップAPIを簡単に作ることができましたね。

TUNA-Mayonnaise（ツナマヨ）はバイナリでも配布されているので、
あとはサーバー上にtuna-mayonnaise.jsonと一緒に配布すれば、立派なマッシュアップAPIサーバーの完成です。