※LIFF V2は以下の手順とは異なります。
で作ったアプリをLINE上に表示してみます
このように
作る手順
- HtmlServiceでWebアプリ(画面に表示するページ)を作る [GASアプリ1]
- チャネルを作る [LINE チャネル基本設定]
- そのチャネルにGASアプリ1を登録してappIdを取得する [コマンドライン]
- 特定のテキストが投稿されたらappIdを返すアプリを作る [GASアプリ2]
- webhookを有効にしてGASアプリ2のURLを設定する [LINE チャネル基本設定]
１．HtmlServiceでWebアプリ(ページ)を作成する
コード.gsfunction doGet(e) {
return HtmlService.createHtmlOutputFromFile("index")
.addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
}
| 意訳この機能がやること 指定したHTMLファイルを表示する メタタグのviewportを追加する |
index.html<!DOCTYPE html>
<html>
<body>
<button id="bt">button</button>
<script>
document.getElementById("bt").onclick = bt_clicked;
function bt_clicked(){
alert("clicked!");
}
</script>
</body>
</html>
| 意訳ボタンを配置する ボタンがクリックされたらbt_clickedを実行する この機能がやること clicked!という文字列をアラートに出す |
HTMLファイルを新規作成して
indexという名前にして
htmlを書いて保存する
ウェブアプリケーションとして導入...
バージョンの説明を入力：first version
次のユーザーとしてアプリケーションを実行：自分
アプリケーションにアクセスできるユーザー：全員（匿名ユーザーを含む）
現在のウェブアプリケーションのURLを控えておく
２．チャネルを作成する
LINE Developersコンソールにログインしてチャネルを作成して
チャネルアクセストークンを取得する
https://developers.line.me/ja/docs/liff/getting-started/
LINE BOTの作り方
３．２のチャネルに１で作ったWebアプリを登録する
これはコマンドラインで実行
https://engineering.linecorp.com/ja/blog/detail/299
で書かれているように以下のコマンドをターミナルやiTermなどで実行する
以下のコマンド内で設定する箇所
curl -XPOST \
-H "Authorization: Bearer チャネルアクセストークン" \
-H "Content-Type: application/json" \
-d '{
"view": {
"type": "SIZE_OF_LIFF",
"url": "WebアプリのURL"
}
}' \
https://api.line.me/liff/v1/apps
|
以下のような形でappIdが返って来たら登録完了
{"liffId":"appId"}
４．特定のテキストが投稿されたらappIdを返すアプリを作る
コード.gsvar CHANNEL_ACCESS_TOKEN = "TOKEN";
var appId = "ID";
function doPost(e) {
var contents = e.postData.contents;
var obj = JSON.parse(contents)
var events = obj["events"];
for(var i = 0; i < events.length; i++){
if(events[i].type == "message"){
reply_message(events[i]);
}
}
}
function reply_message(e) {
if (e.message.type == "text") {
if (e.message.text == "hello") {
var postData = {
"replyToken" : e.replyToken,
"messages" : [
{
"type" : "text",
"text" : appId
}
]
};
}
var options = {
"method" : "post",
"headers" : {
"Content-Type" : "application/json",
"Authorization" : "Bearer " + CHANNEL_ACCESS_TOKEN
},
"payload" : JSON.stringify(postData)
};
UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}
}
|
５．webhookを有効にしてGASアプリ2のURLを設定する
LINE BOTの作り方＞１０．「Use webhooks」の「編集ボタン」をクリックします
試してみる
hello と送るとappIdのリンクが返ってくる
リンクをクリックすると作ったHTMLがLINEの画面内に表示される
関連記事
補足
LIFFで表示したHTML内のボタンを押したときなどにトーク画面へメッセージを返すこともできますが、以下のindex.htmlでは Could not authenticate LIFF app, Error が出てしまいました。
エラー内容でリファレンスを見るとこのように書かれている
ちょっとよくわからない
https://developers.line.biz/ja/reference/liff/
FirebaseのHostingではうまく行ったので、それは別途書こうと思います。
GASのHtmlServiceでエラーが出た index.html
（Developing a LIFF app を参考に開いたときにuserIdを表示して、ボタンを押したときにdisplayNameを返そうと試みた）
参考
LINE Engineering Blog
https://engineering.linecorp.com/ja/blog/detail/299
LINE Developers
https://developers.line.me/ja/
LINE Front-end Framework
https://developers.line.me/ja/docs/liff/
Adding a LIFF app
https://developers.line.me/en/docs/liff/registering-liff-apps/
Getting started with LIFF
https://developers.line.me/en/docs/liff/getting-started/
Developing a LIFF app
https://developers.line.biz/en/docs/liff/developing-liff-apps/
補足
LIFFで表示したHTML内のボタンを押したときなどにトーク画面へメッセージを返すこともできますが、以下のindex.htmlでは Could not authenticate LIFF app, Error が出てしまいました。
エラー内容でリファレンスを見るとこのように書かれている
ちょっとよくわからない
FirebaseのHostingではうまく行ったので、それは別途書こうと思います。
GASのHtmlServiceでエラーが出た index.html
（Developing a LIFF app を参考に開いたときにuserIdを表示して、ボタンを押したときにdisplayNameを返そうと試みた）
index.html<!DOCTYPE html>
<html>
<body>
<button id="bt">button</button>
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
<script>
document.getElementById("bt").onclick = bt_clicked;
liff.init(
function(data) {
const userId = data.context.userId;
alert(userId)
},
function(err) {
alert([err, err.stack])
}
);
function bt_clicked() {
liff.getProfile()
.then(function(profile) {
liff.sendMessages([{
type: 'text',
text: 'From:' + profile.displayName
}])
.then(function() {
liff.closeWindow();
})
.catch(function(error) {
window.alert('Error sending message: ' + error.message);
});
})
}
</script>
</body>
</html>
|
参考
LINE Engineering Blog
https://engineering.linecorp.com/ja/blog/detail/299
LINE Developers
https://developers.line.me/ja/
LINE Front-end Framework
https://developers.line.me/ja/docs/liff/
Adding a LIFF app
https://developers.line.me/en/docs/liff/registering-liff-apps/
Getting started with LIFF
https://developers.line.me/en/docs/liff/getting-started/
Developing a LIFF app
https://developers.line.biz/en/docs/liff/developing-liff-apps/
