メインコンテンツにスキップ

タスクバーのカスタマイズ

概要​

Electron には、Windows のタスクバーにアプリのアイコンを設定するための API があります。この API は、JumpList の作成、カスタムサムネイルとツールバー、アイコンオーバーレイ、いわゆる "フラッシュフレーム" 効果などの Windows 専用機能と、最近使ったドキュメントやアプリケーションの進行状況などのクロスプラットフォーム機能をサポートしています。

JumpList​

Windows では、ユーザーがタスクバーにあるアプリのアイコンを右クリックしたときに表示されるカスタムコンテキストメニューをアプリが定義できます。そのコンテキストメニューは JumpList と呼ばれます。MSDN からの引用として、JumpList の Tasks カテゴリにカスタムアクションを指定します。

アプリケーションは、プログラムの機能と、ユーザーがプログラムで行うことが予想される主要な操作の両方に基づいてタスクを定義します。タスクは、アプリケーションが動作している必要がないという点で、コンテキストに依存しない必要があります。また、メールメッセージの作成やメールプログラムでのカレンダーのオープン、ワープロでの新規ドキュメントの作成、特定のモードでのアプリケーションの起動、またはサブコマンドの起動など、通常のユーザーがアプリケーションで実行する統計的に最も一般的なアクションである必要があります。アプリケーションは、標準ユーザーが必要としない高度な機能や、登録などの一度限りのアクションでメニューを乱雑にしないようにする必要があります。アップグレードや特別オファーなどのプロモーションアイテムにタスクを使用しないでください。

タスクリストは静的であることが強く推奨されます。アプリケーションの状態やステータスに関係なく、同じ状態を維持する必要があります。リストを動的に変更することは可能ですが、リストのその部分が変更されることを予期していないユーザーを混乱させる可能性があることを考慮する必要があります。

Taskbar JumpList

注: 上記のスクリーンショットは、Microsoft Edge の一般的なタスクの例です。

macOS のドックメニューが実際のメニューであるのとは異なり、Windows のユーザータスクはアプリケーションショートカットのように機能します。たとえば、ユーザーがタスクをクリックすると、指定された引数でプログラムが実行されます。

アプリケーションのユーザータスクを設定するには、app.setUserTasks API を使用できます。

例​

ユーザータスクの設定​

クイックスタートガイドの動作するアプリケーションから始めて、main.js ファイルを次の行で更新します。

const { app } = require('electron')

app.setUserTasks([
  {
    program: process.execPath,
    arguments: '--new-window',
    iconPath: process.execPath,
    iconIndex: 0,
    title: 'New Window',
    description: 'Create a new window'
  }
])
タスクリストのクリア​

タスクリストをクリアするには、main.js ファイルで空の配列を指定して app.setUserTasks を呼び出す必要があります。

const { app } = require('electron')

app.setUserTasks([])

注: ユーザータスクはアプリケーションを閉じた後も表示されるため、タスクに指定されたアイコンとプログラムパスは、アプリケーションがアンインストールされるまで存在する必要があります。

サムネイルツールバー​

Windows では、アプリケーションウィンドウのタスクバーレイアウトに、指定されたボタンを含むサムネイルツールバーを追加できます。これにより、ユーザーはウィンドウを復元またはアクティブ化することなく、特定のウィンドウのコマンドにアクセスできます。

MSDN からの引用です。

このツールバーは、一般的な標準のツールバー共通コントロールです。最大で7つのボタンがあります。各ボタンの ID、画像、ツールチップ、状態は構造で定義され、タスクバーに渡されます。アプリケーションは、現在の状態に応じて、サムネイルツールバーのボタンを表示、有効化、無効化、または非表示にできます。

たとえば、Windows Media Player は、再生、一時停止、ミュート、停止などの標準的なメディアトランスポートコントロールを提供する場合があります。

Thumbnail toolbar

注: 上記のスクリーンショットは、Windows Media Player のサムネイルツールバーの例です。

アプリケーションでサムネイルツールバーを設定するには、BrowserWindow.setThumbarButtons を使用する必要があります。

例​

サムネイルツールバーの設定​

クイックスタートガイドの動作するアプリケーションから始めて、main.js ファイルを次の行で更新します。

const { BrowserWindow, nativeImage } = require('electron')
const path = require('node:path')

const win = new BrowserWindow()

win.setThumbarButtons([
  {
    tooltip: 'button1',
    icon: nativeImage.createFromPath(path.join(__dirname, 'button1.png')),
    click () { console.log('button1 clicked') }
  }, {
    tooltip: 'button2',
    icon: nativeImage.createFromPath(path.join(__dirname, 'button2.png')),
    flags: ['enabled', 'dismissonclick'],
    click () { console.log('button2 clicked.') }
  }
])
サムネイルツールバーのクリア​

サムネイルツールバーのボタンをクリアするには、main.js ファイルで空の配列を指定して BrowserWindow.setThumbarButtons を呼び出す必要があります。

const { BrowserWindow } = require('electron')

const win = new BrowserWindow()
win.setThumbarButtons([])

タスクバーのアイコンオーバーレイ​

Windows では、タスクバーボタンは小さなオーバーレイを使用してアプリケーションの状態を表示できます。

MSDN からの引用です。

アイコンオーバーレイは、状況に応じたステータスの通知として機能し、その情報をユーザーに伝えるために個別の通知領域ステータスアイコンを必要としないようにすることを目的としています。たとえば、現在通知領域に表示されている Microsoft Outlook の新しいメールステータスは、タスクバーボタンのオーバーレイで示すことができるようになりました。ここでも、開発サイクル中に、アプリケーションに最適な方法を決定する必要があります。オーバーレイアイコンは、ネットワークステータス、メッセンジャーステータス、または新しいメールなど、重要で長期的なステータスまたは通知を提供することを目的としています。ユーザーには、常に変化するオーバーレイやアニメーションを表示するべきではありません。

Overlay on taskbar button

注: 上記のスクリーンショットは、タスクバーボタンのオーバーレイの例です。

ウィンドウのオーバーレイアイコンを設定するには、BrowserWindow.setOverlayIcon API を使用する必要があります。

例​

クイックスタートガイドの動作するアプリケーションから始めて、main.js ファイルを次の行で更新します。

const { BrowserWindow, nativeImage } = require('electron')

const win = new BrowserWindow()

win.setOverlayIcon(nativeImage.createFromPath('path/to/overlay.png'), 'Description for overlay')

フラッシュフレーム​

Windows では、ユーザーの注意を引くためにタスクバーボタンを強調表示できます。これは、macOS でのドックアイコンのバウンスに似ています。

MSDN からの引用です。

通常、ウィンドウは、ウィンドウが注意を必要とするが、現在キーボードフォーカスがないことをユーザーに通知するために点滅します。

BrowserWindow のタスクバーボタンを点滅させるには、BrowserWindow.flashFrame API を使用する必要があります。

例​

クイックスタートガイドの動作するアプリケーションから始めて、main.js ファイルを次の行で更新します。

const { BrowserWindow } = require('electron')

const win = new BrowserWindow()

win.once('focus', () => win.flashFrame(false))
win.flashFrame(true)

注: フラッシュをオフにするには、win.flashFrame(false) を呼び出すことを忘れないでください。上記の例では、ウィンドウがフォーカスされたときに呼び出されますが、タイムアウトやその他のイベントを使用して無効にすることもできます。