【Vue + Flask + LIFF】LINEのLIFFアプリをVueとFlaskで開発しよう！

LINEのLIFFアプリをVueとFlaskで開発
2025.01.12

こんにちは！今回は、以前構築した Vue + Flask + Docker の環境に LIFF アプリを組み込む方法を紹介します。LIFF（LINE Front-end Framework）は、LINE内でWebアプリケーションを動作させるためのフレームワークです。これを使えば、LINEユーザーと直接やり取りできるアプリを簡単に作成できます。

この記事では、Vue と Flask の環境に LIFF を導入する手順を実践的に解説します。

1. LIFFのセットアップ

まずは、Vueのコンテナに入って、必要なパッケージをインストールします。

VueコンテナでLIFFパッケージをインストール

ターミナルで以下のコマンドを実行して、LIFFのパッケージをインストールします。

yarn add @line/liff

これで、VueアプリケーションでLIFFの機能が使えるようになります。

2. LIFFアプリの設定

次に、LIFFを使うための設定を LINE Developer で行います。

LINE DeveloperコンソールでLIFFアプリを作成

  1. LINE Developer コンソールにログインし、新規チャネルを作成します。
  2. LINEログイン を選択し、必要な情報を入力して登録します。
  3. LIFFアプリ のタブに移動し、新しいLIFFアプリを作成します。

※この時点では、エンドポイントURL に適当なURL（例えば、Googleのトップページ）を入力しておけば大丈夫です。

  1. 開発中のため、スコープ や オプション はすべて「オン」にしておきます。
  2. 設定が完了すると、LIFF ID が発行されます。このIDをコピーします。

ソースコードにLIFF IDを追加

次に、発行された LIFF ID を、Vueアプリのコードに追加します。

import liff from "@line/liff";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      loggedIn: false,
      profile: {
        displayName: "",
      },
    };
  },
  mounted() {
    // 初期化時に必ず実行する
    liff
      .init({ liffId: "YOUR_LIFF_ID" })  // ここにLIFF IDを貼り付け
      .then(() => {
        this.loggedIn = liff.isLoggedIn();
        this.getProfile();
      })
      .catch((err) => {
        // 初期化中にエラーが発生した場合
        this.occoredError = "error:" + err;
      });
  },
  methods: {
    // ログインユーザーのプロフィールを取得する
    getProfile() {
      liff.getProfile().then((profile) => {
        this.profile = profile;
      });
    },
  },
};

このコードでは、liff.init() メソッドを使って、LIFF IDを指定しています。これで、LIFFアプリの基本的なセットアップが完了しました。

3. テスト用のエンドポイントURL

LIFFアプリの設定が完了したら、テストのためにngrokを使って、ローカル環境で作成したアプリを公開します。

ngrokを使ってローカルサーバーを公開

ngrokを使ってローカルサーバーを公開することで、LIFFアプリがLINEからアクセスできるようになります。以下のコマンドでngrokを起動します。

ngrok http 5000  # 5000はFlaskのポート番号

ngrokが提供するURLを取得し、それをLIFFのエンドポイントURLに設定します。

LINEのリッチメニューでリンクを設定

次に、LINEでLIFFアプリを起動するために、仮のリッチメニューを作成します。このリッチメニューに、ngrokで取得したURLをリンクとして設定します。

これで、LINEのリッチメニューからLIFFアプリを直接起動できるようになります。

4. 結果の確認

LINEのリッチメニューからLIFFアプリを起動し、実際に動作を確認しましょう。ログインしたユーザーのプロフィール情報が表示されるか、正常に動作するかをテストします。

これで、Vue + Flask + Docker + LIFF の環境が整い、LINE上で動作するWebアプリが完成しました！

5. まとめ

今回は、Vue + Flask + Docker の環境に LIFF アプリを組み込む手順を紹介しました。LIFFを使うことで、LINEユーザーと直接インタラクションできるWebアプリを簡単に作成できます。

この環境を活用して、さらに複雑な機能を追加していくことができます。次回は、さらにアプリを拡張していく方法をご紹介する予定ですので、お楽しみに！

参考文献

コメント