C#演習第5・6回課題ではクロスプラットフォームGUIフレームワークEto.Formsを用いるので，その環境をセットアップする． 環境設定1で「Visual Studioのインストール」を選んだ人は，Visual Studioの設定を，「.NET SDKのインストール （Windows/Mac ほぼ共通）」を選んだ人は「コマンドライン環境の設定」を参照する．

また，GTK用アプリケーションを作成したい人はGTKのインストールを参照する（現状Mac環境のみ記載．Windows環境は情報収集中）．

（本ページに掲載されているスクリーンショットは，マイクロソフトの許諾を得て使用しています．）

Visual Studioの設定

Windows編

  1. Visual Studioを起動し，メニューバーが表示されている状態にする（たとえば，スタート画面から「コードなしで続行」する）．

    image

  2. メニューの「拡張機能」以下の「拡張機能の管理」を開く．

    image

    すると拡張機能の管理ウィンドウが表示されるので，右上の検索窓から"Eto.Forms"を検索する．すると，"Eto.Forms. Templates and Previewer"がリストされるので，「ダウンロード」する．

    image

  3. すると，「変更内容がスケジュールされます。すべての Microsoft Visual Studio ウィンドウを閉じると変更が開始されます。」と表示されるので，一旦Visual Studioを終了させる．

  4. その後，以下のウィンドウが表示されるので，「Modify」を選択する．

    image

  5. Visual Studioを再度立ち上げる．正しくインストールできていると，「新しいプロジェクト」作成時のテンプレート選択画面で「Eto.Forms Application」が選べるようになる．

    image

    Note

    Visual Studio 2019 を既にインストールしてあった場合に，そのバージョンが古いままだとこのステップでエラーが出るようである．その場合はメニューの「ヘルプ」から「更新プログラムの確認」を確認して更新を実施する．

  6. 動作確認ついでに「続行」からプロジェクトを作成してみよう．例のごとくプロジェクト名とソリューション名は適当でよい（HelloEtoとする）．

    image

    プロジェクト名とソリューション名を入力後，以下のウィンドウが表示される．ここでは，"Project"で"Separate per platform"を選択した場合の動作を説明する（"Combined"を選んでも支障はない）．

    image

  7. 作成すると，HelloEto の他に HelloEto.Mac，HelloEto.Gtk，HelloEto.Wpfというプロジェクトが作成されていることがわかる．演習ではHelloEto（に相当するフォルダ）以下のMainForm.csを編集することになる．ここでは，HelloEto.Wpfをビルド・実行する．（HelloEto.MacはビルドできるがWindowsで実行できない．HelloEto.Gtkもビルドできるが実行にGTKのインストールが必要）．

    image

  8. ▶ボタンの左の枠から「HelloEto.Wpf」を選ぶ．

    image

    選択後，右のソリューションエクプローラーで同プロジェクトが太字になる．

  9. ▶ボタンを押すと，以下のウィンドウが表示される．

    image

  10. いつものようなウィンドウタイトルや閉じるボタンが表示されていないように見えるかもしれないが，ウィンドウを拡大したらこれは隠れていただけであったことがわかる．黒いパネルはVisual Studio由来であり，実際にコマンドラインからビルド・実行すると表示されない．

    image

  11. "Click Me!"と書かれた部分をクリックするとダイアログが表示される．

  12. ウィンドウ右上の閉じるボタンか，Ctrl + Q を押すか，メニューからQuitを選択してプログラムを終了する．

