シュウジマブログ

Apple製品,技術系の話をするブログ

C#で作るMac用アプリケーション (Hello World)

やること

Visual Studio for Macを使ってC#でMac用Cocoa Appを作ります.

初心者のメモ書きなので多めに見てください.

f:id:masa_flyu:20191014012901j:plain

必要な環境

  • macOS Catalina 10.15
  • Visual Studio for Mac 8.3.3
  • Xcode 11.0

Visual Studio for Macは以下からダウンロード可能です.

Visual Studio 2019 for Mac - Mac OS 用 IDE

XcodeはMac AppStoreからダウンロード可能です.

C#とXamarinとVS for Mac
C# はMicrosoftが開発している言語でWindowsの開発などに利用されています(.NETFrameWork).
また,有志によってWindowsの「.NET FrameWork」互換の環境をiOS,Android,macOSなどでも利用できる「Mono」が開発されました.
Monoの創始者はその後「Xamarin」(ザマリン)という会社を立ち上げ,Macで「Mono」を用いた開発をする統合開発環境「Xamarin Studio」などを作っていきました.

そんなXamarin社は2016年にMicrosoftが買収することになりました.その際,MacのXamarin StudioをVisual Studio for Mac(以下VS for Mac)に改名しました.以上のように今回利用するVS for MacはWindowsのVisual Studioとはまったく異なるものです.

以上の経緯を踏まえ,C#でのMacアプリの開発には「Mono」,「.NET」,「Xamarin」などのワードが散見されます.検索の際はこういったワードを用いるなどするとより多くの記事にアクセスできるでしょう.
また,設定の検索などの際にはVisual Studio for MacとWindows版Visual Studioを混同することのないよう気を付けてください.

プロジェクト(ソリューション)の作成

f:id:masa_flyu:20191013221233j:plain

VS for Macを起動したら新規をクリックします.

f:id:masa_flyu:20191013221300j:plain

アプリ名を適当に入力します.ここでは「mac_cs_test1」としました.

組織の識別子は適当で大丈夫です.アプリを配布する際に重要になるものですので,現時点では何か入力しておけば良いです.

他の項目はそのままでOKです.

f:id:masa_flyu:20191013221315j:plain

作成するプロジェクトのディレクトリなどを決定します.

場所はお好きなように.

デフォルトのまま何も変更しなくてもかまいません

f:id:masa_flyu:20191013221321j:plain

すると,プロジェクトが開かれます.

ここで,左上の再生マークのボタンをクリックすることでビルドを行うことができます

f:id:masa_flyu:20191013221328j:plain

ビルドを行うとこのように空のウインドウが開かれます.

ボタンやラベルを配置し,プログラムを書いていくことでこれに機能を追加していきます.

Xcode Interface Builderでの編集

作成されたプロジェクトには「Main.storyboard」というファイルがあります.

このファイルはアプリのGUI要素(ボタンなどアプリの見た目)を記述するファイルですが,VS for Macではstoryboardを編集することができません.

そこで以下のように

f:id:masa_flyu:20191013221334j:plain

「Main.storyboard」を右クリックし,「プログラムから開く」→「Xcode Interface Builder」を選択します

するとXcodeが自動的に起動します.

f:id:masa_flyu:20191013221343j:plain

Xcodeでstoryboardが開かれました.

(警告ダイアログが出てきましたのでOKを押しました)

今回,上の画像のように「The document "Main.storyboard" had an internal inconsistency that was found and repaired.」という警告が出てきました.
この理由はわかりませんが,とりあえずOKを押しておきました. VS for MacとXcodeのバージョンの問題かと思っています

f:id:masa_flyu:20191013221351j:plain

「+」のアイコンをクリックします

するとオブジェクトを選択するSpotlight風のウインドウが表示されます.

f:id:masa_flyu:20191013221357j:plain

ウインドウに配置したいGUI要素の名前を検索できます.

まず最初に「Push Button」を配置しましょう.

「Push Button」をView(ただの四角,上図矢印の先のとこ)上に配置します.

f:id:masa_flyu:20191013221402j:plain

同様に「Label」をView上に配置します.

f:id:masa_flyu:20191013221524j:plain

同様に「Text Field」をView上に配置します.

f:id:masa_flyu:20191013221533j:plain

各GUI要素を画像のように整理します.

f:id:masa_flyu:20191013221540j:plainf:id:masa_flyu:20191013221543j:plain

Labelは初期状態だと表示範囲が狭すぎるので,下記のように操作して広げます.

このへんで一旦保存しておきましょう. f:id:masa_flyu:20191013221545j:plain

なお,この状態でVS for Macに戻ってビルドすると配置したGUI要素が反映されています. ただ,配置したGUI要素をプログラムと紐付けする作業をしなければなりません. この作業はXcodeでしかできません.引き続きXcodeでの作業が必要です

Outletをつなげる

f:id:masa_flyu:20191013221556j:plain

「Add Editor on Right」ボタンをクリックし,Xcodeのウインドウを2つに分割します

f:id:masa_flyu:20191013221607j:plain

