1-1. ngrokを起動する
ローカル環境で動かすためngrokを起動します。
ターミナルやPowerShellを起動して下記コマンドを実行してください。
コマンドを実行します。
$ ngrok http 8080
実行すると https 側のURLをメモしておきましょう。
2-1. 新規チャネルを作成する
LINE DeveloperページへアクセスしてLINEログインしてください。
https://developers.line.biz/ja/
新規チャネルをクリックします。
LINEログインをクリックします。
各種項目を埋めていきます。
①チャネル名 | LIFF-v2-Handson |
②チャネル説明 | LIFF-v2-Handson |
③アプリタイプ | チェックを2つ入れる |
④メールアドレス | ご自身のメールアドレスを入力 |
チェックを入れてから［作成］ボタンをクリックします。
［同意する］をクリックします。
2-2. LIFFのIDを作成する
作成された LIFF-v2-Handson のチャネルをクリックします。
LIFF をクリックして、［追加］ボタンをクリックします。
アプリ名とサイズを設定します。
①LIFFアプリ名 | LIFF-v2-Handson |
②サイズ | Tall |
続いて他の設定も行います。
③エンドポイントURL | 手順1-1でメモしたngrokのURLを貼り付ける |
④Scope |
|
⑤ボットリンク機能 |
|
［作成］ボタンをクリックします。
LIFFのIDが生成されるので、値をメモしておきます。
3-1. GitHubからCloneする
予め用意しているプログラムをGitHubからクローンしてください。
Macの方
$ cd ~/Documents/
$ git clone https://github.com/gaomar/liff-v2-demo.git
Windowsの方
> cd %homepath%\Documents
> git clone https://github.com/gaomar/liff-v2-demo.git && code liff-v2-demo
3-2. Visual Studio Codeを開く
Visual Studio Codeでクローンしてきたものを開きます。
Windowsの方は既に開いているかと思いますが、開いていない方は下記手順をお試しください。
まず、Visual Studio Codeを開きます。
左メニューの①をクリックして、［フォルダーを開く］をクリックします。
フォルダーは書類フォルダにクローンされた liff-v2-demo を選択して、［開く］ボタンをクリックします。
3-3. モジュールをインストールする
Macの方は shift + control + @ をキーボードで押してください。
Windowsの方は ctrl + @ を押してください。
するとターミナルウィンドウが開きます。
ターミナルウィンドウが開いたら、下記コマンドを実行してください。
$ npm install
3-4. LIFFのIDを反映させる
.env ファイルをクリックしてファイルを開きます。VUE_APP_LIFF_ID に2-2で生成されたLIFFのIDを貼り付けます。編集したら必ずファイルを保存してください！
3-5. 動かしてみる
ターミナルウィンドウで下記コマンドを実行します。
$ npm run serve
1-1で生成されたngrokのURLにアクセスしてみましょう。
https://xxxxxxx.ngrok.io
ログインボタンが表示されるので、あなたのLINEアカウントでログインしてみましょう。
ログインするとあなたの名前が表示されると思います。
4-1. Messaging APIのチャネルを作成する
LINE Developerのページから新規チャネル作成をクリックします。
今度は、真ん中の Messaging API をクリックします。
それぞれの項目を設定します。
各種項目を埋めていきます。
①チャネル名 | LIFF-v2-Bot |
②チャネル説明 | LIFF-v2-Bot |
③大業種 | 個人 |
④小業種 | 個人（その他） |
⑤メールアドレス | あなたのメールアドレスを入力してください |
2つのチェックを入れて、［作成］ボタンをクリックします。
［同意する］ボタンをクリックします。
4-2. リッチメニューを設定する
リッチメニューを設定します。設定は別のページで行うので、 LINE Official Account Manager のリンクをクリックします。
［ホーム］- ［リッチメニュー］をクリックして、［作成］ボタンをクリックします。
LIFFタイトルと日付を設定します。
①タイトル | LIFFメニュー |
②表示期間 | 2020/01/01 00:00 〜 2029/12/31 00:00 |
［テンプレートを選択］ボタンをクリックします。
テンプレートは左下の物を選択して、［選択］ボタンをクリックします。
アクションの設定をします。
①タイプ | リンク |
②URL | 2-2で生成されたLIFFのURLを指定する |
③アクションラベル | LIFFを開く |
4-3. 背景画像を作成する
［画像を作成］ボタンをクリックします。
メニューからテキストや背景色を設定してそれらしいボタン画像を作成します。
ボタンが出来たら［適用］ボタンをクリックします。
画像を保存する必要が特に無いので、［適用］ボタンをクリックします。
［保存］ボタンをクリックします。
4-4. 応答設定する
ボットの応答を設定します。［設定］- ［応答設定］にある応答メッセージを「オフ」にしてください。
4-5. ボットと友だちになる
作ったボットと友だちになりましょう。
LINE Developerのページを開いて、Messaging API設定をクリックします。
そこに表示されているQRコードをLINEアプリから読み取って友だちになります。
［追加］ボタンをクリックします。
4-6. 動作確認する
ボット画面を開いたら、［LIFFを開く］メニューがあるのでタップします。
権限を許可してください。
PCブラウザから押せなくなっていた［LINEに送る］ボタンが押せるようになっているので、ボタンをタップします。タップするとLINEにあなたのアイコン画像が投稿されます。
4-7. 自動でLIFFウィンドウを閉じる
プログラムコードを少し改変してみましょう。src/views/Login.vueファイルを開きます。
108行目と115行目の2箇所コメントアウトしてコードを有効化します。編集したらファイルを保存してください。
liff.closeWindow() が実行されると自動的にLIFFウィンドウが閉じるようになります。
実際に動かすと3秒後にLIFFウィンドウが自動的に閉じる動きになります。
///* ← コメント解除(108行目)
// 自動的に閉じる
setTimeout(()=> {
liff.closeWindow()
},
this.snackbarTimeout
)
//*/ ← コメント解除（115行目）
編集が終わったら直ぐにVue.jsが反映されるので、LIFFを開くをタップして動作確認してみてください。
LINEログインからLINEメッセージ送信までを行いました。LIFFを駆使して面白いアプリを作ってみましょう！