Mac編

  1. Eto.Forms developper extensionsのリリースページから，Eto.DevExtension.VisualStudio.Mac.2022-X.X.X.mpack の最新版を入手する．令和5年3月29日(水)時点での最新版は Eto.DevExtension.VisualStudio.Mac.2022-2.7.1.mpack．

  2. メニューの「Visual Studio」以下の「拡張機能...」を開く．

    image

  3. ウィンドウが出てくるので，「ファイルからインストール...」を選び，先程のダウンロードした.mackファイルを選択する．

  4. すると，「次の拡張機能および関連する依存関係がインストールされます」と出てくるので，「インストール」をクリックしインストールする．

    image

  5. Visual Studio を再起動する．

  6. 正しくインストールできていると，「新しいプロジェクト」作成時のテンプレート選択画面で「マルチプラットフォーム」以下から「Eto Application」が選べるようになる．

    image

  7. 動作確認ついでに「続行」からプロジェクトを作成してみよう．例のごとくプロジェクト名とソリューション名は適当でよい（HelloEtoとする）．以下では"Project"は"Separate per platform"を選択した場合の動作を説明する（"Combined"を選んでも支障はない）．

    image

    image

  8. 作成すると，HelloEto の他に HelloEto.Mac，HelloEto.Gtk，HelloEto.Wpfというプロジェクトが作成されていることがわかる（"Separate per platform"を選択したため）．演習ではHelloEto（に相当するフォルダ）以下のMainForm.csを編集することになる．このうち，HelloEto.WpfはMac版のVisual Studioではビルドできない．ここでは，動作確認のためにHelloEto.Macを（GTKをインストールするのであればHelloEto.Gtkも）実行してみよう．

    image

    • "Project"で"combined"を選択すると作成されるプロジェクトはそのプラットフォーム向けのもののみとなる．
    • HelloEto.Mac

      1. ▶ボタンの右に「HelloEto.Mac」が表示されていなければ，その部分をクリックして「HelloEto.Mac」を選択する．左の「ソリューション」の部分で，プロジェクト名「HelloEto.Mac」が太字になっていることを確認する．

      2. ここで「▶」を押したくなるのだが，このままでは実行に失敗するため設定が必要になる．

        Note

        生成された実行形式を起動するには，生成された.appファイルをopenするか，その中の実行ファイルを実行する必要がある．この点は dotnet を用いる場合でも同様である．

      3. 左の「ソリューション」の HelloEto.Mac の部分をダブルクリックすると，プロジェクトオプション編集用ウィンドウが表示される．「実行」>「構成」>「Default」の項目から，「開始アクション」の「外部プログラムの開始」を選択し入力欄に以下を入力する（.appの中身なので，「...」ボタンからは選択できない）

        ~/Projects/HelloEto/HelloEto/HelloEto.Mac/bin/Debug/net6.0/HelloEto.Mac.app/Contents/MacOS/HelloEto.Mac

        ここで，~/Projects/HelloEto/HelloEto/HelloEto.Macの部分はHelloEto.Macフォルダへの絶対パスとする．"HelloEto"の部分は自分で設定したプロジェクト名とする（ソリューション名をプロジェクト名と別にした場合は外側のHelloEtoの部分が自分で設定したソリューション名）．

        image

        この変更はHelloEto.Mac.csproj.userファイルに書き込まれるため，プロジェクトにつき一回行うのみでよい．

      4. しばらく待つと，Eto.Formsのアイコン（テンプレート選択画面で表示される円の中に菱形のもの）のアプケーションが起動していることが確認できるので，アイコンをクリックするなりしてフォーカスをそのアプリケーションに写す．

      5. 以下のようなウィンドウが表示される．

        image

      6. ツールバー上のボタン「Click Me!」は初期ウィンドウサイズだと隠れてしまっている．拡張して表示しよう．

        image

      7. 「Click Me!」の上の部分にマウスポインタを持ってくると，色が変わる部分があるのでそこをクリックするとダイアログが表示される．

        • 「Click Me!」自体はクリックできない．

        image

      8. Command + Q を押すか，メニューからQuitを選択してプログラムを終了する．

        Caution

        ウィンドウ左上の閉じるボタンはプログラムを終了させない．この挙動はMacの一般的なアプリケーションプログラムと同様である．

    • HelloEto.Gtk

      1. GTKをインストールする（参考：GTKのインストール）

      2. ▶ボタンの右に「HelloEto.Gtk」が表示されていることを確認する．そうでなければ，その部分をクリックして「HelloEto.Gtk」を選択する．左の「ソリューション」の部分で，プロジェクト名HelloEto.Gtk が太字になっていることを確認する．

      3. しばらく待つと，「実行形式ファイル」アイコンのアプケーションが起動していることが確認できるので，アイコンをクリックするなりしてフォーカスをそのアプリケーションに写す．

      4. 以下のようなウィンドウが表示される．

        image

      5. "Click Me!"と書かれたボタンをクリックするとダイアログが表示される．

      6. ウィンドウ左上の閉じるボタンか，Ctrl + Q を押すか，メニューからQuitを選択してプログラムを終了する．

コマンドライン環境の設定

WindowsだとPowerShell，Macだと適当な仮想端末アプリケーション（Terminal.app）を使って以下を実行する．

  1. 以下を行う（設定自体はこれで終わり）．

    dotnet new -i "Eto.Forms.Templates::*"

  2. 確認のために以下を実行してみる．

    dotnet new list eto

    Note

    dotnetのバージョンによっては，dotnet new -l etoやdotnet new eto -lのように書かなけれならないかもしれない．

    たとえば，以下のように表示されるはず．

    これらのテンプレートは、入力: 'eto' と一致しました

