キャスレーコンサルティング 技術ブログ

F#でWindowsアプリを作ってみた

Posted on 12月 13, 2017

みなさん、こんにちは、キャスレーコンサルティングSI(システム・インテグレーション)部の上條です。

今回は、Visual StudioからF#でWindowsアプリケーションを作成してみたいと思います。
使用するVisual Studioは、Visual Studio 2017 Communityになります。

全体の流れ

  1. F#インストール
  2. プロジェクトの作成
  3. FsXAMLのインストール
  4. プロジェクトの設定変更
  5. TestWindow.xamlの作成
  6. Program.fsの修正

1.F#のインストール

Visual Studio Instllerから、F#をインストールします。

  1. Visual Studio Instllerを起動します。
    F#_1-1
  2. 「詳細」>「変更」をクリックします。
    F#_1-2
  3. 「個別のコンポーネント」>「開発作業」>「F#言語サポート」チェックし、変更ボタンをクリックします。
    F#_1-3

2.プロジェクトの作成

Visual Studio 2017から、F#のコンソールアプリケーションを作成します。

現時点では、F#のWindowsアプリケーションのプロジェクトが、作成できないため
一旦、コンソールアプリケーションで作成し、その後Windowsアプリケーションに変更します。

  1. Visual Studio 2017 を起動します。
  2. 「ファイル」>「新規作成」>「プロジェクト」をクリックします。
    F#_2-2_修正
  3. 「開発コンポーネント」>「開発作業」>「F#言語サポート」チェックし、変更ボタンをクリックします。
    F#_2-2_修正
  4. VisualF#を選択し、その後コンソールアプリケーションを選択し、
    プロジェクト名に「HelloWorld」と入力し、OKボタンをクリックします。
    F#_2-3
  5. 以下のような、ソリューションが作成されます。
    F#_2-3_2_修正

3.FsXAMLのインストール

F#でXAMLを使用できるように、FsXAML をインストールします。

  1. 「ツール」>「NuGetパッケージマネージャ」>「ソリューションのNuGetパッケージの管理」をクリックします。
    F#_3-1_修正
  2. 「参照」をクリックし、「FsXAML」と入力します。
    F#_3-2_修正
  3. 検索結果から「FsXAML」を選択し、検索結果の右側に表示されているプロジェクトをチェックし、
    インストールします。
    F#_3-3_修正
  4. ソリューションを変更するので、「OK」ボタンをクリックします。
    F#_3-4
  5. 参照設定に、FsXMALへの参照が追加されます。
    F#_3-5_修正

4.プロジェクトの設定変更

コンソールアプリケーションから、Windowsアプリケーションに変更します。

  1. プロジェクトを選択し、「右クリック」>「プロパティ」をクリックします。
  2. 「アプリケーション」>「出力の種類」を、「Windowsアプリケーション」に変更します。
    F#_4-2_修正

5.TestWindow.Xamlの作成

起動時に表示する、Window(TestWindow.Xaml)を追加し、ボタンを1つ配置します。

  1. プロジェクトをクリックし、「右クリック」>「追加」>「新しい項目」をクリックします。
  2. テキストファイルをクリックし、名前を「TestWindow.xaml」と入力します。
    F#_5-2
  3. 以下の画面が、表示されます。
    F#_5-3_修正
  4. XAMLの入力欄に、以下のコードを貼り付けます。
    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TestWindow" Height="350" Width="525">
    	<StackPanel HorizontalAlignment="Left" Height="171" Margin="150,130,0,0" VerticalAlignment="Top" Width="213">
    		<Button x:Name="TestButton" Height="42" Content="Button" RenderTransformOrigin="0.5,0.5" />
    	</StackPanel>
    </Window>
    
  5. Windowsの表示が、以下のようになります。
    F#_5-5_修正

6.Program.fsの修正

Program.fsを修正し、TestWindowして、ボタンを押下すると、メッセージボックスを表示するようにします。

  1. プロジェクトから、「Program.fs」をクリックします。
    F#_6-1_修正
  2. Program.fsに、以下のコードを貼り付けます。
    open System
    open System.Windows
    open System.Windows.Controls
    open System.Windows.Markup
    open FsXaml
    
     type TestWindow = XAML<"TestWindow.xaml">
    
    [<STAThread>]
    [<EntryPoint>]
    let main argv =
        let window = TestWindow()
    
        window.TestButton.Click.Add (fun x -> MessageBox.Show("Hello,World!") |> ignore)
    
        let application = new Application()
    
        application.Run(window)
    
  3. 保存して、実行します。
    F#_6-3_修正
  4. TestWindowsが、表示されます。
    F#_6-4
  5. ボタンを押下すると、メッセージボックスに「Hello,World」と表示されます。
    F#_6-5

 

最後に

C#や.NetVBのように、簡単にWindowsアプリケーションの作成はできませんが、
F#でも一手間ないし二手間かければ、Windowsアプリケーションを作成することができます。

最後までご覧頂き、ありがとうございました。


採用情報

  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