【全て無料】10分でLINE BotにLIFFフォームを追加してスプレッドシートにデータを保存

# 追記（2021年12月3日）
本当に10分でできるのかを確かめるのも含めて、YouTubeでも今回の内容を動画で解説しています。ピッタシ10分でつくってます。
<iframe width="560" height="350" src="https://www.youtube.com/embed/mdXzAUEWsPE?si=hhm_VfArWtuxak9F" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# はじめに

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

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

Qiita: https://qiita.com/njn0te/items/2c08c936661a9febb3b0
YouTube: https://youtu.be/9K_EKn2QQUQ
![ezgif-6-81fbf78951b6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/cb8153ac-ae1a-6aa9-ecde-216714dcf943.gif)

しかし。
A列に名前、B列に腕立て、C列に腹筋、D列に背筋、E列にスクワット
この順番でLINEで改行して入力するとスプシに反映できるLINE BOT なのですが
「あれ、B列なんだっけ？」
となるので、もう少し実用性を持たせたいなと思いました。

そこで、今回はその続きとして、メッセージで情報をスプレッドシートに追加するのではなく、LIFFのフォームで情報をスプレッドシートに追加しようと思います。この記事でLIFFを学び、フォームのインプット部分を変えて応用すれば、無料でログイン不要のアプリなども作れると思うので、ぜひお試しください。今回も、超初心者向け、非エンジニアでもできる内容にしています🎅

## 無料！ 追加インストールなし！ 環境依存なし！
もちろん今回も、黒い画面でコマンドを打ったり、何か新しく登録やインストールをしたり、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の準備

