メインコンテンツへ飛ぶ

TouchBar

クラス: TouchBar

ネイティブ macOS アプリ向けに、TouchBar レイアウトを作成します

プロセス: Main

new TouchBar(options)

指定したアイテムの新しい Touch Bar を作成します。 BrowserWindow.setTouchBar でウインドウに TouchBar を追加することができます。

Note: TouchBar API は現在実験的な機能です。そのため、将来的には変更されたり削除されたりする可能性があります。

ヒント: Touch Bar 付きの MacBook をお持ちでない場合は、Touch Bar を使用するアプリの検証に Touch Bar シミュレータ をぜひご利用ください。

静的プロパティ

TouchBarButton

typeof TouchBarButton 型であり、TouchBarButton クラスの参照です。

TouchBarColorPicker

typeof TouchBarColorPicker 型であり、TouchBarColorPicker クラスの参照です。

TouchBarGroup

typeof TouchBarGroup 型であり、TouchBarGroup クラスの参照です。

TouchBarLabel

typeof TouchBarLabel 型であり、TouchBarLabel クラスの参照です。

TouchBarPopover

typeof TouchBarPopover 型であり、TouchBarPopover クラスの参照です。

TouchBarScrubber

typeof TouchBarScrubber 型であり、TouchBarScrubber クラスの参照です。

TouchBarSegmentedControl

typeof TouchBarSegmentedControl 型であり、TouchBarSegmentedControl クラスの参照です。

TouchBarSlider

typeof TouchBarSlider 型であり、TouchBarSlider クラスの参照です。

TouchBarSpacer

typeof TouchBarSpacer 型であり、TouchBarSpacer クラスの参照です。

TouchBarOtherItemsProxy

typeof TouchBarOtherItemsProxy 型であり、TouchBarOtherItemsProxy クラスの参照です。

インスタンスプロパティ

TouchBar のインスタンスには以下のプロパティがあります。

touchBar.escapeItem

設定すると、タッチバーの "esc" ボタンを置き換える TouchBarItemnull に設定するとデフォルトの "esc" ボタンが復元されます。 この値を変更すると、タッチバーのエスケープアイテムがすぐに更新されます。

サンプル

ボタンといくつかのラベルで構成される、シンプルな TouchBar 向けスロットゲームのコード例を示します。

const { app, BrowserWindow, TouchBar } = require('electron')

const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

let spinning = false

// リールのラベル
const reel1 = new TouchBarLabel()
const reel2 = new TouchBarLabel()
const reel3 = new TouchBarLabel()

// 回した結果のラベル
const result = new TouchBarLabel()

// 回すボタン
const spin = new TouchBarButton({
label: '🎰 Spin',
backgroundColor: '#7851A9',
click: () => {
// 回転中のクリックを無視
if (spinning) {
return
}

spinning = true
result.label = ''

let timeout = 10
const spinLength = 4 * 1000 // 4 秒
const startTime = Date.now()

const spinReels = () => {
updateReels()

if ((Date.now() - startTime) >= spinLength) {
finishSpin()
} else {
// 各回転を少し遅くする
timeout *= 1.1
setTimeout(spinReels, timeout)
}
}

spinReels()
}
})

const getRandomValue = () => {
const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
return values[Math.floor(Math.random() * values.length)]
}

const updateReels = () => {
reel1.label = getRandomValue()
reel2.label = getRandomValue()
reel3.label = getRandomValue()
}

const finishSpin = () => {
const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size
if (uniqueValues === 1) {
// 3 つすべての値が同じ場合
result.label = '💰 ジャックポット!'
result.textColor = '#FDFF00'
} else if (uniqueValues === 2) {
// 2 つの値が同じ場合
result.label = '😍 やったね!'
result.textColor = '#FDFF00'
} else {
// 同じ値がない場合
result.label = '🙁 もう一度'
result.textColor = null
}
spinning = false
}

const touchBar = new TouchBar({
items: [
spin,
new TouchBarSpacer({ size: 'large' }),
reel1,
new TouchBarSpacer({ size: 'small' }),
reel2,
new TouchBarSpacer({ size: 'small' }),
reel3,
new TouchBarSpacer({ size: 'large' }),
result
]
})

let window

app.whenReady().then(() => {
window = new BrowserWindow({
frame: false,
titleBarStyle: 'hiddenInset',
width: 200,
height: 200,
backgroundColor: '#000'
})
window.loadURL('about:blank')
window.setTouchBar(touchBar)
})

上記のサンプルを実行する

上記のサンプルを実行するには、(予めターミナルで適当なディレクトリを開いた上で) 以下の操作を行ってください。

  1. 上記のコードを touchbar.js として保存する
  2. npm install electron と入力し、 Electron をインストールします
  3. ./node_modules/.bin/electron touchbar.js と入力し、Electron でサンプルを実行する

すると、 Electron のウィンドウと、 Touch Bar 上(あるいは Touch Bar エミュレータ上)で動作するサンプルアプリをご覧になる事ができるはずです。