GASを利用した自作APIの表示結果を、Webサイトで表示させる方法

Question

自作APIをWebサイトで利用する

GASを利用した自作APIで作ったものを、自分で作成したWebサイトで利用したいのですが、方法がわかりません。
自作APIに関しては、3 分で作る無料の翻訳 API with Google Apps Script、Google翻訳APIを無料で作る方法という記事を参考にしております。
こちらの記事を参考にして、ajaxでAPIのurlには接続できました、多分。（コンソールログのnetworkを見ると自作APIアプリのurlが出てきました。）
接続した後どうしたら自分のWebサイトに表示させられるかがわかりません。
表示方法としてはテキストエリアをふたつ用意して片方のテキストエリアに入力した日本語のvalueをjqueryで取得して変数に入れそれをajaxで接続するurlの中に入れ込む感じです。

該当するソースコード

function doGet(e) {
    // リクエストパラメータを取得する
    var p = e.parameter;
    //  LanguageAppクラスを用いて翻訳を実行
    var translatedText = LanguageApp.translate(p.text, p.source, p.target);
    // レスポンスボディの作成
    var body;
    if (translatedText) {
        body = {
          code: 200,
          text: translatedText
        };
    } else {
        body = {
          code: 400,
          text: "Bad Request"
        };
    }
    // レスポンスの作成
    var response = ContentService.createTextOutput();
    // Mime TypeをJSONに設定
    response.setMimeType(ContentService.MimeType.JSON);
    // JSONテキストをセットする
    response.setContent(JSON.stringify(body));

    return response;
}

$(function(){
    $('#translateInEspanol').on('click', function(){
        let originalText = $('#textarea1').val();
        $(function(){
            $.ajax({
                url: `https://script.google.com/macros/-自作APIのurl-/exec?text=${originalText}&source=ja&target=es`,
                type: ""
            }).done(function(data){
                console.log('success');
                $('#textarea2').html(data);
            }).fail(function(){
                console.log('error');
            });
        });
    });
});

自分で試したこと

最初は3 分で作る無料の翻訳 API with Google Apps Scriptを参考にしたのですが、CORSに引っ掛かったのでGoogle翻訳APIを無料で作る方法を試して何とかurlへの接続まではできました。
半年前からプログラミングを学び始めましたが、理解がなかなか進まず困っております。アドバイスいただけると助かります。

Comments

[Tatsunosuke]

今後の他の方のためにも、google apps scriptタグをつけていただけると助かります！

Answer 1

変更ありがとうございます。

GAS側はこれ↓で呼び出し元に値を返せます。

function doGet(e) { 

　var p = e.parameter;
  //  LanguageAppクラスを用いて翻訳を実行
  var translatedText = LanguageApp.translate(p.text, p.source, p.target);

    var body;
    if (translatedText) {
        body = {
          code: 200,
          text: translatedText
        };
    } else {
        body = {
          code: 400,
          text: "Bad Request"
        };
    }


  const json = JSON.stringify(body);
  return ContentService.createTextOutput(JSON.stringify(json)).setMimeType(ContentService.MimeType.JSON);

}

この関数を呼び出してもらえれば、APIのデータを取得できます。
あとはこのデータをinnerHTML等で書き込んでいただければ。

要素の中身を変える！JavaScriptでinnerHTMLの使い方【初心者向け】

すみません、普段jquery使わないので、fetch書いてますが、意味は一緒です。

function fetchGas(originalText){
    return new Promise(async resolve => { 

        var url = "https://script.google.com/macros/-自作APIのurl-/exec?text="+originalText+"&source=ja&target=es"

        const Response = await fetch(url, {
            method: "GET",
            redirect: "follow",
            mode: "cors"
        });
        if (Response.ok) {
            var reObj = Response.json();
            resolve(reObj);
        }
    })

}

Comments

[dalshima]

ご回答ありがとうございます！
早速試してみましたがうまくいきました、ありがとうございます！

const json = JSON.stringify(body);
return　ContentService.createTextOutput(JSON.stringify(json)).setMimeType(ContentService.MimeType.JSON);
とありますが、エラーが返ってきたので
const json = JSON.stringify(body);
return ContentService.createTextOutput().setMimeType(ContentService.MimeType.JSON).setContent(json);
と書き換えたらかえってきました。

ちなみに他サイトでも質問したところajaxで配列が返ってきているのにそのままhtmlに入れていることを指摘され、data["キー"]で簡単に取り出すことができました。

await,asyncは難しいイメージでまだ勉強していなかったのですが、今回の解答を見て何となくイメージができたのでこれを機に勉強しようと思います。
タグ付けもまともにできていないのに丁寧に回答いただきありがとうございました！

[Tatsunosuke]

お役にたててよかったです！