riotcitybluescountrygirl
@riotcitybluescountrygirl

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

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

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

GASを利用した自作APIで作ったものを自分で作成したWebサイトで利用したいのですが、方法がわかりません。
自作APIに関しては、3 分で作る無料の翻訳 API with Google Apps ScriptGoogle翻訳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への接続まではできました。
半年前からプログラミングを学び始めましたが、理解がなかなか進まず困っております。アドバイスいただけると助かります。

0

1Answer

接続した後どうしたら自分のWebサイトに表示させられるかがわかりません。
ajaxでAPIのurlには接続できました、多分。(コンソールログのnetworkを見ると自作APIアプリのurlが出てきました。)

上記のプログラムでは、コンソールログに「success」または「error」と表示されるのではないかと思うのですが、何も表示されませんか?

1Like

Comments

  1. では、console.log('success');の下の行に console.log(data); といれて、取得したデータをコンソールログに表示してみてください
    (またはネットワークから見る)

    まずそれで、どんなデータが取得できたかわかるはずです
  2. 配列で{code: 200, text: "Libro"}と返ってきましたのでdata("キー")で値を取得したところ見事に成功しました!
    配列なのでそのまま表示できないということですかね?うっかりしていました!
    お力添えいただきありがとうございました!

Your answer might help someone💌