Electronで開発を始める(サンプルアプリ起動まで)

Electronを始める

デスクトップアプリの開発にElectronを使ってみたい!

ということで、開発環境の構築からアプリ起動までやってみたのでそのメモ。

Electronの開発環境

Electron Fiddle Logo

開発環境は色々と選べるが、まずは勉強のために、公式で公開されているアプリの「Electron Fiddle」を使ってみる。

あくまでスタートアップ用のアプリっぽいけど、パッケージ化もできるし、Gistへの公開とかも出来るみたい。

正直Fiddleだけで十分じゃない?って思うんだけど、出来ないことも色々あるようだし、公式にも「Fiddle で始めて、続きはどこでも」と、他のエディタの利用を推奨してる感じなので、慣れてきたらそのようにする方がいいかもしれない。

Electron Fiddleのインストール

ごちゃごちゃ考えるのは実際使ってみてから。
まずは、GitHubからFiddleをダウンロードする。

electron/fiddle – GitHub
https://github.com/electron/fiddle/releases/latest

Fiddleのダウンロード

Assetsから、OS環境に合わせたファイルをクリックしてダウンロードする。

ここではWindows 10で実行するため、「electron-fiddle-0.14.0-x64-setup.exe」を選んだ。

Fiddleアイコン

ダウンロードしたファイルをダブルクリックすると、インストールウィザードなどは表示されず、いきなりエディタが開く。

Electron Fiddle起動画面

インストールウィザードは出ないけど、デスクトップスタートメニューにはショートカットが登録されていた。

これでインストールは完了のようだ。

Electron Fiddle チュートリアル

表示されたエディタ画面を見てみると、「Hey There!」とメッセージボックスが表示されている。
翻訳してみると↓の通り。

Electron Fiddle へようこそ!
初めてご利用の場合は、機能の簡単なツアーをご紹介します。
今後このダイアログは表示されませんが、Helpメニューでいつでもツアーを見つけることができます。
[わかりました] [ツアーを見る]

チュートリアルの紹介だった。
せっかくなので見てみる。

Electron Fiddleツアー01

Fiddle Editors

Electron Fiddle を使用すると、Electronで小さな実験やミニアプリを作成できます。 各Fiddle は、メインスクリプト、レンダラースクリプト、プリロードスクリプトの少なくとも3つのファイルと、HTMLファイルで構成されます。 モジュールをrequire()すると、Fiddleはそれを自動的にインストールします。 また、Electron モジュールのオートコンプリート情報も自動的に提供されます。

説明文中、どうやらアプリの単位をFiddle(フィドル)と呼んでいるみたい。
以降、その解釈で読み進めていく。

Electron Fiddleツアー02

Choose an Electron Version

Electron Fiddle はリリースされたすべてのElectronバージョンを認識し、バックグラウンドでバージョンを自動的にダウンロードします。 設定を開いて利用可能なすべてのバージョンを確認し、以前にダウンロードしたバージョンを削除します。

Electron Fiddleツアー03

Run Your Fiddle

このボタンを押して、Fiddleを開始してみてください。

Electron Fiddleツアー04

Share Your Fiddle

あなたが作ったもののように? FiddleをパブリックGitHub Gistとして保存し、他のユーザーがURLをアドレスバーに貼り付けることでロードできるようにすることができます。 Electron Fiddleがない場合は、GitHubから直接コードを確認してダウンロードできます。 Fiddleをスタンドアロンバイナリとして、またはTasksメニューからインストーラとしてパッケージ化することもできます。

Electron Fiddleツアー05

Getting Started With Electron?

Electron Fiddleのツアーは終了しましたが、Electronを初めて使用する場合は、その基本を紹介できます。興味がある? [大丈夫!] [Electronの基本]

ここもせっかくなので、「Electron Basics」をクリックしてみる。

Electron Fiddleツアー06

Main Script

すべてのElectronアプリは、Node.jsアプリケーションの起動方法と非常によく似たメインスクリプトで始まります。メインスクリプトは「メインプロセス」で実行されます。ユーザーインターフェイスを表示するために、メインプロセスはレンダラープロセスを作成します。通常、エレクトロンはBrowserWindowを呼び出すウィンドウの形式で作成します。 開始するには、メインプロセスがNode.jsプロセスのようであると仮定します。 ElectronにあるすべてのAPIと機能には、electronモジュールを介してアクセスできます。electronモジュールは、他のNode.jsモジュールと同様に必要な場合があります。 デフォルトのフィドルは、新しいBrowserWindowを作成し、HTMLファイルをロードします。

Electron Fiddleツアー07

HTML

デフォルトのフィドルでは、このHTMLファイルはBrowserWindowにロードされます。ブラウザで動作するすべてのHTML、CSS、またはJavaScriptもここで動作します。さらに、ElectronではNode.jsコードを実行できます。 <script />タグをよく見て、Node.jsのようにrequire()を呼び出す方法に注目してください。

Electron Fiddleツアー08

Renderer Script

これは、HTMLファイルから必要なスクリプトです。ここでは、Node.jsで機能するものは何でも、ブラウザーで機能するものは何でも実行できます。 ちなみに、ここでnpmモジュールを使用する場合は、必要なだけです。 Electron Fiddleは、モジュールを要求したことを自動的に検出し、Fiddleを実行するとすぐにインストールします。

どうやらこれで本当にチュートリアルは終わりらしい。

あれ?プリロードスクリプトの説明は!?

若干の疑問を抱きつつ、ツアーを終えた。

Electron Fiddle を触ってみる

エンジニアは動かしてなんぼなので、とりあえず「Run」をクリックしてみる。

Electron Fiddleで最初のRun!

何万回見てきたか分からない見慣れた文字「Hello World!」が表示された。

初期で表示されているのは、main.jsrenderer.jsindex.htmlの3つ。
これらのファイルだけで、この画面は表示されている。

細かい説明はまた今度!

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください