サイトバーの戻り値を自作辞書で翻訳したい

前提・実現したいこと

サイトバーにて、選択ボックスでタイトルを選択し、それに応じて各タイトルの辞書を選択して文章作成スペースの内容を翻訳するコードを作成したいです。
どこに問題があるか分からないですが、翻訳を行えないまま、文章作成スペースの内容が翻訳スペースに出力されるようになっています。
ご教授いただければ幸いです。

該当のソースコード

サイトバーを表示

gas
1//MainController.gs
2function showSidebar() {
3   var htmlOutput = HtmlService.createTemplateFromFile('index').evaluate();
4  SpreadsheetApp.getUi().showSidebar(htmlOutput);

GASの関数

gas
1//code.gs
2function Translate(Title,Sentence) {
3
4const Translate = (Title,Sentence) => {
5    const dictionary = SpreadsheetApp.getActive().getSheetByName("dict").getDataRange().getValues();
6    const pattern = {
7        "タイトルA":{key:0,value:1},
8        "タイトルB":{key:2,value:3},
9        "タイトルC":{key:4,value:5},
10        "タイトルD":{key:6,value:7},
11    };
12    const conf = pattern[Title];
13    if (!conf) return `${Sentence} 不正なタイトル`;
14    const dic = dictionary.filter(e=>e[conf["key"]] !== "").map(e=>[RegExp(e[conf["key"]],'g'),e[conf["value"]]]);
15    return dic.reduce((a,c) => a.replace(c[0],c[1]),Sentence);
16}
17
18const showSidebar = () => {
19    SpreadsheetApp.getUi().showSidebar(HtmlService.createTemplateFromFile('index').evaluate());
20}
21}

サイトバーのコード

html
1//index.html
2<!DOCTYPE html>
3<html>
4<head>
5    <base target="_top">
6    <meta charset="UTF-8">
7    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
8</head>
9<body>
10<div>
11    <textarea id = "WritingArea" rows="8" cols="25" placeholder="文章作成用スペース"></textarea>
12</div>
13<div>
14    <textarea id = "TranslateArea" rows="8" cols="25" placeholder="翻訳用スペース"></textarea>
15    <textarea id = "TitleValue" rows="1" cols="10" placeholder="タイトルを選択"></textarea>
16</div>
17<div>
18    <select id="TitleList" size="4" onchange="javascript:GetTitleText()">
19        <option>タイトルA</option>
20        <option>タイトルB</option>
21        <option>タイトルC</option>
22        <option>タイトルD</option>
23    </select>
24</div>
25<div style="text-align:center;">
26    <input type="button" class="blue" value="翻訳" onclick="javascript:TranslateSentence();">
27</div>
28<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
29</body>
30</html>

CSS

HTML
1//css.html
2<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

サイトバーで使う関数

js
1//js.html
2
3<script>
4function GetTitleText(){
5var TitleElement = document.getElementById("TitleList");
6var result = TitleElement.options[TitleElement.selectedIndex].text;
7document.getElementById("TitleValue").innerHTML = result;
8}
9
10
11function TranslateSentence(){
12const TranslateSentence = () => {
13        const TitleValue=document.getElementById("TitleValue").value;
14        const WriteValue=document.getElementById("WritingArea").value;
15
16        google.script.run.withSuccessHandler(Translated => {
17            document.getElementById("TranslateArea").value =Translated;
18        }).Translate(TitleValue,WriteValue);
19    }
20    const GetTitleText = () => {
21        document.getElementById("TitleValue").value = document.getElementById("TitleList").value;
22    }
23    }
24
25</script>
26

行動規範の内容に同意します

回答2件

javascript
1//code.gs
2const Translate = (Title,Sentence) => {
3    const dictionary = SpreadsheetApp.getActive().getSheetByName("dict").getDataRange().getValues();
4    const pattern = {
5        "タイトルA":{key:0,value:1},
6        "タイトルB":{key:2,value:3},
7        "タイトルC":{key:4,value:5},
8        "タイトルD":{key:6,value:7},
9    };
10    const conf = pattern[Title];
11    if (!conf) return `${Sentence} 不正なタイトル`;
12    const dic = dictionary.filter(e=>e[conf["key"]] !== "").map(e=>[RegExp(e[conf["key"]],'g'),e[conf["value"]]]);
13    return dic.reduce((a,c) => a.replace(c[0],c[1]),Sentence);
14}
15
16const showSidebar = () => {
17    SpreadsheetApp.getUi().showSidebar(HtmlService.createTemplateFromFile('index').evaluate());
18}

html
1//css.html
2<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

html
1//js.html
2<script>
3    const TranslateSentence = () => {
4        const TitleValue=document.getElementById("TitleValue").value;
5        const WriteValue=document.getElementById("WritingArea").value;
6
7        google.script.run.withSuccessHandler(Translated => {
8            document.getElementById("TranslateArea").value =Translated;
9        }).Translate(TitleValue,WriteValue);
10    }
11    const GetTitleText = () => {
12        document.getElementById("TitleValue").value = document.getElementById("TitleList").value;
13    }
14</script>

html
1//index.html
2<!DOCTYPE html>
3<html>
4<head>
5    <base target="_top">
6    <meta charset="UTF-8">
7    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
8</head>
9<body>
10<div>
11    <textarea id = "WritingArea" rows="8" cols="25" placeholder="文章作成用スペース"></textarea>
12</div>
13<div>
14    <textarea id = "TranslateArea" rows="8" cols="25" placeholder="翻訳用スペース"></textarea>
15    <textarea id = "TitleValue" rows="1" cols="10" placeholder="タイトルを選択"></textarea>
16</div>
17<div>
18    <select id="TitleList" size="4" onchange="javascript:GetTitleText()">
19        <option>タイトルA</option>
20        <option>タイトルB</option>
21        <option>タイトルC</option>
22        <option>タイトルD</option>
23    </select>
24</div>
25<div style="text-align:center;">
26    <input type="button" class="blue" value="翻訳" onclick="javascript:TranslateSentence();">
27</div>
28<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
29</body>
30</html>

投稿2020/02/24 16:32

papinianus

総合スコア12705

TopingMado

2020/02/25 10:14

詳しいご教授、誠にありがとうございます。上記のコードで実行してみましたが、翻訳されないままでしたため、どこに問題があるか再度ご教授いただけないでしょうか。編集後のコードの質問の方に更新させていただきました。行った操作は、MainController.gsにあるfunction showSidebar()を実行→タイトル選択→文章作成スペースに文字を入力→翻訳ボタンをクリック

papinianus

2020/02/25 22:42

こちらは動作確認したコードです。 dictシートがない、dictシートに単語が適切に入っていないなど、データに起因する問題が想定できますが、そのシートを見られないのでなんとも言えません。例えばタイトルAは、A列の単語をＢ列の単語に置き換える動作をしますが、そうなっていますでしょうか。エラーが起きていないかログを確認してください。

TopingMado

2020/02/26 02:24

早速のご返信、誠にありがとうございます。翻訳されないままのは説明不足ですみませんでした。コードを実行したところ、文章作成スペースの文字が翻訳スペースに出力されない(翻訳処理を行われているか確認できない)状況となっております。 dictが存在することは確認しておりますため、頂いたコードを元のコードに組み合わせた際に間違った部分があるかもしれません。自分なりに見直してはいますが、どこに問題があるのか分からず、質問させていただきました。

papinianus

2020/02/26 08:53

多分大丈夫なはすですが、実行メニューからV8エンジンを有効にしていますか？あと、表示か何かからstackdriverエラーログを確認いただけますか？

TopingMado

2020/02/27 07:05

V8エンジンを有効にしています。おそらく問題が発生しているのはJS側なので、 stackdriverの方ではエラーログがなく、サイトバー起動の履歴のみでした。

行動規範の内容に同意します

ベストアンサー

ピンポイントで修正するとしたらこう

javascript
1    if(Title=="タイトルA"){
2        var CHValues=dictSheet.getRange("A2:A").getValues();
3        var JPValues=dictSheet.getRange("B2:B").getValues();
4
5        for(var i=0;i<CHValues.length;i++){
6            Sentence = Sentence.replace(RegExp(CHValues[i],'g'),JPValues[i]);
7        }
8    }
9    else if(Title=="タイトルB"){
10        var CHValues=dictSheet.getRange("C2:C").getValues();
11        var JPValues=dictSheet.getRange("D2:D").getValues();
12
13        for(var i=0;i<CHValues.length;i++){
14            Sentence = Sentence.replace(RegExp(CHValues[i],'g'),JPValues[i]);
15        }
16    }
17
18    return Sentence;