• ← 前回
• 連載 INDEX
• 次回 →

はじめに

　前回はElectronのアーキテクチャと基本機能を紹介した。今回から次回と次々回は、Electronのデモアプリで紹介されている機能を使って、Electronアプリの実装のテクニックを紹介していく。今回はウィンドウ管理とメニューの実装テクニックを説明する。

APIデモアプリ

　GitHub上のElectron公式アカウントで公開されているElectron API Demosというデモアプリは、前回説明した各種APIを使って具体的にどんなことができるのかを知るのに便利だ。よく使うクラスと使い方が、デモの中で解説されているため、これを見ていけばElectronのAPIで何ができるのかが効率的に理解できる。

　そこで本稿では、このデモアプリの内容を順に解説していこう。なお、本稿ではデモのコードをそのまま転記するのではなく、そのままコードを実行できるように若干変更している。

　まずは、GitHubからElectron API Demosのソースを取得して、デモアプリを実行する（リスト1）。

　リスト1のnpm startコマンドでデモアプリ（図1）が起動する。

　デモアプリは、

• 説明
• デモがあるときは［View Demo］ボタン
• サンプルコード

で構成されている。［View Demo］ボタンをクリックすると、コードが実行されて、そのUIを操作したりできる。

　【メニュー項目の一覧】は以下のようになっている。

• ウィンドウ管理：
  
  • ウィンドウの作成と管理
  • ハングとクラッシュ
• メニュー：
  
  • アプリケーションメニュー
  • コンテキストメニュー
  • グローバルショートカット
• ネイティブUI：
  
  • 外部リンクとシステムのファイルマネージャーを開く
  • システムダイアログを呼び出す
  • トレイにアプリを表示する
• 通信：
  
  • 非同期メッセージ
  • 同期メッセージ
  • 非表示ウィンドウとの対話
• システム：
  
  • アプリやユーザーのシステム情報を取得する
  • クリップボード
  • プロトコルハンドラーによるアプリの起動
• メディア：
  
  • PDFにプリント
  • スクリーンショットの取得

　それでは、メニューの各項目を順に見ていこう。

ウィンドウ管理（WINDOWS）

　［WINDOWS］は、OSのWindowsのことではなく、アプリのウィンドウのことだ。つまりここでは、ウィンドウを作成・管理するためのサンプルが提供されている。

▲メニュー項目の一覧に戻る

ウィンドウの作成と管理（Create and Manage windows）

新しいウィンドウの作成（Create a new window）

　Electronのウィンドウは、BrowserWindowクラスで管理する。

 ●メインプロセスからのBrowserWindowクラスへのアクセス

　最も基本的な方法となるが、メインプロセス（＝package.jsonでmainに指定されたJavaScriptソース）では、リスト2の記述でBrowserWindowクラスを直接呼び出せる。

 ●レンダラープロセスからのBrowserWindowクラスへのアクセス

　一方、レンダラープロセスでは、BrowserWindowクラスに直接アクセスできない（つまり、レンダラープロセスからは新しいウィンドウを作成できない）。そのため、remoteモジュール（日本語訳）を経由して、メインプロセスのBrowserWindowモジュールを取得する必要がある（リスト3）。なおremoteモジュールは、IPC（Inter-process Communication：プロセス間通信）呼び出しをラップして、レンダラープロセスからメインプロセスのオブジェクトを呼び出す簡単な方法を提供している。

　このようにメインプロセスを経由することで、新しいレンダラーウィンドウを表示できる。デモアプリでも、メインプロセスからではなく、ウィンドウ（レンダラープロセス）から別のウィンドウを作成しているため、remoteモジュールを経由してメインプロセスのBrowserWindowモジュールにアクセスしている。

 ●メインプロセスからウィンドウを表示する基本コード

　デモのコードとは少し違うが、メインプロセスからウィンドウを表示する最も基本的なコードを紹介する（リスト4）。

　appモジュールのreadyイベント*1は、Electronの初期化が完了したときに発生する。Electronの処理は、ready後に記述する必要がある。

