GASでLIFFアプリを動かしたいが、うまく動かない

Google Apps Script（以下、GAS）を使ったLIFFアプリの開発を考えています。
参考にしたのが、クラスメソッドさんが公開している以下のブログです。

----問題点----
１．リンク先に記載されているhtmlとjavascriptのコードを以下の通りGASの3つのファイルに割り当てました。これによりボタン等のhtml要素は表示されますが、ボタンを押しても反応しない状態です。

２．liff.init()を実行するためにはliffIdが必要になると思うのですが、サンプルコードにはこれを入力する箇所がないように思えます。

~~３．webページ上にline.htmlファイルに記載したコードがそのまま表示されてしまいます。~~【5/17追記】<script　type="text/javascript">からtype="text/javascript"を削除することで解消されました。

line.htmlファイルの最初に記載しているSDKが読み込まれていないのではないかと考えていますが、対処の仕方がわからずにいます。

GASを使ってLIFFアプリが機能するようアドバイスをいただけませんでしょうか。
どうぞよろしくお願い致します。

----コード.gsファイル----

このファイルはhtmlファイルを読み込むために必要なものです。

GoogleAppsScript
1function doGet() {
2  var htmlOutput = HtmlService.createTemplateFromFile('index').evaluate();
3  htmlOutput
4    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
5  return htmlOutput;
6}
7

----index.htmlファイル----

head部分でJavaScriptファイルを読み込んでいます。

GoogleAppsScript
1
2
3<!DOCTYPE html>
4<html lang="jp" dir="ltr">
5
6  <head>
7        <base target="_top">      
8        <meta charset="utf-8">
9        <title>LINEログイン</title>
10        <?!= HtmlService.createHtmlOutputFromFile('line').getContent(); ?>         
11  </head>
12
13  <body>
14     <p id="id"></p>
15        <p>メッセージを送信する</p>
16        <button id="message">Hello, world!</button>
17        <p>プロフィールを取得する</p>
18        <button id="profile">プロフィールを取得する</button>
19        <p id="userId"></p>
20        <p id="displayName"></p>
21        <p id="pictureUrl"></p>
22        <p id="statusMessage"></p>
23        <p>URLを開く</p>
24        <button id="open">クラスメソッドを開く</button>
25        <p>LIFFアプリを閉じる</p>
26        <button id="close">閉じる</button>
27  </body>
28
29</html>
30

----line.htmlファイル----
こちらでLIFFのSDKの読み込みや初期化を行い、完了するとLIFFのメソッドが使えるようになります。なお、SDKは最新版に修正しています。

JavaScript
1
2<script src="https://static.line-scdn.net/liff/edge/2/sdk.js" charset="utf-8" ></script>
3            
4            <script　type="text/javascript">
5            const idSPace = document.getElementById('id');
6            const errorSpace = document.getElementById('error');
7
8            //liff init
9            liff.init(
10                data => {
11                    const userId = data.context.userId;
12                    idSPace.innerText = userId;
13                },
14                err => {
15                    console.log('error', err);
16                }
17            );
18            </script>
19            
20            <script　type="text/javascript">
21            document.getElementById('profile').addEventListener('click', function () {
22                liff.getProfile()
23                .then(profile => {
24                    const userIdSpace = document.getElementById('userId');
25                    const displayNameSpace = document.getElementById('displayName');
26                    const pictureUrlSpace = document.getElementById('pictureUrl');
27                    const statusMessageSpace = document.getElementById('statusMessage');
28
29                    userIdSpace.innerText = profile.userId;
30                    displayNameSpace.innerHTML = profile.displayName;
31                    pictureUrlSpace.innerHTML = profile.pictureUrl;
32                    statusMessageSpace.innerHTML = profile.statusMessage;
33
34                })
35                .catch((err) => {
36                    console.log('error', err);
37                });
38            });
39            </script>
40            
41            <script　type="text/javascript">
42            document.getElementById('open').addEventListener('click', function () {
43                liff.openWindow({
44                    url: 'https://classmethod.jp/'
45                });
46            });
47            </script>
48            
49            <script　type="text/javascript">
50            document.getElementById('close').addEventListener('click', function () {
51                liff.closeWindow();
52            });
53            </script>
54            
55            <script　type="text/javascript">
56            document.getElementById('message').addEventListener('click', function () {
57                liff.sendMessages([
58                    {
59                        type:'text',
60                        text:'Hello, World!'
61                    }
62                ])
63                .then(() => {
64                    console.log('message sent');
65                })
66                .catch((err) => {
67                    console.log('error', err);
68                });
69            });
70            </script>

退会済みユーザー

2021/05/17 14:24

回答依頼を受けたのでコメントします。私が調べた限りでは、Google Apps Scriptにホスティングして、LIFF v2のapiを動作させる方法を見つけることはできませんでした。自分の環境で、質問文のスクリプトや検索して出てきたスクリプトを試してみましたが、 Google Apps Script内では、liff.sendMessagesだけでなく、たとえばliff.openWindow()など、すべてのAPIが動作していないように思われます。（LIFFの設定で、scopeのchat_message.writeをオンにしても無理でした）エラーメッセージも特に出ていないので原因は不明です。サイトによってherokuやGitHub.ioでホスティングした場合は動作する、との記事もあるので、Google Apps Script固有の問題と思われます。（役立つ回答ではなくて申し訳ありませんが、私が調べらたり試した限りでは以上になります、だれかほかの人が解決策を持っているかもしれません）

turbo3681

2021/05/17 14:40

お忙しいところご回答いただきましてありがとうございました！！ GASにホスティングすることは(おそらく)不可能だということですね。私自身いろいろ調べてみても、GASで上手くいったという記事を見つけることが出来なかったので、モヤモヤした気持ちが晴れました。他の方法を模索してみます。また質問させていただければと思います。ありがとうございました！！

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

回答1件

ベストアンサー

nuxtで良くLIFFを使って作るので、そのコードを持ってきて実行しました。
ログイン画面に遷移しようとするのですが、GASが別ページに遷移しようとするとブロックするので、GASで使うのは難しいかもしれません。

liff.getOS()やliff.isInClient()など一部は動作したので、
工夫すればなんとかできるかもしれません。

一番おすすめなのは、hosting先を変えていただくことですが笑
firebase Hostingであれば問題なく動きます。

サンプルコードのliffIdは意図的に抜いて、そのまま補足入れ忘れと思われます。

↓これでLINEユーザのtokenとdisplayNameを取得可能です。
このtokenは、同じliffIdのサイトでは固定です。

js
1
2liff.init({liffId: "***"})
3    .then(() => {
4      if (liff.isLoggedIn()) {
5          liff
6           .getProfile()
7           .then(async function (profile) {
8              var lineUserData = {
9                 token: liff.getIDToken(),
10                 name: profile["displayName"],
11          };
12      }else{
13        liff.login({ redirectUri: "url" });
14      }
15      //僕これ毎度実行してないですが、問題ないです。initializeApp();　
16    })
17    .catch((err) => {
18      /* エラー処理 */
19    });;

投稿2021/05/18 15:16

Tatsunosuke

総合スコア599

turbo3681

2021/05/18 15:30

アドバイスいただきありがとうございます！！ firebase Hosting・・・使ったことないですが調べてみてチャレンジしてみます。動いてくれたらと祈る気持ちですね。。。また、ご丁寧にコードをみていただきとても助かりました。ちなみに・・・この方法は難しいとのアドバイスをいただいたので、別の方法でLINEログインを試しているのですが、まだうまくいっておりません。。。新たに質問しておりますので、よろしければ見ていただけませんでしょうか。引き続きよろしくお願い致します！！