[2026/4/12]

[Tauri #01] Tauriによるデスクトップアプリ開発：環境構築から透過型デジタル時計のビルドまで

はじめに

昨日、PWAでWEBのアプリ化をしましたが、今回はネイティブ化に挑戦。

それにあたりいくつか候補があった中で、Rust製のTauriに目が留まり環境構築から簡易デジタル時計作成までやってみたのでそのメモです。

PWAの記事：

[Astro #16] WebサイトをPWA化してデスクトップアプリ（NAVI）として実在させる // PROTOCOL.LAIN

Webサイトを「独立したアプリ」に進化させるPWA化。Astro環境下での vite-plugin-pwa の設定から、手動での Service Worker 登録、エラー解決までの手順と引っかかりやすいポイントを解説します。

lain-lab.com

2. 環境構築 (Windows)

Tauriはバックエンドに Rust、フロントエンドに Web技術（JavaScript/HTML）を使用するため、Windows環境ではコンパイラとランタイムのセットアップが必要です。

Visual Studio Installer：C++ ビルドツールの導入

RustがWindows上で実行ファイルをリンクするために、Microsoft C++ ビルドツールが必要となります。

Microsoft C++ Build Tools - Visual Studio

説明なし

visualstudio.microsoft.com

手順:
1. Visual Studio Installer を起動。
2. 「C++ によるデスクトップ開発」ワークロードを選択してインストール。
必要な個別コンポーネント:
- MSVC (v143 以降推奨)
- Windows 10 または 11 SDK
注意点: 既にVisual Studioがインストールされている場合でも、このワークロードが欠けているとRustのコンパイル時に「リンカが見つからない」というエラーが発生します。

Rust：プログラミング言語のインストール

Tauriのコアロジックを担うRust環境を構築します。

手順:
1. rustup.rs から rustup-init.exe をダウンロードして実行。
2. コマンドプロンプト上で 1) Proceed with installation (default) を選択。
3. インストール完了後、ターミナルを再起動し、以下のコマンドで正常にパスが通っているか確認します。
```
rustc --version
```
役割: RustはTauriアプリのセキュリティ、リソース管理、およびOSネイティブ機能とのブリッジを担当します。

rustup.rs - The Rust toolchain installer

The Rust toolchain installer

rustup.rs

Node.js：フロントエンド・ツールチェーン

UI部分（HTML/JS）のビルドおよびTauri CLIの実行に Node.js を使用します。

手順:
1. Node.js 公式サイトから LTS版（推奨）をインストール。
2. インストール後、ターミナルで npm が利用可能か確認します。
```
node -v
npm -v
```
役割: プロジェクトの依存関係（パッケージ）管理、および開発サーバー（dev server）の起動に使用します。

Node.js — Run JavaScript Everywhere

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

メモ:
全てのインストールが完了したら、システムの環境変数を反映させるために一度 PCの再起動またはエディタ（VS Code等）の再起動を推奨します。

3. プロジェクト生成

環境構築が完了したら、Tauri CLIを使用してプロジェクトの雛形を作成します。

コマンドの実行

ターミナルで以下のコマンドを実行し、対話型プロンプトに従ってプロジェクトを設定します。

npm create tauri-app@latest

選択した構成

今回は、学習コストを抑えつつ軽量なアプリを作成するため、依存関係が最小限である Vanilla（生のJavaScript）構成を選択しました。

Project name: my-clock
Identifier: com.my-clock.app
Choose which language to use for your frontend: TypeScript / JavaScript
Choose your package manager: npm
Choose your UI template: Vanilla
Choose your UI flavor: JavaScript

依存関係のインストール

プロジェクトフォルダへ移動し、フロントエンドのビルドに必要なパッケージをインストールします。

cd my-clock
npm install

これにより、Rust側のソースコード（src-tauri）とフロントエンド側の資産（src）が統合された開発環境が整います。

4. 実装：デジタル時計のコア

UIの実装は src ディレクトリ内の資産を編集します。デスクトップガジェットとしての視認性を確保するため、CSSによるスタイリングと、低負荷なJavaScriptロジックを組み合わせています。

index.html：UI構造とサイバーグロー・スタイリング

構造は日付と時刻を表示する2行の div 要素のみで構成し、CSSで「ネオンブルー」のグロー効果を付与しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      :root {
        /* 透過ウィンドウ設定のため背景は透明に指定 */
        background-color: transparent;
        color: #00e5ff;
        font-family: 'Courier New', Courier, monospace;
        overflow: hidden;
      }
      .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        /* ドラッグ移動を可能にするTauri特有の属性 */
        user-select: none;
      }
      #date-display {
        font-size: 1.2rem;
        margin-bottom: 5px;
      }
      #time-display {
        font-size: 3rem;
        font-weight: bold;
        /* サイバー感のある発光エフェクト */
        text-shadow: 0 0 10px #00e5ff, 0 0 20px #00e5ff;
      }
    </style>
  </head>
  <body>
    <div class="container" data-tauri-drag-region>
      <div id="date-display"></div>
      <div id="time-display"></div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

main.js：requestAnimationFrame による高精度ロジック

時計の更新には setInterval ではなく、ブラウザのリフレッシュレートに同期する requestAnimationFrame を採用しています。これにより、CPU負荷を最小限に抑えつつ、正確な時刻表示を実現します。

/
 * 時計の更新処理
 */
