Electron アプリから macOS Apple Intelligence の Writing Tools を使う

先月末に Electron 36.0.0 がリリースされました。

目玉機能として macOS の Apple Intelligence の Writing Tools をコンテキストメニュー経由で使用できるようになりました。

Apple Intelligence は Apple のデバイスで提供される AI プラットフォームで、iOS 18.1、iPadOS 18.1、macOS Sequoia 15.1 以降で利用できます。日本語にも対応しています。Apple Intelligence を有効にすると、画像生成アプリが使えたり、Siri が ChatGPT と連携して賢くなったりするのですが、汎用的な機能として通常のアプリケーションで Writing Tools が使えるようになります。

有効化は設定の「Apple Intelligence と Siri」から行います。

Apple Intelligence を有効にすると、テキストを表示・編集するあらゆるネイティブアプリケーションでテキストを選択した状態で、アプリの「編集」メニューおよびコンテキストメニューから Writing Tools の機能を呼び出して、テキスト内容の要約や校正を行えます。

テキストエディットアプリケーションで、Writing Tools を呼び出すところ。コンテキストメニューの「作文ツール」のサブメニューから目的の機能を呼び出せます。

コンテキストメニューで Writing Tools を使えるようにするという機能リクエストは、以下の issue で議論されていました。

Electron v36 でリリースされた機能は、OS レベルのメニュー項目サポートを追加する以下の PR により実現されているようです。

これは、メニュー構築時に WebFrameMain クラスのインスタンスを受け取るオプションにより有効化されます。

メインウィンドウに、Web コンテンツを読み込むだけのベーシックな Electron アプリのコンテキストメニューで Writing Tools を使用できるようにするサンプルを示します。

やっていることは、通常のコンテキストメニュー表示で、WebContents の focusedFrame プロパティ(WebFrameMain のインスタンス) を取得して、contextMenu.popup の frame オプションに指定するだけです。
詳細はコード内コメントを参照していただければと思います。

import { app, BrowserWindow, Menu } from 'electron';
import path from 'node:path';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

let mainWindow;

app.whenReady().then(() => {
  createWindow(); 

  
  mainWindow.webContents.on('context-menu', (e, params) => {
    
    const focusedFrame = mainWindow.webContents.focusedFrame;

    
    const menuTemplate = buildMenuTemplate(params);
    
    const visibleItems = menuTemplate.filter(item => item.visible);

    
    const contextMenu = Menu.buildFromTemplate(visibleItems);
    contextMenu.popup({
      window: mainWindow.webContents,
      frame: focusedFrame, 
    });
  });
});


function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800, height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    }
  });
  mainWindow.loadFile('index.html');
}


function buildMenuTemplate(params) {
  const menuTemplete = [
     {
      label: 'Copy', 
      role: 'copy',
      visible: params.selectionText.trim().length > 0
    }
  ];
  return menuTemplete;
}

実行結果。「作文ツール」メニューからアプリのテキストデータを Writing Tools に渡して結果を得ることができます。テキストエリアで使うのが相性いいですね。

拙作の Scrapbox アプリにも組み込んでみました。

Scrapbox の編集画面は通常のテキストエリアとは異なるせいか、「置き換え」はうまく動作しませんでした。

クロスプラットフォームなアプリを作れる Electron ですが、OS ネイティブの便利機能をアプリに取り込めるのはよいことですね。各 OS と生成 AI の融合は今後も進んでいくでしょうし、Electron アプリもプラットフォームの進化に合わせて利便性が向上することになります。