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

Go&Herokuを使わなくてもGitHub Pagesで簡単に実現可能です。
[【LINE/LIFF入門】LIFFでLINE公式アカウント（旧LINE＠）上に予約フォームを作成する（GitHub Pages使用）](https://qiita.com/yagi_eng/items/5dce5527dc5d6a6e9833)

# はじめに
## こんな感じの作ります
<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/)
- Go
    - Goの勉強したかったのでGoにしましたが、バックエンドは何でもいいです
- JavaScript, jQuery
- Heroku
- Git

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

# LINE公式アカウント作成
[こちらの公式HP](https://www.linebiz.com/jp/column/technique/20190418-3/)を参考に作成します。

# リッチメニュー設定
## リッチメニュー用の画像を作成する
チャット画面下に表示されるバナーのことを**リッチメニュー**というようです。
まずはリッチメニューに設定する画像を[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を使うために基本的な情報を登録します。

## コーディング
### ディレクトリ構成
任意のディレクトリに作業用ディレクトリを以下の構成で作成します。
Go以外で試す場合は、`index.html`と`static/`があれば動作すると思います。

```
reservation/
|- static/
   |- liff.js
   |- index.js
|- vendor/
   |- vendor.json　// Heroku上でGoを動かすために必要
|- index.html
|- main.go
```

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

### ハマりポイント
PORTの指定は`port := os.Getenv("PORT")`のように環境変数から取得します。
Herokuで実行する際はHeroku指定のPORT番号でListenする必要があるためです。

```go:main.go
func main() {
	port := os.Getenv("PORT")
	fmt.Printf("Starting server at Port %s", port)
	http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static/"))))
	http.HandleFunc("/", handler)
	http.ListenAndServe(fmt.Sprintf(":%s", port), nil)
}
```

## Herokuにデプロイ
Herokuに関する説明は省略します。
HerokuでNew Appを作成した後に以下のコマンドを実行します。
HerokuのDeploy画面に表示されているコマンドのままです。

```
$ heroku login
$ cd reservation/
$ git init
$ heroku git:remote -a (自分のApp名)
$ git add .
$ git commit -am "make it better"
$ git push heroku master
```

デプロイ後にHerokuのURLにアクセスしてフォームが表示されれば成功です。

## LIFFアプリをチャネルに追加
[こちらの公式HP](https://developers.line.biz/ja/docs/liff/registering-liff-apps/#using-share-target-picker)を参考にして、LIFFアプリがLINEやブラウザ上で動作できるようにするために、LIFFアプリをチャネルに追加します。
**エンドポイントURL**にはHerokuの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の友だちに追加して試してみます。
冒頭のデモ画像のようになれば成功です。

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

# 参考
- [LIFFを利用し、WebとLINE Botを連携させる](https://www.work-school.com/courses/9/chapters/42)
- [リッチメニューの活用法│作成から設定方法まで解説](https://www.linebiz.com/jp/column/technique/20180731-01/)
    - 関係ないけど公式なのにhttpを含んでるっぽい
- [GO言語で"Hello World!"をHerokuへデプロイする。](https://qiita.com/stratruss/items/c1ad5c51de5b6be326f3)
- [[jQuery UI] Datepicker の使い方とオプション](https://agohack.com/jquery-ui-datepicker/)
- [ngrokの利用方法](https://qiita.com/hirokisoccer/items/7033c1bb9c85bf6789bd)