質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.86%

  • Google Apps Script

    659questions

    Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

  • LINE Messaging API

    110questions

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 166

----------

score 12

 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の初めの部分

 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>
  <body>
    <form name="form" id="form">
       認証(GASであらかじめ入力しておいた文字と合致しているか確認)
       <br><input type="text" name="ninsyo_code" placeholder="認証コード"><br><br>
    <textarea name="textarea" cols="50" rows="10" placeholder="ここに本文を入力"></textarea>
    <br>☆ プルダウン形式で表示
   <br> <select name="color1"> 
<option value="#ffffff">white(白色)</option> 
<option value="#0000ff">blue(青色)</option> 
<option value="#00ff00">lime(ライム色)</option> 
</select>
      <br><button type="submit">送信</button>
    </form>
  </body>
</html>

 やりたいこと。

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

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


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

②<textarea>とプルダウンメニューの値をそれぞれ別の変数に入れる!
変数のは
<textarea>が var honbun
プルダウンメニューが var p_menu
として教えていただきたいです。(変数入れる場所わからないためまだ作ってません。)

③ ②のhonbun、p_menuを、
var write_message(既にあります、本日は晴天なりのところです。)
に代入して送信

④GASのwrite_messageの値をHTML(index.html)で読み込んでメッセージとともに送信完了画面を表示。

今すでにあるコードもだいぶややこしいので…
コード短くできるんだったらその方法もご教授ください。

 その他。

webアプリとして使いたいので
https://script.google.com/macros/s/{自分固有の英数字}/exec
へのアクセスですべて済ませたいです。

 初心者なりに断片的に頑張って調べたこと。

いまつかってる、

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


じゃなくて、

var output = HtmlService.createTemplateFromFile('index');//index.htmlをテンプレファイルとして使う
  return output.evaluate();//テンプレからレンダリングして表示


この辺りを使えば変数がどうのこうのできるかもしれないらしいということ。

ふたつの変数をくらべるのに「==」か「===」を使うらしい。違いは私のレベルでは理解できませんでした。

 私が参考にしたやつで回答者さんももしかしたら参考にするかもしれないURLとか

doGet関数のURLパラメータによって処理を分ける。

LINEのリファレンス的な

LINE notifyのレファレンス的な(ほぼ上と一緒)

LINEアクセストークンの発行(ログイン必要)

質問の大枠のプログラムの参考サイト

 質問に関係ありそうな画像とか。(自前)

APIをおくったときのLINEでの見え方

一時的に、

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

をけして撮影。

index.htmlChromeでのみえかた

 さいごに

変数名とか足りないとかおかしいとかあったら適当に変えてもらって大丈夫です。
初心者ながら頑張って回答内容を理解できるように精進します。
よろしければお暇なときにでもご回答よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

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

<html>
  <body>
    <form name="form" id="form" onsubmit="return onSubmit(this)">
       認証(GASであらかじめ入力しておいた文字と合致しているか確認)
       <br><input type="text" name="ninsyo_code" placeholder="認証コード"><br><br>
    <textarea name="honbun" cols="50" rows="10" placeholder="ここに本文を入力"></textarea>
    <br>☆ プルダウン形式で表示
   <br> <select name="p_menu"> 
<option value="#ffffff">white(白色)</option> 
<option value="#0000ff">blue(青色)</option> 
<option value="#00ff00">lime(ライム色)</option> 
</select>
      <br><button id="submitButton" type="submit">送信</button>
    </form>
    <div id="resultList">
    </div>
  <script>
  function onSubmit(form) {
      document.getElementById("submitButton").disabled = true;
      google.script.run.withFailureHandler(onFailure).withSuccessHandler(onSuccess).writeMessage(form);
      return false;
  }
  function onSuccess(result) {
      document.getElementById("submitButton").disabled = false;
      var div = document.createElement("div");
      div.innerText = result.writeMessage;
      document.getElementById("resultList").appendChild(div);
  }
  function onFailure(error) {
      document.getElementById("submitButton").disabled = false;
      window.alert(error);
  }
  </script>
  </body>
</html>

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

var NINSHO_CODE = "認証コード";
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index');
}

function writeMessage(e) {
  var ninsyo_code = e.ninsyo_code;
  var honbun = e.honbun;
  var p_menu = e.p_menu;

  if (ninsyo_code != NINSHO_CODE) {
    throw new Error("認証コードが違います");
  }

  var today = Utilities.formatDate(today,'Asia/Tokyo','M月d日 hh時mm分');
  var api_url = 'https://notify-api.line.me/api/notify';
  var accessToken = 'アクセストークン';

  var write_message = Utilities.formatString("%s\n色: %s\n送信日時: %s", honbun, p_menu, today);

  var options = {
    'method' : 'post',
    'headers': {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Bearer ' + accessToken
    },
    'payload' : {
      'message': write_message
    }
  };
  UrlFetchApp.fetch(api_url, options);  
  return {"writeMessage": write_message, "sendDate": today};
}

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/12 10:22 編集

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    GASでHTMLファイルの内容がスプレッドシートに送れない

    プログラミング初心者です。 初めて投稿させていただきます。 現在Apps scriptを使ってHTMLファイルから入力された情報をスプレッドシートに書き込むというプログラムを作

  • 解決済

    GAS⇔html間の値の渡し方

    前提・実現したいこと GASでVBAでいうとユーザーフォームのようなものを作るために、UserForm.htmlを作成し、そこにテキストボックスなどを配置し、その値をGAS側で受け

  • 解決済

    GAS⇔HTML間の配列のやり取り()

    前回似たような質問をさせていただいたのですが、別の方式を使ったほうが良いとのことで改めてコードを書き直して質問させていただきます。今回も配列の受け渡しなのですが、配列として認識して

  • 受付中

    gasで自身をスクレイピングしたい

    前提・実現したいこと google apps scriptでwebアプリを公開しました そのscriptから、定期的に自身にアクセスを当て、スクレイピングしたいと思い、以下のコード

  • 解決済

    GAS での エラー:範囲の座標、またはサイズが無効です。

    echo "<form action = 'xxxxx' method = 'get'>"; //この箇所① for($num=0; $num<30; $num++){ echo

  • 解決済

    GASでscript内の変数をoptionに入れる方法

    GASのhtmlファイル内でscript を書き、その変数をそのhtmlファイル内の optionのvalue に入れ込みたいです。 <script> var koumoku

  • 解決済

    GAS⇔HTML条件抽出表示

    GASにてHTML内のテキストボックスに店コードを入れて、スプレッドシートに記載されている 内容から検索・その抽出結果をHTMLへ全て表示させたいです。 該当する条件でヒットす

  • 解決済

    GASのスクリプトレットタグ<? ~ ?>の"<"がエスケープされる

     前提・実現したいこと Google Apps Script(以下GAS)でWebアプリを作成しています。 複数ページに毎度同じフォームを表示するので、フォームを別htmlファイル

同じタグがついた質問を見る

  • Google Apps Script

    659questions

    Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

  • LINE Messaging API

    110questions