# 4.LIFFアプリを埋め込む

# ゴール

WebページをLIFFアプリとして登録できること
トーク画面でLIFFアプリを表示できること

# 4-1.LIFFアプリとは

LIFFアプリはWebページをLINEのトーク画面に埋め込める機能です
埋め込むWebページでLIFF SDKを読み込むことでLINEのユーザ情報にアクセスできるのが特徴です
通常のWebページと同じように自由度高く作れるため、トーク画面から離脱せずによりインタラクティブな機能を提供できます
LIFFアプリをトーク画面に表示させるにはトーク画面内でLIFFアプリのURLにアクセスさせる必要があります

LIFFアプリの例

# 4-2.Webページの作成

まずは埋め込むWebページを作成します
Webページは公開されている必要があるため今回はGitHubのホスティング機能を使います

# GitHubのユーザ登録

GitHubのアカウントを持っていない場合は新規登録してください
- https://github.com/join

# リポジトリの作成

以下のURLから新しいリポジトリを作成します
- https://github.com/new
任意のリポジトリ名をセットして作成します

リポジトリ作成

# ファイルの作成

リポジトリができたらcreating a new fileから新しいファイルを作成します

ファイル作成

ファイル名はindex.htmlで内容は以下のものをコピペしてください
- 内容はハンズオン資料のリンク一覧にしています
- aタグのリンク先URLと見出しを変更すれば別のリンク集にすることもできます

html1

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LIFFサンプル</title>
    <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css"
    />
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
  </head>
  <body>
    <h2>ハンズオン資料</h2>
    <ul>
      <li>
        <a href="https://firebase-handson.ozaki25.now.sh/" target="_blank">
          Firebase Authenticationハンズオン
        </a>
      </li>
      <li>
        <a href="https://graphql-handson.ozaki25.now.sh/" target="_blank">
          GraphQLハンズオン
        </a>
      </li>
      <li>
        <a href="https://jamstack-handson.ozaki25.now.sh/" target="_blank">
          Jamstackハンズオン
        </a>
      </li>
      <li>
        <a href="https://line-bot-handson.ozaki25.now.sh/" target="_blank">
          LINE Botハンズオン
        </a>
      </li>
    </ul>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

コピペできたらcommit new fileを押して保存します

html2

# Webページの公開

GitHub PagesというWebページを公開する機能の設定をします
Settingsタブを選択します

settings

下の方にスクロールしていくとGitHub Pagesの項目があります
ボタンを押してmaster branchを選択してください

github pages settings

設定が完了すると画面上部に以下のようなメッセージが表示されます

success

# 公開されたページの確認

Codeタブに戻るとenvironmentというメニューが追加されているのでそれを選択します

environment tab

このページにはGitHub Pagesへのデプロイ履歴が表示されます
View devloymentを押すと公開されたページにアクセスできます

environment

このようにリンク集のページが表示されているはずです
このページのURLは後の工程で使うため控えておいてください

handson links

TIP

GitHub Pagesで公開したWebページのURLは以下のような命名規則になります
- https://アカウント名.github.io/リポジトリ名/
キャプチャで紹介しているサンプルだとこのような感じですね
- https://ozaki25.github.io/line-bot-handson-liff-sample/

# 4-3.LIFFアプリの設定

公開したWebページをLIFFアプリとして登録していきます
LINEのデベロッパーコンソールから作業をします
- https://developers.line.biz/console/

# チャネルの作成

1章で作成したプロバイダーを選択し新規チャネルを作成します

チャネル作成1

チャネルの種類はLINEログインを選択します

チャネル作成2

必須項目に任意の値を設定して作成してください
アプリタイプは特に影響ないのでどちらにチェックしても構いません

チャネル作成3

# LIFFアプリの登録

LIFFタブを選択し追加から登録していきます

LIFF登録1

必要事項をそれぞれ入力します

LIFF登録2 LIFF登録3

完了するとURLが発行されます
- 後で使うので控えておいてください

LIFF登録完了

# 4-3.LIFFアプリにアクセスする

LIFFアプリにアクセスするためにはトーク画面でLIFFアプリのURLにアクセスする必要があります
前節で発行したLIFFアプリのURLをトーク画面に送信しアクセスしてみましょう
- URLの手打ちが面倒であればスマホからLINEのデベロッパーコンソールにアクセスしてコピペすると楽かも
  - https://developers.line.biz/console/

LIFFアクセス1

初回アクセス時は許可が求められます

LIFFアクセス2

WebページをLIFFアプリとしてトーク画面に埋め込むことができました

LIFFアクセス3

# 4-4.リッチメニューからLIFFアプリを起動してみる

実際にサービスとして提供する場合はユーザにLIFFアプリのURLを投稿してもらうわけにはいきません
なので3章で学んだリッチメニューを活用してLIFFアプリを起動できるようにします
LINE Official Account Managerからリッチメニューを更新しましょう
現在設定しているリッチメニューを編集からステータスをオフに更新してから新しく作成しましょう

リッチメニュー作成1

タップ時のアクションでLIFFアプリのURLをセットしておきます

リッチメニュー作成2

登録できたらスマホでLINEアプリを開いて動作確認してみましょう

LIFFアプリ起動

今回の題材はLIFFアプリとし埋め込む必然性は薄かったかもしれません
LIFF SDKを使うとLINEのユーザIDを取得できるため、それをキーとしてDBにデータを登録するなどすると活用の幅が広まってきます

# 次のステップ

応用編はプログラミング要素が強くなってくるため中級者向けの実践的内容です
資料はコピペで動くように作っていますが、プログラミングが難しそうな人は4章までの内容を活用してオリジナルLINE Botを作ってみましょう

← 3.リッチメニューを使ってみる 5.[応用編]メッセージに応答するサーバを作ってみる →