　BrowserWindowクラスのコンストラクターでウィンドウサイズを指定して、loadURLメソッドで読み込むHTMLファイルを指定するとウィンドウが表示される。

 ●レンダラープロセスからウィンドウを表示する基本コード

　これについては、次に説明するリスト5～7のコードを参考にしてほしい。

ウィンドウ状態の管理とフォーカス（Manage window state ／ Window events: blur and focus）

　ウィンドウの状態管理とフォーカスは、どちらもウィンドウのイベントを処理しているデモなので、一緒に解説する。

　ここでは、デモを参考に以下のファイル群を作成することにした。

• index.js： メインプロセスにおける処理。前掲のリスト4
• index.html： 親ウィンドウのHTMLソース。レンダラープロセス。以下のリスト5に掲載
• childwindow.html： 子ウィンドウのHTMLソース。レンダラープロセス。以下のリスト6に掲載
• renderer-process.js： 親ウィンドウ（レンダラープロセス）における処理。以下のリスト7に掲載

　特に難しいところはないと思うが、念のため、上記のコードを理解するためのポイントを確認しておこう。

　リスト8を見ると、ウィンドウのサイズ変更（resizeイベント*2）、または移動（moveイベント*2）が発生すると、updateReply関数が呼び出されるようになっている。updateReplay関数では、ウィンドウのサイズと位置を取得して、ページ上にテキスト表示している。

フレームなしウィンドウ（Create a frameless window）

　タイトルバーやコマンドボタンなどのフレームなしウィンドウを作成するには、BrowserWindowのコンストラクターでframeにfalseを指定する。

　HTMLソースには特に処理を記述していないため、省略する。このコードを実行すると、タイトルバーもコントロールボタンもないウィンドウが表示される（図2）。

　ウィンドウのオプションとしてフレームだけでなく、表示位置やサイズなどさまざまなオプションが指定できる。詳細はBrowserWindowのAPIリファレンスを参照してほしい。

▲メニュー項目の一覧に戻る

ハングとクラッシュ（Handling window crashes and hangs）

　レンダラープロセスがハングしたり、クラッシュしたりしたときに、メインプロセスから検出できる。ハング時とクラッシュ時のイベントハンドラーを記述したコードを見ていこう。

　デモアプリでは、レンダラープロセスからさらにウィンドウを表示しているため、remoteモジュールを経由してウィンドウを作成しているが、リスト10ではメインプロセスから呼び出すため、直接、ウィンドウを表示している。

　ウィンドウがハング状態になるとunresponsiveイベントが発生するため、win.on('unresponsive')をハンドルして、クラッシュ時の処理を記述している（リスト11）。

　このように、ハング状態をunresponsiveイベントとして検出して、ウィンドウの再読み込みやアプリの終了などの対応が可能だ。

　また同様に、クラッシュ時はcrashedイベントで検出できるため、同じ方法で処理を記述している。

　レンダラープロセス（index.html）側では、リンクがクリックされたら、プロセスをクラッシュあるいはハングさせている。

　プログラムを起動して［ハング］リンクをクリックした後、しばらく（30秒ほど）待つとダイアログが表示される（図3）。［再読み込み］ボタンをクリックすると、ウィンドウが再読み込みされる。

　同じように［クラッシュ］リンクをクリックすると、プロセスがクラッシュして、ダイアログが表示される（図4）。

　このようにレンダラープロセスのハングやクラッシュを検出することで、アプリが落ちてしまうような致命的な問題に対して適切な処理を記述できる。

メニュー（MENUS）

　メニューのデモとしては、アプリケーションメニュー（＝メニューバー）とコンテキストメニューの2つが紹介されている。

▲メニュー項目の一覧に戻る

アプリケーションメニュー（Create an application menu）

　このデモでは、メニューバーにカスタム項目を追加するコード（リスト13）が紹介されている。

