みなさん、こんにちは。どんぶラッコです。
今日はLIFFを使って、Hello, Worldを表示させてみようと思います。
LIFFとは、LINE Front-end Frameworkの略で、WebアプリをLINE上で構築することができるLINEのフレームワークです。
「え、こんなの使わないでWebサイトに直接飛ばせば良いじゃん」と思ったそこのあなた。
LIFFを使うと、LINEの認証情報を取り扱うことができるんです！
つまりログイン認証をLINE IDで行い、それに応じたコンテンツの出しわけができるLINE上のミニアプリのような使い方が出来ます。
今回は、認証周りの話は抜きにして、まずはLIFF画面を表示させるところまでをやってみましょう。
今回は、
- ローカルサーバーで hello,worldを表示する index.htmlを作成する
- httpsURLを発行する
- LIFFを設定する
という手順を踏んでみましょう。
目次
Hello, world を表示するアプリを作成する
ターミナル を使ってサクッと作ってしまいましょう。
# hello, world を表示する index.htmlを作る
echo "hello, world" > index.html
# php でサーバを立てる 今回はポート番号8080で立てる
php -S 127.0.0.1:8080にアクセスして hello, world と表示されればOKです
ngrok で https からもアクセスできるようにする
ngrok をインストールしていない場合、
- SIGN UP から新規会員登録
- https://ngrok.com/download からツールをダウンロード
してセットアップしましょう。
その後、http://127.0.0.1:8080 を立ち上げたまま、 ngrokのURLを叩きます。
ngrok http 8080発行された httpsのurlにアクセスしてみて、hello, worldが表示されたら成功です。
このHTTPS URLは後ほど使うのでngrokを起動したまま、メモしておいてください。
LINE Business ID をログインする
まずはLINE Business IDを使ってログインします。アカウントを持っていなかったら新規作成をしましょう。
https://account.line.biz/login
プロバイダー・チャネルの作成
プロバイダーを作成します。プロバイダー名はなんでもOKです。
プロバイダーを作成したらチャネルを作成します。今回はLINEログインを選択します。
その後、必要事項を入力していきます。アプリタイプはウェブアプリを選択してください。
LIFFを有効化する
チャネルを作成したら LIFF→ LIFFアプリを追加 を選択します。
基本情報を入力し、追加ボタンを追加します。
最終的に LIFF URLが発行されれば成功です。
これで設定は完了です！
あとは↑のURLをLINE上で開き,hello, worldが表示されたらOKです！
次の記事では、LINE IDの使い方についてまとめてみましょう♪
