[エンジニア向け]10分で出来るLINEミニアプリの開発準備〜動作確認まで

# はじめに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/be544a8b-7064-1157-89cb-af033d179b02.png)
https://www.linebiz.com/jp/service/line-mini-app/lp/

こんにちは。本記事では6/1に[事前審査が撤廃](https://developers.line.biz/ja/news/2022/06/01/line-mini-app-pre-examination/)され、どなたでも開発することが可能になったLINEミニアプリの開発の始め方を初心者向けに詳しく解説します。

なお技術系のドキュメントを読むのに慣れている方は[公式ドキュメント](https://developers.line.biz/ja/docs/line-mini-app/)を見るだけで理解出来ると思います。合わせてご覧ください。

# 本記事の対象者

* 基本的なプログラミングを理解している方
* LINEミニアプリやLIFFを利用した開発が初めて(久しぶり)の方

:::note info
お持ちのマシンのローカルにNode.jsがインストール出来ていて、エラーも自身で解決出来る方は[公式チュートリアル](https://developers.line.biz/ja/docs/liff/trying-liff-app/#how-to-start-liff-starter-app)にローカルで行う手順が詳しく解説されています。
:::

# 動画で見たい方はこちら

<iframe width="560" height="315" src="https://www.youtube.com/embed/Tt0VHABRviA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# LINEミニアプリとは？

LINEミニアプリは、LINEアプリやLINEのアカウントと連携が可能なWebアプリケーションです。

日本国内において9,200万人以上のMAU、人口の85%をカバー(2022/06時点)するLINEと連携することで、以下のようなメリットがあります。

* LINEのアカウントを使ったログインが可能で利用開始時の離脱を防げる
* LINEのMessaging APIを利用した「ちゃんと読んでもらえる」通知が可能
* 心情的にもUI的にも友だちにシェアしやすいため広がりが見込める
* 日常的に利用するアプリから導線があるため、忘れられない、習慣化させることが可能

等

:::note info
実際にご利用頂いているエンジニアの方が登壇され、メリットを語っていただいた[勉強会アーカイブ](https://www.youtube.com/watch?v=UasDHTSN-yI)もあります。
:::

事例は[こちら](https://www.linebiz.com/jp/case-study/)

# 事前準備

* [LINE Developers](https://developers.line.biz/ja/)のアカウント
* [Netlify](https://www.netlify.com/)のアカウント
* GitLab or Github or Bitbucketのアカウント(Gitpod用)

# LINEミニアプリの作成

## LINE Developersへのログイン

では始めていきましょう。

LINE Developersにログイン済みかつプロバイダも作成済みの場合は[こちら](https://developers.line.biz/console/channel/new?type=miniapp)からLINEミニアプリの作成画面へ遷移出来ます。

まだの方は[LINE Developersトップ](https://developers.line.biz/ja/)を開いて下さい。

![スクリーンショット 2022-06-17 12.53.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/a5258a43-47f6-9a1f-2142-6dac2520101f.png)

右上の「ログイン」をクリックして下さい。ログイン画面に遷移しますのでLINEアプリで登録したメールアドレスとパスワードでログインします。

## チャネルの作成

初めての方はチャネルの作成の前にプロバイダを作成する必要があります。完了したら作成したプロバイダをクリックして選択し、「LINEミニアプリ」をクリックします。

![スクリーンショット_2022-06-17_12_57_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/5451ba46-23b2-23c7-dd81-63279c738a76.png)

情報入力画面が開きます。それぞれ入力し、「作成」をクリックします。

LINEミニアプリチャネルが作成されました。

# Gitpodへのアクセスとサンプルプロジェクトのコピー

では次に、開発環境を作っていきましょう。本記事では環境による差が出ないよう、Gitpodを利用した手順を解説します。

[GitpodのHP](https://gitpod.io/)にアクセスし、Sign upします。

エディターの選択ダイアログが開くので、「VS Code(BROWSER)」を選択します。

![スクリーンショット_2022-06-22_8_47_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/934d26f7-9c6d-3a7d-a4a5-b81cc2abcc54.png)

「New workspace」をクリックし、リポジトリのURLに`https://github.com/line/line-liff-v2-starter`を入力します。

:::note info
突然LIFFという言葉が出てきましたが、LINEミニアプリはLIFF SDKを利用して開発するものという認識で今は問題ないです。(LIFF = LINE Front-end Framework)

ミニアプリとLIFFの違いについて詳しく知りたい方はこちらの[勉強会アーカイブ](https://www.youtube.com/watch?v=UasDHTSN-yI)が参考になります。
:::

このリポジトリはLINEが公式に用意してあるもので、素、Next.js、Nuxt.jsのサンプルプロジェクトがすぐにクラウドにデプロイ出来る形で用意されています。

エディターでプロジェクトが開かれました。リポジトリのコードをコピーしたものを自由に編集出来る他、ターミナルも利用できます。

![スクリーンショット 2022-06-22 8.54.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/2430cee6-e83c-1ca9-6361-e23e4728a24b.png)

# Node.jsの環境構築

下部のターミナルに以下のコマンドを打ち込み、Node.jsのバージョンを確認します。本記事執筆時には以下のバージョンとなっています。このまま進めますが、エラーになる方はバージョンをご確認下さい。

```bash
$ gitpod /workspace/line-liff-v2-starter (master) $ node -v
v16.15.1
$ gitpod /workspace/line-liff-v2-starter (master) $ npm -v
8.11.0
```

# とりあえず起動してみる

まだLINEミニアプリのチャンネル情報を入力していないので完全な形ではないですが、まずはこのサンプルを起動して確認してみましょう。vanilla(素)のものを利用します。

ターミナルで以下のコマンドを実行します。

```bash
# 移動
$ gitpod /workspace/line-liff-v2-starter (master) $ cd src/vanilla
# パッケージのインストール
$ gitpod /workspace/line-liff-v2-starter/src/vanilla (master) $ yarn install
yarn install v1.22.19
warning package.json: No license field
warning liff-starter-vanilla@0.1.0: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 10.98s.
```

次に、アクセス許可のためエディターから`src/vanilla/webpack.config.js`を開き以下の行を追加します。

```diff_javascript:webpack.config.js
(略)
const commonConfig = {
  mode: env,

  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'public'),
        watch: true,
      }
    ],
    port: 3000,
+   allowedHosts: "all",
  },
(略)
```

出来たら以下のコマンドでプロジェクトを立ち上げます。


```Bash
$ gitpod /workspace/line-liff-v2-starter/src/vanilla (master) $ yarn dev
(略)
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.0.5.2:3000/
<i> [webpack-dev-server] Content not from webpack is served from '/workspace/line-liff-v2-starter/src/vanilla/public' directory
(略)
```

エラーがなく立ち上がったら、画面右下の`Ports: 3000`の部分をクリックし、3000番のブラウザアイコンをクリックします。

![スクリーンショット_2022-06-22_9_28_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/a2934753-8370-a0a9-be4a-70d0bad54b5f.png)

問題なく開通し、動作確認出来ることが確認できました。

F12を押下し、Consoleタブからログを確認してみましょう。まだIDを設定していないため、`Error: liffId is necessary for liff.init()`というエラーが出ていることが確認出来ます。

![スクリーンショット 2022-06-22 9.27.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/7fdd2587-57da-53c0-2c00-cf308c716a5c.png)

ターミナル上で`Ctrl + C`を押下して起動しているプロジェクトを終了させておきます。

# Netlifyへのデプロイ

まだエラーが出ている状態ですが、デプロイしてリモートでの動作確認をしてみましょう。デプロイ先は公式で解説されている[netlify](https://www.netlify.com/)を利用します。

まず、netlifyにターミナルからアクセス出来るよう、以下のコマンドを実行してツールをインストールします。

```bash
$ gitpod /workspace/line-liff-v2-starter/src/vanilla (master) $ npm install -g netlify-cli
```

インストール出来たら、以下のコマンドを実行します。認証用のURLが表示されるのでコピーして別のタブで開きます。

```bash
$ gitpod /workspace/line-liff-v2-starter/src/vanilla (master) $ netlify login
Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
⠧ Waiting for authorization...
```

![スクリーンショット_2022-06-22_9_44_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/134c0541-c220-5ef3-47d3-92587460eed0.png)

`Authorize`をクリックしタブを閉じます。ログインが完了しました。

![スクリーンショット_2022-06-22_9_45_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/4e59490f-0ac4-9403-d661-17a4504145bf.png)

では、まずビルドからです。以下のコマンドを実行します。

```bash
$ gitpod /workspace/line-liff-v2-starter/src/vanilla (master) $ yarn build
```

`src/vanilla`以下に`dist`フォルダが作成され、デプロイ用のファイル群が生成されました。デプロイしてみましょう。

```bash
# netlify.tomlがある場所へ移動
$ gitpod /workspace/line-liff-v2-starter/src/vanilla (master) $ cd ../../
# デプロイ
$ gitpod /workspace/line-liff-v2-starter (master) $ netlify deploy
```

初回デプロイ時には設定を促されます。矢印キーやエンターキーを使い、以下のように設定します。

(サイトを新たに作成する、を選択しEnter押下)

![スクリーンショット_2022-06-22_9_52_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/85e1f3a0-13ff-6215-b9b9-412c8f7ac04c.png)

(そのままEnter押下し、デフォルトのチーム下に作成する。チームをまだ作成してない方はブラウザで作成してください)

![スクリーンショット_2022-06-22_9_53_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/eed3d26a-8119-b46c-3cf0-e0df975117bf.png)

(サイト名は短めのユニークな文字列を入力しEnter)

![スクリーンショット_2022-06-22_10_47_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/fb1163b6-2a52-b959-a3ef-b3811c31503d.png)

プロジェクト設定が完了し、デプロイが成功すると`Website Draft URL`が発行されます。

![スクリーンショット_2022-06-22_10_59_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/dd72d46f-72cd-c762-f1a0-d8192ca956de.png)

コピーして別のタブで開いてみましょう。

![スクリーンショット_2022-06-22_11_01_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/576e2558-068f-503e-5bfd-c77fd976682e.png)

クラウドへのデプロイまで完了しました。

# LINEミニアプリのIDを設定

起動することが確認できましたので、先程作成したLINEミニアプリに付与されたIDを設定し、LINEミニアプリとして動作させます。

LINE Developersに戻り、作成したチャネルの「LIFF」タブを開いて下さい。「開発用」と書かれた行のURLの最後の部分が開発時に適用するIDとなります。コピーします。

![スクリーンショット_2022-06-22_13_26_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/adf7ecbf-e803-666e-1639-ccbea552ec54.png)

Netlify CLIを利用し、Netlify側でビルド時の環境変数をセットします。

```bash
$ gitpod /workspace/line-liff-v2-starter (master) $ netlify env:set LIFF_ID "コピーしたID"
```

ビルドします。

```bash
# yarn buildではない
$ gitpod /workspace/line-liff-v2-starter (master) $ netlify build
```

デプロイします。

```bash
$ gitpod /workspace/line-liff-v2-starter (master) $ netlify deploy
```

Website Draft URLを開きます。LIFFの初期化に成功しているのが確認出来ます。

![スクリーンショット_2022-06-22_14_19_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/63adb9fc-1af6-bab4-c57f-2542c10b79d3.png)

LIFFの機能を試してみたい方はConsoleで`liff.getOS()`や`liff.getLanguage()`等のコマンドを実行してみて下さい。結果を確認出来ます。

また、ログインを試してみたい方は、`liff.login()`で実際の挙動を試すことも可能です。

![スクリーンショット_2022-06-23_8_46_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/6f424468-c19d-f4c6-e7a4-4ebe88977f5c.png)

ログイン画面へ遷移

![スクリーンショット_2022-06-23_8_46_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/b3ee5bbd-b19e-5da1-b079-f748a0b8730a.png)

ログイン後アプリへリダイレクト

![スクリーンショット_2022-06-23_8_49_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/880b2a32-0060-02db-9a23-143bcbdff275.png)

# LINEアプリで開いてみる

無事ブラウザで開き、IDが適切にセットされていることが確認できました。ではいよいよスマホでLINEミニアプリとして開いてみましょう。

LINE Developersに戻り、「エンドポイントURL」 > 「開発用」の欄にWebsite Draft URLを入力し「更新」をクリックします。

![スクリーンショット_2022-06-22_14_28_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/1409a08b-47b4-fff0-9d12-8a018b2b50e4.png)

設定できたら、開発用のLIFF URLをLINEに送り(Keepメモが便利)、スマホで開いてみましょう。

![スクリーンショット_2022-06-22_14_32_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/bef6eac6-539c-fa07-2305-2702ed91de65.png)

初めてLINEミニアプリを利用する場合は利用規約が開き、

![914A5783-238A-4FDA-9999-08502F7DBC96.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/d5817fa3-f1b4-62df-02fb-01b7d84c0b6e.png)

同意すると、

![FD9F96EB-DDD2-46F0-8B93-DABA9032207D.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164153/2f098013-a326-7cfa-920e-cb0001c10646.png)

先程デプロイしたアプリが開いていることが確認できます。

# まとめ

駆け足でLINEミニアプリをLINEアプリで開くところまでを解説しました。

ビルドに利用したwebpackについては以下の記事がとても詳しく、通して読めばサンプルプロジェクトが何をしているのかもある程度理解出来るかと思います。

https://zenn.dev/sprout2000/articles/9d026d3d9e0e8f

次回は、ミニアプリの機能の解説や、便利なツール群を使いながらデバッグ方法の解説を行います。

https://qiita.com/stachibana/items/8673713b1aeb36a96624