[非エンジニアでもLINE Bot開発できる！ SpreadsheetをデータベースにGASで動かす](https://qiita.com/njn0te/items/2c08c936661a9febb3b0) で、既にLINE Botはつくってあるという前提で進めていきます。もしまだ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以内）
    チャネル名： LIFFフォーム （仮）
    チャネル説明： LIFFフォームです （仮）
    アプリタイプ： 今回は、ウェブページに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アプリ名： LIFFフォームアプリ （仮）
    サイズ： Full
    エンドポイントURL： https://google.com （あとでここは変えます）
    Scope： profile, openid, chat_message.write の3つにチェック
    ボットリンク機能： On (Normal)
    オプション： Off
    Scan QR： Off 

Scope の ```chat_message.write``` のチェックは、一度「全てを表示」を押すと、チェックでき流ようになります。

![スクリーンショット 2021-11-29 10.17.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/3cc34309-92d8-7f81-d5f0-595834c55ea0.png)


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

## ウェブアプリ に LIFF ID を追加

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

※ できる方は、[GitHub](https://github.com/TakayukiNJ/liffformapp) でフォークして頂いても大丈夫です（その際はスターもお願いします🙇‍♂️）
https://github.com/TakayukiNJ/liffformapp

```index.html
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>筋トレ管理</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>
        <input type="submit" class="mt-4 btn btn-primary" value="送信">
    </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 charset="utf-8" src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
    <script>
        
        $(document).ready(function () {
            const liffId = "**********-********";
            initializeLiff(liffId);
        })

        function initializeLiff(liffId) {
            liff.init({
                liffId: liffId
            }).then(() => {
                initializeApp();
            }).catch((err) => {
                console.log('LIFF Initialization failed ', err);
            });
        }

        function sendText(text) {
            liff.sendMessages([{
                'type': 'text',
                'text': text
            }]).then(function () {
                liff.closeWindow();
            }).catch(function (error) {
                window.alert('Failed to send message ' + error);
            });
        }
        
        const params = (new URL(document.location)).searchParams;
        const key = params.get('key');

        $(function () {
            $('form').submit(function () {
                const name    = $('input[name="name"]').val();
                const udetate = $('input[name="udetate"]').val();
                const fukkin  = $('input[name="fukkin"]').val();
                const haikin  = $('input[name="haikin"]').val();
                const sukuwat = $('input[name="sukuwat"]').val();
                const msg = `${name}\n${udetate}\n${fukkin}\n${haikin}\n${sukuwat}`;
                sendText(msg);
                return false;
            });
        });

    </script>

</body>
</html>
```
 
44行目の

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

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

## GitHub に index.html をアップロード

[GitHub](https://github.com/)にログインします。
https://github.com/

次に、新しくレポジトリーを作ります。
https://github.com/new

レポジトリー名は、liffformapp として、Create repository で作成します。

少し小さい文字ですが、 uploading an existing file から、先程のindex.html をドラッグ&ドロップでアップロードできます。
![スクリーンショット 2021-12-02 8.24.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/d61ed564-05dc-1ef8-05d4-bd3a5c975f26.png)

アップロードが完了したら、commit changes を押します。

## GitHub Pages で URL を発行

下記の画面の右上あたりに、Settings というところがあります。ここからURLを発行します。

![スクリーンショット 2021-12-02 8.30.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/8fe62bf7-831c-e601-3da8-269ea4b9fdd3.png)

少し下の方に、GitHub Pages という箇所があります。Check it out here!　というボタンを押すと、画面遷移します。ブランチを「main」にして、保存します。

![スクリーンショット 2021-12-02 8.35.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/4ecfcdb6-95d5-817b-9d12-b85c3f22dbc6.png)

そうすると、下記のようなURLが発行されます。
https://takayukinj.github.io/liffformapp/
![スクリーンショット 2021-12-02 8.40.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/02cdcfb3-968f-06ef-0bbf-80d9b3241002.png)

## LIFF のエンドポイントURLを変更

現在 https://google.com になっているので、GitHub で発行した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)

LINE BOT で開いたLIFFのフォームからデータを入力して、スプレッドシートにデータが保存されれば成功。なのですが、URLいちいちコピペして開いたりするのは大変なので、ボタン一個でLIFFフォームが立ち上げることができるリッチメニューを使います。

## リッチメニューからLIFFフォームを呼び出し

[LINE Official Account Manager](https://manager.line.biz/account)　で、今回のLINE Bot のページに移動してください。ホーム画面の左側に、リッチメニューというボタンがあります。
![スクリーンショット 2021-12-02 9.05.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/4033979f-7b3f-5fdc-0183-24f284b248e6.png)

表示期間は、なるべく長く見積もっておいた方がよくで、わたしは　２０３０年の年末に設定しておきました。（絶対に忘れそうですが、次に進めないので一旦これで...）

次に、下のコンテンツ設定ですが、今回はリンクしか使いません。なので、テンプレート選択は一番小さくて一個だけ選べるタイプにしました。

![スクリーンショット 2021-12-02 9.14.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/61252517-a32a-db2a-9fbf-80c8bce4f39c.png)

    タイプ:　リンク
    リンク: LIFF URL をコピペ　
    アクションラベル（20文字以内）: LIFFフォーム

これで、LINE Bot をもう一度立ち上げてみましょう。
リッチメニューからLIFFのフォームが立ち上がれば成功です。

## さいごに

今のままだと、LIFFフォームが非公開になっているので、LINE Developers のLIFFフォームを作成した画面に戻って頂き、非公開を公開にします。すぐ上の方に「非公開」というボタンがあって、公開に変えるだけです。
![スクリーンショット 2021-12-02 9.21.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/5e66e2cf-78c5-0536-33d7-e8f413173abd.png)

これで、完成です。
お疲れ様でした！

## 注意点

今のままだと、LIFF ID が GitHub で見えたままです。このIDは見えないように工夫をした方が良いですね。

# 宣伝

Udemyで、GAS や LINE BOT が学べるのコースを出しています。

#### ChatGPT × LINE について3時間で学べるコース

https://www.udemy.com/course/chatgpt-line-function-calling-ai/?referralCode=509DE0E479928C2939C1

#### GASの基礎から応用まで2時間でスッと学べるコース

https://www.udemy.com/course/googleappsscript/?referralCode=9EC52D89F0F5F497933A

#### スクレイピングやWeb Api について1時間でサクッと学べるコース

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

クーポンコード：「年月」
例：2025年9月の場合「202509」

ぜひご受講お待ちしております！