Help us understand the problem. What is going on with this article?

LIFF v2 で追加されたAPIを試してみる

先日、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 アプリを作ってみました。

デモ動画

なお、下のボタンを押してLINE で友だち登録していただければ、実際に試していただけます。

友だち追加

また、外部ブラウザからは、こちら にアクセスして試していただけます。
なお、外部ブラウザではLIFF の仕様で以下の機能は使えません。以下の機能を試したい方はLINE で友だち登録してお試しください。

  • QR コードスキャン
  • LINE アプリへのメッセージ送信

下の画像が外部ブラウザでサンプルアプリにアクセスした際のものです。

LIFFV2Sample.png

外部ブラウザで動いているかどうかを判別できますので、上記の外部ブラウザでは使用で出来ない機能のボタンを押せないように制御することも簡単です。

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 です。

App.vue(23行目付近)
        <!-- Component -->
          <LiffV2Login v-if="loggedIn === false" />
          <LiffV2Function v-else />

また、ユーザーがLINE アプリのブラウザでアクセスしている場合は、自動でLINE Login に認証されるため「SIGN OUT」ボタンは非表示にしています。
このように、ユーザーのアクセスがLINE アプリのブラウザからか、外部ブラウザからかを簡単に判別できるので、LINE アプリ用、外部ブラウザ用で分けて開発する必要がないのもありがたいですね。

App.vue(9行目付近)
      <v-btn large color="error" @click="doLogout" v-show="loggedIn === true && inClient === false">Sign out</v-btn>

ユーザーログイン状態に応じて表示するコンポーネントを切り替える

ユーザーのログイン状態に応じて、2つあるコンポーネントを切り替えています。
未ログインの場合はログインをボタンを配置したコンポーネントを、ログイン状態時にはLIFF 機能を実行するボタンを配置したコンポーネントを表示します。

LiffV2Login コンポーネント

ログインボタンを配置しているだけのコンポーネントです。
LINE Login への認証も liff.login() だけで、とても簡単に認証を利用できます。

LiffV2Login.vue(24行目付近)
  methods: {
    doLogin: function () {
      liff.login()
    }
  }
LiffV2Function コンポーネント

LIFF v2 の機能を試すボタンを配置したコンポーネントです。

ログイン状態で利用できる機能のボタンはログイン状態だけを確認しています。

LiffV2Function.vue(20行目付近)
        <!-- 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 アプリ無いブラウザで利用できる機能のボタンは両方の状態を確認してボタンを有効にするかどうかを判別しています。

LiffV2Function.vue(72行目付近)
        <!-- 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 機能を利用できます。

LiffV2Function.vue(138行目付近)
    getAccessToken: function() {
      this.accessToken = liff.getAccessToken()
      const text = `Your Access Token is [${this.accessToken}]`
      console.log(text)
      this.showSnackbar(text)
    },
LiffV2Function.vue(162行目付近)
    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 を活用した作品を開発し、こちらに応募して賞獲得を目指してみてはいかがでしょうか。

sumihiro3
ITコンサルタント業とベンチャー企業でのCTO&エンジニア業の二足の草鞋を履いて活動しています。 LINE API Expert(第3期)に認定いただきました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした