変換はかせ

あらゆるファイル操作を一括でできるアプリケーション。

使用技術, ドキュメント

• フロントエンド: React, TypeScript, TailwindCSS
• バックエンド: Rust
• フレームワーク: Tauri
• ツール: FFmpeg

ディレクトリ構成

パス	内容
dist	ビルド成果物の出力先ディレクトリ。npm run buildで生成される
node_modules	npmの依存パッケージ。npm installで生成される
public	ビルド後にルートに置かれる。画像など
src/App.css	スタイルシート
src/App.tsx	フロントエンドの本体
src-tauri/binaries	FFmpegのバイナリファイル。sidecarで使用されている
src-tauri/icons	アプリケーションアイコン
src-tauri/src/lib.rs	変換処理のロジック
src-tauri/.gitignore	Gitで管理しないファイルの設定(バックエンド)
src-tauri/tauri.conf.json	Tauriの設定ファイル
src-tauri/Cargo.toml	Rustの設定ファイル
.gitignore	Gitで管理しないファイルの設定
package-lock.json	npmの依存パッケージのバージョンを固定するためのファイル
package.json	npmの設定ファイル
README.md	この文章

インストール

Windowsの場合

1. Microsoft C++ Build Toolsをインストール

2. Rustのインストール

   winget install --id Rustlang.Rustup

MacOSの場合

1. Rustのインストール

   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
   echo 'export PATH="$HOME/.cargo/bin:$PATH"' >> ~/.zshrc

2. Homebrewのインストール

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> ~/.zprofile
   eval $(/opt/homebrew/bin/brew shellenv)
   source ~/.zshrc

FFmpegのバイナリファイルの設置

1. src-tauri/binariesディレクトリを作成

2. Linux用のバイナリファイルの用意

   1. https://github.com/BtbN/FFmpeg-Builds/releases からffmpeg-n8.1-latest-linux64-gpl-8.1.tar.xzをダウンロード
   2. 解凍して出てくるbin/ffmpegをsrc-tauri/binaries配下に設置
   3. fmpeg-x86_64-unknown-linux-gnuにリネームする

3. Windows用のバイナリファイルの用意

   1. https://www.gyan.dev/ffmpeg/builds/ からffmpeg-release-full.7zをダウンロード
   2. 解凍して出てくるbin/ffmpeg.exeをsrc-tauri/binaries配下に設置
   3. ffmpeg-x86_64-pc-windows-msvc.exeにリネームする

4. MacOS(Intel)用のバイナリファイルの用意

   1. https://evermeet.cx/ffmpeg/ からffmpeg-9.0.1.7zをダウンロード
   2. 解凍して出てくるffmpegをsrc-tauri/binaries配下に設置
   3. ffmpeg-x86_64-apple-darwinにリネームする

5. MacOS(Apple Silicon)用のバイナリファイルの用意

   1. https://www.osxexperts.net/ で"Download ffmpeg 9.0 (Apple Silicon)"をクリックしてffmpeg9arm.zipをダウンロード
   2. 解凍して出てくるffmpegをsrc-tauri/binaries配下に設置
   3. ffmpeg-aarch64-apple-darwinにリネームする

6. バイナリファイルの実行権限を付与(初回のみ)

   chmod +x src-tauri/binaries/ffmpeg-*

開発

• 依存パッケージのインストール(package.jsonが更新されたときに実行)

  npm install

• 新たなパッケージのインストール

  npm install <パッケージ名>

• tauriのプラグインのインストール

  npm run tauri add <プラグイン名>

• 開発環境でアプリケーションを起動(ctrl + C / ⌃Cで終了)

  npm run tauri dev

• アプリケーションをビルド

  npm run tauri build

• FFmpegのインストール(バイナリファイルを設置するため、インストールしなくてもアプリケーションは動作する)

  • Windowsの場合

  winget install -e --id Gyan.FFmpeg

  • MacOSの場合

  brew install ffmpeg-full

• FFmpegでファイル形式を変換する例(プロジェクトのルートにinput.jpgを置く)

  ffmpeg -i input.jpg output.png