10分で分かるかもしれないElectron入門

Electron, Node.js

この記事は最終更新日から1年以上が経過しています。

はじめに

  • 学生時代から考えるとC言語、Java、PHP、AWS、Androidと時代とともに広く浅く学んできた器用貧乏な私ですが、最近では、趣味でElectronを触って見てます。

  • そんな訳で、Electronの学習メモを最低限、人が読んでも理解できる程度にまとめました。

 

Electronとは

396-1.jpg

  • Node.jsとWebの技術(HTML、CSS、JavaScript)で(1)クロスプラットフォーム(2)デスクトップアプリケーションを構築するフレームワークです。

メモ

  • (1) クロスプラットフォーム : Windows、Mac OS X、Linuxなどのように仕様が異なるOS
  • (2) デスクトップアプリケーション : “Atom”、”Slack”のようなアプリケーション

とりあえずインストール

  • 検索すると色々な方法が出てきますが、10分くらいでサクッとやりたい方は、公式HP(2017/1/17現在)のQuick Startの方法が良いかと思います。調べたことのメモと共に記載します。

  • (参考) http://electron.atom.io/

方法

解説

(1) ElectronのQuickStartリポジトリをローカルに複製

  • 複製したディレクトリの中を見てみると以下のようになっています。番号を振った3つをざっくりと見てみます。

[1] index.html

  • 顔部分です。実行すると、最初に表示されるページ。
  • HTMLタグだけだと、Node.jsが動いているかちゃんと確認できないので、”process.~~~”という箇所でNode.jsのグローバルオブジェクト”process”のプロパティ(Node.jsのバージョンとか)を引っ張ってきて、Node.jsがちゃんと動いてることを確認しています。

index.html

[2] main.js

  • 心臓部分です。
  • 2行目でElectronのAPIを使って、BrowserWindowインスタンスを作成しています。名前の通り、アプリのウインドウが作成されるイメージです。
  • あとは、表示させるページである”index.html”を読み込んだり、イベントハンドラを記述しています。
  • (参考) https://github.com/electron/electron/blob/master/docs/api/browser-window.md

main.js

[3] package.json

  • 体の設計図という意味でのDNAみたいなイメージです(この辺から無理やり感が。。。)。
  • どちらかというとNode.jsの話なので、重要なところだけ説明します。
  • name,version : 必須のパラメータ。意味は英語の通り。
  • main : パッケージの中で最初に呼ばれるモジュールのID。

package.json

(2) 複製したディレクトリに移動

  • 解説は省略

(3) モジュールのインストール、起動

  • これで、Electronアプリが開きます。

とりあえず寿司🍣を流してみます

396-2.jpg

やってみた感想

◎ 良い

  • サクッとやれるのが、良いです。HTML、CSS、JavaScriptの知識がそのまま使えるっていうののが良いです。ただ、少しはNode.jsの学習は必要そうです。というか、「Node.jsでできること(得意なこと)」 + 「webでできること」 + 「デスクトップ上でやりたいこと(今までやりにくかったところ)」っていう組み合わせのアイディア次第で面白くなるかが決まりそう。

  • 試しにWindows用にコンパイルしてみたけど、コマンド一発なので、楽でした。

  • ブラウザに依存しないため(Electron自体にChromiumブラウザが内蔵されている)、表示崩れとかないってのはまぁまぁメリットかと思います。

  • パッと思いつくのは社内用のツールとか、ローカルのファイルをごにょごにょするのには使えそうです。

△ 不安

  • 「あれ?これ結局、なんだかんだ言ってWindows用の改修必要じゃない?」とかなった時、絶望しそうです。この辺はガッツリと触った人に聞いてみたいところです。

この記事を書いた人

氏川博光

1989年北海道生まれ。レコチョクでは主にWebサービスの運用/保守やAndroidアプリケーションの開発を担当しています。最近はReact.js、Electronなどにも興味があります。音楽は、楽器を弾くことも、聴くことも大好きです。お手柔らかによろしくお願い致します。

最近書いた記事

Electron, Node.js