Electron.NET[予定地]

Electronの情報を集めていく予定地です.
環境は「Ubuntu17.10 / .NET Core v2 / ElectronNET v0.0.7」となります。

ElectronNET Demoを動かす

github : ElectronNET.Demo

環境としてnode.jsおよびnpmがシステムに導入済みとします。

• node.js
  • v9.0.0
• npm
  • 5.5.1

ソースコード取得

~/Projects/Electron$ git clone https://github.com/ElectronNET/electron.net-api-demos.git Electron.Demo
Cloning into 'Electron.Demo'...
remote: Counting objects: 247, done.
remote: Compressing objects: 100% (172/172), done.
remote: Total 247 (delta 53), reused 244 (delta 50), pack-reused 0
Receiving objects: 100% (247/247), 3.23 MiB | 25.00 KiB/s, done.
Resolving deltas: 100% (53/53), done.
~/Projects/Electron/Electron.Demo$ ls
ElectronNET-API-Demos  ElectronNET-API-Demos.sln  LICENSE  README.md

ビルドログ

Demoアプリの手順通りにコマンドを、ElectronNET-API-Demosフォルダ内で実行します。

1. dotnet restore
2. dotnet electronize start

パッケージリストア（ログ）

~/Projects/Electron/Electron.Demo$ cd ElectronNET-API-Demos/
~/Projects/Electron/Electron.Demo/ElectronNET-API-Demos$ dotnet restore
  Restoring packages for /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/ElectronNET-API-Demos.csproj...
  Restoring packages for /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/ElectronNET-API-Demos.csproj...
  Restore completed in 2.51 sec for /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/ElectronNET-API-Demos.csproj.
  Installing ElectronNET.CLI 0.0.7.
  Restore completed in 2.75 sec for /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/ElectronNET-API-Demos.csproj.
  Installing System.Net.WebHeaderCollection 4.3.0.
  Installing System.Net.Requests 4.3.0.
  Installing EngineIoClientDotNet 1.0.3.
  Installing SuperSocket.ClientEngine.Core 0.8.0.13.
  Installing WebSocket4Net 0.15.0.
  Installing SocketIoClientDotNet 1.0.3.
  Installing ElectronNET.API 0.0.6.
  Generating MSBuild file /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/obj/ElectronNET-API-Demos.csproj.nuget.g.props.
  Generating MSBuild file /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/obj/ElectronNET-API-Demos.csproj.nuget.g.targets.
  Restore completed in 14.57 sec for /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/ElectronNET-API-Demos.csproj.

ElectronDemoアプリ起動

最初の1回目は、Electronパッケージをインターネットから取得するため時間がかかります。

~/Projects/Electron/Electron.Demo/ElectronNET-API-Demos$ dotnet electronize start

Start Electron Desktop Application...
.NET Core 向け Microsoft (R) Build Engine バージョン 15.4.8.50001
Copyright (C) Microsoft Corporation.All rights reserved.

  ElectronNET-API-Demos -> /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/bin/Debug/netcoreapp2.0/linux-x64/ElectronNET-API-Demos.dll
  ElectronNET-API-Demos -> /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/obj/Host/bin/


