使う予定の技術スタック

・Docker
・Ruby on Rails
・Heroku
・LIFF
・LINE Messaging API

LIFFって何？

LINE FRONTEND FRAMEWORKの略。
任意の公式LINEに登録してもらうだけで、LINE上でWebサイトを開けるようになるので、UXの向上が見込める素晴らしいAPI.

Qiita: 実用レベルのLINE BOTを爆速開発する（前編）
にある通り、LINE botを爆速で開発できるようなテンプレがあったりするので、ちょこっと触ってみたいよという人も気軽にできるのでは。

LIFFを使う際注意しなければならないこと

ガイドラインを読むのは必須。

LIFFアプリおよびサーバーでユーザー情報を使用する場合、LIFFアプリでこれらのユーザー情報を正しく処理しないと、なりすましやその他の種類の攻撃に対して脆弱になります。
ユーザーの同意なく、cookie、localStorage、またはsessionStorageを使ってユーザーをトラックしたり、LINEのユーザー情報と外部セッション情報を結びつけたりしないでください。(引用: 開発上のガイドライン

2021年版の公式ガイドラインスライドもこちらから見られます。

デザイン面でも、例えばアプリ側に「LINEでログインするボタン」を実装する場合の色やサイズが細かく指定されています。勝手にアプリのUIデザインに合わせた色に変更する、というのはNGとなっておりますのでお気をつけください。(詳しくはログインボタンガイドライン参照)

怖いなぁ...

LIFF実装の際のポイント

まずは LINE 連携をしない状態で Web アプリを作るのがいいと思います。LINE から取得したい情報はひとまず mock化などして、Web ブラウザで動かすイメージです。
できている状態のものに LIFF を機能として乗せる方が LIFF URL の修正などが発生しないので後戻りが少なくて済むと思います。
この状態のアプリを Heroku にデプロイします。(引用: LIFFでゲームアプリを作るまで)

公式がスターターキットも用意してくれていますので、とりあえずcloneしてやってみるのもおすすめ

①まずLINE Deverlopersに登録する

この辺りの記事を参考に公式サイトへの登録をしていきます。
https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d

こちらからビジネスアカウントで登録していきます。

※LINEアカウントで作成の方が手軽ですが、後々運用を考えるとなるとビジネスアカウントで作成するのが安全です。なぜなら個人アカウントで作ると、開発中他の人に確認してもらいたい時や後々複数人で運用するとなった時に、個人のLINEで使用しているメールアドレス・パスワードを教えることになります。つまり個人用のLINEのやりとりを誰かが見られるような状態になります。むり！

サインインすると、登録したメールアドレスにログイン用URLが送られてきますので、ログインし、登録を済ませます。

登録後、「LINE Developersコンソールにご登録いただき、ありがとうございます。」画面に飛ぶのでそこをちょっとスクロールして出てくるプロバイダーを新規作成ボタンをクリック

プロバイダー名を任意でいれ、作成します。

ちなみにこのプロバイダー、何個も作成できますが、
Liffで取得できるプロフィール情報のuserIdに対し、任意のLine公式アカウントのメッセージフィードにpushMessageしたいというような場合、同じプロバイダーにチャネルを作る必要がありますのでご注意ください。

作成すると、チャネル登録画面に行くので、LINE Messaging APIを選択し、各項目を埋めていきます。
チャネルってなんだ！って感じだと思いますが、チャネル＝アプリに置き換えて考えて問題ありません。

チャネルアイコン画像(任意): BOTのアイコンになる画像を選びましょう。
チャネル名（必須）: BOTの名前を入力しましょう。LINEという文字列は使えなかった気がします。
チャネル説明（必須）: BOTの説明を入力しましょう。取り急ぎは適当でも大丈夫。
大業種/小業種（必須）: BOTのカテゴリを選択します。取り急ぎは適当でも大丈夫。
メールアドレス（必須）: BOTの開発者にLINE側からお知らせがあるときに受け取るメールアドレス。
プライバシーポリシーURL/サービス利用規約URL（任意）:これも取り急ぎはなくても大丈夫です。
(引用: https://bityl.co/6Ipc)

設定できると、チャネル基本設定画面に遷移するのですが、以下赤枠のLINE Official Managerのリンクをクリックしてください。

あとは任意で設定していくのですが私は以下のように設定しました。

Webhook送信: 利用する
Botのグループトーク参加: 利用する
自動応答メッセージ: 利用する
友達追加時あいさつ: 利用する
写真や動画の受け取り: 利用しない

ちょっと場所を全部明記するのは面倒なので、各色々クリックしてみて探してみてください笑(丸投げ)
トークルーム管理からは挨拶メッセージとリッチメニューの設定ができます。

リッチメニューの詳しい設定方法は公式のこちらを参照ください
リッチメニュー > 作成 > コンテンツ設定 > テンプレートを選択で以下のような画面が出るので、好きなデザインを選択できます。サイズが決まっているので、デザインを作成する前に、デザインガイド用のテンプレートをDLしてから作成した方がいいかなと思います。
リッチメニューの作成方法詳細はLINE公式のこちらの記事を参照してみてください。

とりあえず公式が公開しているスターターアプリをHerokuにデプロイしてみる

こちらにしたがって一度デプロイをしてみたいと思います。

//HerokuをローカルPCにインストール
brew tap heroku/brew && brew install heroku

//Herokuのバージョンを確認
% heroku -v
zsh: command not found: heroku

//パスを通してあげる
%vim ~/.zshrc

//vimが開いたら以下をコピペして:wq+Enterでvimを保存
export PATH=$PATH:/usr/local/Cellar/heroku/7.39.5/libexec/bin

//反映
% source ~/.zshrc

//バージョンを再度確認
% heroku -v
heroku/7.52.0 darwin-x64 node-v12.21.0

ここからはREADME.mdの通り。

//ログインする。とりあえずq以外のキーボードボタンをタップする
heroku login
heroku: Press any key to open up the browser to login or q to exit:

//ブラウザが開くので、ログインボタンをおす

Herokuにとりあえず公開してみる。

ユーザー獲得できるかわからないうちはこれでokな気がします。
ケチケチしていきます。
ユーザーから好評なら他のサーバーに移行すればokですし、その際サーバー移行に関する知識と経験も得られます。

Herokuのデータベースバックアップもしないとみたいだよ(自分用)

参考サイト

リッチメニューやFlex Messageなどについて画像付きで詳しく載っている↓

liff.initで指定したliffIdを取得できるliff.idについて載ってます。一応見つけたのでこんなことできるんだ~っていうメモです↓

【21.04.08-】LIFFを使って公開してみる