GitHub の機能だけで LINE ミニアプリを作ってみる！

はじめに

本記事は LINEDC Advent Calendar 2024 の 4 日目の記事です。

ここだけあいてたので、急遽書きました…！

LINE ミニアプリとは

LINE アプリ内で動作させることのできるミニアプリで、実体は LIFF（LINE Front-end Framework）を使って作られる Web アプリケーションです。

これまで審査・認証を経なければ公開できなかったのですが、機能制限はあるものの未認証で公開できるようになり、気軽に試したり個人開発して個人的に使ったりということがしやすくなりました。

GitHub の機能だけで作ってみよう

ということで、できるだけ気軽に開発できるよう、ローカル開発環境も使わず、ブラウザのみで LINE ミニアプリを作ってみようと思います。

使うのは GitHub です。

GitHub Codespaces で開発をし、GitHub Actions を使ってビルドして GitHub Pages にデプロイ・公開します。

これにより、ブラウザだけで LINE ミニアプリを作って公開できます！

まずは LINE ミニアプリチャネルを作る

それではまずは、LINE Developers コンソールからミニアプリのチャネルを作ります。

まずはチャネル作成で「LINEミニアプリ」を選択。

チャネル名や説明など、必要事項を入力し各種規約に同意して作成をします。

チャネルができたら、「ウェブアプリ設定」のタブ内にある「LIFF URL」を確認します。

開発用、審査用、本番用の３つの URL がありますが、今回はお試しの個人利用ということで開発用を使っていきます。

この URL の最後のところの文字列（グレーで隠している部分）を控えておきます。これが「LIFF ID」です。

GitHub Codespaces で開発！

では、アプリを開発していきましょう。

ブラウザだけで VS Code を使った開発ができる GitHub Codespaces を使っていきます。

GitHub にサインインし、Codespaces のページを開きます。

https://github.com/codespaces

今回は React を使おうと思っているので、こちらのテンプレートを使ってみます。

これを使えば、開いたときから React 開発ができる状態になっていてとても便利です。

開くとこんな感じ。

App.jsx を LIFF アプリにしていきます。

まずはターミナルで（実行中のアプリを止めてから）

npm install --save @line/liff

を実行。

App.jsx の中身を以下に差し替えます。

import { useEffect, useState } from "react";
import liff from "@line/liff";
import "./App.css";

function App() {
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");
  const [name, setName] = useState("");

  useEffect(() => {
    liff
      .init({
        liffId: import.meta.env.VITE_LIFF_ID
      })
      .then(() => {
        setMessage("LIFF init succeeded.");
        liff.getProfile()
          .then((profile) => {
            setName(profile.displayName);
          })
          .catch((err) => {
            console.log("error", err);
          });
      })
      .catch((e) => {
        setMessage("LIFF init failed.");
        setError(`${e}`);
      });
  });

  return (
    <div className="App">
      {message && <p>{message}</p>}
      {error && (
        <p>
          <code>{error}</code>
        </p>
      )}
      {name && <p>こんにちは、{name}さん</p>}
    </div>
  );
}

export default App;

また、vite.config.js の中身を以下に差し替えます。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: process.env.VITE_BASE_URL || '/',
});

これは GitHub Pages にデプロイするときに必要な設定です。

ここまでできたらコードはいったん完成です。

コミットして、

「Branch の発行」から GitHub にリポジトリとして発行します。

GitHub Actions で GitHub Pages にデプロイ！

続いて公開に向けての設定です。

Settings ＞ Pages で GitHub Actions からデプロイするように設定します。

「create your own」をクリックし、CI/CD の設定を作っていきます。

ファイル名を main.yml にし、中身を以下のようにします。

VITE_LIFF_ID のところには、さきほどのミニアプリの URL 内の LIFF ID の値を入れます。

name: Deploy GitHub Pages

on:
  push:
    branches: ['main']

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  build:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Use Node.js 18
        uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'npm'
      - run: npm ci

      - name: Build
        run: npm run build
        env:
          VITE_BASE_URL: /${{ github.event.repository.name }}/
          VITE_LIFF_ID: ここにLIFF ID をいれる

      - name: Upload static files as artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: 'dist/'

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
      
      - name: Print deployment URL
        run: |
          echo "Deployed to: ${{ steps.deployment.outputs.page_url }}"