CA Reward

Tech Blog

Tech Blogトップに戻る

javascriptでマルチプラットフォームのデスクトップアプリを作る

2017.03.08

  • このエントリーをはてなブックマークに追加
  • Pocket
菅原雅広
菅原雅広フロントエンドエンジニア

こんにちは。フロントエンジニアの菅原です。 今回は、javascriptで手軽にクロスプラットフォームアプリを制作できる「Electron」を使ってアプリを作ってみます。

Electronとは

Electronは公式サイトを開くと大きく「Build cross platform desktop apps with JavaScript, HTML, and CSS」と書かれています。 書かれている通りなのですが、JavaScriptとHTMLとCSSでマルチプラットフォーム対応のデスクトップアプリを作る事ができます。

JavaScriptとHTMLとCSSは、Webサイトを作るときの基本的な組み合わせですので、Webサイトを触ったことのある人なら誰でも簡単に始める事ができます。

どんなアプリが作れるのか

利用例としては、webエンジニアに人気のエディタ「Atom」が良い例だと思います。

Atomを起動するとエディタ画面が表示され、複数ファイルをタブで開いたり、メニューから検索や置換もあります。この何の変哲もないエディタが、実はWebサイトと同じhtml/css/javascriptで動作しているのです。

試しに[Command + option + I]を押すと、通常のchromeと同様にデベロッパーツールが開きます。ここでcssを調整すれば文字色や背景色を始め、通常のwebサイトのようにデザインが変わります。コンソールでwindowと入力すれば、見慣れたwindowオブジェクトが表示されます。これでAtomがhtml/css/javascriptで動作しているのが確認できたと思います。エディタなのにこのような操作ができるので、始めて触れた時は驚きよりも不思議な感覚になりました。

環境構築

実際に簡単なアプリを作るために、環境を作ります。私はmacを使用していますので、windowsの方は適所読み替えて下さい。

nodejs

公式サイトからダウンロードします。LTS版と最新版がありますが、必要に応じて選べば良いと思います。
プロジェクト毎に特定のバージョンを使いたい場合は、nvm等を使ってインストールしてください。

Electron

npmを使いインストールします。

HelloWorld

準備

作業用ディレクトリを作りnpm initします。npm initでいくつか質問されますが、すべてエンターで大丈夫です。

次のようなpackage.jsonが生成されてます。

html / javascript作成

あとは必要なhtml/javascriptを用意します。 ここでは、公式サイトを参考に以下のデータを用意しました。

index.html

index.js

実行

実際に動作させるには作業ディレクトリでelectronコマンドを叩きます。

画像のウインドウが起動すれば成功です。

画面上の文字を変更する

表示した「HelloWorld」をjavascriptで書き換えてみます。

新しくhelloworld.jsを作成し、次の1行を書きます。

このjavascriptを読み込むには、index.htmlのbody内最後にscriptタグを追加します。

再度起動すると画像のようにjavascriptで文字を変更されます。 文字を変更したjavascriptにElectron固有の記述はなく、通常のjavascriptであることが分かります。ここまでくれば、あとは作りたいアプリに必要な動きを作っていくだけです。 htmlやcssも特殊な記述はなく、例えば画像を表示したい場合はimgタグを書くだけです。文字をセンタリングしたければtext-align: center;を書くだけです。 もちろんjQueryをはじめとするライブラリも通常通り利用できます。

このように、新しい文法を覚えることなく、これまで通りのjavascriptでアプリを構築していけるのがElectronの大きな魅力だと思います。

データの保存

アプリで何かデータを記録するには、主に3つの方法があります。

  • ローカルストレージに保存する
  • ファイルに保存する
  • データベースに保存する

ここではjavascriptから簡単に扱えるローカルストレージに保存します。 テキストのインプットと保存ボタン・読み込みボタンを設置し、以下の動作をさせます。

  1. 「保存」ボタンを押すとインプットの内容をローカルストレージに保存
  2. 「読み込み」ボタンを押すとローカルストレージの値をインプットに挿入

ローカルストレージはlocalStorage.setItemlocalStorage.getItemで扱います。

index.html

localStorage.js

何かをテキストを入力し保存ボタンを押した後、アプリを再起動して読み込みボタンを押すと、保存したテキストがインプットに再現されます。

よりアプリらしく

Electronはnodejs上で動いていますので、ブラウザアプリと比較し以下の事ができます。

  • ローカルファイルの操作
  • データベースを使った情報操作
  • クロスドメインを気にしないwebのクローリング・スクレイピングなど

分かりやすいものを例として上げましたが、javascriptの制限に苦しんでいた人は、これだけでも妄想が広がるのではないでしょうか。npmで公開されているパッケージは多岐にわたりますので、欲しい機能のパッケージを導入すれば、実装にかかる時間を節約もできます。

また、angularjsを使えば簡単に豪華なSPAを作れますし、jQueryUIBootstrapなどを使えばデザイナー不在でも整ったアプリを作りやすいと思います。

配布用パッケージ作成

作ったアプリは単体で起動できるファイルで出力可能です。macなら.appファイル、windowsなら.exeファイルを作成できます(macでwindows用の.exeファイルを作ることもできますが、別途ソフトが必要になるため、ここでは説明していません)

作成するにはelectron-packagerを利用しますので、npmでインストールします。

インストール

作成コマンド

オプションについて

  • .: ディレクトリ指定
  • sample: 実行ファイル名
  • --platform: macの場合は"darwin"、windowsの場合は"win32"を指定する
  • --arch=x64: 64bit指定
  • --electron-version: electron -vで確認したバージョン

成功するとこのようにファイルが生成され、sampleをダブルクリックすると先ほど作成したアプリが起動します。sampleを配布すれば、nodejs等のインストールされていないパソコンでも起動できます。

まとめ

Electronを使えば本当に簡単にマルチプラットフォームなアプリを作る事ができます。実行ファイルで配布する事もできますので、今後利用シーンは増えていくのではないでしょうか。

個人的に感じているElectronの手軽さが発揮される利用方法は、社内やプロジェクト単位の簡単なツール作成じゃないかなと思います。大掛かりなアプリ制作を考えると、どうしてもjavascriptの速度等に不満が出てきますので、それよりも、手軽さに目を向けて業務を便利にするツールをサクッと作っていくのに向いていると思います。面倒なGUIツールが手軽に作れるので、エンジニア以外の人向けのツールもすぐに作れます。 興味のある方はぜひ試してみてください。

菅原雅広
菅原雅広フロントエンドエンジニア