📚
【後に📚本化します】GASで翻訳記録を残すChrome拡張機能を作るまでの手引き
やること
細かい作業はありますが、ざっくり以下。
- GASを作る。GASリポジトリをforkしてGoogle Apps Script GitHub アシスタントからpullしてデプロイ
- GASにcurlで接続し、期待した結果を得られることを確認する
- ブラウザからhtmlファイルを開き、JavaScriptからcurlコマンドと同じ内容を実行し、結果が同じことを確認する
- manifest.jsonを作ってChrome拡張機能にする
- Bot(LINE, Slack, Twitter)と連携する
GASが一番キツいと思います。
GASが出来たら、あとはちょっとしたコマンドぐらいです。
Botが一番便利なのに、最後の項番にしたのはまたGASを書き換える必要があるからです。
エッセンスを抜粋
1. GAS
curlでアクセスした時にリクエストを受ける関数
function doGet(e) {
// 説明のため、略
}
翻訳処理
LanguageApp.translate("翻訳したい単語", "単語の言語", "翻訳する言語");
アクセスされたらJSONを返す
let output = ContentService.createTextOutput();
output.setMimeType(ContentService.MimeType.JSON);
output.setContent(JSON.stringify(jsonData));
2. curlコマンド
これが一番簡単だと思います。調べればすぐわかりますよ。
3. JavaScriptでcurl相当の処理を実行
自分で作ったGoogle Apps ScriptsのスクリプトIDに書き換えること
const SCRIPT_ID = 'AKfycbzX_fawOiQ-7ZKfbBlVc_3GM5YSDrStUJ5oASwt_Gt7VuzQciSLT8WTA426Vhxxiq3NOg'
// GETでパラメータを送る方法について調べること
JavaScriptでcurl(GET)する例
let request = new XMLHttpRequest();
request.open( 'GET', url, true );
request.responseType = 'json';
// アロー関数にしたら怒られるのでこのままで
request.onload = function ()
{
add( this.response.translate );
};
request.send();
4. chrome拡張機能
「manifest.json」で検索しましょう。
version3で書いていますが、version2について調べてみたり、オリジナルでアイコンを設定してみましょう。
5. Bot(Line)
応用問題です。
1.の解説を読んで、GASでLINEBotを作るリポジトリと上手く組み合わせてやってみてください。
応用問題はGASのソースコードを１行ずつ読んで理解しないと、どこをどうすればよいか分からない難問です。
コードだけで理解するのは大変ですが、フローチャートにするとやりたいことがイメージできるようになります。
非公開コメントフォーム(GoogleForm)
Discussion