pywebview + nextjs セットアップメモ

# pywebview-nextjs セットアップメモ

## 概要

`pywebview`と`Next.js`を使用して、Python アプリケーションを作成するためのセットアップメモ

主な流れとしては:

-   poetry でプロジェクトを作成する
-   pywebview と開発用ツールをインストールする
-   Git リポジトリを初期化する
-   Next.js プロジェクトを作成する
-   開発用ブランチに切り替える

となっています。

## 1. プロジェクト初期設定

### Poetry プロジェクトの作成

「my-project」はプロジェクトの名前

```bash
poetry new my-project
cd my-project
```

### 仮想環境のセットアップ

```bash
poetry install
```

> **Note:** 例として、以下のようなディレクトリ構造が作成される
>
> ```bash
> my-project/
> ├── .venv/
> ├── src/
> │   └── my_project/
> │       └── __init__.py
> ├── tests/
> │   └── __init__.py
> ├── poetry.lock
> ├── pyproject.toml
> └── README.md
> ```

### Python バージョン設定

`pyproject.toml`ファイルを編集し、Python のバージョン範囲を指定する（例: Python 3.12 以上 3.14 未満）

```toml
[project]
requires-python = ">=3.12,<3.14"
```

変更を適用する

```bash
poetry install
```

## 2. 必要なパッケージのインストール

### pywebview のインストール

```bash
poetry add pywebview
```

### 開発用ツールのインストール

`--dev` オプションを使用して、開発用のツールをインストールする

```bash
poetry add --dev pytest
poetry add --dev pyinstaller
```

## 3. Git によるバージョン管理設定

### Git リポジトリの初期化

```bash
git init
git add .
git commit -m "Initial commit"
```

> **Tip:** コミット前に `git status` コマンドでインデックスされているファイルを確認できる

## 4. Next.js フロントエンド環境構築

### Next.js プロジェクトの作成

src ディレクトリに移動する

```bash
cd src
```

Next.js プロジェクトを作成する（質問にはデフォルトの選択肢で回答）

```bash
npx create-next-app@latest frontend
```

### プロジェクト構造の確認

> **Note:** この段階でのディレクトリ構造は以下のようになる
>
> ```bash
> pywebview-nextjs/
> ├── .git/
> ├── .venv/
> ├── src/
> │   ├── frontend/        # Next.jsプロジェクト
> │   │   ├── node_modules/
> │   │   ├── public/
> │   │   ├── src/
> │   │   └── ...
> │   └── pywebview_nextjs/  # Pythonパッケージ
> │       └── __init__.py
> ├── tests/
> │   └── __init__.py
> ├── poetry.lock
> ├── pyproject.toml
> └── README.md
> ```

## 5. 開発ワークフロー設定

### 変更のコミット

Next.js の構築が完了したら、変更をコミットする

```bash
git add .
git commit -m "nextjs の構築"
```

### 開発ブランチの作成

開発ブランチの作成・切り替えを行い、開発を開始する

```bash
git checkout -b dev
```

## 6. パッケージングと実行可能ファイル作成

### Next.js アプリケーションのビルド

Next.js アプリケーションを本番用にビルドする

```bash
cd src/frontend
npm run build
```

### PyInstaller による exe 作成

メインの Python ファイル（例：`src/pywebview_nextjs/main.py`）を作成し、pywebview で Next.js アプリを読み込む処理を記述する：

```python
import webview
import os
import sys

def get_path():
    """実行ファイルまたはスクリプトのディレクトリパスを取得"""
    if getattr(sys, 'frozen', False):
        # 実行ファイルの場合
        return os.path.dirname(sys.executable)
    else:
        # スクリプトの場合
        return os.path.dirname(os.path.abspath(__file__))

if __name__ == '__main__':
    # Next.jsのビルド済みファイルへのパス
    base_dir = get_path()
    frontend_dir = os.path.join(base_dir, 'frontend', 'out')

    # ウィンドウを作成
    webview.create_window(
        title='My PyWebview Next.js App',
        url=os.path.join(frontend_dir, 'index.html'),
        width=800,
        height=600,
        resizable=True
    )
    webview.start()
```

PyInstaller で exe ファイルを作成：

```bash
poetry run pyinstaller --name "myBuildApp" --onefile --noconsole --add-data "src/frontend/out;frontend/out" src/pywebview_nextjs/main.py
```

> **Note:** `--add-data` オプションで Next.js のビルド済みファイルを含めています。
> `--name` オプションで exe ファイルの名前を指定します。
> `--onefile` オプションで単一の実行可能ファイルを作成します。
> `--noconsole` オプションでコンソールウィンドウを非表示にします。

ビルドが完了すると、`dist` ディレクトリに実行可能ファイルが生成されます。