Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ue0ba1ya1sh3i

GAS(Google Apps Script)とJavascriptでLINEのAPIを使い、公式アカウントでメッセージを一斉送信するアプリを作成する

Posted at

作成しようと思ったきっかけ

ある日HTMLだけでLINEの公式アカウントを制御してみたいなと思い作りました。

文章見るのめんどくせーよって人はまとめてコードを書いているところが最後にあるのでそちらをご覧ください。

基本的なコード

今回はサーバーを使わないGAS(GoogleAppsScript)で作るのでまずGASのコードを書いていきましょう

//固定変数
const accesToken = "ここに自分のトークンを入れてください";

//一斉送信
function broadCast(type,text) {
  //APIでLINEに情報を送信
  UrlFetchApp.fetch('https://api.line.me/v2/bot/message/broadcast', {
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + accessToken,
    },
    payload: JSON.stringify({
      messages: [
        {
            type: type,
            text: text,
        },
      ],
    }),
  });
};

このコードはqiitaや公式ページを参考にしてGASで作ったコードです。(固定変数というところのaccesTokenの変数に自分の公式アカウントの長いほうのトークンを入れてください。)

簡単に説明するとfunctionで囲っているので呼び出す形で使います。function(type,text)となっていますが、ここのtypeはその名前の通りメッセージを送る種類のことを指しています、例えば画像のメッセージを送りたいのであればtypeの値をimageにしてあげます（ですが画像メッセージは詳細設定などがいるし、自分はとりあえず文字さえ打てればいいと考えていたのでそこまで考えていなかったです。また気が向いたら改良していきます）

あとはLINEの公式に合わせて作っているのでそこで気にしなくてもいいと思います。詳しくはLINEのメッセージタイプを見て下さい。

Javascriptから通信できるようにするプログラム

次のプログラムは前にかいたプログラムを使い、HTMLから情報をもらうとLINEの公式アカウントを一斉送信させるプログラムです。（でも呼び出す形で作っているのでコードは簡単です。）

//HTMLから非同期通信で行えるようにするプログラム
function doPost(e) {
  var params = JSON.parse(e.postData.getDataAsString());
  broadCast(params.type,params.text);
};

ここで注意してほしいのはこのコードは前の書いたコードを呼び出しているので必ずそのコードの後に書いてください。

このコードは完全オリジナルなので説明していきます。
GASでdoPostというファンクションを作るとそのプロジェクトのURL(後に解説します。)にPOST(情報を送ること)されるとその中のコードが実行されるわけです。

それでは次にこのコードの中身に説明していきます。
paramsという変数は詳しくは教えませんがJS(Javascript)から情報を送られたものを変数に入れている状態になっています。

あとは簡単ですさっき作ったファンクションを呼び出してLINEの公式アカウントでメッセージを送信するという流れです。

ひとまずここでGASのほうのコードは終わりました。次に相手が操作するほう(HTMLとJS)のコードを書きましょう。

HTMLとJS(Javascript)のコード

とりあえずJSを書くのは面倒だと思うので先にHTMLを書きましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toolApp</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <p id="title">入力内容</p>
        <div class="form">
            <input type="text" id="textBox">
            <button id="button">決定</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

とりあえずはこれで行きましょう。

言い忘れていましたがHTMLを装飾するCSSも追加しておきましょう。

body {
    background-color: rgb(0, 100, 131);
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    text-align: center;
}

div.main {
    padding: 10px;
    background-color: rgb(206, 206, 206);
}

p#title {
    color: rgb(41, 41, 41);
    font-weight: bold;
}

input#textBox {
    border: none;
    outline: none;
    background-color: rgb(236, 234, 255);
}

button#button {
    border: none;
    background-color: rgb(236, 234, 255);
}

それでは最後にJSを書いていきます。

//LINEをGASを使ってJavascriptを使い一斉送信する
function broadCast(type,text) {
    //GASにつなげるためのURL
    var URL = "https://script.google.com/macros/s/ここにGASのIDを張り付ける/exec";
    
    //送るデータをJSONで決める
    var senddeta = {
        "type": type,
        "text": text
    };

    //詳細設定を設定する
    var postparam = {
        "method"     : "POST",
        "mode"       : "no-cors",
        "Content-Type" : "application/x-www-form-urlencoded",
        "body" : JSON.stringify(senddeta)
    };

    //情報をそろえてURLに送る(非同期通信)
    fetch(URL, postparam);
};

