Zenn
🎮

【前半】GitHub と 生成 AI を活用して ミニゲームが遊べる LINE ミニアプリを開発するハンズオン

2024/12/10に公開
1件
GitHub Actions
GitHub Pages
Codespaces
LINE ミニアプリ
ChatGPT
tech

0. はじめに

LINE ミニアプリとは

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

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

このハンズオンではそんな LINE ミニアプリの開発を気軽に体験できるよう、ローカル開発環境も使わず、GitHub の機能を活用することでブラウザのみで完結できます。

そしてミニアプリの中身は、ChatGPT や Claude といったチャット型の生成 AI の助けを借りて作ったミニゲームを載せることとします。

用意するもの

  • GitHub アカウント
  • LINE アカウント
  • ChatGPT アカウント
  • Claude アカウント（任意）

ChatGPT と Claude はともに Google アカウントでサインアップできます。

1. LINE ミニアプリチャネルを作る

LINE Developers にログイン

まずは、LINE Developers コンソールにログインします。

ログインはメールアドレス＋パスワードか、QR コード＋LINE アプリを使ったログインができます。

新規 LINE ミニアプリチャネルを作成

ログイン後、新規チャネルを作成します。

プロバイダーを新規作成または選択して、「チャネル作成」をクリックします。

「LINEミニアプリ」を選択します。

チャネル名や説明など、必要事項を以下のように入力します。

  • サービスを提供する地域: 日本（デフォルトのまま）
  • チャネルアイコン: 設定しない（あとで設定します）
  • チャネル名: ミニゲームアプリ（好きな名前で構いません）
  • チャネル説明: ミニゲームアプリです
  • メールアドレス: 自身のメールアドレスを入力
  • サービス利用規約URL : 空欄のまま

すべての同意確認のチェックボックスにチェックを入れ、「作成」をクリックします。

「情報利用に関する同意について」も確認して「同意する」をクリックします。

するとチャネルが作成され、チャネルの設定画面に移動します。

ウェブアプリ設定の実施

チャネルができたら、「ウェブアプリ設定」のタブを開きます。

まずは今回使用する機能である「シェアターゲットピッカー」を有効化していきます。

トグルスイッチをクリックします。

「情報利用に関する同意について」を確認・同意して「有効化」をクリックします。

ここまで設定できたら、いったんアプリ開発のほうに進みます。

ブラウザのタブは開いたままにしておきます。

2. GitHub Codespaces でアプリの土台を作る

React テンプレートの Codespace を開く

アプリ本体の開発には、ブラウザだけで VS Code の UI での開発ができる GitHub Codespaces を使っていきます。

ブラウザの新しいタブで以下を開き、GitHub アカウントでサインインします。

https://github.com/codespaces

今回は React を使うので、「React」のテンプレートの「Use this tempalte」をクリックします。

開くとこのように、はじめから React 開発ができる状態になっています。

LIFF のインストール

それでは、この状態から LINE ミニアプリの土台を作っていきます。

まずは LIFF のライブラリをインストールします。

まずはターミナルで（実行中のアプリを Ctrl ＋ c で止めてから）以下を実行します。

npm install --save @line/liff

ターミナルに貼り付けを行う際、ブラウザに権限を与える必要があるので、許可をクリックしてください。

コードの書き換え

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

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

function App() {
  const [name, setName] = useState("");

  useEffect(() => {
    liff
      .init({
        liffId: import.meta.env.VITE_LIFF_ID
      })
      .then(() => {
        liff.getProfile()
          .then((profile) => {
            setName(profile.displayName);
          })
      })
  }, []);
  
  return (
    <div className="App">
      {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 にデプロイするときに必要な設定です。

GitHub へのリポジトリ発行

ここまでできたら、いったんデプロイして表示確認をしていきます。

「ソース管理」をクリックし、「＋」ボタンですべてステージし、適当なコミットメッセージを入れてからコミットします。

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

GitHub のサインインを求められるので、「許可」をクリックします。

上部にアカウントの選択が表示されるので、自身のアカウントをクリックします。

その後、もう一度「Branch の発行」をクリックします。

好きなリポジトリ名を入力して、「Publish to GitHub public repository」をクリックします。

Codespace 右下に完了通知が表示されたら、「GitHub 上で開く」をクリックしてリポジトリを確認します（GitHub のリポジトリ一覧から探すのでも構いません）。

3. GitHub Actions で GitHub Pages にデプロイ

GitHub Pages の設定

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

GitHub リポジトリの Settings ＞ Pages とクリックし、「Build and deployment」の「Source」を GitHub Actions に変更します。

GitHub Actions の設定

選択すると表示が変化するので、「create your own」をクリックし、CI/CD の設定を作っていきます。

ファイル名を main.yml にします。

最終的にこのようになっていれば OK です。

中身は以下を貼り付けてください。

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 }}"

38 行目の VITE_LIFF_ID のところには、先ほど LINE Developers で作成した LIFF ID を入れます。

LINE Developers のタブに戻り、LIFF ID を確認します。ウェブアプリ設定のところにある LIFF URL を確認してください。

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

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

これをコピーし、main.yml の 38 行目の値として貼り付けてください。

これで GitHub Actions の設定は完了なので、コミットします。

右上の「Commit changes...」をクリックします。

「Commit directly to the main branch」が選択されていることを確認し、「Commit changes」をクリックします。

コミット後に「Actions」タブを開くと、ビルドが始まっているのが確認できます。

進行中または完了したワークフローのコミットメッセージ部分をクリックすると詳細が表示できます。

デプロイまで終わると、デプロイ先の Pages へのリンク URL が表示されるので、クリックして確認してみます。

特に何も表示されていませんが、このページの URL をコピーします。

LINE Developers のタブに戻り、「エンドポイントURL」に貼り付けて「更新」をクリックします。

4. いったんの動作確認

ミニアプリの URL をブラウザで開いてみます。

LINE Developers の「ウェブアプリ設定」にある LIFF URL の開発用のものをコピーしてブラウザのアドレスバーに貼り付けます。

そうすると QR コードが表示されるので、それをスマートフォンで読み取ってください。

うまくいけば、自身のユーザー名が表示されるはずです。

前半はここまでです！後半では中身のミニゲームを作っていきます。

★ 後半はこちら：

https://zenn.dev/himanago/articles/github-line-miniapp-with-genai2

Discussion

渡来夢吉渡来夢吉

【プロバイダ・チャンネルの削除について】
昨日はお疲れ様でした。ハンズオン参加者です。
ちょっと情報共有させてください。
１．作成したプロバイダーはチャンネルがあると消せない。
２．通常のチャンネルは削除ボタンで消せる。
３．ただし、「LINEミニアプリのチャネルは削除できません*6」とのことです。
https://developers.line.biz/ja/docs/line-developers-console/managing-roles/
⇒結論)　削除できないようです。（ちょっとビックリしました)