以前、次の記事を書きました。
こちらはchmファイルの代替として NW.js を使った記事ですが、 Tauri を使うことでさらにコンパクトに配布できそうでしたので、その方法をまとめてみました。
なおターゲットは Windows デスクトップアプリです。
準備
使用するのは Tauri 2.0 です。
Tauriの必要事項
MkDocs Installation
これらを参考に、以下のツールをインストールします。
- Microsoft C++ Build Tools
- Rust
- Node.js
- Python
- mkdocs
Microsoft C++ Build Tools は、既に Visual Studio がインストール済みであれば、 スタートメニューからの Visual Studio Installer で C++によるデスクトップ開発 ワークロードをインストールしても OK です。
Tauri プロジェクトを作る
プロジェクトを作成したいディレクトリでコマンドプロンプトを開き、次のコマンドを実行します。
npm create tauri-app@latest
作成に必要な情報を色々と聞かれるので、入力していきいます。今回は次のようにしました。
✔ Project name · help-test-1
✔ Identifier · com.help-test-1.app
✔ Choose your package manager · npm
✔ Choose your UI template · Vanilla
✔ Choose your UI flavor · JavaScript
以降はライティングに Visual Studio Code を使っていく想定で説明します。
VSCode を開き、[ファイル] > [フォルダーを開く] から、プロジェクトを作成したフォルダを開きます。（📄package.json のあるフォルダ）
続いて [表示] > [ターミナル] からターミナルを開き、次のコマンドを順に実行します。
npm install
npm run tauri dev
npm install はすぐに終わりますが、 npm run tauri dev は数分程度かかるかもしれません。
成功すると、次のようなウィンドウが表示されます。
確認出来たらウィンドウの × ボタンで閉じておきましょう。
MkDocs プロジェクトを作る
先ほど作った Tauri プロジェクトフォルダに、 MkDocs も作成していきます。
ターミナルから次のコマンドを実行します。
mkdocs new .
次のように、 📁docs と 📄mkdocs.yml が作られたことを確認してください。これらが MkDocs 関連のファイルで、 📄index.md にはデフォルトのヘルプページがあります。
続いて次のコマンドでヘルプページをビルドします。
mkdocs build
📁site というフォルダが作られ、その中に html ファイルなど、ヘルプページに必要なファイルが作られます。
Tauri はデフォルトでは 📄src/index.html を表示しようとしますので、これを 📄site/index.html に変更します。 📄src-tauri/tauri.conf.json の frontendDist を ../site にしてください。
Tauri の起動確認を行ったのと同じように、次のコマンドを実行します。
npm run tauri dev
📄index.md に書かれた内容が表示できることを確認してください。
最後に 📁src はもう不要ですので削除しておきます。
ヘルプを git で管理する場合、 .gitignore ファイルに site を追加しておきましょう。
配布する
次のコマンドでビルドを実行します。
npm run tauri build
次のファイルを成果物として取得します。
- 📄src-tauri\target\release\help-test-1.exe
さいごに
electron だと数100MB, NW.js でも 100MB に届こうかという配布サイズでしたが、今回は 10MB 以下まで抑えることが出来ました。
業種によってはオンラインヘルプにアクセスできない環境もあり、もしこういった要求がある開発プロジェクトのヒントになれば幸いです。