NetlifyにデプロイしてLIFFアプリを爆速でつくってみる

Nuxt.jsで作ったアプリをNetlifyにデプロイして、LIFFアプリをつくってみます。

## どのようなLIFFアプリか

名前を記入して送信をすると、チャットルームにて`名前: {記入した名前}`と送信してくれるアプリを作ります。[こちら](https://techblog.roxx.co.jp/entry/2019/03/14/120000)のアプリのLIFFのみを実装した感じになります。

## 手順

1. Nuxtアプリを作成
1. Netlifyにデプロイ
1. Line Developersで設定
1. Lineアプリで確認する

## 前提

- MacOS
- Netlifyのアカウントがある
- Lineのアカウントがある

## Nuxtアプリの作成

以下の設定でまず `create nuxt-app`から始めます。（ターゲットは一応serverにしていますが、staticのほうがいい、というのも聞きます）

```
yarn create nuxt-app nuxt-liff-lineid
yarn create v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-nuxt-app@3.6.0" with binaries:
      - create-nuxt-app
[############################################################################################################] 344/344
create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in nuxt-liff-lineid
? Project name: nuxt-liff-lineid
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Element
? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA)
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? greenteabiscuit
? Version control system: Git
```

nuxt.config.jsのheadに`script: ...`の部分を追加します。

```nuxt.config.js
  head: {
    title: 'nuxt-liff-lineid',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [{ src: 'https://d.line-scdn.net/liff/1.0/sdk.js' }], //ADD HERE
  },
```

index.vueを以下のように変更します。

```index.vue
<template>
  <section class="container">
    <p class="line-id">LINE ID：{{ lineId }}</p>
    <div class="form">
      <div class="control">
        <input class="input" type="text" placeholder="お名前" v-model="formData.name">
      </div>
      <button class="button is-info is-fullwidth" @click="onSubmit()">送信する</button>
      <button class="button is-light is-fullwidth" @click="handleCancel()">キャンセル</button>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      },
      lineId: null
    }
  },
  mounted() {  
    if (!this.canUseLIFF()) {
      return
    }

    window.liff.init(data => {
      this.lineId = data.context.userId || null
    })
  },
  methods: {
    onSubmit() {
      if (!this.canUseLIFF()) {
        return
      }

      window.liff
        .sendMessages([
          {
            type: 'text',
            text: `お名前：\n${this.formData.name}`
          },
          {
            type: 'text',
            text: '送信が完了しました'
          }
        ])
        .then(() => {
          window.liff.closeWindow()
        })
        .catch(e => {
          window.alert('Error sending message: ' + e)
        })
    },
    handleCancel() {
      if (!this.canUseLIFF()) {
        return
      }
      window.liff.closeWindow()
    },
    canUseLIFF() {
      return navigator.userAgent.indexOf('Line') !== -1 && window.liff
    }
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
}

.line-id {
  margin-bottom: 30px;
}

.form > * {
  margin-bottom: 10px;
}
</style>
```

## Netlifyへのデプロイ

Netlifyを開き、上記のコードのレポジトリを追加します。今回のレポジトリの名前は`nuxt-liff-lineid`としています。

![Screen Shot 2021-05-23 at 11.14.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/ccab7eaf-2cac-19c4-8ed3-ac8146364038.png)

ビルドの設定などは以下のようにします。

![Screen Shot 2021-05-23 at 11.20.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/62257079-52e6-e15d-a4d1-9614fa1e9435.png)

これでデプロイ完了です。以下のように出てくるはずです。

![Screen Shot 2021-05-23 at 11.49.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/0293c0c2-6a4b-7ffe-5930-871a9a2020f3.png)



## Line Developersでの設定

チャンネルの名前と説明を書きます。アプリのタイプはウェブアプリとします。

![Screen Shot 2021-05-23 at 11.30.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/f74d529b-fc3d-c305-da43-6a085d78de5a.png)

scopeも`profile`, `opendid`, `chat_message.write`すべてにチェックをつけておきます。`chat_message.write`もオンにしておくことで`window.liff.sendMessages`が使えるようになります。以下のようになります。

![Screen Shot 2021-05-23 at 12.02.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/b8e851e9-41a5-3586-56c8-751cc746753f.png)


## Lineアプリで確認

これで出てきた LIFF URLを Lineで開いてみます。

![IMG_4266.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/8f06d726-7e2d-d884-363f-e430ec96fc7c.png)

なぜかCSSはブラウザとはちょっと異なりますが、以下のように出ます。

![IMG_4267.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/6190a0a4-0d51-0b74-3624-107ae34bbfc2.png)

`hello world`と送ると以下のようになります。

![IMG_63FF5657E20B-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/38f90c17-9bee-7f53-46ae-13cface86ed6.jpeg)


これでLine IDも確認できるようになるLIFFアプリが完成しました。

## 参考

https://techblog.roxx.co.jp/entry/2019/03/14/120000

https://blog.cloud-acct.com/posts/blog-netlify-deploy-nuxtjs/

https://developers.line.biz/ja/reference/liff/#send-messages