GAS와 Vue를 사용하여 Google 재번역 간단한 kuso 웹 서비스를 만들어 보았습니다.
개인적인 사정으로 심리적으로 죽을 뻔 했는데 트위터에서 우연히 들려온 RT를 보고 조금 기운이 났다.그리고 정신을 차리고 쓰레기 코드를 생산한 것이 공양이었다.
Google한테 혼나면 삭제.
자재
필요한 항목: Google 계정·정적 웹 서버(Netlify 또는 GiitHubPages 등)
주요 언어: Javascript(Vue.js)·GAS
소요 시간: 약 4시간(코드 베이스 + 디자인 + 기사 작성/정리 제외)
GAS로 API 제작 및 번역
Google 번역 API를 직접 이용하면 유료 유료 유료 유료 유료 유료
GAS 코드
좀 낡았지만 번역 API를 문제 없이 사용할 수 있습니다.
응용 프로그램부터 사용하기 때문에 포스트가 취할 수 있는 형식으로 만들어 보았습니다.
main.gs
function doPost(e) {
// リクエストパラメータを取得する
const p = e.parameter;
// 逆変換回数（最大5回まで・そんなにいらんかも）
let n = (p.n) ? parseInt(p.n) : 1;
if (n < 1) n = 1;
if (n > 5) n = 5;
// LanguageAppクラスを用いて翻訳を実行
let translatedText;
let revertedText = p.text;
for (let i = 0; i < n; i++) {
translatedText = LanguageApp.translate(revertedText, "ja", "en");
revertedText = LanguageApp.translate(translatedText, "en", "ja");
}
// レスポンスボディの作成
let body;
if (translatedText && revertedText) {
body = {
code: 200,
text: revertedText
};
} else {
body = {
code: 400,
text: "Bad Request"
};
}
// レスポンスの作成
const response = ContentService.createTextOutput();
// Mime TypeをJSONに設定
response.setMimeType(ContentService.MimeType.JSON);
// JSONテキストをセットする
response.setContent(JSON.stringify(body));
return response;
}
포스트맨으로 확인했어요.하목 불량 소년.
프로그램 설계
참고 문서의 이미지와 달리 GAS 편집기는 새 것이므로 다음 사항에 유의하십시오.
프로그램은 오른쪽 상단에서 시작합니다.
스크립트를 업데이트하면 '새 depro' 가 됩니다. 최종 URL이 바뀔 수 있으니 주의하십시오.
네트워크로 활용하다.
가장 아래의 옵션인 액세스 가능한 사용자를 사용자로 설정합니다.
나는 오류라고 생각했지만 설명문을 입력한 후'자기'를 선택하면 왜 선택란이 공백으로 변하는지 모르겠지만 문제 없이 디버깅을 할 수 있다.
디버그 후에 '웹 페이지 응용 프로그램의 URL' 을 복사해서 어디에 두시겠습니까?
응용 프로그램 홈 페이지 만들기
방금 GAS에서 만든 API의 주요 HTML을 조립합니다.
이번에 희생된 HTML 템플릿은 이거야.
무료 허가증에서 다운로드하고 펼치기, index.> 만 편집합니다.
규정에 따라 신용 표시를 없애서는 안 된다.
AJAX에서 리뷰 형식(무료 라이선스)을 사용하는 것도 금지되고, 단순히 자신의 API를 두드리기만 하기 때문에 라이선스에서는 안전하다.무슨 문제가 있으면 저에게 알려 주세요.(전대 또는 지불해야 함)
다음과 같이 덮어씁니다.
다른 서류는 손대지 않아도 돼.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google再翻訳</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Oswald:400,300,700|EB+Garamond" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="padding: 0;" id="app">
<!-- ========== 文字ドーンと出るとこ ========== -->
<div id="headerwrap">
<div class="container">
<div class="logo">
<img src="img/logo.png">
</div>
<br>
<div class="row">
<h1 style="font-family: 'Sawarabi Mincho';">{{ resultText }}</h1><br>
<h3 style="font-family: 'M PLUS Rounded 1c';">{{ targetText }}<i v-if="targetText"> - を<span v-if="n > 1">{{ n }}回</span>再翻訳</i></h3><br><br>
<div class="col-lg-6 col-lg-offset-3"></div>
</div>
</div>
</div>
<!-- ========== 変換フォームいれるとこ ========== -->
<div id="f">
<div class="container">
<div class="row">
<h3>REVERSLATION</h3>
<div class="col-lg-6 col-lg-offset-3" style="margin-top: 50px; margin-bottom: 50px;">
<label for="targetInput" class="form-label">再翻訳したい言葉を入力</label>
<input type="text" class="form-control" id="targetInput" v-model="targetText">
<div class="form-inline" style="margin-top: 5px;">
<div class="form-group">
<label for="range">回数</label>
</div>
<div class="form-group" style="margin: 0 10px;">
<select class="form-control form-control-sm" v-model="n">
<option value="1">1回</option>
<option value="2">2回</option>
<option value="3">3回</option>
<option value="4">4回</option>
<option value="5">5回</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" v-on:click="reverslation">{{ buttonText }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="copyrights">
<div class="container">
<div class="credits">
<!--
You are NOT allowed to delete the credit link to TemplateMag with free version.
You can delete the credit link only if you bought the pro version.
Buy the pro version with working PHP/AJAX contact form: https://templatemag.com/minimal-bootstrap-template/
Licensing information: https://templatemag.com/license/
-->
Created with Minimal template by <a href="https://templatemag.com/">TemplateMag</a>
</div>
</div>
</div>
<!-- JavaScript Libraries -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
buttonText: '再翻訳',
targetText: '',
resultText: 'Google Reverslation',
n: 1,
};
},
methods: {
async reverslation() {
try {
// UI表示変更
this.buttonText = '待ってね〜';
this.resultText = '再翻訳中...';
// POSTのフォームデータを作成（翻訳したい本文と回数）
const data = new FormData();
data.append('text', this.targetText);
data.append('n', this.n);
// 非同期でGASの再翻訳APIに投げる
const res = await axios.post('GASのウェブアプリURLをここに', data);
// 返却値を見て正常に処理されたか判定
if (res.data.code === 200 && res.data.text) {
this.resultText = res.data.text; // 結果はここにはいる
this.buttonText = 'もう一度再翻訳する'; // ボタン表示
} else {
this.resultText = '失敗しました';
}
} catch (e) {
// axiosのエラー
}
},
},
})
</script>
</div>
</body>
</html>
Axios POST를 사용하여 GAS 액세스
아마도 가장 중요한 곳은 여기뿐이야.
일본어를 입력하면 인코딩도 복잡해 FormData의 POST가 가장 쉽다.
// POSTのフォームデータを作成（翻訳したい本文と回数）
const data = new FormData();
data.append('text', this.targetText);
data.append('n', this.n);
// 非同期でGASの再翻訳APIに投げる
const res = await axios.post('GASのウェブアプリURLをここに', data);
결실
서체는'불고 명나라'를 사용했다.
언어에 따라 글씨체 스타일을 바꾸면 좋겠죠.
고찰하다.
최근 Google 번역의 정확도는 이전처럼 그렇게 재미있지 않습니다.
중간의 언어 유형을 바꾸면 결과도 바뀐다.
Reference
이 문제에 관하여(GAS와 Vue를 사용하여 Google 재번역 간단한 kuso 웹 서비스를 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ukkz/articles/cca653be27108c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
