メインコンテンツへ飛ぶ

TouchBar

[!WARNING] Electron 組み込みのクラスはユーザコードでサブクラス化できません。 詳細については、FAQ をご参照ください。

クラス: TouchBar​

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

プロセス: メイン

new TouchBar(options)​

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

[!NOTE] TouchBar API は現在実験的な機能なため、将来に変更されたり削除されたりする可能性があります。

静的プロパティ​

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

サンプル​

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

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

const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

let spinning = false

// リールのラベル
const reel1 = new TouchBarLabel({ label: '' })
const reel2 = new TouchBarLabel({ label: '' })
const reel3 = new TouchBarLabel({ label: '' })

// スピンの結果のラベル
const result = new TouchBarLabel({ label: '' })

// スピンのボタン
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 = '💰 Jackpot!'
    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 エミュレータ上）で動作するサンプルアプリをご覧になる事ができるはずです。