Electron用の検索ダイアログ作った

Electron javascript

つくった

Electronアプリのページ内を検索するダイアログ。
https://www.npmjs.com/package/electron-search-dialog

使うと、こんな感じに検索ウィンドウが表示されて、
Electronのページのテキストを検索できる。
Excelの検索ダイアログに似せてみた。


npmにpublishしたので、npm installで利用できる

npm install --save electron-search-dialog


localeの設定が違えば、検索ダイアログの言語も変わる。
アメリカ語と、日本語しかサポートしてないけどね。

使い方

  • ライブラリをインストールする
npm install --save electron-search-dialog
  • 検索するウィンドウを指定して、インスタンス生成。
  • openDialog()でウィンドウを表示。
var SearchDialog = require('electron-search-dialog').default;
 
// create instance.
var win = ... // searching page (BrowserWindow)
var sd = new SearchDialog(win);
 
// open search dialog
sd.openDialog();

実際には

実際には検索ダイアログは、画面の操作をトリガーにして開かれるでしょうから、
ipcRendererで起動処理を走らせるような使い方になるでしょう。
サンプルコードがこちらにあります。


  • main.js
var {app, BrowserWindow, ipcMain} = require('electron')
var SearchDialog = require('electron-search-dialog').default;
 
let mainWindow
 
function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadFile('index.html')
  mainWindow.on('closed', function () {
    mainWindow = null
  })
 
  // -----------------------------
  // create SearchDialog instance,
  // and add open search dialog event
  // -----------------------------
  var _searchDialog = new SearchDialog(mainWindow);
  ipcMain.on('openSearchDialog', (event, message) => {
    _searchDialog.openDialog();
  });
}
app.on('ready', createWindow)
 
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})
  • index.html
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
    <br>
    <button id="btn">open</button>
 
    <script>
      require('./renderer.js')
    </script> 
  </body>
</html>
  • renderer.js
// -----------------------------
// at search button clicked,
// send open search dialog event.
// -----------------------------
var ipcRenderer = require('electron').ipcRenderer;
 
var btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  ipcRenderer.send('openSearchDialog', 'open');
});

いろいろ

BrowserWindowベースの検索ダイアログは重い

  • それはそうだ。
  • 一回開けば、そこからは表示・非表示の切り替えなので、遅くない。
  • 検索ダイアログのBrowserWindowインスタンスを、余裕のある時にあらかじめ初期化するような作りにしておけば、全然軽く出来そう。

クリアボタン

入力のクリアボタンなんか用意しないでも、
HTML5のsearchボタンを使えば、入力クリアボタンがついてくる。

<input type="search" value="">

なのですが、検索ダイアログの縦幅が小さすぎると、
なんか格好悪くなってしまったので、入力クリアボタン入れてしまった。

Electronでのlocaleの切り替え方法

Electronでlocaleを切り替えるには、こうする。
特にAPIとかないみたい。

var {app} = require('electron')
app.commandLine.appendSwitch('lang', 'en');

おわり

このライブラリを作った理由はだいたいElectronのfindInPageが使いづらいせい。
https://electronjs.org/docs/api/web-contents#contentsfindinpagetext-options

  • 検索ワードを入力したテキストフィールドが検索マッチしたり、
  • 次の検索候補に遷移しなかったり


同じように、Electronで画面の検索を行うライブラリには、
他に、chromeのwebviewを使って検索を実現する electron-in-page-search があります。
https://www.npmjs.com/package/electron-in-page-search


おわりだよ〜