みなさん、こんにちは。どんぶラッコです。
今日は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です
![](https://proglearn.com/wp-content/uploads/2020/06/image-13.png)
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://i2.wp.com/blog.proglearn.com/wp-content/uploads/2020/06/image-14.png?fit=1024%2C301&ssl=1)
このHTTPS URLは後ほど使うのでngrokを起動したまま、メモしておいてください。
LINE Business ID をログインする
まずはLINE Business IDを使ってログインします。アカウントを持っていなかったら新規作成をしましょう。
https://account.line.biz/login
![](https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2020/06/image-7.png?fit=1024%2C410&ssl=1)
プロバイダー・チャネルの作成
プロバイダーを作成します。プロバイダー名はなんでもOKです。
![](https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2020/06/image-8.png?fit=1024%2C418&ssl=1)
プロバイダーを作成したらチャネルを作成します。今回はLINEログインを選択します。
![](https://i2.wp.com/blog.proglearn.com/wp-content/uploads/2020/06/image-9.png?fit=1024%2C513&ssl=1)
その後、必要事項を入力していきます。アプリタイプはウェブアプリを選択してください。
![](https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2020/06/image-10.png?fit=1024%2C405&ssl=1)
LIFFを有効化する
チャネルを作成したら LIFF→ LIFFアプリを追加 を選択します。
![](https://i1.wp.com/blog.proglearn.com/wp-content/uploads/2020/06/image-12.png?fit=1024%2C429&ssl=1)
基本情報を入力し、追加ボタンを追加します。
![](https://i1.wp.com/blog.proglearn.com/wp-content/uploads/2020/06/image-15.png?fit=1024%2C732&ssl=1)
![](https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2020/06/image-16.png?fit=1024%2C921&ssl=1)
最終的に LIFF URLが発行されれば成功です。
![](https://i1.wp.com/blog.proglearn.com/wp-content/uploads/2020/06/image-17.png?fit=1024%2C340&ssl=1)
これで設定は完了です!
あとは↑のURLをLINE上で開き,hello, worldが表示されたらOKです!
![](https://i.gyazo.com/5a57e6f555dd55befb15f97c2aaf2edb.gif)
次の記事では、LINE IDの使い方についてまとめてみましょう♪