LIFF × GAS フォーム送信をリプライメッセージではなく、LIFF上で完結できないかなぁ

<iframe width="560" height="315" src="https://www.youtube.com/embed/frqSAqgEdxQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# はじめに

グーテンターク！　ドイツのベルリンに住んでおります。仲条と申します。

GASで LINE bot を作る記事を書いたり

https://qiita.com/njn0te/items/2c08c936661a9febb3b0

去年のアドベントカレンダーでは、そのLINE BotにLIFFを追加するフォームを書いたり

https://qiita.com/njn0te/items/53c4b19208924567af7b

Qiitaで『[非エンジニアでもLINE Bot開発できる！ SpreadsheetをデータベースにGASで動かす]()』という記事を書き、[YouTube](https://youtu.be/9K_EKn2QQUQ)でも多くの方にご覧頂けました。

YouTubeでもLINEに関する情報発信をしています。

https://www.youtube.com/playlist?list=PLeCTl42-engxMY4-sVvZBDCKDVj3EqKtQ

![ezgif-6-81fbf78951b6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/cb8153ac-ae1a-6aa9-ecde-216714dcf943.gif)

去年、メッセージをLINEbot上に表示させてから、Messageing API のリプライメッセージで処理を行っていました。
今回は、リプライメッセージではなく、LIFF上で完結できないかなぁと思い、GASで挑戦しました。

ちなみに、GASではLIFFはできないと言われており

https://makimakimakino.hatenablog.com/entry/2019/04/20/125203

https://teratail.com/questions/338736

https://www.pre-practice.net/2018/08/line-botliff.html

ホスティングだけ、firebaseを使っています。

https://youtu.be/k7c5nSnbcXo

## 無料！ 追加インストールなし！ 環境依存なし！
もちろん今回も、黒い画面でコマンドを打ったり、何か新しく登録やインストールをしたり、WindowsやMacなどの環境の違いで動かなかったり、そんなことは一切ありません！
「LINEアプリがスマホに入っていて、Googleのアカウントを持っている人」なら誰でも無料で簡単にできます。最近、エディタ(プログラムを書く場所)の場所が変わり、Googleスプレッドシートのメニューバーの拡張機能の中の「Apps Script」（下の写真参照）でGoogle Apps Scriptというプログラム言語を書き、LINEボットを作ることが可能です。（プログラムはコピペで動かせるように既に用意しています）
![スクリーンショット 2021-12-02 7.23.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/f9b322e8-c425-db7a-9cb6-c17cea2bdd1c.png)

# LINE Botの準備

[わたしの記事](https://qiita.com/njn0te/items/2c08c936661a9febb3b0) や他の方の記事などで、既にGASでLINEbotはつくってあるという前提で進めていきます。もしまだLINE Botをお持ちで無い方は、作成してください。

※まだLINE　Botをお持ちで無い方は、スプレッドシートも用意してありますので、良ければコピーしてご利用ください。
スプレッドシート：https://docs.google.com/spreadsheets/d/17OgTRLtPbgmNlFCazRXdwiD78K3sgjqSmdKIDd9QlRs/copy
Qiita：https://qiita.com/njn0te/items/2c08c936661a9febb3b0

# 新規チャネル「LINEログイン」でLIFFを作成

プロバイダーを作り、新規チャネル「LINE Messageing API」で LINE BOT を作成していると思います。次は、同じプロバイダーで、新規チャネル「LINEログイン」でLIFFを作成します。
![スクリーンショット 2021-12-02 7.05.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/3c57f723-a6ce-fa1a-e6f8-f5c8ca39bc6c.png)
チャネル名やチャネル説明、アプリタイプなど、入力必須項目があるので、下記の様に適当に入力していきます。

    チャネルの種類： LINEログイン
    プロバイダー： LINE Messageing APIの時と同じプロバイダー （異なるとユーザーIDも異なるため）
    地域： 日本
    チャネルアイコン： 任意でアイコンになる画像を登録 （対応ファイル形式：PNG,JPG,JPEG,GIF,BMPファイルで、サイズは3MB以内）
    チャネル名： GAS連携チャネル （仮）
    チャネル説明： GAS連携チャネルです （仮）
    アプリタイプ： 今回は、ウェブページにLINEログインを組み込みたいので「ウェブアプリ」を選択
    メールアドレス： 自動入力されていると思います （通知が来てもよいメールアドレス）
    プライバシーポリシーURL： 任意 （今回はなくても大丈夫）
    サービス利用規約URL： 任意 （今回はなくても大丈夫）

最後に、LINE開発者契約の内容に同意して(チェックマークをつけて)、作成します。

あとで上記の内容は、作成が完了した画面の「チャネル基本設定」から、変更可能ですのでご安心ください。

## LIFFアプリを追加

作成が完了した画面の「チャネル基本設定」の２つ右に「LIFF」というボタンがございます。ここから、LIFFアプリを追加します。

![スクリーンショット 2021-12-02 7.34.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/6af82680-86be-ebaf-a8ae-4cddd66d26c1.png)

専門的な言葉が多いですが、下記の様に入力してください。

    LIFFアプリ名： GAS連携アプリ （仮）
    サイズ： Full
    エンドポイントURL： https://google.com （あとでここは変えます）
    Scope： profile, openid, の3つにチェック
    ボットリンク機能： On (Normal)
    オプション： Off
    Scan QR： Off 

最後に追加を押すと、LIFFアプリが1つ追加され、LIFF ID と LIFF URL が新しく発行されます。

## HTML に LIFF ID を追加

ご自身のパソコンから、新規ファイル作成で、「index.html」というファイルを作り、メモ帳かエディタで開いて、下記のプログラムをコピペしてください。

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LIFF Stripe Checkout</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
</head>
<body>
  <form class="w-75 mx-auto">
    <p class="mt-3">名前</p>
    <div>
        <input class="form-control w-100 mt-1" name="name" placeholder="" required>
    </div>
    <p class="mt-3">腕立て</p>
    <div>
        <input class="form-control w-100 mt-1" name="udetate" required>
    </div>
    <p class="mt-3">腹筋</p>
    <div>
        <input class="form-control w-100 mt-1" name="fukkin" required>
    </div>
    <p class="mt-3">背筋</p>
    <div>
        <input class="form-control w-100 mt-1" name="haikin" required>
    </div>
    <p class="mt-3">スクワット</p>
    <div>
        <input class="form-control w-100 mt-1" name="sukuwat" required>
    </div>
  </form>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
  <script>
    liff.init({
      liffId: '**********-********'
    }).catch((err) => {
      console.log(err);
    });

    liff.ready.then(() => {
      if (!liff.isLoggedIn()) {
        liff.login();
      }
      const idToken = liff.getDecodedIDToken();
      const userId = idToken.sub;
      $('form').append(`<input type="hidden" name="userId" value="${userId}">`);
      $('form').append(`<input type="submit" class="mt-4 btn btn-primary" value="送信">`);
    })

    $('form').submit(function( event ) {
      event.preventDefault();
      $.post( 'https://*******************', $('form').serialize() );
    });
  </script>
</body>
</html>
```
 
42行目の

```js:index.html
const liffId = "**********-********";
```

の ```**********-********```の部分に、先ほど発行した LIFF ID をコピペしてください。

59行目の

```js:index.html
$.post( 'https://*******************', $('form').serialize() );
```

の ```*******************```の部分に、これからGASで新しく発行するWebアプリのURLをコピペしてください。

## GASの「デプロイ」で新しくURLを発行

Google Drive から、新しくGASを作ります。

![スクリーンショット 2022-12-09 5.57.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/6c81e1e7-cbd9-3105-7394-7c08850502f1.png)

作成したら、下記のプログラムをコピペしてください。書いて、デプロイします。

```js:コード.gs
function doPost(e) {
  const SHEET_ID = '*******************'
  const SHEET = SpreadsheetApp.openById(SHEET_ID).getSheetByName('シート1')

  const name    = String(e.parameters.name);
  const udetate = String(e.parameters.udetate);
  const fukkin  = String(e.parameters.fukkin);
  const haikin  = String(e.parameters.haikin);
  const sukuwat = String(e.parameters.sukuwat);
  const userId  = String(e.parameters.userId);

  SHEET.appendRow( [name, udetate, fukkin, haikin, sukuwat, userId] )

  return
}
```

2行目の

```js:index.html
const SHEET_ID = '*******************'
```

の ```*******************```の部分に、Messageing API で使用しているスプレッドシートのIDを書いてください。なければ、適当にスプレッドシートを作成して、貼り付けてください。

貼り付けたら、右上の「デプロイ」のボタンから、「新しいデプロイ」で、右上の歯車マークからWebアプリを選択し、アクセスできるユーザーは「全員」にして、URLを発行します。

こちらのURLは、先ほどのHTMLファイルの59行目のURL部分にそのままコピーして貼り替えてください。

## index.html をホスティングサービスでアップロード ＆ LIFF のエンドポイントURLを変更

firebase や vercel などで、index.htmlをアップロードしてください。
URLが発行されたら、先ほどLIFFアプリの作成時に「https://google.com」としていた部分を、発行されたURLに貼り替えてください。

![スクリーンショット 2021-12-02 8.43.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/776df9d2-2b44-304f-0f37-36a4f6db35ae.png)

同じ画面の上の方に、LIFF URL があるので、このURLをLINE Bot から開きます。

![スクリーンショット 2021-12-02 8.44.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/a22c9718-2429-8e9a-c26d-40f8ebfad9cf.png)

これで、LIFF画面で入力して送信したデータが、そのままスプレッドシートに反映されていれば成功です。
お疲れ様でした！

## さいごに

LINEbotも、GASではできないよって言われてましたが、実はできました。
LIFFも、GASではできないよって言われてますが、実はできるんじゃないかと思い、限界までGASで実装することに挑戦しました。

「もっとこうすればよいよ」などございましたら、ぜひコメント欄で教えてくださいね！
Udemyでも、LINE BOT のコースを出していますので、GASでスクレイピングしたりWeb Apiを使ったりしてLINEbotを作る講座も出しているので、興味があればぜひっ。

https://www.udemy.com/course/web-api-scraping-gas-linebot-tsfcm/?referralCode=7E2EB0DD484E08FA1413

2022年も、あと少しですね！
皆さま、メリークリスマス&良いお年を！🎄🍊