ICON公式ブログ

ICON公式ブログ

静岡大学コンテンツ制作サークルICONの公式ブログです

LINEの内部ブラウザ使ってみた【サマーブログリレー2020 9日目】

※この記事はICONサマーブログリレー2020 9日目の記事です。

 

 こんにちは。ICONプログラム班1年の荒川です。今回は、LINEの内部ブラウザでウェブページを表示する方法を紹介します。タイトルでは分かりやすさ優先のため「LINEの内部ブラウザ」と表現しましたが、正式名称はLIFF(LINE Front-end Framework)と言います。

 

f:id:iconcreator:20201009232128p:plain


 LIFFを使用すると、上の画像のようにLINE画面の下半分くらいを使用して特定のウェブページを表示できます。QRコードトーク画面のリンクからすぐに読み込めるため、快適な閲覧が可能です。

 LIFFのAPIJavaScriptを活用するとLINEのユーザー情報を利用したウェブサービスの構築なども可能ですが、この記事では割愛し、簡単なウェブページの作り方のみを紹介します。

 

f:id:iconcreator:20201003001806j:plain

 

 若干ローカルなネタですが、岡崎市プレミアム付商品券のデジタル券がLIFFを使用しています。LINEアカウントで購入者を判定しているようです。デジタル券を使用する際には、店のレジに設置されたQRコードを読み取ります。他には、店の予約やアンケートフォームにLIFFが使われた例があります。

 

用意するもの

・LINEアカウント
・ウェブサーバ(レンタルサーバでも可)
・HTMLの知識

 

Step 1 - チャンネルの作成

 LIFFでウェブサイトを公開する前に、LINEの開発者サービスで「チャンネル」を作成する必要があります。

 

f:id:iconcreator:20201003002609p:plain

 

 まず最初に、LINE Developersにアクセスし、LINEアカウントでログインします。普段皆さんが使っているLINEアカウントがそのまま使えます。

 

f:id:iconcreator:20201003122825p:plain

 

 次に、「Create a new channel」→「LINE Login」の順にクリックします。チャンネル作成が初めての場合は、「Create a new channel」は表示されませんので、そのまま「LINE Login」をクリックして下さい。

 

f:id:iconcreator:20201009230820p:plain

 

以下の3つの項目を入力します。

「Channel name」・・・チャンネルの名前(例:ICONテストチャンネル)

「Channel description」・・・チャンネルの説明文(例:ICONプログラム班が制作したテストチャンネルです。)

「App types」・・・「Web app」にチェック

 

 他の欄は最初から埋まっていますが、必要に応じて修正して下さい。最後に「I have read and agree to the LINE Developers Agreement」のチェックを入れ、「Create」をクリックすると、チャンネルが作成されます。

 

Step 2 - ウェブページの作成

 次に、LIFFを経由して配信するウェブページを作成します。LIFFにはウェブページそのものをホスティングする機能は無いので、LINEとは別にウェブサーバを用意する必要があります。

 

f:id:iconcreator:20201009225322p:plain

 

 上のような、サークルを紹介する簡単なウェブページを作成しました。完成したら、インターネット上にアップロードします。

 

Step 3 - LIFFとの紐付け

f:id:iconcreator:20201003161607p:plain

 Step 2で作成したウェブページをLIFFに紐付けします。Step 1で作成したチャンネルを→「LIFF」タブ→「Add」の順にクリックします。

f:id:iconcreator:20201009231017p:plain

 「LIFF app name」・・・アプリの名前を入力します。

 「Size」・・・サイズを指定します。「Full」で画面全体、「Tall」で約7割、「Compact」で約半分のサイズになります。

 「Endpoint URL」・・・Step 2で作成したウェブページのURLを入力します。

 「Scopes」・・・LINEのユーザー情報をどのように取得するか指定します。今回はLINEアカウントと連携しないので、適当に選んで良いと思います。筆者は「profile」を選びました。

 Bot link feature」・・・よくわからん。ウェブページ出すだけなら「Off」でOK。多分。

 

入力が終わったら、「Add」を押します。

 

f:id:iconcreator:20201009232900p:plain

 

 これで、「LIFF URL」が発行されました。これをトークルームに貼り付けたリンクやQRコードリーダーから読み込むと、LINEの内部ブラウザでウェブページを表示することができます。

 

f:id:iconcreator:20201009232041p:plain

f:id:iconcreator:20201009232128p:plain

 

 

まとめ

 LIFFを使うと、LINEの内部ブラウザから自作のウェブページを開くことができます。LINEアプリに内蔵されているQRコードリーダーから読み込めるため、例えば物販イベントの料金表を確認できるQRコードを会場内に設置しておけば、お客さんが自分のスマホで読み込んで事前にチェックすることができます。他にも様々な用途に応用できると思うので、このブログを見ている皆さんも、是非試してみてください。