本サイトからスピンオフした姉妹サイトです。Demosで紹介されている、Electronアプリの実装テクニックを紹介。今回はシステムとメディアの実装方法を基礎から説明する。→はじめに前回は、OSのネイティブ機能へのアクセス、アプリ内のプロセス間通信を解説した。今回は、実行環境の情報取得、クリップボードの操作、メディア機能としてPDF出力と画面キャプチャの取得について解説していく。Demosというデモアプリを使う。デモアプリを動かす方法は、前々回の説明を参照してほしい。APIデモアプリシステム(SYSTEM)ここでは、環境情報の取得や、クリップボードの操作、特定のプロトコルを処理してアプリを起動するなど、システムに関連する機能を解説している。index.js)appモジュールは、メインプロセスからのみ使えるため、IPCの'get-app-path'チャネルで呼び出されたら、アプリのパスを取得して、そのパスを'got-app-path'チャネルで返している。リスト1では、appモジュールで取得したパスをIPCの'got-app-path'チャネルで返している。appモジュールはメインプロセスからのみ利用可能だが、レンダラープロセスから使いたい場合は、remoteモジュールを経由して、require('electron').remote.appとして呼び出すこともできる。appモジュールは、アプリのバージョンやパスなどの情報や、システムで保持している情報にアクセスできる。具体的にどのような機能があるかは、APIリファレンス(英語)のメソッドを中心に参照(日本語)してほしい。index.html)アプリのパス、Electronのバージョン、OSのホームディレクトリ、ディスプレイのサイズを取得している。リスト2の内容を説明していこう。アプリのパスを取得する部分は、IPCでメインプロセスから取得しているのでここでは解説を省略する。Electronのバージョン取得には、processオブジェクトが使われている(リスト3)。Electronを使用して作成するアプリではメインプロセスとレンダラープロセスが別プロセスで動作するが、processオブジェクトはどちらでも使用できるprocessオブジェクトのその他の機能はAPIリファレンス(日本語)を参照してほしい。ホームディレクトリの取得には、Node.jsのosモジュールを使っている(リスト4)。osモジュールを使うと、ディレクトリ情報だけでなく、プラットフォームの種類や、CPU名と使用率、ネットワークの情報などが取得できる画面解像度の取得には、screenモジュールが使われている(リスト5)。window.screenがDOMプロパティによって予約されているため、ここでは(screenではなく)electronScreenという変数名で受け取っているscreenモジュール(日本語)からはディスプレイサイズだけでなく、カーソルの位置や外部ディスプレイの情報などにアクセスできる。このコードを実行してみよう。筆者の環境では図1のように表示された。▲メニュー項目の一覧に戻るクリップボード(Clipboard)クリップボードのコピー&ペーストは当然サポートされている。index.js)リスト6に示したメインプロセス側では、ウィンドウを表示しているだけなので、レンダラープロセス側を見ていこう(リスト7)。index.html)コピー元のテキストボックス(copy-to-input)、コピーボタン(copy-to)、ペーストボタン(paste-to)、ペースト先(paste-from)があり、コピーとペーストを実装している。実装内容を解説していこう。クリップボード処理の部分解説(1)リスト8に示した部分のコードでは、clipboardモジュールを取得している。クリップボード処理の部分解説(2)次にリスト9のコードでは、[Copy]ボタンがクリックされると、clipboardモジュールのwriteTextメソッドで、テキストボックスに入力された文字列をクリップボードに書き込んでいる。クリップボード処理の部分解説(3)リスト10では、[Paste]ボタンがクリックされると、clipboardモジュールのreadTextメソッドを使ってクリップボードから文字列を読み込んでいる。テキスト以外の読み書きもできるので、clipboardモジュールのAPIリファレンス(日本語)を参照してほしい。handler)開発したElectronアプリは、特定のプロトコルのURL呼び出しで開くデフォルトのアプリとしても登録できる。リスト12では、サンプルアプリ自体をelectron-api-demos://プロトコルのデフォルトアプリとして登録している。index.js)appモジュールのsetAsDefaultProtocolClientメソッドで独自のプロトコル名を登録して、open-urlイベント(macOSのみ)でプロトコルから開かれたことを検出している。このサンプルはmacOSでしか正常に動作しないので注意してほしい。メッセージボックスを表示するには、前々回説明したdialog.showMessageBoxメソッドを使うが、ここでは引数がより簡単なdialog.showErrorBoxメソッドで代用している(「エラー」という意味ではない)。protocol-link.htmlファイルの内容は後述する。プロトコル処理の部分解説(1)リスト12では、electron-api-demos://から始まるURLを開いたときに、このアプリが起動するように登録している。Windowsの場合は、デフォルトで実行ファイルが登録されるが、デバッグ時はElectron.exeが実行されるため、アプリを起動できない。アプリをパッケージ化してから試す必要がある(※パッケージ化については次回解説する)。Linuxは現時点ではサポートされていない。プロトコル処理の部分解説(2)次にリスト13のコードでは、macOSでプロトコルを経由してアプリが起動されると、起動時のURLをパラメーターにopen-urlイベントが呼び出される。起動時のパラメーターはURLをパースして取得すればよい。プロトコル処理の部分解説(3)リスト14では、ブラウザーを開いて、以下のHTMLファイル(protocol-link.html)を開く。外部ページ(protocol-link.html)アプリで登録したelectron-api-demos://プロトコルを起動するリンクを表示している。このコードを実行すると、デフォルトのWebブラウザーが起動し、図2のように表示される。リンクをクリックすると、デフォルトとして登録したアプリが起動することで、リスト13で記述したメッセージボックスが表示される。Webブラウザーのリンクをクリックするとアプリが起動する。リンクをクリックすると、アプリの起動確認ダイアログが表示されて、許可をするとアプリが起動される。このようにアプリ固有のプロトコルを決めることで、アプリ間の連携ができる。メディア(MEDIA)ここでは、PDFへのプリントやスクリーンショットなど、メディア機能を解説している。PDF)Electronでは、Chromiumのプリント機能を使って表示しているコンテンツを印刷できる。リスト16では、表示しているコンテンツをPDF形式にプリントしている。index.js)コードを解説していく。})というコードで、IPCで'print-to-pdf'チャネルにメッセージを受信すると、WebコンテンツをPDFにプリントするという処理になっている。そのチャネル受信時に呼ばれる関数内では、以下のコードが記載されている。PDFプリント処理の部分解説(1)リスト17のコードで、一時ディレクトリのパス名に「print.pdf」というPDFファイル名を連結させた、PDFファイルパスを作成する。PDFプリント処理の部分解説(2)リスト18で、呼び出し元レンダラープロセスのBrowserWindowインスタンスを作成する。PDFプリント処理の部分解説(3)リスト19のコードで、printToPDFメソッドを呼び出してPDFデータを生成する(=PDFへプリントする)。PDFプリント処理の部分解説(4)リスト20で、PDFデータ生成でエラーがあれば例外をスローする。なければ、fs.writeFileメソッドで、PDFデータ(data)をファイルに書き込む。PDFプリント処理の部分解説(5)確認のため、リスト21のコードで、作成したPDFファイルを開く。PDFプリント処理の部分解説(6)さらにリスト22により、IPCの'wrote-pdf'チャネル経由で、呼び出し元のレンダラープロセスにPDFファイル名を通知する。そのレンダラープロセスのコードは、リスト23のとおりだ。index.html)[Print]ボタンがクリックされると、IPCの'print-to-pdf'チャネルでメッセージ送信している。id="pdf-path"></div>要素に表示している。レンダラープロセス側は、[Print]ボタンが押されたらIPCの'print-to-pdf'チャネルでメッセージ送信して、メインプロセスにPDF作成を依頼している。PDFが作成されたらIPCの'wrote-pdf'チャネルでPDFファイル名が渡されるので、それを表示している。印刷処理のポイントは、リスト16のwin.webContents.printToPDFメソッドになるが、そのwebContentsオブジェクトには、レンダラープロセスに表示しているコンテンツに対するメソッドが用意されており、印刷関連以外にもさまざまな機能が提供されているので、ぜひ一通り目を通すことをお勧めする。screenshot)Electronでは、スクリーンキャプチャのためのdesktopCapturerモジュールが提供されている。リスト24とリスト25がそのサンプルコードである。shot]ボタンがクリックされたら、画面キャプチャのデータを取得して、PNG画像ファイルとして一時ディレクトリに保存しているそれではブロックごとに解説していこう。shot]ボタンがクリックされると、オプションを指定して、desktopCapturerモジュールのgetSourcesメソッドを呼び出す。オプションのtypesには、windowかscreenが指定でき、つまりウィンドウか画面かを選択できる。thumbnailSizeには作成する画像サイズを指定する。1)のときに、そのソースの画像を処理する(リスト28)。ちなみに、この例ではスクリーン種別が列挙されたが、先ほどのgetSourcesメソッドのオプションのtypesにwindowのみを指定すると、ウィンドウのタイトルが列挙される。スクリーンキャプチャ処理の部分解説(3)最後にリスト28で、一時フォルダーに「screenshot.png」という名前でファイルを保存する。desktopCapturerのリファレンス(日本語)には、その他にビデオやオーディオのキャプチャについての解説もある。▲メニュー項目の一覧に戻るまとめ今回は、システム情報として実行環境の情報取得やクリップボードへのアクセス、PDFへの出力方法、デバッグ方法について解説した。次回は最終回として、Electronアプリのデバッグと、製品としてリリースするためのパッケージ作成について解説する。Electronの概要から開発を始めて動かすところまでを解説する。Demosで紹介されている、Electronアプリの実装テクニックを紹介。今回はウィンドウ管理とメニューの実装方法を基礎から説明する。Demosで紹介されている、Electronアプリの実装テクニックを紹介。今回はネイティブUIと通信の実装方法を基礎から説明する。Demosで紹介されている、Electronアプリの実装テクニックを紹介。今回はシステムとメディアの実装方法を基礎から説明する。本格的にElectronアプリ開発を進める方に向けて、そのデバッグ方法と、製品リリースのためのパッケージ作成の方法について説明する。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。2023最適なビューへの切り替えを推奨します:スマートフォン用表示に。