初期状態では左右両方ともInterface Builderが表示されるかと思います.

f:id:masa_flyu:20191013221615j:plain

右側の上部にあるパンくずリストから「Main.storyboard」をクリックしたあと,「ViewController.h」をクリックし切り替えます

f:id:masa_flyu:20191013221618j:plain

すると右半分の表示が何やらプログラムに切り替わりました.

f:id:masa_flyu:20191013221721j:plain

左側のView表示が消えてしまっている場合は,適当にクリックしましょう.

f:id:masa_flyu:20191013221728j:plain

XcodeではGUI要素とプログラムとの紐付け作業をこのようにViewとプログラムとを同時表示させた状態で行います.

f:id:masa_flyu:20191013221737j:plain

View上に配置した「Text Field」をControlキーを押しながらドラッグし,右側「ViewController.h」プログラム上の@endの上の行にドロップします.

すると小さなポップアップが表示されます.

Nameに「Text Field」であることが分かりやすい名前を付けます.

プログラム上の要素名なので

  • 空白を入れない
  • 先頭は数字にしない

という制約があります.

ここでは「textfield1」という名前を入力しました

他の項目はそのままで「Connect」をクリックします

f:id:masa_flyu:20191013221742j:plain

LabelのOutlet

次にLabelに対しても同様に行います.

f:id:masa_flyu:20191013221745j:plain

f:id:masa_flyu:20191013221750j:plain

名前は「label1」としました.

ButtonのActionの設定

次にButtonの設定です.buttonは他と少し手順が違います

f:id:masa_flyu:20191014002702j:plain

接続自体は同様です.

f:id:masa_flyu:20191014002706j:plain 表示されたポップアップで

  • 「Connection」を「Action」に設定
  • 「Name」を「button1_clicked」に(なんでもよい)

として「Connect」をクリックします.

f:id:masa_flyu:20191013221758j:plain

以上の結果,プログラムに3行のコードが追加されます.

これでXcodeでしなければならない作業は終わりました.

f:id:masa_flyu:20191013221545j:plain

編集内容を保存しましょう.

VS for Macに戻ります.

Hello Worldの記述

f:id:masa_flyu:20191013221806j:plain

VScodeを再度開きます.

f:id:masa_flyu:20191013221813j:plain

左上の再生ボタン(ビルド)をクリックすると,作成中のアプリのウインドウが開きます.

f:id:masa_flyu:20191013221819j:plain

配置したGUI要素が正常に表示されました.

しかしながら,現段階では「Hello World」などの文字は一切表示していません.

これをプログラム上で編集していきます.

f:id:masa_flyu:20191013221824j:plain

VS for Mac上で「ViewController.cs」を開きます.

using System;

using AppKit;
using Foundation;

namespace mac_cs_test1
{
    public partial class ViewController : NSViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // Do any additional setup after loading the view.

        }

        public override NSObject RepresentedObject
        {
            get
            {
                return base.RepresentedObject;
            }
            set
            {
                base.RepresentedObject = value;
                // Update the view, if already loaded.
            }
        }

        
    }
}

この「ViewController.cs」ファイルはGUIにまつわるプログラムを記述するものです.

こちらに配置したGUI要素の機能を追記していきます.

Labelに「Hello,World」と表示させよう

Labelの文字を「Hello, World」に変更しましょう.

public override void ViewDidLoad()
{
    base.ViewDidLoad();
    // Do any additional setup after loading the view.
    
}

このViewDidLoad()はウインドウが表示されたときに呼ばれる関数で,GUIの初期設定などはここに記述できます.

次の1行を追記してください.

label1.StringValue = "Hello,World";

実行するとラベルの文字がHello,Worldに変わっているはずです.

f:id:masa_flyu:20191014011348j:plain

Buttonを使う

つづけてButtonを使用できるようにします.

Buttonを使うためには自分で関数を追記します.

partial void button1_clicked(Foundation.NSObject sender)
{
    label1.StringValue += string.Format(textfield1.StringValue + "\r\n");
}

以上の関数をViewControllerクラス内(下図の線の位置)に追記します.

f:id:masa_flyu:20191014012651j:plain

追記結果は以下のようになります.

f:id:masa_flyu:20191013221831j:plain

実行結果

f:id:masa_flyu:20191014012901j:plain

実行結果は以上の通りです.

テキストフィールドに入力した文字がボタンを押すたびラベルに追記されていきます.

関数の説明
partial void button1_clicked(Foundation.NSObject sender)
{
    label1.StringValue += string.Format(textfield1.StringValue + "\r\n");
}

f:id:masa_flyu:20191014013550j:plain

関数は「ViewController.designer.cs」からのコピペです.こちらのファイルはXcodeでOutletやActionを設定したときに自動的に記述されます.

この関数はボタンが押されるたび,OSから自動的に呼び出されるように設定されます.

関数の中身はlabel1の文字(StringValue)にtextfield1の文字(StringValue)と改行コード(\r\n)を追記するというコードになっています.

ボタンを押すたびにこのコードが実行されます.

当ブログをご利用いただく際には免責事項をお読みください。