LoginSignup
36
41

More than 3 years have passed since last update.

@yagi_eng

GoとNuxtで飲食店検索ができるLINE BOTとLINEミニアプリ(LIFF)を作ってみた

Last updated at Posted at 2020-06-29

全体構成.png

はじめに

Go / Nuxt.js / LINE Messaging API / Google Maps API / クリーンアーキテクチャ で、飲食店検索やお気に入り登録できるLINE BOTとLIFFアプリを作ってみました！

LIFFアプリとはLINEやWeb上で動作するアプリのことです。
LINEミニアプリと呼ばれることもあります。
詳しくは後述します。

LINE BOTを含めバックエンドは元から作っていたのですが、ビジネスロジック部分をAPI化してLIFFと連携できるようにしてみました。

バックエンドに関する部分は以下の記事にまとめています。
こちらを読んでいなくても、この記事は読めるように書いています！
バックエンドやクリーンアーキテクチャに興味のある方はぜひ読んでみてください。

Goとクリーンアーキテクチャで飲食店検索ができるLINE BOT作ってみた
⇒Qiitaデイリーで最高5位にランクインしました！

この記事では、全体構成やLIFFアプリに関する部分などをまとめようと思います。

読んだら幸せになれそうな人

  • 個人開発に興味がある人
  • モダンな技術に興味がある人
  • Go, Nuxtに興味がある人
  • LINE Messaging API (LINE BOT) やLIFFに興味がある人

こんなのつくりました

LINE BOT

デモ動画のロングバージョンはこちら(Twitter)にあります。
mojikyo45_640-2.gif

LIFF

デモ動画のロングバージョンはこちら(Twitter)にあります。
mojikyo45_640-2.gif
（くそ画質ですいません。。）

お試しはこちら

LINE BOT

以下のURLにアクセスするか、QRコードをLINEで読み取るとお試しできるので、良ければ試してみてください！

https://lin.ee/R5mD4Dt
M.png

LIFF

上記からアクセスするとLINE上で起動することができます。
Webブラウザ上ではこちらからお試し頂けます。
後述しますが、LINE上で起動する方が安定しています。。
ちなみにデモ動画はLINE上で起動したものです。

つくった目的

以下を目的として作ってみました。ほぼ前の記事と同じです。

  • Goとクリーンアーキテクチャ、Nuxtの習熟
  • LINE関係のノウハウの蓄積
  • 好きな飲食店を気軽にメモしたかった（でも食べログなどのアプリは入れたくなかった）

Goは人気急上昇中の言語なので、今のうちに勉強してGo案件にジョインしたいという下心強めです笑

クリーンアーキテクチャを採用した理由は、自分がMVCパターンにしか触れたことしかなく、そろそろ新しいフレームワークを習得したいと思ったからです。

また、LINE関係のノウハウを貯めておきたかったのでLINE BOTを題材にしました。
LINE上でミニアプリが動作できるようになる LINEミニアプリ が近いうちにリリースされるみたいなので波乗りしたいところです。

ソースコード

LIFFってなに

説明

簡単に言うと、LINEと簡単に連携できて、ブラウザやLINE上で動作するアプリを作れるやつです。

以下公式HPからの抜粋です。

LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。

LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。

Front-end Frameworkということで、LIFFはフロントエンドで動作します。

入門はこちら

以下にLIFF入門者向けの記事を書いていますので良かったら参考にしてください。
【LINE/LIFF入門】LIFFでLINE公式アカウント（旧LINE＠）上に予約フォームを作成する（GitHub Pages使用）

ちなみに上記記事をもとにLTもしました！
以下にその時のスライドがあるのでこちらも参考にしてみてください。
LIFFでLINE公式アカウント上に予約フォームを作成する
キャプチャ.PNG

技術面全般

使用技術

  • Go 1.14
  • Nuxt.js 2.13
  • LINE Messaging API
    • LINE BOTが作れるAPI
  • Google Maps API
    • Google Mapの情報を取得できるAPI
  • LIFF
  • クリーンアーキテクチャ
  • Heroku

Goの使用ライブラリはこちらに記載しています。

全体構成

全体構成.png

  • GoサーバとNuxtサーバの2つを用意
    • サーバはHerokuを使用
  • GoでLINE BOTとビジネスロジックを実装
    • ビジネスロジックにはLINE BOT用の口とAPI用の口の2つを持たせる
    • ビジネスロジックでLINEやGoogleMapのAPIをごちゃごちゃやっています
  • NuxtでLIFFアプリを実装
    • LIFFアプリからGoで実装したAPIをたたく

今回の肝

LINEユーザは一意のユーザIDを持っています。
これを使うことで、LINE BOTからお気に入り登録しても、LIFFからお気に入り登録しても、どちらにも同じ結果が反映されるようにしました。

Nuxt

Nuxtそのものは特筆すべき使い方はしませんでした。
Nuxtのディレクトリ構成や思想に従って、淡々とView部分やAPI通信部分を実装しました。

CORS

今回はNuxtサーバから、別ドメインであるGoサーバのAPIを叩きに行っています。
これを実現するにはCORSの設定が必要であり、何も設定しないと別のドメインからはアクセスできない（はず）です。

自分はGoのechoというフレームワークを使っており、CORSはこんな感じ(github)設定できます。

server.go
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
    AllowOrigins: []string{"Nuxtサーバのドメイン"},
}))

他ドメインからのアクセスを全て許容する場合は以下の通りです。

e.Use(middleware.CORS())

NuxtとLIFF

