GASでLINE notyfi,APIを操作するときのHTMLとの変数や値の受け渡しや送信方法について。

LINE notifyとGASについての質問

(登録後、初めての質問で至らない点などあると思いますが、暖かい目でご教授？ください)

趣味でプログラムをしているものです。
(これまでapache(サーバ)、PHP、perl、pyton?、Androidアプリ(JAVA)、html、CSS、javascriptなどにチャレンジしましたがどれも途中で挫折してます。極度に英語が嫌いなせいかもしれません。もともと書いてあるプログラムを変えたり、くっつけたりはできるんですが・・・。)

飽きっぽい私ですが最近は、GoogleAppsScriptにチャレンジしています。。
タグの「LINE Messaging API」と、この質問の内容「LINE notify」はどちらもAPIという点以外、全くの別物ですがLINEタグがほかになかったのでこのタグで失礼します。(運営に申請はしておきました。)言語はGASはjavascriptに近いのでそのタグもつけてみました。

https://notify-bot.line.me/my/
↑上よりアクセストークンを取得して、
GoogleAppsScript(以下よりGASと書かせていただきます。)に記述したのが下の「該当のソースコード」になります。
アクセストークンはセキュリティ的に質問用の適当な値で失礼します。

URLにアクセスしたらDoGetが実行されて、下のGASの初めの部分

GAS
1 return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME);//doGetのURLにアクセスしたらindex.htmlを表示

の記述の影響でindex.htmlが表示されたという設定で話を進めます。

該当のソースコード

function doGet(){
  Logger.log('\ndoGet関数が実行されました。');//改行の後LOG出力
  
  return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME);//doGetのURLにアクセスしたらindex.htmlを表示
  
  Logger.log('\nScriptの実行を開始します。\n')//改行の後、開始メッセージ
  var today = new Date();//日付時刻の取得かな？
  var today = Utilities.formatDate(today,'Asia/Tokyo','M月d日 hh時mm分'); //Dateのフォーマットの変更
  var api_url = 'https://notify-api.line.me/api/notify';//なんかおくるURLらしい(よくわかってない)
  var accessToken = 'Sk8whgrTMFrOOT76lqCERme0Iu00viCmhLh1XPJTs1p'; //アクセストークン(LINE notify)
  
  
  var write_message = '\n本日は晴天なり。\nテストメッセージです。'+'\n送信日時:\n'+today;//\nで改行
  
  var options = {
    'method' : 'post',//LINEの仕様でpost固定らしい
    'headers': {
      'Content-Type': 'application/x-www-form-urlencoded',//呪文？(Content-Typeかなぁ?)
      'Authorization': 'Bearer ' + accessToken//アクセストークンの代入的な？
    },
    'payload' : {
      'message': write_message//上のメッセージを書いた関数をここにいれてるようだ。
    }
  };
  UrlFetchApp.fetch(api_url, options);//送信
  Logger.log('\n↓以下のメッセージを送信しました。↓\n--------------------'+write_message+'\n--------------------\n');//送信後メッセージ内容をLOG出力
  Logger.log('\n送信が正常に完了いたしました。');//改行の後、完了メッセージをLOG出力
  }

Html
1<html>
2  <body>
3    <form name="form" id="form">
4       認証(GASであらかじめ入力しておいた文字と合致しているか確認)
5       <br><input type="text" name="ninsyo_code" placeholder="認証コード"><br><br>
6　　　　<textarea name="textarea" cols="50" rows="10" placeholder="ここに本文を入力"></textarea>
7    <br>☆ プルダウン形式で表示
8   <br> <select name="color1"> 
9<option value="#ffffff">white（白色）</option> 
10<option value="#0000ff">blue（青色）</option> 
11<option value="#00ff00">lime（ﾗｲﾑ色）</option> 
12</select>
13      <br><button type="submit">送信</button>
14    </form>
15  </body>
16</html>

やりたいこと。

「送信」を押したら、
①HTMLの認証用の一行テキスト

html
1<input type="text" name="ninsyo_code" placeholder="認証コード">

に入力した値をGASの変数に入れて、あらかじめ入力してあった別の変数の値(仮に、abc123と合致してたら)とくらべて二つともが合致していたら次に進む(if文？)
HTMLの値＝あらかじめ入力していた値。

②<textarea>とプルダウンメニューの値をそれぞれ別の変数に入れる！
変数のは

