# フレームレスウィンドウ

枠線のないウィンドウは、特別なウィンドウモードで、シェル（ウィンドウ枠、タイトルバー、ツールバーなどを含む）がなく、Webコンテンツのみが含まれます。枠線のないウィンドウモードを使用すると、ウィンドウインターフェイスを完全にカスタマイズし、アプリケーションのスタイルをすべてのオペレーティングシステムで一貫して保つことができます。ただし、枠線のないウィンドウにはシステムのデフォルトのシェルがないため、使用時に注意が必要です。

## 枠線のないウィンドウの作成

`manifest.json` ファイルで、 `window` オブジェクトの `frame` プロパティを `false` に設定して、枠線のないウィンドウモードを有効にします。

```json
{
    "id": "LB5UL2P0Q9FFF",
    "version": "1.0.0",
    "name": "Hello World",
    "logo": "/logo.png",
    "keywords": ["keywrod1", "keywrod2"],
    "main":
    {
        "frame": false,        // 👈 枠線のないモード
        "url": "index.html",
        "width": 640,
        "height": 480
    }
}
```

## ドラッグ可能領域 <a href="#ke-tuo-ye-qu" id="ke-tuo-ye-qu"></a>

アプリケーション内で `-webkit-app-region` 属性を使用して、アプリケーションウィンドウのドラッグ可能な領域を制御できます。

デフォルトでは、枠線のないウィンドウはドラッグできません。 アプリケーションは CSS で `-webkit-app-region: drag` を指定することで、どの領域がドラッグ可能であるか（OS の標準タイトルバーのような）プラグインに教える必要があります。また、ドラッグ可能な領域の内部で `-webkit-app-region: no-drag` を使用して、一部の領域を除外することができます。 現在、矩形形状のみがサポートされています。

ウィンドウ全体をドラッグ可能にするには、 `body` のスタイルとして `-webkit-app-region: drag` を追加します。

```html
<body style="-webkit-app-region: drag">
</body>
```

ウィンドウ全体をドラッグ可能にする場合は、ボタンをドラッグ不可に設定して、ユーザーがクリックできるようにする必要があることに注意してください。

```css
button {
  -webkit-app-region: no-drag;
}
```

カスタムタイトルバーのみをドラッグ可能に設定する場合は、タイトルバー内のすべてのボタンをドラッグ不可にする必要があります。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.eagle.cool/plugin-api/ja-jp/tutorial/frameless-window.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