node_modules missing in: /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/obj/Host/node_modules
Start npm install...
npm WARN deprecated @types/electron@1.6.10: This is a stub types definition for electron (https://github.com/electron/electron). electron provides its own type definitions, so you don't need @types/electron installed!

> uws@0.14.5 install /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/obj/Host/node_modules/uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0


> electron@1.7.9 postinstall /home/katachi/Projects/Electron/Electron.Demo/ElectronNET-API-Demos/obj/Host/node_modules/electron
> node install.js

npm WARN ElectronNET.Host@1.0.0 No description
npm WARN ElectronNET.Host@1.0.0 No repository field.

added 195 packages in 865.388s

Electronのスケルトンプロジェクトを動かす

VSCodeを使用してElectronのスケルトンプロジェクトを動かすまでの手順を記述しています。
デモアプリが動作する環境ならば問題なく動作します。

• katachi/Sample.Electron

1. スケルトンプロジェクト(Electron.Sample)の作成
2. 依存パッケージおよびビルドツールを定義
3. ElectronAPIに起動パラメータ(UseElectron)を設定
4. Electronウィンドウ表示コードを追加
5. Electronのビルドと起動

スケルトンプロジェクトの作成

まずはdotnet new mvcコマンドでAsp.NETのプロジェクトファイルを作成する。

nパラメータとoパラメータを使用していますが、これは作成するプロジェクトファイル名と プロジェクトを作成するサブディレクトリを指定しています。

~/Projects/Electron/Sample.Electron$ dotnet new mvc -n Sample.Electron.App -o Sample.Electron.App
The template "ASP.NET Core Web App (Model-View-Controller)" was created successfully.
This template contains technologies from parties other than Microsoft, see https://aka.ms/template-3pn for details.

Processing post-creation actions...
Running 'dotnet restore' on Sample.Electron.App/Sample.Electron.App.csproj...
  Restoring packages for /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/Sample.Electron.App.csproj...
  Restore completed in 38.1 ms for /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/Sample.Electron.App.csproj.
  Generating MSBuild file /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/obj/Sample.Electron.App.csproj.nuget.g.props.
  Generating MSBuild file /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/obj/Sample.Electron.App.csproj.nuget.g.targets.
  Restore completed in 537.34 ms for /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/Sample.Electron.App.csproj.

Restore succeeded.

依存パッケージおよびビルドツールを定義

作成したSample.Electron.App.csprojを開き、依存パッケージとビルドツールを定義します。

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
+    <PackageReference Include="ElectronNET.API" Version="0.0.7" />
  </ItemGroup>

  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
+    <DotNetCliToolReference Include="ElectronNET.CLI" Version="*" />
  </ItemGroup>

</Project>

ElectronAPIに起動パラメータ(UseElectron)を設定

Program.csの21行目付近にElectronAPIに起動パラメータを設定します。
また、ファイルの先頭にusing ElectronNET.API;を追加します。

public static IWebHost BuildWebHost(string[] args) =>
    WebHost.CreateDefaultBuilder(args)
+        .UseElectron(args)
        .UseStartup<Startup>()
        .Build();

Electronウィンドウ表示コードを追加

Startup.csの48行目に下記のコードを追加します。

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
    }

    app.UseStaticFiles();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });

+    Task.Run(async () => await ElectronNET.API.Electron.WindowManager.CreateWindowAsync());
}

Electronのビルドと起動

最後にVSCodeのターミナル画面から、下記のコマンドを順番に実行します。

• dotnet restore
• dotnet electronize init
• dotnet electronize start

コマンドログは下記の通りとなります。

~/Projects/Electron/Sample.Electron/Sample.Electron.App$ dotnet restore
  Restore completed in 41.77 ms for /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/Sample.Electron.App.csproj.
  Restore completed in 44.8 ms for /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/Sample.Electron.App.csproj.
  Restoring packages for /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/Sample.Electron.App.csproj...
  Restore completed in 505.06 ms for /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/Sample.Electron.App.csproj.
~/Projects/Electron/Sample.Electron/Sample.Electron.App$ dotnet electronize init
Adding our config file to your project...
Config file already in your project.
~/Projects/Electron/Sample.Electron/Sample.Electron.App$ dotnet electronize start
Start Electron Desktop Application...
Microsoft (R) Build Engine version 15.4.8.50001 for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.

  Sample.Electron.App -> /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/bin/Debug/netcoreapp2.0/linux-x64/Sample.Electron.App.dll
  Sample.Electron.App -> /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/obj/Host/bin/

node_modules missing in: /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/obj/Host/node_modules
Start npm install...

> uws@0.14.5 install /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/obj/Host/node_modules/uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0


