TauriとVue.jsを使用した小さなデスクトップアプリの作成

公開: 2022-03-10

クイックサマリー↬Tauriは、既存のHTML、CSS、およびJavaScriptから、小さく、高速で、安全なデスクトップアプリを作成するためのツールチェーンです。この記事では、Kelvinが、ネイティブアプリケーションとしてnotaと呼ばれるサンプルWebアプリをバンドルする際に両方のテクノロジーを統合することにより、TauriがプログレッシブフレームワークVue.jsとどのようにうまく機能するかを説明します。

テクノロジーは、ユーザーだけでなく、クリエーター（開発者やデザイナー）も私たちの生活をより良くします。この記事では、タウロイを紹介します。この記事は、次の場合に役立ちます。

HTML、CSS、およびJavaScriptを使用してWeb上でアプリケーションを構築しており、同じテクノロジーを使用して、Windows、macOS、またはLinuxプラットフォームを対象としたアプリを作成したいと考えています。
あなたはすでにElectronのようなテクノロジーを使ってクロスプラットフォームのデスクトップアプリを構築していて、代替案をチェックしたいと思っています。
PureOSなどのLinuxディストリビューション用のWebテクノロジーを使用してアプリを構築したい。
あなたはRustの愛好家であり、ネイティブのクロスプラットフォームアプリケーションを構築するためにそれを適用したいと考えています。

既存のWebプロジェクトからネイティブのクロスプラットフォームアプリケーションを構築する方法を見ていきます。それを手に入れよう！

注：この記事は、HTML、CSS、JavaScript、およびVue.jsに慣れていることを前提としています。

ジャンプした後もっと！以下を読み続けてください↓

タウロイとは？

公式ウェブサイトはタウロイをうまくまとめています：

Tauriは、小さなバイナリと高速なバイナリの両方を使用して、より安全なネイティブアプリを構築するためのポリグロットツールチェーンです。「ポリグロット」とは、タウロイが複数のプログラミング言語を使用していることを意味します。現在、Rust、JavaScript、TypeScriptが使用されています。ただし、Go、C ++、Pythonなどを使用できるようにする計画があります。
これにより、Vue.js、React、AngularなどのHTMLおよびJavaScriptベースのフロントエンドフレームワークを使用して、ネイティブデスクトップアプリを構築でき、任意のパイプラインに統合できます。
主要なデスクトッププラットフォーム（モバイルおよびWebAssemblyは近日公開予定）用のバイナリを構築してバンドルするのに役立ちます。

つまり、基本的に、Tauriを使用すると、Webテクノロジーを使用して、小さくて安全なネイティブデスクトップアプリを作成できます。

そのGitHubページでは、Tauriは、小さなバイナリ（つまり、ファイルサイズ）を持ち、非常に高速（つまり、RAMの使用量が最小限）である安全性の高いネイティブアプリを構築するためのフレームワークに依存しないツールチェーンとして説明されています。

なぜ電子ではないのですか？

Webテクノロジーを使用してデスクトップアプリケーションを構築するための一般的なツールはElectronです。

ただし、Electronアプリのバンドルサイズはかなり大きく、実行時に大量のメモリを消費する傾向があります。タウロイとエレクトロンの比較は次のとおりです。

バンドル
Tauriアプリのサイズは600KB未満にすることができます。
メモリー
Tauriアプリのフットプリントは、Electronアプリの半分以下のサイズです。
ライセンス
タウロイでは再ライセンスが可能ですが、エレクトロンでは再ライセンスはできません。 Electronは、箱から出してすぐにChromiumに同梱されています。ただし、ChromiumにはWidevineという名前のデジタル著作権管理システムが含まれています。 WidevineがChromiumに含まれているため、Electronで作成されたアプリは、PureOSなどのプラットフォームのユーザーがフリー/リブレオープンソースソフトウェア（FLOSS）ではないという唯一の理由で嫌われています。 PureOSのようなプラットフォームは、フリーソフトウェアファウンデーション（FSF）によって検証されています。つまり、アプリストアでのみ無料のオープンソースソフトウェアを公開できます。

