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

10411 ワード
JavaScript LIFF Line JavaScript テキストリンク

はじめに

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

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

こんな感じの作ります

使用技術

  • LIFF (LINE Front-end Framework)
  • 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);
    });
}

GitHubにプッシュして公開

ソースコードをGitHubにプッシュしてGithub Pagesを使って公開します。
以下の記事が参考になります。

GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた

LIFFアプリをチャネルに追加

こちらの公式HPを参考にして、LIFFアプリがLINEやブラウザ上で動作できるようにするために、LIFFアプリをチャネルに追加します。
エンドポイントURLにはGitHub PagesのURLを設定します。

動作確認

LINE Offical Account ManagerのリッチメニューのリンクをLIFFの設定画面に表示されているLIFF URLをに変更します。

LINE公式アカウントを自分のLINEの友だちに追加して試してみます。
冒頭のデモ画像のようになれば成功です。

LIFFアプリをブラウザ上で動作させたい場合

作成したLIFFアプリをLINE上だけではなく、ブラウザ上で動作させたい場合はShareTargetPickerという機能を使うと実現可能です。

こちらの記事を参考にしてみてください。
【LINE】既存LIFFアプリにShareTargetPickerを導入する

おまけ

ローカルのサーバで動作確認をするにはngrokがとても便利です。
参考リンクを貼っておきます。

参考