検索
特集

Electron 1.0でデスクトップアプリ開発超入門――動作の仕組み、基本的な使い方、セキュリティの懸念点（2/3 ページ）

クロスプラットフォーム向けのデスクトップアプリを開発できるElectronについて、動作の仕組み、基本的な使い方、アプリの作り方、セキュリティの懸念点などを解説します。

[諏訪悠紀，クラスメソッド] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 次のページへ

Explore the Electron APIsの使い方

　アプリは2画面で構成されています。左側には機能の一覧が表示されており、選択した機能の解説とデモが右側に表示されます。例えば「WINDOWS」セクションの「Create and manage windows」は、ウィンドウを表示したり、管理するためのAPIについて解説しています。


「Explore the Electron APIs」の基本画面

　1つの画面につき、幾つかのデモが紹介されています。「Create a new window」は新しいウィンドウを生成し、表示するデモです。デモを実行できる他、サンプルコードが紹介されています。「View Demo」をクリックすると、デモが実行できます。


デモの実行

　試すことのできる機能は、次の通りです。いずれも簡単に試せるので、「どのようなことができるか」を一通り確認しておきましょう。

項目名 紹介されている機能
Create and manage windows ウィンドウの生成や管理
Hadling window crashes and hangs ウィンドウのクラッシュとハングアップのハンドリング
Customize menus アプリケーションメニューとコンテキストメニューのカスタマイズ
Register keyboard shortcuts キーボードショートカットの定義
Open external links or system file manager Webページやフォルダの表示
Use system dialogs ダイアログの表示
Put your app in the tray ツールバーへのアイコンの表示
Communicate between the two processes プロセス間のメッセージの伝達
Get app or user system information システム情報の取得
Copy and paste from the clipboard クリップボードの使用
Launch app from protocol handler URLスキームからの起動
Print to PDF PDF出力
Take a screenshot スクリーンショットの撮影

Electronアプリの開発環境を構築する

　Electronアプリの開発を始めるに当たって、まずは開発環境を構築しましょう。

動作環境

　本稿では、次の環境で動作確認を行いました。

  • MacBook Pro（Retina, 15-inch, Mid 2015）
  • OS X Capitan 10.11.4
  • Node.js 5.10.0

　基本的にはNode.js（npm）がインストールされていれば、npmモジュール「electron-packager」でElectronアプリをビルドできます。開発環境構築のハードルはかなり低いと言っていいでしょう。

　本稿ではMacを使った開発方法に限定して解説しています。WindowsやLinuxでも利用できますが、本記事では割愛します。

　Electronアプリを開発するためには、Node.jsをインストールする必要があります。本記事では「nodebrew」を使ったNode.jsのインストール方法を紹介します。

　nodebrewは、複数のバージョンのNode.jsを管理できるツールです。素のNode.jsをインストールするよりも、バージョンの切り替えを簡単に行えます。Electronが必要とするNode.jsのバージョンは今後変更される可能性があるので、バージョンを簡単に切り替えられるようにしておいた方がいいでしょう。

　本記事では、OS X用のパッケージマネジャー「Homebrew」経由でnodebrewをインストールする方法を紹介します。Homebrewをインストールする方法も掲載していますが、既にインストール済みであれば読み飛ばしてください。

Command Line Toolsのインストール

　まず、Homebrewの動作にはXcodeに付属しているCommand Line Toolsが必要になるので、次のコマンドを実行しインストールしてください。

$ xcode-select --install

Homebrewのインストール

　Command Line Toolsのインストールが終わったら、次のコマンドを実行しHomebrewをインストールしてください。

$ brew install nodebrew
==> Downloading https://github.com/hokaccha/nodebrew/archive/v0.9.5.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v0.9.5
#####################################################################○100.0%
==> /usr/local/Cellar/nodebrew/0.9.5/bin/nodebrew setup_dirs
==> Caveats
Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH
To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
zsh completion has been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
  /usr/local/Cellar/nodebrew/0.9.5: 7 files, 36K, built in 4 seconds

　コンソールに出力されているように、パスの追加が必要です。「.bash_profile」に追加しておきましょう。

$ echo 'PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

nodebrewのインストール

　これでnodebrewが使えるようになりました。Electronに必要とされる「5.10.0」をインストールしましょう。

$ nodebrew install-binary v5.10.0
$ nodebrew use v5.10.0

　これで、Node.jsが利用できるようになりました。次のコマンドを実行し、バージョンを確認しておきましょう。

$ node -v
v5.10.0

注意点

　OS X 10.10.0以上の環境で、nodebrewを使った特定のバージョンのNode.jsをインストールしようとした場合、以下のようなエラーが発生することが確認されています。

$ nodebrew install-binary v5.10.0
Fetching: https://nodejs.org/dist/v5.10.0/node-v5.10.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/XXX/.nodebrew/src/v5.10.0/node-v5.10.0-darwin-x64.tar.gz: No
Warning: such file or directory
 
curl: (23) Failed writing body (0 != 941)
download failed: https://nodejs.org/dist/v5.10.0/node-v5.10.0-darwin-x64.tar.gz

　ディレクトリがないことが原因なので、このエラーが発生した場合は次のコマンドを実行してからインストールするようにしましょう。

$ mkdir ~/.nodebrew/src

Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 次のページへ
ページトップに戻る