よをこめてねむる

  • ホーム
  • Tauri2でウィンドウを透過してドラッグできるようにするには?

Tauri2でウィンドウを透過してドラッグできるようにするには?

  • 作成日: 2025-08-16
  • 更新日: 2025-08-16
  • カテゴリ: Tauri2
  • タグ: Tauri2, GUI

ウィンドウを透過するにはウィンドウの装飾などをオフにして透過指定を入れます。
tauri.conf.jsonapp -> windowsを以下のように編集。

  "app": {  
    "windows": [  
      {  
        "title": "myApp",  
        "width": 400,  
        "height": 400,  
        "decorations": false,  
        "transparent": true,  
        "shadow": false,  
        "fullscreen": false,  
        "resizable": false,  
        "maximizable": false  
      }  
    ],  
  }  

HTML内の要素をドラッグできるようにするにはsrc-tauri/capabilities/default.jsonを以下のように編集。

{  
  "$schema": "../gen/schemas/desktop-schema.json",  
  "identifier": "default",  
  "description": "Capability for the main window",  
  "windows": ["main"],  
  "permissions": [  
    "core:default",  
    "core:window:default",  
    "core:window:allow-start-dragging"  
  ]  
}  

そしてHTML内の要素にdata-tauri-drag-regionを書きます。以下は表示している画像をドラッグしてウィンドウを動かせるようにする例。

    <img data-tauri-drag-region :src="imgSrc">  

出典