　デモアプリはメニュー項目の数が多いので、リスト13ではある程度省略した。このコードを実行すると、ウィンドウに対するメニューが表示される（図5）。

　では、リスト13のコードをブロックごとに見ていこう。

　まずtemplateという変数（＝テンプレート）にメニューの定義を記述している（リスト14）。

　そのテンプレートからメニュー（＝Menuオブジェクト）を構築するわけだが、そのメニューを構成する各メニュー項目を表すMenuItemオブジェクトには、以下のプロパティを設定できる。全ての項目がOptional（省略可能）になっており、何も設定しなくても（もちろん何もしない項目になるが）項目を表示できる。

ロール（role）

　roleとして指定可能な値は以下である。

　以下の値はmacOSのみで利用可能なroleである。

　メニュー項目では、前掲のリスト14のようにロールでOS標準の機能を利用することもできるし、下記のリスト15のようにclickイベントにコードを記述するなどしたカスタム処理の実装も可能だ。

　メニューの項目定義も実装もJavaScriptだけでできることがお分かりいただけただろう。

ポジション（position）

　メニューの表示位置としてpositionプロパティを指定できることを表1に示したが、少し分かりにくいので、コードと実行例を示しておこう。positionプロパティにendofを記述すると、値ごとに論理グループが形成されて、記載した順に並べられて表示される。例えばリスト16では、edit／window／helpの3つの論理グループを記述している。

　このコードの実行結果を見てみよう。

▲メニュー項目の一覧に戻る

コンテキストメニュー（Create a context menu）

　アプリのウィンドウを右クリックして表示されるコンテキストメニューも、アプリケーションメニューと同じくMenuクラスで作成できる（リスト17）。

　レンダラープロセス（index.html）側の処理は、リスト18のようにしよう。

　これを実行して、ウィンドウで右クリックするとコンテキストメニューが表示される（図7）。

　コンテキストメニューなので、状態（＝コンテキスト）に応じて表示内容を切り替えたい場合は、IPCで送信されたレンダラープロセス内からのメッセージを、メインプロセスのipcMainモジュールでチャネルごとに受信して、各チャネルに応じたメニューをポップアップさせるとよい（※IPCについては次回詳しく説明する）。

　メインプロセスでは具体的に、show-context-menu1／show-context-menu1という2つのチャネル（＝イベント名）を定義して、それぞれのイベントハンドラー内で異なるコンテキストメニューを表示する（リスト19）。

　レンダラープロセスでは、状態に応じたチャネル（＝先ほど定義したshow-context-menu1／show-context-menu1）にIPC（＝ipcRendererモジュール）でメッセージ送信するように記述する（リスト20）。

　このように状態によってIPCチャネルを切り替えることで、コンテキストメニューを切り替えている。

▲メニュー項目の一覧に戻る

グローバルショートカット（Register keyboard shortcuts）

　グローバルショートカットは、アプリがアクティブでない状態でも利用できるショートカットキーである。さっそくコードを見てみよう。

　このサンプルは、UIを持たないアプリのため、HTMLソースはない。アプリ起動時（＝readyイベント）にglobalShortcut.registerメソッドを使って、Command／Contrl＋Alt＋Kキーを同時に押すとメッセージボックスを表示するショートカットキーを登録している。また、アプリの終了時（＝will-quitイベント）で globalShortcut.unregisterAllメソッドを呼び出して、登録したショートカットキーを解除している。

　アプリを起動してもウィンドウが表示されないため、アプリがアクティブになることはない。何がアクティブになっていてもよいので、登録したショートカットキーを押してみると、メッセージボックスが表示される（図8）。

　システム全体で使うようなアプリに使うとよいだろう。

▲メニュー項目の一覧に戻る

まとめ

　今回は、Electron API Demosのウィンドウ管理機能とメニューについて解説した。次回は、OSのネイティブ機能の呼び出しや、IPCを使ったアプリ内のプロセス間通信を解説する。

• ← 前回
• ▼ この記事の連載 INDEX ▼ 連載 RSS
• 次回 →