function updateClock() {
  const now = new Date();

  // 日付フォーマット: YYYY/MM/DD Sunday
  const dateOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
  const weekdayOptions = { weekday: 'long' };
  const dateStr = now.toLocaleDateString('ja-JP', dateOptions);
  const dayStr = now.toLocaleDateString('en-US', weekdayOptions);

  document.getElementById('date-display').textContent = `${dateStr} ${dayStr}`;

  // 時刻フォーマット: HH:MM:SS
  const timeStr = now.toLocaleTimeString('ja-JP', { hour12: false });
  document.getElementById('time-display').textContent = timeStr;

  // 次のフレームで再帰呼び出し
  requestAnimationFrame(updateClock);
}

// DOM構築完了後に実行
window.addEventListener("DOMContentLoaded", () => {
  updateClock();
});

### 技術的ポイント

低負荷設計: requestAnimationFrame を使用することで、タブが非表示の際や描画の必要がない時のリソース消費を最適化しています。
ユーザビリティ: ウィンドウの枠を消す設定（後述）を見越し、HTML要素に data-tauri-drag-region 属性を付与して、コンテンツ部分を掴んで移動できるように設計しています。

実装：デジタル時計のコア index.html - ネオンブルーのサイバーなCSSスタイリング

実装：デジタル時計のコア main.js - requestAnimationFrame` を使った、正確で低負荷な時計ロジック

5. デスクトップアプリへの最適化

WebベースのUIを「デスクトップガジェット」として成立させるためには、標準的なブラウザウィンドウの挙動をOSレベルでカスタマイズする必要があります。Tauriでは src-tauri/tauri.conf.json を編集することで、これらのネイティブ機能を制御します。

ウィンドウのカスタマイズ設定

tauri.conf.json 内の windows プロパティを編集し、枠のない透過した外観を実現します。

"tauri": {
  "windows": [
    {
      "title": "My Clock",
      "width": 400,
      "height": 300,
      "resizable": false,
      "decorations": false,   // ウィンドウの枠やタイトルバーを非表示にする
      "transparent": true,    // ウィンドウ背景の透過を許可する
      "alwaysOnTop": true     // 常に他のウィンドウの手前に表示する
    }
  ]
}

各設定項目の役割

decorations: false OS標準のタイトルバーや閉じるボタン、境界線をすべて削除します。これにより、HTMLで定義したUI部分のみが独立して存在しているような外観になります。
transparent: true ウィンドウ自体の背景を透明にします。前述のCSS設定（background-color: transparent;）と組み合わせることで、デスクトップ上にテキストのみを浮き上がらせることが可能です。
alwaysOnTop: true 他のアプリケーションを操作している間も時計が隠れないよう、常に最前面に表示させます。

LLVMによる最適化コンパイル

リリース用のバイナリを生成する際、Tauri（Rust）はLLVMコンパイラ基盤を用いて強力な最適化を行います。

ビルドコマンド:
```
npm run tauri build
```
挙動の特徴: 最適化プロセスでは利用可能なCPUリソースを最大限に投入して計算が行われるため、ビルド実行時には一時的にCPU負荷が極めて高くなります。このプロセスを経て、不要なデバッグ情報が削ぎ落とされ、実行速度とファイルサイズが極限まで最適化された実行ファイル（EXE）が出力されます。

デスクトップアプリへの最適化 - tauri.conf.json でのウィンドウ設定

6. 完成とEXE化

開発が完了したら、配布可能な実行ファイルおよびインストーラーを生成します。Tauriのビルドパイプラインは、単一の実行バイナリだけでなく、OS標準のパッケージ形式まで自動で統合します。

リリースビルドの実行

ターミナルで以下のコマンドを実行することで、リリースプロファイルでの最適化ビルドが開始されます。

npm run tauri build

最適化プロセス: デバッグ情報が削除され、実行速度の向上とファイルサイズの軽量化が行われます。
成果物の出力先: src-tauri/target/release/ フォルダ配下に、実行ファイル（.exe）が生成されます。

完成とEXE化 - npm run tauri build によるリリースビルド

自動生成されるパッケージ

Tauriは、WiX ToolsetやNSISなどの外部ツールと連携し、インストーラーも同時に作成します。

EXE単体: my-clock.exe。依存関係がパックされているため、このファイルのみで動作します。
MSIインストーラー: my-clock_x.x.x_x64_en-US.msi。Windows標準のインストーラー形式で、コントロールパネルからのアンインストールにも対応します。
NSISセットアップ: my-clock_x.x.x_x64-setup.exe。より一般的なセットアップウィザード形式です。

現代的なビルド環境の利点

かつてデスクトップアプリの配布用パッケージを作成するには、別途インストーラー作成ソフトの設定が必要でしたが、Tauriでは構成ファイル（tauri.conf.json）の定義に従い、ワンコマンドで「配布可能な製品レベル」まで到達します。

また、一度ビルドに必要なコンポーネント（WiX等）がダウンロードされれば、2回目以降のビルドはキャッシュにより高速化されるため、継続的な修正と検証が容易になります。

まとめ

Tauriを用いることで、Web技術の柔軟性とRustの堅牢性を活かしたデスクトップガジェットを、短時間で構築することができました。特に「透過・最前面・枠なし」といったOSレベルの制御をJSON定義のみで完結できる点は、現代的なデスクトップアプリ開発における強力な選択肢となります。