LANG SELRCT

コードを書く場所についてはこちら

2018年3月29日木曜日

HTML Serviceで作ったコードをライブラリ化したい


.gsファイル内でライブラリを使う方法は以下の記事で書きましたが
Google Apps Scriptでライブラリを作って使う

HTML Serviceを利用して作った .htmlファイルを含むスクリプトファイルをライブラリ化したくて試したコードです


ライブラリ側


コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

function get_value(){
  var value = "hello";
  return value;
}
意訳
この機能がやること
指定したHTMLファイルを表示する


この機能がやること
helloを
返す




index.html
<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <input type="button" id="bt" value="click me">
  <script>
    var bt = document.getElementById("bt")
    bt.onclick = bt_clicked;

    function bt_clicked() {
      google.script.run
        .withSuccessHandler(success)
        .get_value();
    }

    function success(value) {
      alert(value);
    }
  </script>
</body>
</html>
意訳
  





ボタン

idがbtの要素を取得して
クリックされたらbt_clickedを実行する

この機能がやること
.gsファイルのコードを実行する
成功したらsuccessを実行する
.gsで実行するコードはget_value()


この機能がやること
受け取ったvalueをalertに出す







ライブラリを使う方法はこちら
Google Apps Scriptでライブラリを作って使う


ライブラリを使う側


コード.gs
function doGet(){
  return LIB.doGet();
}

function get_value(){
return LIB.get_value();
}
意訳
この機能がやること
ライブラリのdoGet()を返す


この機能がやること
ライブラリのget_value()を返す



ライブラリのコードが実行されるので、index.htmlファイルは不要


ウェブアプリケーションとして導入すると
ライブラリ側と同じ結果を返せるようになる


ライブラリを使う側で試したこと


その1

最初はこのコードだけで実現できるかと思い込んでいましたが
function doGet(){
  return LIB.doGet();
}
これだけだと下に書いたようなUncaught TypeErrorが出ました


これを解決するために試したコードを書き残しておきます


ライブラリを使う側の.gs内でライブラリの index.html を表示してみるコード


コード.gs
function doGet(){
  var out = LIB.doGet();
  return ContentService.createTextOutput(out.getContent());
}
意訳
この機能がやること
ライブラリのdoGet()を取得して
内容を表示する




ウェブアプリケーションとして導入すると
ライブラリのindex.htmlの内容が表示されます


その2



コード.gs
function doGet(){
  var out = LIB.doGet();
  return HtmlService.createHtmlOutput(out.getContent())
}

意訳
この機能がやること
ライブラリのdoGet()を取得して
その内容からHTMLを作って返す




これでもHTMLは表示されますが、ボタンを押すと
以下のエラーがconsoleに出力されます
Uncaught TypeError: google.script.run.withSuccessHandler(...).get_value is not a function
    at HTMLInputElement.bt_clicked (<anonymous>:8:10)


get_value()が定義されていないので
↓このコードを追加してやるとエラーが解消されます
function get_value() {
  return "hello";
}


そしてget_value()はライブラリに定義されているので
↓このように書き換えられます
function get_value(){
return LIB.get_value();
}

さらに function doGet(){} の中もライブラリで定義されているdoGet()を返せば良いので
function doGet(){
  return LIB.doGet();
}
というように書き換えたのが
上で書いた「ライブラリを使う側」のコードです