今回は、ノーコードツールのadalo（アダロ）でGoogle翻訳っぽいアプリを作ってみようと思います。
DeepLという翻訳のAPIを使います。
完成イメージはこのような感じです。
テキストを入力して翻訳ボタンを押すと、下に翻訳結果が表示されるというシンプルなものです。
そもそもノーコード・Adaloについてもっと知りたい方はこちら
DeepLのAPIを連携するCustom Actionの作成
DeepLのAPI情報を取得
DeepLのホームページで無料登録をして、APIを利用できるようにします。
以下の画面を表示しておきます。
Custom Actionの作成
Adalo（アダロ）で以下のようなホーム画面を作成しておきます。
「TRANSLATE」ボタンを選択し、「＋ ADD ACTION」>「Custom Action」>「＋ New Custom Action」を選択します。
「Name」にCustom Actionの名前を入力（ここでは「Deep」としています）、「Type」を「Create」にします。
「API Base URL」に先程のDeepLホームページに記載のURLをコピペします。「Method」は「Post」にします。
「＋ ADD ITEM」をクリックして、「Query Parameter」を選択します。
「Name」にDeepLホームページ記載の「authkey」、「Value」に「authkey=」右の認証キーをコピペします。「DONE」をクリックします。
さらに「Query Parameter」を追加し、「Name」に「text」をコピペします。
「Value」には何が入るかわからないので、作る必要があります。
「＋ ADD ITEM」をクリックし、「Text」を選択します。
「Type」には「Text」が表示されています。
「Name」に名前を入力（ここでは「Input text」としています）、「Example Value」には例となる英語の文字列を入力し、「DONE」をクリックします。
「Value」にマジックテキストから「Input text」を選択します。
（7で「Input text」を作ると、マジックテキストから「Input text」が選択できるようになります。）
「DONE」をクリックします。
最後にもう一つ「Query Parameter」を追加し、「Name」に「target_lang」をコピペします。
「Value」には言語コードのLangが入るので「+ADD ITEM」をクリックし、「Text」を選択します。
「Type」には「Text」が表示されています。
「Name」に名前を入力（ここでは「Lang」としています）、「Example Value」には例となるコード（ここでは「EN」としています）を入力し、「DONE」をクリックします。
「Value」にマジックテキストから「Lang」を選択します。（10の「Lang」を作ると、マジックテキストから「Lang」が選択できるようになります。）
「DONE」をクリックします。
ここまで終わったら、「RUN TEST REQUEST」をクリックします。
「Test Successful!」と表示されたらOKです。
「SAVE CUSTOM ACTION」をクリックして保存します。
作成した「Custom Action」を使う
ボタンを選択した状態で「+ADD ACTION」>「Custom Action」に先程作った「Deepl」が表示されているので、選択します。
Deeplの中に先程作った「Input text」と「Lang」という項目が表示されています。
「Input text」のマジックテキストで「Other Components」>「Input」を選択します。
この「Input」はホーム画面上のインプットボックスの名前です。これで「Input」に入力された文字列を使うことができるようになります。
「Lang」には言語コードが入ります。
今回は英語に翻訳したいので「EN」と入力し、「DONE」をクリックします。
このままでは翻訳された情報がそのままなので、翻訳された情報を入れる場所を作ります。
翻訳ボタンを押した時に、ホーム画面下のインプットボックスが変わるようにします。
「+ADD ANOTHER ACTION」>「More」>「Change Input Value」を選択します。
「Input」欄は「Output」を選択します。
この「Output」はホーム画面下のインプットボックスの名前です。
「Value」は「Deepl」>「translation.text」を選択し、「DONE」をクリックします。
直前で実行したDeeplの情報を取得することができるので、「translation.text」が選択できる様になっています。
これで作成は完了です。
アプリの動作確認
実際に動かしてみましょう。
「PREVIEW」をクリックします。
これがホーム画面です。
（初めて「PREVIEW」を実行した場合は、最初のサインアップ画面が表示されるので、サインアップをして下さい。）
上の入力欄に翻訳したい日本語を入力します。
今回は「こんにちは！」と入力しました。「TRANSLATE」ボタンを押します。
「Hello!」と表示されました。
これで翻訳アプリの完成です。
今回は、Adalo（アダロ）でDeepLの翻訳APIを連携し、Google翻訳っぽいアプリを作ってみました。
他にもAPIを上手く使うといろいろな機能が作れるようになりますので、ぜひ作成してみて下さい。