More than 5 years have passed since last update.

F#でもElectronNET.APIを使うためのHOW TO

Last updated at 2020-04-26Posted at 2020-04-26

はじめに

C# と ASP.NET Core MVC/Blazor と ElectronNET.API を利用することで簡単にクロスプラットフォームGUIアプリケーションを作成することができます.

それを F# でもやろう！という話です.

ところで、F# でも ASP.NET Core MVC が使えることを知っているでしょうか？

F# は何かと Visual Studio からの扱いが不遇なため, 利用できないと思っている方も多いと思います.

例えば以下は C# から ASP.NET Core Webアプリケーション を作成する際の画面ですが,

F# 側では以下のようになっています.

Visual Studio からしかプロジェクトを作成したことがない方はこの画面だけしか見る機会がないため, F# では ASP.NET Core MVC を利用できないと思ってしまうのも無理はないと思います.

しかし dotnet コマンドを利用してプロジェクト作成をしている方は F# でも ASP.NET Core MVC が利用できることを把握しているかもしれません.

もしくは, Visual Studio からしかプロジェクトを作成したことがない方でも, F# でWebアプリケーションを作成したくて検索した結果, 利用できるという事実を知った方もいるかと思います.

dotnet のリファレンスを見れば利用できることは自明なのですが, --help を利用することでも知ることができます.

というわけで, 今回は F# + ASP.NET Core MVC + ElectronNET.API を利用して, クロスプラットフォームGUIアプリケーション用プロジェクトの作成方法について紹介していきたいと思います.

プロジェクト作成方法

今回は PowerShell と Visual Studio Code(= VSCode) を利用していきます.

Windows の方は cmd や Windows Terminal でも問題ありませんし, Mac や Linux を利用している方は zsh や bash を利用しても問題ありません.

1. 今回の環境

	名称
OS	Windows 10 Pro (x64)
Editor	Visual Studio Code
.NET	.NET Core 3.1.201

2. `ElectronNET.CLI` ツールをインストールする

powershell

dotnet tool install ElectronNET.CLI -g

3. `ASP.NET Core MVC` プロジェクトを作成する

適当なワーキングディレクトリに移動する
powershell
```
cd D:/work
```
dotnet new コマンドを利用して, ASP.NET Core MVC プロジェクトを作成する
powershell
```
dotnet new mvc -lang=F# -o=FsharpElectronApp
```
作成したプロジェクトのディレクトリに移動する
powershell
```
cd ./FsharpElectronApp
```
dotnet add コマンドを利用して, ElectronNET.API を導入する
powershell
```
dotnet add package ElectronNET.API
```
Visual Studio Code で作成したプロジェクトを開く
powershell
```
code .
```
FsharpElectronApp.fsproj を FsharpElectronApp.csproj に書き換える

🚨この工程を忘れると次の作業が失敗するので必ず行うこと🚨
electronize init でプロジェクトの初期化を行う
powershell
```
electronize init
```
FsharpElectronApp.csproj を FsharpElectronApp.fsproj に書き戻す

🚧この工程を忘れるとプロジェクトのビルドが失敗するので忘れず行うこと🚧
dotnet restore を実行する
powershell
```
dotnet restore
```

4. プロジェクトを実行する

Program.fs を修正する

Program.fs

open ElectronNET.API    // <-- この行を追加

// （中略）

let CreateHostBuilder args =
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(fun webBuilder ->
            webBuilder.UseElectron args |> ignore    // <-- この行を追加
            webBuilder.UseStartup<Startup>() |> ignore)

Startup.fs を修正する

Startup.fs

open ElectronNET.API    // <-- この行を追加

// （中略）

member this.Configure(app: IApplicationBuilder, env: IWebHostEnvironment) =

    //（中略）

    Electron.WindowManager.CreateWindowAsync() |> ignore    // <-- この行を追加