一言で言えば、アプリがElectronで構築されている場合、PureOSストアで正式に出荷されることはありません。これは、そのようなディストリビューションを対象とする開発者にとって懸念事項となるはずです。

タウロイのその他の機能

タウロイチームにとってセキュリティは非常に重要です。 Tauriで作成されたアプリは、最初から安全であることを目的としています。
Tauriはどのフロントエンドフレームワークとも互換性があるため、スタックを変更する必要はありません。
シンプルな構成で重要な機能を選択するのに役立つ多くのデザインパターンがあります。

タウロイの長所

Tauriを使用すると、Web用に構築したコードベースを、何も変更せずにネイティブデスクトップアプリに変換できます。
タウロイベースのプロジェクトでRustを使用することもできますが、これは完全にオプションです。そうした場合、Webを対象とした元のコードベースで何も変更する必要はありません。

実世界のタウロイ

しばらくの間Vue.jsコミュニティに参加している場合は、Vue.jsのコアチームのメンバーであるGuillaumeChauについて聞いたことがあるでしょう。彼は、Vue.jsコマンドラインインターフェイス（CLI）、およびその他のすばらしいVue.jsライブラリを担当しています。彼は最近、「JavaScriptプロジェクトのグラフィカルユーザーインターフェイス」を表すguijsを作成しました。これは、JavaScriptプロジェクトを視覚的に管理するためのTauriを利用したネイティブデスクトップアプリです。

GuijsはTauriで可能なことの例であり、Vue.jsチームのコアメンバーがアプリで作業しているという事実は、Tauriが（他のフロントエンドフレームワークの中でも）Vue.jsとうまく連携していることを示しています。興味がある場合は、GitHubのguijsリポジトリを確認してください。そして、はい、それはオープンソースです。

タウロイのしくみ

大まかに言えば、TauriはNode.jsを使用して、HTML、CSS、およびJavaScriptレンダリングウィンドウをユーザーインターフェイス（UI）としてスキャフォールディングし、Rustによって管理およびブートストラップされます。この製品は、Linux（deb / appimage）、macOS（app / dmg）、およびWindows（exe / msi）の一般的なファイルタイプとして配布できるモノリシックバイナリです。

タウロイアプリの作り方

Tauriアプリは、次の手順で作成されます。

まず、GUIフレームワークでインターフェースを作成し、HTML、CSS、およびJavaScriptを使用できるように準備します。
Tauri Node.js CLIはそれを受け取り、構成に応じてRustランナーをリグします。
開発モードでは、デバッグとホットモジュールの再読み込みを含むWebViewウィンドウが作成されます。
ビルドモードでは、バンドラーをリグし、設定に従って最終的なアプリケーションを作成します。

環境のセットアップ

タウロイとは何か、そしてそれがどのように機能するかがわかったところで、タウロイで開発するためのマシンのセットアップについて説明します。

注：ここでのセットアップはLinuxマシン用ですが、macOSおよびWindows用のガイドも利用できます。

Linuxセットアップ

タウロイの多言語性は、ツールの依存関係が多数必要であることを意味します。いくつかの依存関係をインストールして始めましょう。次を実行します。

 $ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev build-essential curl libssl-dev appmenu-gtk3-module

上記が成功したら、Tauriにはランタイムが必要なため、Node.jsのインストールに進みます（まだインストールしていない場合）。これを実行することでこれを行うことができます：

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

これにより、nvm（Node.jsバージョンマネージャー）がインストールされます。これにより、Node.jsランタイムを簡単に管理し、Node.jsのバージョンを簡単に切り替えることができます。インストール後、これを実行してNode.jsのバージョンのリストを表示します。

 nvm ls-remote

執筆時点では、最新バージョンは14.1.0です。次のようにインストールします。

 nvm install v14.1.0

Node.jsが完全にセットアップされたら、RustコンパイラーとRustパッケージマネージャーCargoをインストールする必要があります。以下のコマンドは両方をインストールします：

 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

このコマンドを実行した後、次のコマンドを実行して、CargoとRustが$PATHに含まれていることを確認します。

 rust --version

