LIFF開発の体験を向上！vite-plugin-mkcertでローカル環境をhttpsにしてみる

# これはなに
- LIFFアプリの作成手順の説明
- LIFFの動作検証に必要なhttps対応をvite-plugin-mkcertを使ってやってみた記事です

とりあえず対応したコードのみを知りたい！人は[こちら](#編集したファイル一覧 )

# やること
- プロジェクト作成
- LIFFアプリ作成
- https対応

# この記事で書かないこと
- 以下の内容を詳しくは書きません
    - LIFFとはなにか
    - viteてとはなにか

# https対応について

mkcert や ngrokでも対応可能ですがインストールが必要だったり手順も多いので
簡単に対応できる`vite-plugin-mkcert`を利用します。

LIFFアプリでlocalhostをhttps化できると、チームで一つのLIFFアプリで同時に開発できる等の
メリットがあるのでLIFFアプリ開発をされる方にはおすすめです。

# 環境
- mac
- node v16.16.0
- npm 8.11.0

# プロジェクトの作成

今回は、`vite-plugin-mkcert`を使って https対応をしていきます。

[公式ドキュメント](https://ja.vitejs.dev/)の手順で進めていきます。

## 1. プロジェクト生成

https://ja.vitejs.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B

```bash
$ npm create vite@latest liff-app
```

その後、対話式でテンプレートの選択をします
以下のように選択しました

```
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript
```

## 2. セットアップ

```bash
$ cd liff-app
$ npm install
```

`vite-plugin-mkcert`を入れて後で設定するために、
vite.config.jsファイルを生成しておきます。

[Vite の設定](https://vitejs.dev/config/#root)

```bash
$ touch vite.config.js
$ echo "// vite.config.js
export default {
  // config options
}" >> vite.config.js
```

## 3. 動作確認

```bash
$ npm run dev
```

デフォルトだと、`https://localhost:5173`で起動されると思うので
`https://localhost:5173`もしくは表示されたURLでサイトにアクセスできればOKです

![スクリーンショット 2022-12-03 4.46.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/3252fc7f-76e7-ebdb-9641-7bb2d9ef2b79.png)

# LIFFアプリ作成

## 1. チャンネルの作成

- Channel type
    - LINE Login

- App types
    - Web app

残りの項目はなんでもいいです

![スクリーンショット 2022-12-03 4.53.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/10d10303-2cf2-fd8c-548e-6940a42cb875.png)

## 2. LIFFアプリの追加

https://developers.line.biz/ja/docs/liff/registering-liff-apps/#page-title

先ほど作成した`LINE Login`チャンネルのLIFFのタブを開きます。

![スクリーンショット 2022-12-03 4.56.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/cccbb2e2-608a-e7fa-b696-41d47689541f.png)

Sizeはなんでもいいですが、`Full`にしています。

https://developers.line.biz/ja/docs/liff/overview/#screen-size

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/24f56297-a69d-223d-805f-01d4dbec9e08.png)

Scopesに関しては、今回LIFFアプリの起動まで検証できればいいので`openid`にします。

![スクリーンショット 2022-12-03 5.00.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/50dff6cd-4ce9-4e18-512b-d092214a3128.png)

|設定項目|内容|
|---|---|
|Size|Full|
|Scopes|openid|
|Endpoint URL| `npm run dev`で起動したURL|
|Bot link feature|Off|

![スクリーンショット 2022-12-03 4.56.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/cccbb2e2-608a-e7fa-b696-41d47689541f.png)

Sizeはなんでもいいですが、`Full`にしています。

https://developers.line.biz/ja/docs/liff/overview/#screen-size

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/24f56297-a69d-223d-805f-01d4dbec9e08.png)

Scopesに関しては、今回LIFFアプリの起動まで検証できればいいので`openid`にします。

Bot linkはなんでもいいですが、今回は必要なので`Off`にしています。

https://developers.line.biz/ja/docs/line-login/link-a-bot/

## LIFF SDKのセットアップ

https://developers.line.biz/ja/docs/liff/developing-liff-apps/#use-npm-package

### 1. npm パッケージのインストール

```bash
$ npm install --save @line/liff
```

### 2. SDKをアプリに組み込む

作成したLIFFアプリのLIFF IDをコピーして、main.jsを編集し追記します。

![スクリーンショット 2022-12-03 5.26.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/78478232-7b74-aec3-0496-bff07f190c71.png)

```diff_javascript: main.js
import './style.css'
import javascriptLogo from './javascript.svg'
import { setupCounter } from './counter.js'
+ import liff from '@line/liff';

+ liff.init({
+    liffId: 'LIFF_ID', // Use own liffId
+ }).then(() => {
+   if (!liff.isLoggedIn()) {
+    return liff.login();
+   } else {
+     console.log(liff.getDecodedIDToken());
+   }
+ })
.catch((err) => {
  console.log(err.code, err.message);
});;

document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`

setupCounter(document.querySelector('#counter'))
```

### 3. LIFF URLにアクセスしてみる

```bash
$ npm run dev
```

![スクリーンショット 2022-12-03 5.26.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/78478232-7b74-aec3-0496-bff07f190c71.png)

`https://liff.line.me/LIFF_ID`となっているURLにアクセスしてみますが、
https対応していないので`npm run dev`で起動したURLにアクセスできません。
次で対応してきます。

# https対応

## 1. vite-plugin-mkcert のセットアップ

```bash
$ npm install -D vite-plugin-mkcert
```

```diff_javascript: vite.config.js
+ import mkcert from 'vite-plugin-mkcert';
// vite.config.js
export default {
  // config options
+ server: {
+  https: false,
+ },
+ plugins: [mkcert()],
}
```
**https: false,** としている理由について `true`にすればデフォルトhttpsですが
falseにしておき デフォルトhttpにして 起動時のオプションでhttpsと選択できるようにしています。

```diff_json: package.json
{
  "name": "liff-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
+   "dev:https": "vite dev --https",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^3.2.3",
    "vite-plugin-mkcert": "^1.10.1"
  },
  "dependencies": {
    "@line/liff": "^2.21.3"
  }
}

```


## 2. httpsになっているか確認

```bash
$ npm run dev:https
```

```
  VITE v3.2.4  ready in 1272 ms

  ➜  Local:   https://localhost:5173/
  ➜  Network: use --host to expose
```

httpsになってそうですね！アクセスしてみましょう

アクセスできたらOKです

LINE ログインの記述を加えているので
ログイン画面が出ると思います。

![スクリーンショット 2022-12-03 5.46.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/6f689141-54ce-3cf4-2c40-63e4b92efc04.png)


## 3. LIFF URLにアクセス

先ほどアクセスに失敗した`https://liff.line.me/LIFF_ID`にアクセスしてみましょう

同じようにアクセスできればOKです。

![スクリーンショット 2022-12-03 5.46.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/6f689141-54ce-3cf4-2c40-63e4b92efc04.png)

# 編集したファイル一覧

```js:main.js
import './style.css'
import javascriptLogo from './javascript.svg'
import { setupCounter } from './counter.js'
import liff from '@line/liff';

liff.init({
    liffId: 'LIFF_ID', // Use own liffId
}).then(() => {
  if (!liff.isLoggedIn()) {
    return liff.login();
  } else {
    console.log(liff.getDecodedIDToken());
  }
})
.catch((err) => {
  console.log(err.code, err.message);
});

document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`

setupCounter(document.querySelector('#counter'))
```

```json: package.json
{
  "name": "liff-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "dev:https": "vite dev --https",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^3.2.3",
    "vite-plugin-mkcert": "^1.10.1"
  },
  "dependencies": {
    "@line/liff": "^2.21.3"
  }
}
```

```js: vite.config.js
import mkcert from 'vite-plugin-mkcert';
// vite.config.js
export default {
  // config options
  server: {
    https: false,
  },
  plugins: [mkcert()],
}
```


# さいごに

LIFFをチーム開発をする上で新規メンバーに特別なセットアップをしてもらうことなく
https対応できるのは結構良いのではないでしょうか？ vite自体も開発体験が良いので非常におすすめです。

# 参考にさせていただいた記事

https://dev.classmethod.jp/articles/https-localhost-for-liff-development/

https://dev.classmethod.jp/articles/vite-https-localhost-devcert/

https://www.npmjs.com/package/vite-plugin-mkcert