テンプレート名             短い名前  言語        タグ
-------------------------  --------  ----------  ------------------
Eto Application            etoapp    [C#],F#,VB  Cross Platform/Eto
Eto Panel, Dialog or Form  etofile   [C#],F#,VB  Cross Platform/Eto

  3. 動作確認

    1. 適当なディレクトリに移動し，その下に適当な名前のディレクトリを作成する（HelloEtoとする）

      mkdir HelloEto

    2. 作成したディレクトリに移動する．

      cd HelloEto

    3. 以下を実行する．

      dotnet new etoapp

      その後lsしてみると以下のようなディレクトリが生成されたのがわかる（Windowsだとlsはdirの別名なので表示は異なる）．

      $ ls 
HelloEto/     HelloEto.Gtk/ HelloEto.Mac/ HelloEto.Wpf/
      • ソリューションも作成したい場合はdotnet new etoapp -slnとする．
      • プラットフォーム毎にプロジェクトを作成したくない場合は代わりにdotnet new etoapp -cとする．
  1. buildおよび実行してみる．

    • Windowsの場合，まず以下を実行しプロジェクトHelloEto.Wpfをビルドする．

      dotnet build HelloEto.Wpf

      その後以下のコマンドでビルドしたプログラムを実行する．

      dotnet run --project HelloEto.Wpf

      Note

      「warning NU1701: パッケージ XXXX はプロジェクトのターゲット フレームワーク YYYY ではなく ZZZZ を使用して復元されました。このパッケージは、使用しているプロジェクトと完全な互換性がない可能性があります。」という警告が多数表示されるが，他にエラーや警告がなければ無視してよい．

      Note

      Mac環境だと .Wpf版はビルドできない．

    • Macの場合，まず以下を実行しプロジェクトHelloEto.Macをビルドする．

      dotnet build HelloEto.Mac

      その後，以下のコマンドでビルドしたプログラムを実行する．

      (cd HelloEto.Mac && dotnet run)

      Caution

      dotnet run --project HelloEto.Mac では実行に失敗する．どうやら作業ディレクトリがHelloEto.Macであることが重要である模様．2022-04-22追記：.csprojにてRunWorkingDirectoryをセットしてもうまくいなかいので，原因はそう単純じゃなさそう．

      Caution

      括弧は大事．以下のコマンドでは実行後に現在のディレクトリがHelloEto.Macに変わってしまう．

      cd HelloEto.Mac && dotnet run

      Note

      以下のコマンドでもプログラムを実行可能．

      open HelloEto.Mac/bin/Debug/net6.0/HelloEto.Mac.app

      .net6.0の部分はターゲットフレームワークによって変わる．

      Note

      dotnet new etoapp -cでプラットフォーム共通のプロジェクトを作成した場合は，dotnet buildでビルドできdotnet runで作成したプログラムを実行できる．コマンドラインから直接ビルド・実行を行う場合はこちらのほうが楽かもしれない．

      Note

      Windows環境だと，.Mac版はビルドできるが実行できない．

    • GTKがインストールされているのならば（参考：GTKのインストール），GTK版をビルド・実行してみるのもよい．まず，以下を実行しビルドする．

      dotnet build HelloEto.Gtk

      つぎに，以下を実行しビルドしたプログラムを実行する．

      dotnet run --project HelloEto.Gtk

Note

なお，"Eto.Forms"のVisual Studioの拡張機能によってできることはdotnet new etoapp相当である．なので，なんらかの理由で拡張機能が正常に動かない場合にも，コマンドラインでしなければならないのは， dotnet new etoapp（と必要に応じてソリューションの作成と，それへのプロジェクトの追加）のみである．

たとえば，HelloEtoの場合を例にとると，Visual StudioでHelloEto/HelloEto.csprojというプロジェクトを開き，そこにHelloEto.Wpf/HelloEto.Wpf.csproj等のプロジェクトを追加すればよい（メニューからそういう項目が選べる）．

また，それではまだ面倒くさいという人はソリューションを作成すればよい．今，上記手順で作成したディレクトリに移動したとする．（lsすると以下のように表示されるところ）．

$ ls 
HelloEto/     HelloEto.Gtk/ HelloEto.Mac/ HelloEto.Wpf/

すると，その場所で

dotnet new sln

とすると，ソリューションファイル（HelloEto.slnという名前になるはず）が作成される．その後以下の各行を実行すれば（正確には自分のプラットフォームに関係ないプロジェクトについてはソリューションに追加しなくてよい），作成したソリューションファイルをVisual Studioで開くことにより，これらのプロジェクトをまとめて開くことができる．

dotnet sln add HelloEto
dotnet sln add HelloEto.Gtk
dotnet sln add HelloEto.Mac
dotnet sln add HelloEto.Wpf

GTKのインストール

オプショナル．MacだとVisual Studio上での実行に設定が必要になるのは面倒だし，インストールするのもよいかもしれない．遅かれ早かれbrewは入れることになると思うので，そう手間は大きくないはず．

Windows環境については情報収集中．

Mac

  1. Homebrewをトップページに書いてあることに従いインストールする．
  2. ターミナルから brew install gtk+3 を実行する
    • brew updateも必要かもしれない