すべてがうまくいった場合、これはバージョン番号を返すはずです。

Tauriのドキュメントによると、次のコマンドを実行して、最新バージョンであることを確認してください。

 $ rustup update stable

出来上がり！あなたはあなたのマシンをタウロイのために100％準備することに一歩近づいています。残っているのは、 tauri-bundlerクレートを取り付けることだけです。 CLIを終了し、新しいCLIウィンドウで以下のコマンドを実行することをお勧めします。

 $ cargo install tauri-bundler --force

ユーレカ！すべてがうまくいけば、あなたのマシンはタウロイの準備ができています。次に、TauriとVue.jsの統合を開始します。それを手に入れよう！

糸

タウロイチームは、Yarnパッケージマネージャーをインストールすることをお勧めします。それでは、次のようにインストールしましょう。

 npm install -g yarn

次に、以下を実行します。

 yarn --version

すべてが機能した場合は、バージョン番号が返されているはずです。

TauriとVue.jsの統合

Tauriがインストールされたので、既存のWebプロジェクトをバンドルしましょう。プロジェクトのライブデモはNetlifyで見つけることができます。先に進み、シェルとして機能するリポジトリをフォークします。フォークした後、次のコマンドを実行してフォークのクローンを作成してください。

 git clone https://github.com/[yourUserName]/nota-web

プロジェクトのクローンを作成した後、以下を実行して依存関係をインストールします。

 yarn

次に、これを実行します。

 yarn serve

アプリケーションはlocalhost:8080で実行されている必要があります。実行中のサーバーを強制終了し、Tauri用のVue.jsCLIプラグインをインストールしましょう。

vue-cli-plugin-tauri

Tauriチームは、Vue.jsシングルページアプリケーション（SPA）をすばやくリグして、高速で安全な小さなクロスプラットフォームデスクトップアプリに変換するVue.jsCLIプラグインを作成しました。そのプラグインをインストールしましょう：

 vue add tauri

プラグインのインストール後、しばらく時間がかかる場合がありますが、ウィンドウのタイトルを尋ねられます。 notaと入力して、「Enter」を押すだけです。

Tauriプラグインによって導入された変更を調べてみましょう。

package.json

Tauriプラグインは、 package.jsonファイルのscriptsセクションに2つのスクリプトを追加しました。彼らです：

 "tauri:build": "vue-cli-service tauri:build", "tauri:serve": "vue-cli-service tauri:serve"

tauri:serveスクリプトは、開発中に使用する必要があります。それでは、実行してみましょう。

 yarn tauri:serve

上記は、アプリの起動に必要なRustクレートをダウンロードします。その後、アプリを開発モードで起動し、デバッグとホットモジュールの再読み込みを含むWebViewウィンドウを作成します。

src-タウロイ

プラグインがアプリディレクトリのルートにsrc-tauriディレクトリを追加したことにも気付くでしょう。このディレクトリ内には、Tauriがデスクトップアプリを構成するために使用するファイルとフォルダーがあります。内容を確認してみましょう：

 icons/ src/ build.rs cmd.rs main.rs Cargo.lock Cargo.toml rustfmt.toml tauri.conf.json tauri.js

行う必要がある唯一の変更は、 src-tauri/Cargo.tomlます。 Cargo.tomlは、Rustのpackage.jsonファイルに似ています。 Cargo.tomlで以下の行を見つけてください：

 name = "app"

これに変更します：

 name = "nota"

この例で変更する必要があるのはこれだけです。

バンドル

現在のプラットフォームにnotaをバンドルするには、次のコマンドを実行するだけです。

 yarn tauri:build

注：開発ウィンドウと同様に、これを初めて実行するときは、Rustクレートを収集してすべてを構築するのに時間がかかります。 その後の実行では、タウロイの木枠自体を再構築するだけで済みます。

上記が完了すると、現在のOSのnotaのバイナリが作成されます。私の場合、 src-tauri/target/release/bundle/deb/ディレクトリに.debバイナリが作成されています。*

クロスプラットフォームへの移行

