GASを利用した自作APIの表示結果をWebサイトで表示させる方法
Q&A
Closed
自作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への接続まではできました。
半年前からプログラミングを学び始めましたが、理解がなかなか進まず困っております。アドバイスいただけると助かります。