先日、LINE アプリ上でWeb アプリケーションを動かせるLIFF (LINE Front-end Framework) のv2 がリリースされました。
v2 では、LINE アプリ以外のブラウザでもLIFF SDK だけでLINE Login でき、LIFF API も一部使用できる 外部ブラウザ対応 が追加され、LINE アプリ外でもLIFF アプリとして動かすことができるようになったことで、ますます色んな場面でLIFF アプリが利用できるようになりました。
また、LIFF API としても、LIFF アプリからQR コードリーダーを呼び出してスキャンできたり、ユーザーのメールアドレスを取得できたり、LINE アプリ内か外部ブラウザ化を判別できたりと、大幅に機能アップしています。
LIFF v2 の詳細は、こちらをご覧ください。
今回は、LIFF v2 で利用できる機能を試すために簡単なLIFF アプリを作ってみました。
デモ動画
LIFF v2 のAPI を動かしてみた
— sumihiro3 (@sumihiro3) October 20, 2019
LINE アプリ内ブラウザであれば、QRコードのスキャンやメッセージを送信できるし、外部ブラウザも対応しているのでコードを共通化できてなかなか良い感じ😇#LINE_API pic.twitter.com/FL3yKiqBwS
なお、下のボタンを押してLINE で友だち登録していただければ、実際に試していただけます。
また、外部ブラウザからは、こちら にアクセスして試していただけます。
なお、外部ブラウザではLIFF の仕様で以下の機能は使えません。以下の機能を試したい方はLINE で友だち登録してお試しください。
- QR コードスキャン
- LINE アプリへのメッセージ送信
下の画像が外部ブラウザでサンプルアプリにアクセスした際のものです。
外部ブラウザで動いているかどうかを判別できますので、上記の外部ブラウザでは使用で出来ない機能のボタンを押せないように制御することも簡単です。
LIFF アプリの構成
今回作ったLIFF アプリは以下を利用して開発しています。
すべてJavaScript でコーディングできます。
- LIFF SDK
- v2.1
- LIFF アプリ開発用のSDK
- node.js
- v10.16.0
- npm
- v6.9.0
- Vue.js
- v2.6.10
- Web アプリケーションのUI フレームワーク
- Vuetify.js
- v2.1.5
- Vue.js 用のマテリアルデザインコンポーネントフレームワーク
実行環境
ローカル開発環境ではトンネリングツールの ngrok を利用しましたが、運用ではNetlify を利用しています。
Netlify は静的Web サイトのホスティングなどができるサービスです。
Github やBitbucket などのリポジトリにPush したVue.js などのソースコードをビルドしてSPA として展開してくれる機能もあります。
今回は、Github のリポジトリ にVue.js のソースコードをローカルリポジトリからPush し、そのタイミングでNetlify にてビルドが実行され、ビルドされたモジュールがデプロイされ、運用環境として公開されるように設定しました。
ソースコード
今回作ったサンプルアプリのソースコードは、Github のリポジトリ で公開しています。
サンプルアプリの解説
サンプルアプリ本体はApp.vue です。
<!-- Component -->
<LiffV2Login v-if="loggedIn === false" />
<LiffV2Function v-else />
また、ユーザーがLINE アプリのブラウザでアクセスしている場合は、自動でLINE Login に認証されるため「SIGN OUT」ボタンは非表示にしています。
このように、ユーザーのアクセスがLINE アプリのブラウザからか、外部ブラウザからかを簡単に判別できるので、LINE アプリ用、外部ブラウザ用で分けて開発する必要がないのもありがたいですね。
<v-btn large color="error" @click="doLogout" v-show="loggedIn === true && inClient === false">Sign out</v-btn>
ユーザーログイン状態に応じて表示するコンポーネントを切り替える
ユーザーのログイン状態に応じて、2つあるコンポーネントを切り替えています。
未ログインの場合はログインをボタンを配置したコンポーネントを、ログイン状態時にはLIFF 機能を実行するボタンを配置したコンポーネントを表示します。
-
LiffV2Login コンポーネント
- LINE Login を実行するボタンを配置したコンポーネント
-
LiffV2Function コンポーネント
- LIFF v2 の機能を実行するボタンを配置したコンポーネント
LiffV2Login コンポーネント
ログインボタンを配置しているだけのコンポーネントです。
LINE Login への認証も liff.login() だけで、とても簡単に認証を利用できます。
methods: {
doLogin: function () {
liff.login()
}
}
LiffV2Function コンポーネント
LIFF v2 の機能を試すボタンを配置したコンポーネントです。
ログイン状態で利用できる機能のボタンはログイン状態だけを確認しています。
<!-- getAccessToekn -->
<div class="ma-4">
<v-btn
rounded
class="custom-transform-class text-none"
color="primary"
@click="getAccessToken"
:disabled="loggedIn === false"
>getAccessToekn</v-btn>
</div>
ログイン状態かつ、LINE アプリ無いブラウザで利用できる機能のボタンは両方の状態を確認してボタンを有効にするかどうかを判別しています。
<!-- sendMessages -->
<div class="ma-4">
<v-btn
rounded
class="custom-transform-class text-none"
color="success"
@click="sendMessages"
:disabled="loggedIn === false || inClient === false"
>sendMessage</v-btn>
</div>
LIFF API を実行するコードもとてもシンプルで、簡単にLIFF 機能を利用できます。
getAccessToken: function() {
this.accessToken = liff.getAccessToken()
const text = `Your Access Token is [${this.accessToken}]`
console.log(text)
this.showSnackbar(text)
},
sendMessages: function() {
const text = `I am ${this.name} !!`
const msg = `Message is [${text}]`
console.log(msg)
this.showSnackbar(msg)
liff
.sendMessages([
{
type: "text",
text: text
}
])
.then(() => {
console.log("message sent")
})
.catch(err => {
console.log("error", err)
})
},
LIFF ID の作成
LIFF アプリを利用するには、LIFF ID を取得する必要があります。
LIFF ID 取得や設定方法については、@h-takauma さんの記事「LIFF v2でLINEログインを試してみた」 に詳しく書いてありますので、そちらを参考にしてください。
いろいろ試してみたい方へ
自分でいろいろと試してみたい、という方には、@n0bisuke さんが、LIFF v2 のハンズオン資料 を公開されていますので、こちらも参考にしてください。
最後に
LIFF はv2 になって新機能の追加はもちろんですが、外部ブラウザでも使えるようになったことがとても大きいですね。
外部ブラウザに対応したことで、LINE アプリ外とLINE アプリを連携させる、という概念ができたことで、利用する場面が大きく広がりました。
LINE でアプリ開発 = チャットボット開発、というイメージの方も多いと思いますが、LIFF v2 のリリースでそんな垣根は取っ払われたと思います。
多くの方が普段から使っているLINE という特性を活用したWeb アプリを開発できますので、これまで触れていなかった方々も、これを機会に開発してみてください。
また、開発コンテンストのヒーローズ・リーグ 2019 （Mashup Awards から名称変更） では、LINE リーグ も開催されます。
LIFF を活用した作品を開発し、こちらに応募して賞獲得を目指してみてはいかがでしょうか。