おそらく、 yarn tauri:buildコマンドがオペレーティングシステムのバイナリを生成したことに気づいたでしょう。それでは、他のオペレーティングシステム用のバイナリを生成しましょう。これを実現するために、GitHubでワークフローを設定します。ここでは、クロスプラットフォームアプリの配布メディアとしてGitHubを使用しています。したがって、ユーザーはプロジェクトの[リリース]タブでバイナリをダウンロードするだけで済みます。実装するワークフローは、GitHubアクションの力を介してバイナリを自動的に構築します。それを手に入れましょう。

タウロイワークフローの作成

Jacob Boldaのおかげで、GitHubでTauriを使用してクロスプラットフォームアプリを自動的に作成してリリースするワークフローがあります。さまざまなプラットフォーム（Linux、Mac、およびWindows）のバイナリを構築する以外に、アクションはGitHubのリリースとしてバイナリをアップロードします。また、これを実現するためにJacobによって作成されたリリースの作成アクションを使用します。

このワークフローを使用するには、 nota-webのルートに.githubディレクトリを作成します。このディレクトリに、 workflowsという名前の別のディレクトリを作成します。次に、 .github/workflows/にワークフローファイルを作成し、 release-tauri-app.ymlという名前を付けます。

release-tauri-app.ymlに、Linux、macOS、およびWindows用のバイナリを構築するワークフローを追加します。このワークフローでは、バイナリをドラフトリリースとしてGitHubにアップロードします。マスターにプッシュするたびにワークフローがトリガーされます。

release-tauri-app.ymlを開き、以下のスニペットを追加します。

 name: release-tauri-app on: push: branches: - master paths: - '**/package.json' jobs: check-build: runs-on: ubuntu-latest timeout-minutes: 30 steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build create-release: needs: check-build runs-on: ubuntu-latest outputs: RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }} steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: get version run: echo ::set-env name=PACKAGE_VERSION::$(node -p "require('./package.json').version") — name: create release id: create_tauri_release uses: jbolda/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }} release_name: 'Release nota app v${{ env.PACKAGE_VERSION }}' body: 'See the assets to download this version and install.' draft: true prerelease: false create-and-upload-assets: needs: create-release runs-on: ${{ matrix.platform }} timeout-minutes: 30 strategy: fail-fast: false matrix: platform: [ubuntu-latest, macos-latest, windows-latest] include: — platform: ubuntu-latest buildFolder: bundle/deb ext: \_0.1.0_amd64.deb compressed: '' — platform: macos-latest buildFolder: bundle/osx ext: .app compressed: .tgz — platform: windows-latest buildFolder: '' ext: .x64.msi compressed: '' steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk (ubuntu only) if: matrix.platform == 'ubuntu-latest' run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/release/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset id: upload-release-asset uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/release/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip — name: build tauri app in debug mode run: yarn tauri:build --debug — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/debug/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset with debug mode on id: upload-release-asset-debug-mode uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/debug/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota-debug{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip

ワークフローをテストするには、変更をコミットしてフォークのmasterブランチにプッシュします。 GitHubに正常にプッシュした後、GitHubの[アクション]タブをクリックし、[ビルドの確認]リンクをクリックしてワークフローの進行状況を確認できます。

アクションが正常に実行されると、GitHubのリポジトリページの「リリース」でドラフトリリースを確認できます。その後、リリースを公開することができます！

結論

この記事では、安全でクロスプラットフォームの小さなネイティブアプリケーションを構築するためのポリグロットツールチェーンを紹介しました。タウロイとは何か、そしてそれをVue.jsに組み込む方法を見てきました。最後に、 yarn tauri:buildを実行して最初のTauriアプリをバンドルし、GitHubアクションを使用してLinux、macOS、およびWindows用のバイナリを作成しました。

タウロイについてどう思うか教えてください—タウロイを使って何を作っているのか楽しみです。質問がある場合は、Discordサーバーに参加できます。

この記事のリポジトリはGitHubにあります。 また、GitHubワークフローによって生成されたバイナリも参照してください。