【LINE/LIFF入門】LIFFでLINE公式アカウント（旧LINE＠）上に予約フォームを作成する（GitHub Pages使用）

# はじめに
[【LINE/LIFF入門】LIFFでLINE公式アカウント（旧LINE＠）上に予約フォームを作成する（Go＆Heroku使用）](https://qiita.com/yagi_eng/items/5fd916fbaa6bafe42577)
上記の記事が元です。

本稿はより簡単にLIFFを試せるように、GitHub Pagesを使って実装した手順を改めてまとめた記事です。

## こんな感じの作ります
<img width="350" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/13ab10e4-f5db-5524-2257-d85fc11f9d15.gif">


## 使用技術
- LIFF (LINE Front-end Framework)
    - LINEが提供するウェブアプリのプラットフォーム
    - [公式HPはこちら](https://developers.line.biz/ja/docs/liff/overview/)
- JavaScript, jQuery
- GitHub Pages
    - GitHubにプッシュした静的サイトを公開できる機能

ソースコードは[こちら(GitHub)](https://github.com/yagi-eng/liff-reservation-githubpages)

# LINE公式アカウント作成
[こちらの公式HP](https://www.linebiz.com/jp/column/technique/20190418-3/)を参考に作成します。
<img width="426" alt="line_official.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/bb34d631-88ec-0083-4293-c0d7eae8b03d.png">


# リッチメニュー設定
## リッチメニュー用の画像を作成する
チャット画面下に表示されるバナーのことを**リッチメニュー**というようです。
まずはリッチメニューに設定する画像を[Canova](https://www.canva.com/)を使って作成します。
Canovaは素材が豊富で無料プランでもいい感じの画像が作れるので便利です。
<img width="1107" alt="canova.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/fb91ad11-ae21-d630-7013-7d94ea16e0bc.png">

## リッチメニューを設定する
LINE Offical Account Manager上からいい感じに設定します。（適当）
PCからのみ設定することができ、スマホからは設定できないようです。
リンクは一旦適当なリンクを設定しておきます。
LIFFアプリを作成後にアプリのURLを設定します。

<img width="1109" alt="rich1.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/1dc9932b-5486-396c-e0c3-4dd847e08cc4.png">
<img width="1072" alt="rich2.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/0c5ae303-3e6e-789d-c8a7-c6aae75e6ddf.png">

# LIFFアプリ作成
## チャネル作成
[こちらの公式HP](https://developers.line.biz/ja/docs/liff/getting-started/#%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%83%BC%E3%81%A8%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90)を参考にして、LINE Developersでチャネルを作成します。
LIFFを使うために基本的な情報を登録します。
<img width="1114" alt="line_dev.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/090c40e1-49e1-1aa5-987e-3fd05bd0e500.png">

## コーディング
### ディレクトリ構成
3ファイルしかないので全部同一ディレクトリにおいちゃいます。

```
liff-reservation-githubpages/
|- index.html
    -フォームを表示するhtml
|- index.js
    -フォームの制御やliff.jsで定義した関数を呼び出すjs
|- liff.js
    -LIFFのSDKを呼び出すjs
```

ソースコードは冒頭のGitHubを参照ください。

簡単にLIFF部分だけピックアップしておきます。
初期化してメッセージ送信するだけなのでめっちゃ簡単です！

```javascript:liff.js
$(document).ready(function () {
    // liffId: LIFF URL "https://liff.line.me/xxx"のxxxに該当する箇所
    // LINE DevelopersのLIFF画面より確認可能
    var liffId = "(自分のLIFFIDを入力)";
    initializeLiff(liffId);
})

function initializeLiff(liffId) {
    liff
        .init({
            liffId: liffId
        })
        .then(() => {
            // Webブラウザからアクセスされた場合は、LINEにログインする
            if (!liff.isInClient() && !liff.isLoggedIn()) {
                window.alert("LINEアカウントにログインしてください。");
                liff.login({redirectUri: location.href});
            }
        })
        .catch((err) => {
            console.log('LIFF Initialization failed ', err);
        });
}

// LINEトーク画面上でメッセージ送信
function sendMessages(text) {
    liff.sendMessages([{
        'type': 'text',
        'text': text
    }]).then(function () {
        liff.closeWindow();
    }).catch(function (error) {
        window.alert('Failed to send message ' + error);
    });
}
```


## GitHubにプッシュして公開
ソースコードをGitHubにプッシュしてGithub Pagesを使って公開します。
以下の記事が参考になります。

[GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた](https://www.tam-tam.co.jp/tipsnote/html_css/post11245.html)

## LIFFアプリをチャネルに追加
[こちらの公式HP](https://developers.line.biz/ja/docs/liff/registering-liff-apps/#using-share-target-picker)を参考にして、LIFFアプリがLINEやブラウザ上で動作できるようにするために、LIFFアプリをチャネルに追加します。
**エンドポイントURL**にはGitHub PagesのURLを設定します。

# 動作確認
LINE Offical Account ManagerのリッチメニューのリンクをLIFFの設定画面に表示されている**LIFF URL**をに変更します。
<img width="817" alt="liffurl.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/22a96371-d2d7-23e8-f990-ecac4d60c26d.png">

LINE公式アカウントを自分のLINEの友だちに追加して試してみます。
冒頭のデモ画像のようになれば成功です。

# LIFFアプリをブラウザ上で動作させたい場合
作成したLIFFアプリをLINE上だけではなく、ブラウザ上で動作させたい場合はShareTargetPickerという機能を使うと実現可能です。

こちらの記事を参考にしてみてください。
[【LINE】既存LIFFアプリにShareTargetPickerを導入する](https://qiita.com/yagi_eng/items/b5136dae10f2df8ce99a)

# おまけ
ローカルのサーバで動作確認をするにはngrokがとても便利です。
参考リンクを貼っておきます。

# 参考
- [LIFFを利用し、WebとLINE Botを連携させる](https://www.work-school.com/courses/9/chapters/42)
- [リッチメニューの活用法│作成から設定方法まで解説](https://www.linebiz.com/jp/column/technique/20180731-01/)
- [[jQuery UI] Datepicker の使い方とオプション](https://agohack.com/jquery-ui-datepicker/)
- [ngrokの利用方法](https://qiita.com/hirokisoccer/items/7033c1bb9c85bf6789bd)