document.getElementById("button").onclick = function() {
    //テキストボックスの値を取得
    var textBox = document.getElementById("textBox").value;

    //broadCasの関数でGASを通じてLINEにメッセージを送る
    broadCast("text",textBox);

    //テキストボックスの値を初期化
    document.getElementById("textBox").value = "";
};

結構話すのがしんどいですが頑張って伝えます。
まず前に言っていた通りGASで受け取るシステムを作りました。このシステムはJsonというデータで受けれるようにしましたので当然送る側もJsonで送らないといけませんよね、それと今回はページに移動されないアプリ(非同期通信)をfetchで作ってみました。重要なところだけ解説していきますね。

まず皆さんが疑問を持っていると思いますがどこのURLに情報を送るんだ！という人がいると思います。(ほんとはいうの忘れてただけですけどね)なのでいったんGASに戻りましょう...と解説しようと思ったんですが画像の入れ方がわからなかったのでこれで勘弁してください... とある人の豆知識

次にURLという変数がありますよね？ここにさっき私が断念した「GASのデプロイしたURL」を入れてください。

次にデータを送るためにの設定をを変数に入れていきますが少し上級的な内容なので今回いはパスします。

まあこのコードの説明を50%ぐらいパスしていますがファンクションの最後の行を見てください。fetchなんちゃら...ってかいていますよね？これが非同期通信をするための核でパスしていたところが主な準備といったところです。この最後の行で情報を送ることは知っておいてください。

最後に残っているコードがありますよね？このコードの意味は知っている人がいると思いますが一応説明します。
このコードは前書いたHTMLのボタンが押したときに反応するファンクションです。このコードの中身について教えます。

このコードはHTMLの中にあるテキストボックスのなかにある値を変数に代入して前半に書いてあるファンクションを呼び出し、GASにデータを送信するというコードです。

まとめ

とりあえずコードを全部まとめて書けよっていう人もいそうなので全部書きますね。

GAS

//固定変数
const accesToken = "ここに自分のトークンを入れてください";

//一斉送信
function broadCast(type,text) {
  //APIでLINEに情報を送信
  UrlFetchApp.fetch('https://api.line.me/v2/bot/message/broadcast', {
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + accessToken,
    },
    payload: JSON.stringify({
      messages: [
        {
            type: type,
            text: text,
        },
      ],
    }),
  });
};

//HTMLから非同期通信で行えるようにするプログラム
function doPost(e) {
  var params = JSON.parse(e.postData.getDataAsString());
  broadCast(params.type,params.text);
};

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toolApp</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <p id="title">入力内容</p>
        <div class="form">
            <input type="text" id="textBox">
            <button id="button">決定</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    background-color: rgb(0, 100, 131);
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    text-align: center;
}

div.main {
    padding: 10px;
    background-color: rgb(206, 206, 206);
}

p#title {
    color: rgb(41, 41, 41);
    font-weight: bold;
}

input#textBox {
    border: none;
    outline: none;
    background-color: rgb(236, 234, 255);
}

button#button {
    border: none;
    background-color: rgb(236, 234, 255);
}

JS(Javascript)

//LINEをGASを使ってJavascriptを使い一斉送信する
function broadCast(type,text) {
    //GASにつなげるためのURL
    var URL = "https://script.google.com/macros/s/ここにGASのIDを張り付ける/exec";
    
    //送るデータをJSONで決める
    var senddeta = {
        "type": type,
        "text": text
    };

    //詳細設定を設定する
    var postparam = {
        "method"     : "POST",
        "mode"       : "no-cors",
        "Content-Type" : "application/x-www-form-urlencoded",
        "body" : JSON.stringify(senddeta)
    };

    //情報をそろえてURLに送る(非同期通信)
    fetch(URL, postparam);
};

document.getElementById("button").onclick = function() {
    //テキストボックスの値を取得
    var textBox = document.getElementById("textBox").value;

    //broadCasの関数でGASを通じてLINEにメッセージを送る
    broadCast("text",textBox);

    //テキストボックスの値を初期化
    document.getElementById("textBox").value = "";
};

すべてのコードを書きましたが丸パクリしてもらって大丈夫です。またHTML,CSS,JSについては同じディレクトリに入れておきましょう。(そうしないとCSSやJSが読み込めません)

どうでしょうか、文章が多すぎたせいで画像がないのはすいません。今回はこれでおやりにします。皆様の意見やコメントをどんどん書いてくれたらうれしいなと思っています。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?