<textarea>が var honbun プルダウンメニューが var p_menu として教えていただきたいです。(変数入れる場所わからないためまだ作ってません。) ③ ②のhonbun、p_menuを、 var write_messagｅ(既にあります、本日は晴天なりのところです。) に代入して送信 ④ＧＡＳのwrite_messageの値をHTML(index.html)で読み込んでメッセージとともに送信完了画面を表示。今すでにあるコードもだいぶややこしいので… コード短くできるんだったらその方法もご教授ください。 ### その他。 webアプリとして使いたいのでｈｔｔｐｓ://script.google.com/macros/s/{自分固有の英数字}/exec へのアクセスですべて済ませたいです。 ### 初心者なりに断片的に頑張って調べたこと。いまつかってる、 ```GAS return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME);//doGetのURLにアクセスしたらindex.htmlを表示 ``` じゃなくて、 ```GAS var output = HtmlService.createTemplateFromFile('index');//index.htmlをテンプレファイルとして使う return output.evaluate();//テンプレからレンダリングして表示 ``` この辺りを使えば変数がどうのこうのできるかもしれないらしいということ。ふたつの変数をくらべるのに「＝＝」か「＝＝＝」を使うらしい。違いは私のレベルでは理解できませんでした。 ### 私が参考にしたやつで回答者さんももしかしたら参考にするかもしれないURLとか [doGet関数のURLパラメータによって処理を分ける。](https://tonari-it.com/gas-url-doget-parameter/) [LINEのリファレンス的な](https://developers.line.me/ja/docs/) [LINE notifyのレファレンス的な(ほぼ上と一緒)](https://notify-bot.line.me/doc/ja/) [LINEアクセストークンの発行(ログイン必要)](https://notify-bot.line.me/my/) [質問の大枠のプログラムの参考サイト](https://ameblo.jp/ponkotsuameba/entry-12205240464.html) ### 質問に関係ありそうな画像とか。(自前) ![APIをおくったときのLINEでの見え方](df37dfa3a7591e084a1271a7e35bf0e5.jpeg) 一時的に、 ```GAS return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME);//doGetのURLにアクセスしたらindex.htmlを表示 ``` をけして撮影。 -- ![index.htmlChromeでのみえかた](2bdddc4fe81d2b7bebe4d97308a04bcb.png) ###　さいごに変数名とか足りないとかおかしいとかあったら適当に変えてもらって大丈夫です。初心者ながら頑張って回答内容を理解できるように精進します。よろしければお暇なときにでもご回答よろしくお願いします。

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

回答1件

ベストアンサー

※LINE API部分については質問部分では無いと思いますので、一旦見ていません。

まずGASで、Client(HTMLを表示しているブラウザ)とServer(GAS)間のやり取りをするにはgoogle.script.runを利用してください。

google.script.runのドキュメント

今回の場合ですと、まずHTML側(index.html)を以下のようにします。

html
1<html>
2  <body>
3    <form name="form" id="form" onsubmit="return onSubmit(this)">
4       認証(GASであらかじめ入力しておいた文字と合致しているか確認)
5       <br><input type="text" name="ninsyo_code" placeholder="認証コード"><br><br>
6　　　　<textarea name="honbun" cols="50" rows="10" placeholder="ここに本文を入力"></textarea>
7    <br>☆ プルダウン形式で表示
8   <br> <select name="p_menu"> 
9<option value="#ffffff">white（白色）</option> 
10<option value="#0000ff">blue（青色）</option> 
11<option value="#00ff00">lime（ﾗｲﾑ色）</option> 
12</select>
13      <br><button id="submitButton" type="submit">送信</button>
14    </form>
15    <div id="resultList">
16    </div>
17  <script>
18  function onSubmit(form) {
19      document.getElementById("submitButton").disabled = true;
20      google.script.run.withFailureHandler(onFailure).withSuccessHandler(onSuccess).writeMessage(form);
21      return false;
22  }
23  function onSuccess(result) {
24      document.getElementById("submitButton").disabled = false;
25      var div = document.createElement("div");
26      div.innerText = result.writeMessage;
27      document.getElementById("resultList").appendChild(div);
28  }
29  function onFailure(error) {
30      document.getElementById("submitButton").disabled = false;
31      window.alert(error);
32  }
33  </script>
34  </body>
35</html>

次にGAS側のコード(コード.gs or Code.gs)を以下の様にします。
※アクセストークン等は伏せています。

javascript
1var NINSHO_CODE = "認証コード";
2function doGet(e) {
3  return HtmlService.createHtmlOutputFromFile('index');
4}
5
6function writeMessage(e) {
7  var ninsyo_code = e.ninsyo_code;
8  var honbun = e.honbun;
9  var p_menu = e.p_menu;
10    
11  if (ninsyo_code != NINSHO_CODE) {
12    throw new Error("認証コードが違います");
13  }
14  
15  var today = Utilities.formatDate(today,'Asia/Tokyo','M月d日 hh時mm分');
16  var api_url = 'https://notify-api.line.me/api/notify';
17  var accessToken = 'アクセストークン';
18
19  var write_message = Utilities.formatString("%s\n色: %s\n送信日時: %s", honbun, p_menu, today);
20
21  var options = {
22    'method' : 'post',
23    'headers': {
24      'Content-Type': 'application/x-www-form-urlencoded',
25      'Authorization': 'Bearer ' + accessToken
26    },
27    'payload' : {
28      'message': write_message
29    }
30  };
31  UrlFetchApp.fetch(api_url, options);  
32  return {"writeMessage": write_message, "sendDate": today};
33}

細かい部分は修正してください。

投稿2018/05/09 09:23

soundTricker

総合スコア137

----------

2018/05/12 11:01 編集

お返事遅くなり申し訳ございません。ご回答ありがとうございました。アクセストークン思いっきり公開しちゃってますね(笑) だから僕のLINEにメッセージ来てたのか(納得) 変えておかねば……。 (学校の課題などが)終わったら試してみたいと思います。もっとプログラムがわかるように精進いたしますが、その過程でわからないことがありましたらご回答のほどよろしくお願いします。

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