More than 3 years have passed since last update.

【LINE/LIFF入門】LIFFでLINE公式アカウント（旧LINE＠）上に予約フォームを作成する（GitHub Pages使用）

Last updated at 2020-05-21Posted at 2020-05-21

はじめに

【LINE/LIFF入門】LIFFでLINE公式アカウント（旧LINE＠）上に予約フォームを作成する（Go＆Heroku使用）
上記の記事が元です。

本稿はより簡単にLIFFを試せるように、GitHub Pagesを使って実装した手順を改めてまとめた記事です。

こんな感じの作ります

使用技術

LIFF (LINE Front-end Framework)
- LINEが提供するウェブアプリのプラットフォーム
- 公式HPはこちら
JavaScript, jQuery
GitHub Pages
- GitHubにプッシュした静的サイトを公開できる機能

ソースコードはこちら(GitHub)

LINE公式アカウント作成

こちらの公式HPを参考に作成します。

リッチメニュー設定

リッチメニュー用の画像を作成する

チャット画面下に表示されるバナーのことをリッチメニューというようです。
まずはリッチメニューに設定する画像をCanovaを使って作成します。
Canovaは素材が豊富で無料プランでもいい感じの画像が作れるので便利です。

リッチメニューを設定する

LINE Offical Account Manager上からいい感じに設定します。（適当）
PCからのみ設定することができ、スマホからは設定できないようです。
リンクは一旦適当なリンクを設定しておきます。
LIFFアプリを作成後にアプリのURLを設定します。

LIFFアプリ作成

チャネル作成

こちらの公式HPを参考にして、LINE Developersでチャネルを作成します。
LIFFを使うために基本的な情報を登録します。

コーディング

ディレクトリ構成

3ファイルしかないので全部同一ディレクトリにおいちゃいます。

liff-reservation-githubpages/
|- index.html
    -フォームを表示するhtml
|- index.js
    -フォームの制御やliff.jsで定義した関数を呼び出すjs
|- liff.js
    -LIFFのSDKを呼び出すjs

ソースコードは冒頭のGitHubを参照ください。

簡単にLIFF部分だけピックアップしておきます。
初期化してメッセージ送信するだけなのでめっちゃ簡単です！

liff.js

$(document).ready(function () {
    // liffId: LIFF URL "https://liff.line.me/xxx"のxxxに該当する箇所
    // LINE DevelopersのLIFF画面より確認可能
    var liffId = "(自分のLIFFIDを入力)";
    initializeLiff(liffId);
})

function initializeLiff(liffId) {
    liff
        .init({
            liffId: liffId
        })
        .then(() => {
            // Webブラウザからアクセスされた場合は、LINEにログインする
            if (!liff.isInClient() && !liff.isLoggedIn()) {
                window.alert("LINEアカウントにログインしてください。");
                liff.login({redirectUri: location.href});
            }
        })
        .catch((err) => {
            console.log('LIFF Initialization failed ', err);
        });
}

// LINEトーク画面上でメッセージ送信
function sendMessages(text) {
    liff.sendMessages([{
        'type': 'text',
        'text': text
    }]).then(function () {
        liff.closeWindow();
    }).catch(function (error) {
        window.alert('Failed to send message ' + error);
    });
}