プログラミング知識

【2020年6月】LINEでミニアプリを作る! – LIFFを使って爆速HelloWorld

みなさん、こんにちは。どんぶラッコです。

今日は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

http://127.0.0.1:8080

にアクセスして hello, world と表示されればOKです

ngrok で https からもアクセスできるようにする

https://ngrok.com/

ngrok をインストールしていない場合、

してセットアップしましょう。

その後、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の使い方についてまとめてみましょう♪

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニア経験を経て、ProgLearnのシステム開発を担当。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です