よくある質問 | Clickマニュアル/📚Click操作マニュアル/ClickでのAPI連携(上級者)/🤖カスタムClickFlowを試してみよう
🤖

カスタムClickFlowを試してみよう

カスタムClickFlowとは

外部サービスとAPI連携を行なって自分だけのClickFlowを作成することができます。
・郵便番号APIを使って「郵便番号」から「住所」を呼び出す
・翻訳APIを使って「英語」から「日本語」を呼び出す
・お天気APIを使って「緯度・経度」から「その場所の天気情報」を呼び出す
などできることは多々あります。あなただけのカスタムClickFlowを作成して、オリジナルアプリを是非作成してみてください。

Rakuten Rapid APIの使い方はこちら

Rapid APIの使い方🤖 Rapid APIの使い方2021/11/15 15:042022/5/9 8:13

実際にやってみよう

Google Translate を例に Rapid API を用いて連携していきます。

Rapid API 側の設定

  • Google Translate
Google Translateと検索すると同一タイトルのものが複数でてきます。「Dynamically trancelate」と記載されているものを選択します。
 
  • endpoint
Translate を選択します。
  • コード
「Node.js > Unirest」を選択します。
 
  • 詳細設定
    • RapidAPI App
    • Request URL
    • Header Parameters
上記 3項目はデフォルト値でOKです。
  • Required Parameters 「ｑ」
翻訳される言語です。この値は変数になりますが、その設定は Click 側で行います。
  • 「target」
翻訳先の言語です。今回は日本語へ翻訳するので「ja」と入力します。
  • Optional Parameters 「source」
翻訳元の言語です。今回は英語を翻訳するので「en」から変更しません。
 
「⇄ Test Endpoint」ボタンをクリックすると、リクエストが送信されレスポンスが返ってきます。「200 OK」と表示されれば Rapid API の設定は成功です。
 
「Code Snippets」タブに切り替え、「Copy Code」をクリックしてコードをコピーします。

Click 側の設定

カスタム ClickFlow が動作すると、設定したリクエストを送信します。
ボタンなどのエレメントを配置し、ClickFlow タブから「+ ClickFlowの追加 > カスタムClickFlow > 新カスタムClickFlow」を選択します。
 
Rapid API タブを選択して設定を行っていきます。
  • 名前
任意の名前を設定します。今回は「翻訳API」とします。
  • コード
Rapid API でコピーしたコードを貼り付けます。
 
すると以下の項目が自動入力されます。

変数の設定

  • INPUTデータ
リクエスト内容です。トリガーが動作すると「Google Translate」へ「INPUTデータ」の内容をリクエストとして送信します。このままですと常に「”Hello, world!” という英語を日本語に翻訳して」とリクエストを送信することになりますので、「Hello, world!」を変数にする必要があります。
 
変数の追加
  • 種類 変数の種類を設定します。今回は「Text」を選択します。
  • 名前 任意の名前を設定します。変数の名前になります。 今回は「翻訳される言語」とします。
  • 試験値 API の接続テストをする際の値です。変数として適切な値を設定します。 今回は「Apple」とします。
 
「保存」ボタンをクリックすると、「翻訳される言語」と変数が作成されました。
さらに、「INPUTデータ」欄にカスタムテキストアイコンが出現し、作成した変数がコード内に使用することができるようになります。
 
INPUTデータの編集
  1. 「Hello, world!」を削除します。
  1. 「 ” ”」の間にテキストカーソルを合わせて、「カスタムClickFlow > 翻訳される言語」を選択します。
  1. 「”翻訳される言語”」と表示されれば設定完了です。
 

接続テスト

テストをクリックすると設定した内容でリクエストが送信されます。
設定した試験値が日本語訳されて応答データ（レスポンス）が返ってくれば成功です。
 
「作成」ボタンを押して接続完了です。

翻訳機能

翻訳機能を作成していきます。インプットに入力された英文を日本文に翻訳します。
 
インプットエレメント2つとトリガーボタンを設置します。インプットエレメントを2つ使用するので、わかりやすいようにエレメント名を変更しています。それぞれ「英文 input」と「翻訳後 input」です。
 
「翻訳」ボタンの ClickFlow を設定します。「カスタムClickFlow > 翻訳API」を選択します。
 
「翻訳API」タブを開き翻訳される言語を設定していきます。カスタムテキストから「その他 > Form Inputs > 英文 Input」を選択します。
 
  • エレメントの値変更
ClickFlow「翻訳API」の設定で Google Translate  へリクエストの送信設定は完了しました。次にレスポンスを表示するための ClickFlow を設定します。
  • 翻訳後のテキストを表示する
同一のトリガーに ClickFlow を追加します。「ClickFlowの追加 > その他 > エレメントの値変更」を選択します。
 
  • インプット
翻訳後のテキストを表示させるインプットを選択します。
  • 値
「翻訳API > data.translations…」 を選択します。
 
外部データベースの接続方法はこちら
外部データベースを試してみよう🤖外部データベースを試してみよう2020/11/4 4:462023/2/15 4:52