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

枠線のないウィンドウは、特別なウィンドウモードで、シェル（ウィンドウ枠、タイトルバー、ツールバーなどを含む）がなく、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;
}
```

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