今回は、ノーコードツールの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を上手く使うといろいろな機能が作れるようになりますので、ぜひ作成してみて下さい。Adaloでチャットアプリを作ってみようAdaloでインスタみたいなアプリを作ってみようAdaloでZapierを使ってGoogleSheetと連携しよう