実装する上で2つのポイントがあります。
このポイントを抑えておけば淡々と実装していくだけです。

LIFFの初期化＆LINEログイン

LIFFを使うにはまずLIFFの初期化が必要です。
また、LINEログインはLINE上でアプリを起動する場合には不要ですが、Webブラウザからアクセスする場合には必要です。

↓ LINEログイン
mojikyo45_640-2.gif

今回はstoreのactionにこんな感じ(github)で実装しました。
storeやactionはVuexの知識です。

store/index.js
export const actions = {
    login({ commit, dispatch }) {
        liff
            .init({
                liffId: process.env.LIFF_ID
            })
            .then(() => {
                // Webブラウザからアクセスされた場合は、LINEにログインする
                if (!liff.isInClient() && !liff.isLoggedIn()) {
                    window.alert("LINEアカウントにログインしてください。")
                    liff.login({ redirectUri: location.href })
                }
                var token = liff.getIDToken()
                this.$cookies.set('jwt_token', token)
                commit('mutateLineIDToken', token)
            })
            .catch(err => {
                console.log("LIFF Initialization failed ", err)
            })
        this.app.router.push('/')
    }
}

ログイン画面遷移時にこのlogin関数を実行して、LIFF初期化＆LINEログインを行います。
LINEログインといっているのは、コード中のliff.login({ redirectUri: location.href })の部分です。
ログイン後にはliff.getIDToken()でIDTokenを取得してstoreとcookieに保存します。

この実装だけだとIDTokenが失効した際にエラーが出てしまうのですが解消していません。
なんかめんどくさくなって諦めちゃいました (^q^)

IDTokenからユーザIDを抽出する

LIFFでIDTokenを取得して、それをバックエンドに投げてユーザIDを抽出します。
LIFF単体でユーザIDを取得することもできますが、ユーザIDをそのままバックエンドに投げてしまうとセキュリティ的によろしくないためひと手間加えます。

ここの実装に結構時間がかかりましたが仕方ないですね。。

抽出方法については、LINE Developersにまとまっていました。以下シーケンス図の抜粋です。
id.PNG

IDTokenをバックエンドに投げた後、さらにLINE PlatformのAPIを叩くことでユーザIDを抽出できます。
IDTokenが失効していると怒られます。

バックエンドはこんな感じ(github)で実装しました。
GoでPOSTのHTTPリクエストを送る際は、http.PostFormを使います。

api_controller.go
type verifyResp struct {
    Sub string `json:"sub"`
}

// getLineUserIDByToken tokenからLINEのuserIDを取得する
func getLineUserIDByToken(idToken string) string {
    values := url.Values{}
    values.Add("id_token", idToken)
    values.Add("client_id", os.Getenv("LIFF_CHANNEL_ID"))

    resp, err := http.PostForm(
        "https://api.line.me/oauth2/v2.1/verify",
        values,
    )

    if err != nil {
        logrus.Errorf("Error Parsing LINEIDToken: %v", err)
        return ""
    }

    body, _ := ioutil.ReadAll(resp.Body)
    defer resp.Body.Close()

    jsonBytes := ([]byte)(string(body))
    data := new(verifyResp)

    if err := json.Unmarshal(jsonBytes, data); err != nil {
        logrus.Errorf("Error JSON Unmarshal: %v", err)
        return ""
    }

    return data.Sub
}

LINEBOTとLIFFを連携させる意義

実際のビジネスやサービス的なところにはあまり繋がらないかもしれませんね。
今回はあくまで技術習得をメインとして作っていたのですが、途中から「あれ、これ意味あるんか。。」となってモチベーションが下がった時もありました 笑

LINE BOTにもLIFFにもそれぞれ長所/短所があるので、互いに補い合える可能性はあるかもしれません。（浅い意見）

機能説明

クリーンアーキテクチャの理解に時間かけすぎて（言い訳）、大したもの作っていないのでさらっとだけ。

キーワード検索

場所の名前や調べたい情報を入力すると、検索結果を返す。

位置情報検索（LINE BOTのみ）

トーク画面の左下の「＋」ボタンをタップして「位置情報」を選択すると、位置情報に応じた検索結果を返す。
現在地などを送信することで、現在いるお店や付近のお店を調べることができる。
※送信された位置情報は保存していない。

お気に入り登録

検索結果の「Add to my favorites」をタップすると、場所をお気に入り登録できる。

お気に入り一覧表示

LINEBOT: 「My FAVORITE」バナーをタップすると、登録したお気に入りが確認できる。
LIFF: トップページにデフォルトで表示。

お気に入り解除

お気に入り一覧で「Remove」をタップすると、場所をお気に入り解除できる。

感想

Goの習熟を第一目的としていた割には、少し時間を割き過ぎました。。
自分でサービス開発をしたいと考えているので、入門的にもっとライトなものを作って、それから本格的な個人サービスを作れば良かったなという感じです。

ただ、Goは現場で即通用するレベルに引き上げられたと感じていますし、クリーンアーキテクチャやNuxt、LINEへの理解を深められたので良かったです。

しばらくは以下のことに注力していきたいと思います。

  • モダンな案件への参画、できればGo使いたい
  • 個人サービス開発
  • （せっかくだから、知人経由でLINE BOTやLIFFアプリ開発の仕事とれないかな。。）

Twitter

Twitterの方でもLINEに限らず、モダンな技術習得やサービス開発の様子を発信したりしているので良かったらチェックしてみてください！
@yagi_eng

36
41
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
36
41