> electron@1.7.8 postinstall /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/obj/Host/node_modules/electron
> node install.js

npm WARN ElectronNET.Host@1.0.0 No description
npm WARN ElectronNET.Host@1.0.0 No repository field.

added 195 packages in 11.974s


Invoke electron - in dir: /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/obj/Host/node_modules/.bin
/usr/share/themes/Ambiance/gtk-2.0/apps/mate-panel.rc:30: error: invalid string constant "murrine-scrollbar", expected valid string constant
stdout: Use Electron Port: 8002

ASP.NET Core Application connected...
stdout: Hosting environment: Production
Content root path: /home/katachi/Projects/Electron/Sample.Electron/Sample.Electron.App/obj/Host/bin/

stdout: Now listening on: http://0.0.0.0:8003
Application started. Press Ctrl+C to shut down.

stdout: BridgeConnector connected!

下記のような画面が表示されれば成功です。

パッケージ管理にbowerを使う

ElectronNETはASP.NET Core上に構築しているためパッケージ管理方法はASP.NET Coreと同じです。

bowerをインストールする

システムにbowerがインストールされていない場合は、先にbowerをインストールします。

npm install -g bower

bower設定ファイル

プロジェクトのルートフォルダにbower設定ファイル（.bowerrc）を作成します。
ElectronNETではプロジェクトのルートフォルダ内にある「wwwroot」フォルダをHtmlのベースフォルダに指定しています。

bowerのデフォルト設定はbower_componentsフォルダなので、そのままの設定ではbowerパッケージを参照できません。そこで、bower設定ファイルを作成し、bowerパッケージのインストール先フォルダの指定を行います。

{
   'directory': "wwwroot/lib"
}

bowerパッケージインストール方法

例として、SemanticsUIをインストールします。

bower.jsonの依存関係プロパティにSemanticsUIのパッケージ名を追記します。
(別の方法として、直接bower.jsonを編集する代わりにbowerコマンドを実行してパッケージをインストールする方法もあります)

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.7",
    "jquery": "2.2.0",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.6",
+    "semantic": "semantic-ui#^2.2.13"
  }
}

続いて、bower.jsonと同じディレクトリでbowerインストールコマンド(bower install)を実行します。
bowerが実行され、「wwwroot/lib」フォルダ内にSemanticUIのフォルダ(semantic)が作成されます。

bowerコマンドの詳しい使い方はBowerまとめ（概要・導入・コマンド一覧）を参照してください。

Appendix

ubuntu17に最新のStable版Nodejsを入れる方法

nodejsの導入にaptを使っている場合は、この方法は使えません

ElectronNETのDemoを動かすために「nodejs(v8.x)」が必要でしたので、システムのnodejsをアップデートします。

下記の通り、システムにはnodejs(v6.12)が入っていますが、これを最新Stable版のnodejs(v9.0)にアップデートします。

~$ nodejs -v
v6.12.0
~$ sudo npm cache clean -f
npm WARN using --force I sure hope you know what you are doing.
~$ sudo npm install -g n
/usr/bin/n -> /usr/lib/node_modules/n/bin/n
+ n@2.1.8
added 1 package in 1.072s
~$ sudo n stable

     install : node-v9.0.0
       mkdir : /usr/local/n/versions/node/9.0.0
       fetch : https://nodejs.org/dist/v9.0.0/node-v9.0.0-linux-x64.tar.gz
######################################################################## 100.0%
   installed : v9.0.0
~$ sudo ln -sf /usr/local/n/versions/node/9.0.0/bin/node /usr/bin/nodejs
~$ nodejs -v
v9.0.0

Proxy環境

Proxy環境下ではnpmが外部に出ていけないためElectronパッケージの取得に失敗します。
下記サイトを参考に、npmにProxyサーバの設定を行うことでnpmが外部にアクセスすることができるようになります。

[Electron] プロキシ環境下でUbuntuにElectronを導入する方法