フレームレスウィンドウ

ツールバー、枠線、およびその他のグラフィカルなシェルがないウィンドウを開く。

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

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

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

{
    "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
    }
}

ドラッグ可能領域

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

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

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

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

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

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

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

前へ多言語対応（i18n）次へevent（イベント）

最終更新 2 年前

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

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

{
    "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
    }
}

ドラッグ可能領域

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

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

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

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

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