「TAURI」の基礎知識を押さえ、簡単なTAURIアプリ開発を体験してみよう

2023年10月3日(火)
大西 武 (オオニシ タケシ)
第2回の今回は、本連載のテーマであるデスクトップアプリを作れる「TAURI」の概要とインストール方法やビルド、実行方法を解説します。

TAURIの開発環境の構築

TAURIをビルドして実行するために、TAURIのコマンドとして「TAURI CLI」を、TAURIのプロジェクトを作成するために「create-tauri-app」バイナリをインストールします。

コーディングは前回のRustと同じVisual Studio Codeで書くので、今回は特にコードエディタをセットアップする必要はありません。

  1. 図6のようにVisual Studio Codeの「ターミナル」で次のコマンドを実行し、TAURI CLIをインストールします。CLIは「Command Line Interface」の頭文字をとった略語で、コマンドラインからコマンドを実行するものです。

    ・TAURI CLIのインストール
    $ cargo install tauri-cli

    図6:Visual Studio Codeのターミナルでcargo install tauri-cliコマンドを実行

  2. ターミナルでTAURIプロジェクトを作成するための「create-tauri-app」のRustバイナリを「crates.io」からダウンロードしてインストールします。

    ・TAURIプロジェクトを作成するためにcreate-tauri-appバイナリをインストール
    $ cargo install create-tauri-app --locked

はじめてのTAURIアプリの作成

それでは、初めてのTAURIプロジェクトとして、「hello」プロジェクトを作成してみましょう。また、実際にhelloプロジェクトを「デバッグビルド」してアプリを実行します。また、Webページだけを実際にWebブラウザで見てみます。

  1. Visual Studio Codeで「ファイル」→「フォルダーを開く」メニューから「ドキュメント」フォルダーに事前に作成した「Tauri」フォルダーなどを開き、次のコマンドを実行してhelloプロジェクトの新規作成を開始します。

    ・TAURIプロジェクトの新規作成コマンド
    $ cargo create-tauri-app hello
  2. コマンドを実行するとターミナルに「Choose which language to use for your frontend >」と表示されるので、フロントエンドに対して、やり取りする言語として「Rust」を選択します。
  3. 続いてターミナルに「Choose your UI template >」と表示されるので「Vanilla」を選びます。「UI」を作るのに「React」などのフレームワークを使わずに「素のJavaScript」を選びます。
  4. ターミナルに次のようなメッセージが表示されます。

    ・TAURIのhelloプロジェクトが新規に作成されたメッセージ
    PS C:¥Users¥Vexil¥Documents¥Rust¥Tauri > cargo create-tauri-app hello
    ✔ Choose which language to use for your frontend · Rust - (cargo)
    ✔ Choose your UI template · Vanilla
    
    Template created! To get started run:
      cd hello       
      cargo tauri dev
  5. helloフォルダーが作成されるので、「ファイル」→「フォルダーを開く」メニューからhelloフォルダーを開きます。ここで「src-tauri」フォルダーではなく「hello」フォルダーをカレントディレクトリにします。すると図7のようなフォルダー階層を確認できます。

    図7:helloプロジェクトの構成図

    ・helloプロジェクトの階層図
    helloフォルダー(プロジェクト)
    ┣src(Webページの入ったフォルダー)
    ┃┣assets(アセットファイルの入ったフォルダー)
    ┃┣index.html(メインHTMLファイル)
    ┃┣main.js(メインJavaScriptファイル)
    ┃┗styles.css(スタイルシート)
    ┣src-tauriフォルダー(Rustプロジェクト)
    ┃┣iconsフォルダー(アイコンファイルが入ったフォルダー)
    ┃┣srcフォルダー(ソースが入ったフォルダー)
    ┃┃┗main.rs(メインのrsファイル)
    ┃┣targetフォルダー(ビルドしたファイルやフォルダーが入ったフォルダー)
    ┃┃┣debugフォルダー(デバッグビルドしたファイルやフォルダーが入ったフォルダー)
    ┃┃┣releaseフォルダー(リリースビルドしたファイルやフォルダーが入ったフォルダー)
    ┃┃┣.rustc_info.json
    ┃┃┗CACHEDIR.TAG
    ┃┣.gitignore(Gitで無視するファイルやフォルダーを記述)
    ┃┣build.rs(ビルドの際に準備などのために使われるRustファイル)
    ┃┣Cargo.lock(このプロジェクトで使われる情報やファイルなどを列挙)
    ┃┣Cargo.toml(このプロジェクトの設定ファイル)
    ┃┗tauri.conf.json(TAURI設定のJSONファイル)
    ┣.gitignore(Gitで無視するファイルやフォルダーを記述)
    ┗README.md(注意書き)
  6. ターミナルで次のコマンドを実行するとhelloプロジェクトがデバッグされ、成功すれば図8のようにTAURIのデフォルトのデスクトップアプリが実行されます。ただし、筆者の環境では「ウイルスバスター」がビルドをブロックすることがあったので、警告が出たら安全なら「許可」し、ビルドが止まったらターミナルで何度か次のコマンドを実行します。

    ・helloプロジェクトをデバッグビルドと実行
    $ cargo tauri dev

    図8:hello.exeをデバッグ実行したデスクトップアプリ

  7. 試しにWebブラウザでデフォルトのWebページを見てみます。Webページは「hello」→「src」フォルダにあり、「index.html」を実行すると図9のように表示されるはずです。このWebページがTAURIによりデスクトップアプリとして作成されます。

    図9:WebブラウザでWebページを見てみる(svgファイルはローカルのWebブラウザでは見られない)

著者
大西 武 (オオニシ タケシ)
1975年香川県生まれ。大阪大学経済学部経営学科中退。プログラミング入門書など30冊以上を商業出版する作家。Microsoftで大賞やNTTドコモでグランプリなど20回以上全国区のコンテストに入賞するアーティスト。オリジナルの間違い探し「3Dクイズ」が全国放送のTVで約10回出題。
https://profile.vixar.jp

連載バックナンバー

開発言語技術解説
第15回

「TAURI」でデータベースを使ってみよう

2024/5/10
第15回の今回は「TAURI」でオープンソースのデータベース「SQLite3」を使用して、テーブル表に表示する解説をしていきます。
開発言語技術解説
第14回

「TAURI」で気象庁の「CSVデータ」を解析する

2024/5/1
第14回の今回は気象庁のWebサイトから指定した地域の1年間の気象データをダウンロードして「TAURI」で解析していきます。
開発言語技術解説
第13回

「TAURI」で「簡易RSSリーダー」を開発してみよう

2024/4/16
第13回の今回は「TAURI」で「RSSフィード」を読み込んでWebページに一覧表示し、リンクのページを開くための新規ウィンドウを作成するところまでを解説します。

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています