実際にアプリケーションを作っていくにあたって、以下のように進めていきます。Electron環境を整えるnode.jsのインストールElectronはnode.js上で動作するため、まずはnode.jsの環境を整えます。ダウンロード:まずはnode.jsをダウンロードします。展開:好きなディレクトリで展開します。シンボリックリンクを貼る:名前が長いので、短くわかりやすくします。PATHを通すこのままだと今いるディレクトリでしかnode.jsを使えないので、どこでも使えるようにパスを通します。.bashrcに以下を記載します。PATH=$NODE_HOME/bin:$PATH記載したら適用してください。以上でnode.jsのインストールは終わりです。動作確認をしてみます。--versionどちらもバージョンが表示されれば成功です。electron-prebuiltこれで終わりです。2.Electronのプロジェクトを作ってみるElectronが実行できるプロジェクトを作成します。・作業ディレクトリを作成する・node.js用に初期化する・Electronの設定をするとなります。以下のコマンドを実行します。node.js用の初期化すると、以下のような階層になったかと思います。hello_world└package.jsonこのpackage.jsonの内容が、node.jsで使用する内容となります。ここに、Electronの実行に必要なindex.htmlとmain.jsを追加して、以下のような階層にします。hello_world├index.html├main.js└package.jsonindex.htmlは内容、main.jsは画面周りの設定になります。それぞれ、以下のサンプルコードを書いてみてください。"ISC"}この状態で実行準備が整いました。以下のコマンドで実行です。Worldと表示されましたか?3.Angular2を使ってみる先ほど作成したElectronの内容を拡張したいと思います。WorldをAngular2のコンポーネントを用いて表示させたいと思います。Angular2を使う上での流れは次の通りです。(1).HTMLを書き換える。(2).componentを作成する。(3).NgModuleに1で作成したコンポーネントを登録する。(4).index.tsにエントリポイントを記述する。(5).コンパイルする。Angular2はにコンパイルするとJavascriptを生成する言語を用いる必要があるので、TypeScriptを使ってみます。今回導入したコンパイラはbrowserifyです。DEPENDENCYと出ているものは、足りていないパッケージがあったり、バージョンがずれているということです。個別で同様にインストールしてください。今回の実装当初、以下のような表示がでました。rxjsとzone.jsはバージョンを変更して再度インストールしました。上記のインストールの方には修正してあります。コンパイルの設定をするpackage.jsonを以下のように書き換えます。]}(1).HTMLを書き換える。先ほどのindex.htmlを次のように書き換えてください。</body></html>この状態で実行してみてください。Worldとは表示されないと思います。Worldと表示されるようにしたいと思います。src=”./bundle.js”></script>でコンパイルした内容を読み込むことです。(2).componentを作成する。ファイル名をapp.component.tsとする以下の内容のTypeScriptファイルを作成してください。{}これはAppComponentというコンポーネントです。selectorで「hello-world」と指定しているので、HTML内で「<hello-world></hello-world>」と呼び出すことができるようになりました。World</h1>」となります。(3).NgModuleに2で作成したコンポーネントを登録する。app.module.tsというファイルを作成し、以下のように記述します。{}基本的には決まり文句なので、注目すべきはポイント1~3の3箇所です。Worldを表示するコンポーネントであるAppComponentについての指示を記述します。importで読み込むコンポーネント名とそのソースの場所を指定しています。次にNgModule内のdeclarationsで実際に使用するコンポーネントを指定します。bootstrapでアプリケーションのエントリポイントとなるコンポーネントを指定します。これらは、全てまとめて「AppModule」というモジュールとして管理されることになります。(4).index.tsにエントリポイントを記述する。index.tsというファイルを作成し、以下のように記述します。ポイント2やはり、ほとんど決まり文句ですが、注目すべきは「AppModule」を指定しているところです。importで読み込むモジュールを指定し、platformBrowserDynamic().bootstrapModule(AppModule)でエントリポイントを登録します。この段階で作業ディレクトリ内はこのような状態になっていると思います。(5).コンパイルする。この状態でコンパイルしてみます。buildごそっとファイルが増えたと思います。これでTypeScriptで書かれたファイルがJavascriptに変換されたので、実行してみましょう。World」に変わったでしょうか?おまけ:実行ファイルを生成してみる。簡単に配布ファイルを生成できるツールを導入します。electron-packager次に、package.jsonに以下を書き加えます。プラットフォームを指定します。今回はlinuxです。},以下のコマンドで実行します。package-buildすると、ディレクトリ内に新しくフォルダーができたと思います。内部に実行ファイルがありますので、ダブルクリックで実行してみてください。4.まとめ以上のようにElectronを用いると、デスクトップアプリの基本的な部分に関してはとても簡単に作れました。途中Angular2を使うことで多少複雑にはなりましたが、基礎の書き方さえ理解できれば応用が利く技術だと思います。Web技術だけで作れるというのもあって、比較的思い立ったらすぐに手を出しやすいというのも魅力的です。日ごろのふとした瞬間の思いつきをちょっとした時間で形にできるので、ぜひ使ってみてください。MaterialsEN。