PR

Tauri v2でファイルを開く機能を作る前に知っておきたいこと：ダイアログとドラッグ&ドロップの実装メモ

記事内に広告が含まれています。
スポンサーリンク

Tauriでデスクトップアプリを作っていると、かなり早い段階で「ファイルを選んでもらう」「ファイルをドラッグ&ドロップしてもらう」という機能が欲しくなります。

たとえば、画像を読み込むアプリ、PDFを扱うアプリ、設定ファイルをインポートするアプリなどでは、避けて通れない機能です。見た目はシンプルなのですが、実際に作ってみると「Webアプリの感覚だけでは少し足りないな」と感じる場面があります。

この記事では、Tauri v2でファイルを開く機能を作る前に知っておくと安心なポイントを、実装メモとしてまとめます。細かいコードを丸ごと完成させるというより、つまずきやすい考え方を先に整理する記事です。

まず押さえたいのは「Web」と「デスクトップ」の境界

Tauriは、フロントエンドをHTML/CSS/JavaScriptで作りつつ、Rust側でOSに近い処理を扱えるのが魅力です。

ただ、この構成だからこそ「ブラウザー標準でできること」と「Tauriのプラグインや権限が必要なこと」を分けて考えるのが大切です。

たとえば、画面上にファイルをドラッグ&ドロップして、File オブジェクトとして受け取るだけなら、基本的にはWeb標準のDrag and Drop APIで扱えます。一方で、OS標準のファイル選択ダイアログを開いたり、選択されたパスを扱ったりする場合は、TauriのDialogプラグインを使うのが自然です。

この境界をあいまいにしたまま進めると、「ブラウザーでは動くのにTauriでは期待どおりにならない」「権限を追加したはずなのに呼び出せない」といった迷子になりがちです。

ファイル選択はDialogプラグインから始める

Tauri v2では、ファイル選択ダイアログを使う場合、@tauri-apps/plugin-dialog を導入します。

公式ドキュメントでは、次のような形で追加できます。

npm run tauri add dialog

JavaScript側では、open を使うことでファイル選択ダイアログを開けます。

import { open } from "@tauri-apps/plugin-dialog";

const file = await open({
  multiple: false,
  directory: false,
});

ここで大事なのは、ただライブラリを入れるだけではなく、Tauri v2では「権限」の考え方も一緒に見る必要があることです。Tauriは安全性を重視しているため、アプリから呼び出せる機能を src-tauri/capabilities 配下の設定などで明示的に許可する設計になっています。

小さな個人アプリを作っていると、最初はこの仕組みが少し面倒に感じるかもしれません。ですが、デスクトップアプリはユーザーのローカルファイルに近い場所で動くため、「何を許可しているか」が見える状態になっているのは、むしろ安心材料だと思います。

ドラッグ&ドロップは「全画面での誤動作」を防ぐ

ファイルのドラッグ&ドロップで意外と忘れがちなのが、ドロップ先以外にファイルを落としたときの挙動です。

WebView上では、ファイルを画面に落とすと、ブラウザーの標準動作としてそのファイルを開こうとする場合があります。アプリとしては、ユーザーが少し手を滑らせただけで画面が切り替わるような体験は避けたいところです。

MDNの解説でも、ファイルがドラッグされている場合に drop や dragover の既定動作を防ぐ考え方が紹介されています。

window.addEventListener("dragover", (event) => {
  if (event.dataTransfer?.types.includes("Files")) {
    event.preventDefault();
  }
});

window.addEventListener("drop", (event) => {
  if (event.dataTransfer?.types.includes("Files")) {
    event.preventDefault();
  }
});

そのうえで、本当に受け取りたいドロップゾーンだけでファイルを処理するようにすると、ユーザーにとっても安心です。

dropZone.addEventListener("drop", (event) => {
  event.preventDefault();

  const files = Array.from(event.dataTransfer?.files ?? []);
  const imageFiles = files.filter((file) => file.type.startsWith("image/"));

  // ここでプレビュー表示や読み込み処理へ進める
});

実装としては小さな差ですが、アプリの「ちゃんとしている感」にかなり効きます。

クリックでも選べる逃げ道を用意する

ドラッグ&ドロップは便利ですが、すべての人にとって使いやすいとは限りません。

トラックパッド操作が苦手な方もいますし、複数ウィンドウを並べにくい環境もあります。ですので、ドラッグ&ドロップだけに頼らず、クリックしてファイル選択ダイアログを開ける導線も用意しておくのがおすすめです。

個人的には、次のような役割分担が扱いやすいと感じています。

  • すぐ試したい人向け：ドラッグ&ドロップ
  • 確実に選びたい人向け：ファイル選択ボタン
  • 操作に迷った人向け：説明文をドロップエリア内に表示

「ここにファイルをドロップ、またはクリックして選択」と書いてあるだけで、迷う時間はかなり減ります。

エラー文は技術者向けにしすぎない

ファイル読み込みでは、対応していない形式、サイズが大きすぎるファイル、権限不足など、いくつかの失敗が起こります。

このとき、開発中の感覚で「invalid file type」や「permission denied」とだけ出すと、使う人には少し冷たく見えます。

たとえば画像だけを受け付けるアプリなら、次のように言い換えるだけでも印象が変わります。

このファイル形式には対応していません。PNG、JPEG、WebP形式の画像を選択してください。

TauriのDialogプラグインにはメッセージダイアログも用意されているので、重要なエラーはOS標準の見た目で伝えるのもよいと思います。ただし、軽い入力ミスまで毎回ダイアログにすると少し重たいので、画面内のメッセージと使い分けるのが良さそうです。

まとめ：ファイル操作は「できる」より「迷わない」を優先する

Tauri v2でファイルを開く機能を作るときは、機能そのものよりも、周辺の設計が大切だと感じます。

  • OS標準のファイル選択はDialogプラグインを使う
  • Tauri v2では権限設定もセットで確認する
  • ドラッグ&ドロップはドロップゾーン外の挙動も考える
  • クリックして選べる導線を残す
  • エラー文はユーザーが次に何をすればよいかまで書く

こうした部分を最初に整えておくと、あとから機能を増やすときも迷いにくくなります。

TauriはWeb技術の身軽さと、デスクトップアプリらしい操作感を両立できる楽しい選択肢です。ファイル操作のような基本機能こそ丁寧に作っておくと、アプリ全体の使いやすさがぐっと上がると思います。

参考

スポンサーリンク

コメント

タイトルとURLをコピーしました