SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

LINEで始めるアプリ開発

LIFFアプリの構築方法とは? LINEアプリ上に独自のサービス機能を追加しよう

LINEで始めるアプリ開発 第4回

  • X ポスト
  • このエントリーをはてなブックマークに追加

LIFFアプリの構築

 続いて、リッチメニューから起動されるLIFFアプリの作成をしていきます。作成するLIFFアプリは、図7のようなできることを簡単に確認するための、ごくシンプルなアプリとしています。

図7:作成するサンプルLIFFアプリの実行例
図7:作成するサンプルLIFFアプリの実行例

LIFFアプリの登録

 まずWebアプリをLIFFアプリとして動作させるためにはLINE DevelopersコンソールからURLを登録します。LIFFアプリは[Messaging API]チャネルから起動しますが、登録は[LINEログイン]チャネルから行います(図8)。

図8:LINE DevelopersコンソールからのLIFFアプリの登録画面
図8:LINE DevelopersコンソールからのLIFFアプリの登録画面

 この画面では表2のような項目について設定を行います。

表2:LIFFアプリを登録する際の各項目について
項目 説明
LIFFアプリ名 LIFFアプリの管理名称。
サイズ Full/Tall/Compactのように表示するブラウザの縦サイズを指定します。
エンドポイントURL 作成したWebアプリのURLを指定します。
Scope 利用するLIFF APIの機能でのスコープを指定します。今回のサンプルではprofileとchat_messge.writeを利用します。
ボットリンク機能 LIFFアプリを初めて利用する際に表示される同意画面において[ともだち登録]への追加オプション方法を指定します。
Scan QR LIFF APIでQRコードリーダー機能の利用可否を指定します。

 また、登録が完了すると、図9のようなLIFFアプリの登録一覧が表示されます。

図9:LINE DevelopersコンソールからのLIFFアプリの一覧画面
図9:LINE DevelopersコンソールからのLIFFアプリの一覧画面

 ここで表示される(1)LIFF IDはLIFFアプリ内で利用されるLIFF APIを利用する際に使われる情報です。そして、(2)のURLが前述したリッチメニューなどからLIFFアプリを起動する際に利用するURLになります。このURLを指定することで、指定したサイズでLIFFアプリが起動します。

LIFF SDKの組込み

 LIFFアプリ上でAPIを使うためにLIFF SDKを組み込むには、CDN上で公開されているJavaScriptファイルを組み込むかnpmパッケージを使った方法がサポートされています。

 本サンプルでは、CDNで公開されているJavaScriptファイルを組み込む方法を紹介します。npmを使った開発の場合にはリファレンスを参照してください。

リスト1: LIFFアプリのサンプルHTML(index.htmlの抜粋)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
</head>
: (省略)

初期化処理

 LIFF APIを利用するには、あらかじめリスト2のように初期化処理を済ませておく必要があります。

リスト2:
 LIFF APIの初期化処理(js/main.jsの抜粋)
liff.init({
    // (1) LIFF IDを設定
    liffId: '1657861391-xxxxxxxx',
    // withLoginOnExternalBrowser: true,
}).then(() => {
    //  (2) ここに成功の処理を記述
    : (省略)
}).catch((err) => {
    //  (3) ここに失敗の処理を記述
    : (省略)
});

 初期化処理はliff.initメソッドで行い、(1)のように、LIFFアプリを登録したときに発行されたLIFF IDを指定します。

 withLoginOnExternalBrowserオプションを有効にすることで、LIFFアプリとして起動したブラウザではなく、外部ブラウザとして起動する際に自動的にログイン処理まで実行されます。筆者は開発時にPCでのブラウザを使って動作を確認する際などに、よくこのオプション指定を利用しています。

 また、メソッドは非同期に実行され、Promiseのthenで(2)のように成功処理を記述し、失敗した場合の処理は(3)のようにcatchで記述します。SPAアプリで構築している場合で、起動後にURLを書き換える場合には、この初期化処理が正常に終了したあとで行うようにしてください。つまり、利用しているJavaScriptフレームワークの初期化処理なども、(2)の箇所で行うべきです。

プロフィール情報を取得する

 LINEログインと同様に利用者のプロフィール情報を取得するには、リスト3のようにliff.getProfileメソッドを利用します。

リスト3: 利用者のプロフィールの取得コード例(js/main.jsの抜粋)
liff.getProfile().then((profile) => {
    app.profile = profile;
});

 このメソッドで取得できるプロパティには表3があります。

表3:取得できるプロパティ
プロパティ 説明
userId ユーザID
displayName 表示名
pictureUrl 利用者のプロフィールアイコンのURL
statusMessage 利用者が設定しているステータスメッセージ

メッセージを送信する

 LIFFアプリからメッセージを送信するAPIにはsendMessagesとshareTargetPickerという2つのAPIがあります。この2つのAPIは使い方こそ似ていますが、送り先と用途がまったく異なります。その違いを示したのが図10です。

図10:メッセージを送信するAPIの違い
図10:メッセージを送信するAPIの違い

 sendMessagesは、指定したメッセージをチャネルに対して送信します。つまり、サービスを運営している側や、Messaging APIなどを使っている場合には受信サーバに対してメッセージを送信します。

 一方、shareTargetPickerは、友だち登録しているチャネル利用者を通じて、その利用者の友だちリスト上にいるユーザに対してメッセージを送信します。

 例えば、友だち紹介キャンペーンなどを行い、紹介した人に対してポイントを付与したい場合があります。その場合、まだ、友だち登録していないユーザーに対してメッセージの送信はできません。そこで、友だち登録している利用者を通じて、メッセージを転送してもらうイメージです。この際、紹介した利用者を把握するため、紹介コードなどを埋め込んだメッセージやURLなどの情報を送るなどの利用が可能です。

 sendMessagesを利用するにはscopeにてchat_message.writeを有効になっている必要があり、shareTargetPickerを利用するには、LIFFアプリ一覧に表示されている[シェアターゲットピッカー]のスイッチをONにする必要があります。また、これらを有効にしていても外部ブラウザ上でアプリを動作させている場合には、利用できないので注意してください。

リスト4:メッセージの送信コード例(js/main.jsの抜粋)
//  (1) メッセージを送信する
liff.sendMessages([{
    type: "text",
    text: "こんにちは",
}]).then(() => {
    that.message = 'メッセージ送信に成功しました';
    // : 省略
}).catch((err) => {
    that.message = 'メッセージ送信に失敗しました(' + err.toString() + ')';
}).finally(() => {
    // : 省略
});

//  (2) 他のユーザへの送信
liff.shareTargetPicker([{
    type: "text",
    text: "こんにちは",
}]).then(() => {
    that.message = 'メッセージ送信に成功しました';
    // : 省略
}).catch((err) => {
    that.message = 'メッセージ送信に失敗しました(' + err.toString() + ')';
}).finally(() => {
    // : 省略
});

 (1)でメッセージをチャネルへ指定したメッセージを送信します。

 (2)では、実行するとLIFFアプリからLINEの友だち選択画面が表示されるので、そこで宛先を利用者が指定します。受信したユーザからは、利用者が送信したように表示されますので、知り合いからのメッセージという見え方になります。

アプリを閉じる

 一連の操作が終わり、自動的にアプリを閉じたい場合があります。特に前述したメッセージ送信APIなどを使っている場合には、画面を閉じないと利用者には何をしたのかがわかりにくいことがあります。そのような場合に、APIを通じてアプリを閉じる場合のコード例がリスト5です。

リスト5:LIFFアプリを閉じるコード例(js/main.jsの抜粋)
liff.closeWindow();

最後に

 これまで4回の連載を通じて駆け足な内容でしたが、LINEアプリの作り方について紹介してきました。筆者はLINE開発を始めた当初はLINEアプリの全体像がつかめず、リファレンスの説明を読んでもその内容がよくイメージできませんでした。そこで、細かい説明などは省き、できるだけ、LINEアプリを構築する際の雰囲気や流れについて感じてもらえたらと思い記述してきました。

 LINEアプリの良し悪しは、送受信するメッセージをどれだけ工夫し、また、使いこなせるかという点が大きいと思いますが、本連載ではその部分は紹介していません。足りない部分は、リファレンスなどを参照しながら、いろいろと試行錯誤しつつ、組み込んでいってもらえればと思います。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
LINEで始めるアプリ開発連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17908 2023/06/28 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング