Xamarin.Macを初めて触る人に贈る、Xamarin公式 Hello, Mac の日本語訳記事

Xamarin.Mac公式の[Hello, Mac](https://developer.xamarin.com/guides/mac/getting_started/hello,_mac/)の邦訳記事です。

記事ではXamarin Studioを用いてチュートリアルが行われていますが、後継（同一コードベース）のVisual Studio for Macでも動作に変更がないか試してみました。

私自身これまでWPF開発を少しかじった程度で、cocoaやobjective-c、swift開発の経験がない中Xamarin.Macでの開発をはじめるにあたってOutlet、Action、Storyboardといった概念やツールに入門するのにとてもいい記事だと思ったのであえて共有するに至りました。

----------------

Xamarin.Mac開発をはじめましょう

このガイドでは、はじめてのXamarin.Macアプリケーションを作成する手順を説明し、Xamarin Studio（訳注: VS for Macで試し、スクショはそのときのもので置き換えています。本文はXamarin Studioのまま残しています）、Xcode、Interface Builderなどの開発ツールチェーンについて紹介します。

また、UIコントロールをコードに公開するOutletとActionを紹介し、最後に、Xamarin.Macアプリケーションをビルド、実行、テストする方法を示します。

# 概要
Xamarin.Macを使うと `Objective-C` と `Xcode` で開発する際に使用するのと同じOS Xライブラリとインターフェイスコントロールを使用して、C＃と.NETで完全にネイティブなMacアプリケーションを開発することができます。Xamarin.MacはXcodeと直接統合されているため、開発者はXcodeのInterface Builderを使用してアプリケーションのユーザーインターフェイスを作成できます（またはオプションでC＃コードで直接作成することもできます）。

さらに、Xamarin.MacアプリケーションはC＃と.NETで書かれているので、通常、バックエンドコードはXamarin.iOSやXamarin.Androidモバイルアプリケーションと共有できます。すべてのプラットフォームでネイティブエクスペリエンスを提供します。

この記事ではXamarin.Mac、Xamarin Studio、XcodeのInterface Builderを使用してMacアプリケーションを作成するために必要な主要概念をボタンがクリックされた回数を数える単純なHello,Macアプリケーションを構築するプロセスを概観することで紹介します。

![hello_mac.gif](https://qiita-image-store.s3.amazonaws.com/0/46547/28e90eef-3c9a-0d6b-adab-7da7f847175d.gif)
（ボタン操作記録できてませんが、Click Meをクリックしてカウントアップします）

次の概念について説明します。

* **Xamarin Studio** - Xamarin Studioの概要とXamarin.Macアプリケーションを作成する方法
* **Xamarin.Macアプリケーションの解剖** - Xamarin.Macアプリケーションの構成
* **OutletとAction** - OutletとActionを使用してユーザーインターフェイスのコントロールを結合する方法
* **デプロイ/テスト** - Xamarin.Macアプリを実行してテストする方法

# 要件
Xamarin.Macを使ってMac OS Xアプリケーションを開発するには以下が必要です

* Mac OS X Yosemite（10.10）以上を搭載したMacコンピュータ
* Xcode 7以上（App Storeから最新の安定バージョンをインストールすることをおすすめします）
* Xamarin.MacとXamarin Studioの最新バージョン。

Xamarin.Macで作成されたMacアプリケーションの実行には、次のシステム要件があります

* Mac OS X 10.7以降を搭載したMacコンピュータ

# Xamarin Studioで新しいXamarin.Macアプリケーションを起動する
上述の通り、このガイドではHello_Macというメインウィンドウにボタンとラベルが1つずつあるMacアプリケーションを作成する手順を説明します。ボタンをクリックすると、クリックされた回数がラベルに表示されます。

開始するには、次の手順を実行します。

1. Xamarin Studioを起動します
<img width="1492" alt="スクリーンショット 2017-07-22 15.35.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/d50b3b90-0fc3-26e2-986d-e930adb85ccc.png">

2. 画面の左上隅にある[新しいソリューション]リンクをクリックして、[新しいプロジェクト]ダイアログボックスを開きます。
<img width="898" alt="スクリーンショット 2017-07-22 15.39.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/e05d8cb1-16d6-6e1f-ae96-ceef614b1309.png">

3. Mac> App> Cocoa Appを選択し、次へボタンをクリックします。
<img width="898" alt="スクリーンショット 2017-07-22 15.39.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/899a8dce-1501-a50f-d1cb-d081e5b79b3f.png">



4. アプリケーション名にHello_Macを入力し、それ以外はすべてデフォルトにします。次へをクリックします。
<img width="897" alt="スクリーンショット 2017-07-22 15.54.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/5f61d884-47b4-fc70-8f35-a27f9cdd8256.png">


5. いくつかの異なるプロジェクトを格納するソリューションを作成する場合、開発者はここで別のソリューション名を設定したいかもしれませんが、この例では、プロジェクト名と同じデフォルトに設定したままにしておきます
<img width="897" alt="スクリーンショット 2017-07-22 15.58.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/0eebc67c-ade9-cce3-53a0-be60db5da862.png">

6. [作成]ボタンをクリックします。

Xamarin Studioは新しいXamarin.Macアプリケーションを作成し、アプリケーションのソリューションに追加されるデフォルトのファイルを表示します

<img width="1493" alt="スクリーンショット 2017-07-22 16.03.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/4006b34c-d139-8635-5a23-ce03b78b8416.png">

Xamarin Studioは、Visual Studioとまったく同じ方法で、**ソリューション**と**プロジェクト**を使用します。ソリューションは1つまたは複数のプロジェクトを保持できるコンテナです。プロジェクトには、アプリケーション、サポートライプラリ、テストアプリケーションなどが含まれます。このケースでは、Xamarin Studioはソリューションとアプリケーションプロジェクトの両方を自動的に作成しました。

必要に応じて、開発者は共通の共有コードを含む1つ以上のコードライブラリプロジェクトを作成することができます。これらのライブラリプロジェクトは、アプリのプロジェクトで使用することも、他のXamarin.Macアプリプロジェクト（もしくはコードの種類によってはXamarin.iOSとXamarin.Android）と共有することもできます。それは標準の.NETアプリケーションと同様です。

# Xamarin.Macアプリケーションの解剖
iOSプログラミングになじみがあれば、ここには多くの類似点があります。実際、iOSはMacで使用されているCocoaのスリムなバージョンであるCocoaTouchフレームワークを使用しているため、多くの概念が交錯するでしょう。

プロジェクト内のファイルを見てください

* `Main.cs` - これは、アプリケーションのメインエントリポイントを含んでいます。アプリが起動されると、実行される最初のクラスとメソッドを含みます。
* `AppDelegate.cs` - このファイルには、OSからのイベントをリッスンするメインのアプリクラスが含まれています。
* `Info.plist` - このファイルには、アプリケーション名、アイコンなどのアプリプロパティが含まれます。
* `Entitlements.plist` - このファイルには、アプリケーションのエンタイトルメントが含まれており、サンドボックスやiCloudのサポートなどにアクセスできます。
* `Main.storyboard` - アプリケーションのユーザーインターフェイス（ウィンドウとメニュー）を定義し、ウィンドウ間の相互接続をSegue経由でレイアウトします。Storyboardはビュー（ユーザーインターフェイス要素）を定義するXMLファイルです。このファイルは、Xcode内のInterface Builderで作成、保守することができます。
* `ViewController.cs` - これはメインウィンドウのコントローラです。コントローラについては別の記事で詳しく説明しますが、コントローラは特定のビューのメインエンジンと考えることができます。
* `ViewController.designer.cs` - このファイルには、メイン画面のユーザーインターフェイスとの統合に役立つ結合コードが含まれています。

以下のセクションでは、これらのファイルのいくつかを簡単に見ていきます。後で詳細に調べる予定ですが、今は基礎を理解することをおすすめします。

## Main.cs
Main.csファイルはとてもシンプルです。これには、新しいXamarin.Macアプリケーションインスタンスを作成し、OSイベントを処理するクラスの名前を渡す静的Mainメソッドが含まれています。ここでは`AppDelegate`クラスが該当します。

```C#:Main.cs
using System;         // 現在のテンプレートには含まれません
using System.Drawing; // 現在のテンプレートには含まれません
using Foundation;     // 現在のテンプレートには含まれません
using AppKit;
using ObjCRuntime;    // 現在のテンプレートには含まれません

namespace Hello_Mac
{
        class MainClass
        {
                static void Main (string[] args)
                {
                        NSApplication.Init ();
                        NSApplication.Main (args);
                }
        }
}
```

## AppDelegate.cs
`AppDelegate.cs`ファイルには`AppDelegate`クラスが含まれています。`AppDelegate`クラスは、ウィンドウの作成とOSイベントのリッスンを行います。


```C#:AppDelegate.cs
using AppKit;
using Foundation;

namespace Hello_Mac
{
    [Register ("AppDelegate")]
    public class AppDelegate : NSApplicationDelegate
    {
        public AppDelegate ()
        {
        }

        public override void DidFinishLaunching (NSNotification notification)
        {
            // Insert code here to initialize your application
        }

        public override void WillTerminate (NSNotification notification)
        {
            // Insert code here to tear down your application
        }
    }
}
```

このコードは、開発者が以前にiOSアプリケーションを構築していない限りおそらく馴染みの薄いものですが、かなりシンプルです。

`FinishedLaunching`メソッドは、アプリケーションがインスタンス化された後に実行され、実際にアプリケーションのウィンドウを作成し、その中にビューを表示するプロセスを開始します。

`WillTerminate`メソッドは、ユーザーまたはシステムがアプリケーションのシャットダウンをインスタンス化したときに呼び出されます。

## ViewController.cs
Cocoa（と派生のCocoaTouch）は、*Model View Controller*（MVC）パターンとして知られているものを使用します。`ViewController`宣言は、オブジェクトが実際のアプリウィンドウを制御することを表します。一般に、作成されたすべてのウィンドウ（およびウィンドウ内の他の多く）には、ウィンドウのライフサイクルを担当するコントローラーがあり、それを表示したり、新しいビュー（コントロール）を追加したりします。

`ViewController`クラスはメインウィンドウのコントローラです。つまり、メインウィンドウのライフサイクルを担当します。これについては後で詳しく調べますが、今ざっと見てみましょう。

```C#:ViewController.cs
using System;

using AppKit;
using Foundation;

namespace Hello_Mac
{
    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.Designer.cs
メインウィンドウクラスのデザイナーファイルは現在空ですが、XcodeのInterface Builderを使用してユーザーインターフェイスを作成すると、Xamarin Studioによって自動的に作成されます。

```C#:ViewController.Designer.cs
// WARNING
//
// This file has been generated automatically by Xamarin Studio to store outlets and
// actions made in the UI designer. If it is removed, they will be lost.
// Manual changes to this file may not be handled correctly.
//
using Foundation;

namespace Hello_Mac
{
    [Register ("ViewController")]
    partial class ViewController
    {
        void ReleaseDesignerOutlets ()
        {
        }
    }
}
```

開発者は通常デザイナーファイルには関与しません。というのも、Xamarin Studioによって自動的に管理され、アプリケーション内のウィンドウまたはビューに追加されたコントロールにアクセスするのに必要なコードを提供するためです。

Xamarin.Macアプリプロジェクトが作成され、そのコンポーネントの基本的な理解が得られたら、Xcodeに切り替えてInterface Builderを使用してユーザーインターフェイスを作成します。

## Info.plist
Info.plistファイルには**名前**や**バンドルID**などのXamarin.Macアプリケーションに関する情報が含まれています。

<img width="1494" alt="スクリーンショット 2017-07-22 17.13.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/9fa15dee-d4ce-d018-b455-e1570c4c75af.png">

そして**Main Interface**ドロップダウンリストのXamarin.Macアプリケーションのユーザーインターフェイスを表示するために使用される*Storyboard*を定義します。上記の例の場合、ドロップダウンの`Main`は、**ソリューションエクスプローラ**のプロジェクトソースツリーの`Main.storyboard`に関連しています。また、それらを含む*アセットカタログ*（この場合はAppIcons）を指定することによって、アプリのアイコンを定義します。

## Entitlements.plist
`Entitlements.plist`ファイルはXamarin.MacアプリケーションのサンドボックスやiCloudなどのエンタイトルメントを制御します。

<img width="1494" alt="スクリーンショット 2017-07-22 17.27.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/5b1d4a4a-af39-feb9-aabd-f8938704aaeb.png">

Hello Worldの例では、エンタイトルメントは必要ありません。次のセクションではXcodeのInterface Builderを使用してMain.storyboardファイルを編集し、Xamarin.MacアプリのUIを定義する方法を示します。

# XcodeとInterface Builder入門
Xcodeの一部として、AppleはInterface Builderというツールを作成しました。このツールを使用すると、開発者はデザイナーでユーザーインターフェイスを視覚的に作成できます。Xamarin.MacはInterface Builderとよく統合され、Objective-Cユーザーと同じツールでUIを作成できます。

XcodeとInterface Builderで編集するために**ソリューションエクスプローラ**で`Main.storyboard`ファイルをダブルクリックして開始しましょう。

<img width="344" alt="スクリーンショット 2017-07-22 17.31.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/8916913f-50c9-4059-c127-bf849e8a8ea6.png">

Xcodeを起動し、次のようになります。

<img width="1390" alt="スクリーンショット 2017-07-22 17.39.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/f1be5731-850f-ba4a-4696-30d604868024.png">

インターフェイスの設計を始める前に、Xcodeの概要を使用して、使用される主な機能について説明します。

注意: 開発者は、Xamarin.Macアプリケーションのユーザーインターフェイスを作成するためにXcodeとInterface Builderを使用する必要はありません。UIはC＃コードから直接作成できますが、これはこの記事の範疇を超えています。わかりやすくするために、このチュートリアルではInterface Builderを使用してユーザーインターフェイスを作成します。

## Xcodeの構成要素
Xamarin StudioからXcodeで.storyboardファイルを開くと、左側に**Project Navigator**、中間に**Interface Hierarchy**と**Interface Editor**、右側に**Properties＆Utilities**セクションが表示されます。

<img width="1393" alt="interface_builder.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/d258d0e1-f067-a531-3dd8-e2f937d495f7.png">

以下のセクションでは、これらのXcodeの各機能とXamarin.Macアプリのインターフェイスを作成する方法について説明します。

### `Project Navigation`
Xcodeで編集用の`.storyboard`ファイルを開くと、Xamarin Studioは**Xcodeプロジェクトファイル**をバックグラウンドで作成して、それ自身とXcodeの間の変更を通知します。その後、開発者がXcodeからXamarin Studioに戻ると、このプロジェクトに対する変更はXamarin StudioによってXamarin.Macプロジェクトと同期されます。

**Project Navigation**セクションでは、開発者はこの*shim* Xcode Projectを構成するすべてのファイル間を移動できます。通常、`Main.storyboard`などこのリストの`.storyboard`ファイルにのみ関心があります。

### `Interface Hierarchy`
**Interface Hierarchy**セクションでは、開発者は**Placeholders**やメイン**Window**などのユーザーインターフェイスの主要なプロパティに簡単にアクセスできます。このセクションを使用すると、ユーザーインターフェイスを構成する個々の要素（ビュー）にアクセスしたり、階層内でそれらをドラッグして入れ子にする方法を調整したりできます。

### `Interface Editor`
**Interface Editor**セクションではユーザーインターフェイスがグラフィカルにレイアウトされた外観が提供されます。　**Properties & Utilities**セクションの**Library**セクションから要素をドラッグしてデザインを作成します。ユーザーインターフェイス要素（ビュー）がデザインサーフェスに追加されると、**Interface Editor**での表示順で**Interface Hierarchy**セクションに追加されます。

### `Properties & Utilities`
**Properties & Utilities**のセクションは、**Properties**（インスペクタとも呼ばれる）と** Library**の2つの主要セクションに分かれています。

<img width="280" alt="p&amp;l.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/368c2d94-520b-8df1-359e-8a1a8b0080d6.png">

最初はこのセクションはほとんど空ですが、開発者が**Interface Editor**または**Interface Hierarchy**で要素を選択すると、プロパティセクションには指定された要素と調整可能なプロパティに関する情報が設定されます。

**Properties**セクションには、次の図に示すように8つのインスペクタタブがあります。

<img width="608" alt="スクリーンショット 2017-07-22 20.49.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/ba88f8cf-b0ab-a396-05ff-a011c5fbf241.png">

### `Properties & Utility Types`
これらのタブは左から順に次のとおりです。

* **File Inspector** - File Inspectorは編集中のXibファイルのファイル名や場所などファイル情報を示します。
* **Quick Help** - Quick HelpはXcodeで選択されている内容に基づいてヘルプを提供します。
* **Identity Inspector** - Identity Inspectorは選択したコントロール/ビューに関する情報が表示されます。
* **Attributes Inspector** - Attributes Inspectorを使用すると開発者は選択したコントロール/ビューのさまざまな属性をカスタマイズできます。
* **Size Inspector** - Size Inspectorを使用すると、開発者は選択したコントロール/ビューのサイズとリサイズの動作を制御できます。
* **Connections Inspector** - Connections Inspectorには、選択したコントロールのOutletとActionの接続が表示されます。OutletsおよびActionについては、以下で詳しく説明します。
* **Bindings Inspector** Bindings Inspectorを使用すると、開発者は値を自動的にデータモデルにバインドできるようにコントロールを構成できます。
* **View Effects Inspector** View Effects Inspectorでは、コントロールにアニメーションなどのエフェクトを指定できます。

**Library**セクションを使用して、グラフィカルにユーザーインターフェイスを構築するためのデザイナーに配置するコントロールとオブジェクトを検索します。

<img width="260" alt="スクリーンショット 2017-07-22 21.32.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/cfea3fe4-bce5-929e-227c-b7cb6b122762.png">

## インタフェースの作成
開発者は、Xcode IDEとInterface Builderの基本を学習すると、メインビューのユーザーインターフェイスを作成できます。

次の操作を行います。

1. Xcodeで、**Library**セクションから**Push Button**をドラッグします。
<img width="1393" alt="スクリーンショット 2017-07-22 21.40.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/574dc195-0087-8e5d-f7e9-b1e284d0bd9d.png">

2. **Interface Editor**の**Window Controller**の下の**View**にボタンをドロップします。
<img width="1389" alt="スクリーンショット 2017-07-22 21.40.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/0f5d58fc-ac75-bdba-703f-1172fae7ecf0.png">

3. **Attribute Inspector**で**Title**プロパティをクリックし、ボタンのタイトルを`Click Me`に変更します。
<img width="260" alt="スクリーンショット 2017-07-22 21.44.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/4ecefe95-e431-cf65-e997-f48e37b5edeb.png">

4. **Library**セクションから**Label**をドラッグします。
<img width="260" alt="スクリーンショット 2017-07-22 21.44.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/97a02198-29b8-26eb-7f23-f7a88a11949f.png">

5. **Interface Editor**のボタンの横にある**Window**にラベルをドロップします。
<img width="1388" alt="スクリーンショット 2017-07-22 21.49.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/f82f03ef-c1fb-8654-5cf5-2c5f9c087eba.png">

6. ラベルの右ハンドルをつかみ、ウィンドウの端に近づくまでドラッグします。
<img width="1389" alt="スクリーンショット 2017-07-22 21.51.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/3adbd629-bd29-19b3-d331-d5a4a3e6be29.png">

7. **Interface Editor**で追加したばかりのボタンを選択し、ウィンドウの下部の**Constraints Editor**アイコンをクリックします。
<img width="1388" alt="スクリーンショット 2017-07-22 21.58.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/9ef99ccd-cd51-189f-7898-e21a0f31c34d.png">

8. エディタの上部で、左上の赤いIビームをクリックします。こうするとウィンドウのサイズが変更されても、ボタンは画面の左上隅の同じ位置から動きません。

9. 次に、**Height**と**Width**のボックスをチェックし、デフォルトのサイズを使用します。こうすると、ウィンドウのサイズが変更されたときでもボタンが変わりません。

10. **Add 4 Constraints**ボタンをクリックして制約を追加し、エディタを閉じます。

11. ラベルを選択し、再び**Constraints Editor**アイコンをクリックします。
<img width="1393" alt="スクリーンショット 2017-07-22 22.11.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/c9b64b88-8fad-91da-78c7-64960693bd94.png">

12. **Constraints Editor**の上、右、左にある赤色のIビームをクリックすると、指定されたXとYの位置に固定され、実行中のアプリケーションでウィンドウのサイズが変更されたときに拡大および縮小するようラベルに指示します。

13. 再度**Height**ボックスをチェックしてデフォルトのサイズを使用し、Add 4 Constraintsボタンをクリックして制約を追加し、エディタを閉じます。

14. 変更をユーザーインターフェイスに保存します。

コントロールのサイズ変更と移動中に、Interface Builderが[OS Xヒューマンインターフェイスガイドライン](https://developer.apple.com/macos/human-interface-guidelines/overview/themes/)に基づいて役立つヒントを提供してくれることに注目してください。これらのガイドラインは、開発者がMacユーザーにとって使い慣れた外観と操作感を持つ高品質のアプリケーションを作成するのに役立ちます。

**Interface Hierarchy**を参照して、ユーザーインターフェイスを構成する要素のレイアウトと階層がどのように表示されるかを確認します。

<img width="269" alt="スクリーンショット 2017-07-22 22.21.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/e570d364-7eb1-33aa-b22a-fde569a056d6.png">

ここでは開発者は必要に応じて編集またはドラッグしてUI要素の順序を変更する項目を選択できます。たとえば、UI要素が別の要素で覆われている場合、その要素をリストの一番下にドラッグすると、その要素をウィンドウの一番上の項目にすることができます。

ユーザーインターフェイスを作成すると、開発者はUI項目を公開して、Xamarin.MacがC＃コードでそれらにアクセスして対話できるようにする必要があります。次のセクション**OutletとAction**では、これを行う方法を示します。

## **OutletとAction**
では**Outlet**と**Action**とはなんなのでしょうか？従来の.NETユーザーインターフェイスプログラミングでは、ユーザーインターフェイスのコントロールは追加時にプロパティとして自動的に公開されます。Macでは事情が異なり、ビューにコントロールを追加してもコードにアクセスすることはできません。開発者は、UI要素を明示的にコードに公開する必要があります。これを行うために、Appleは2つの選択肢を提供しています。

* **Outlet** - Outletはプロパティに類似しています。開発者がコントロールをOutletに接続すると、プロパティを介してコードに公開されるため、イベントハンドラをアタッチしたり、メソッドを呼び出すなどの操作を行うことができます。
* **Action** - ActionはWPFのコマンドパターンに類似しています。たとえば、コントロール上でアクション、たとえばボタンをクリックすると、コントロール内のメソッドがコード内で自動的に呼び出されます。開発者は多くのコントロールを同じActionに結び付けることができるため、Actionは強力で便利です。

Xcodeでは、OutletとActionは*コントロールのドラッグ*で直接コードに追加されます。具体的には、OutletまたはActionを作成するために、開発者はアウトレットまたはアクションを追加するコントロール要素を選択し、キーボードの**Control**キーを押したまま、コントロールをコードに直接ドラッグするということです。

Xamarin.Mac開発者にとって、これは開発者が**Outlet**または**Action**を作成するC＃ファイルに対応するObjective-Cスタブファイルにドラッグすることを意味します。Xamarin Studioは、Interface Builderを使用するために生成したshim Xcode Projectの一部として`ViewController.h`というファイルを作成しました。

<img width="1391" alt="スクリーンショット 2017-07-22 22.48.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/427956c1-33b3-ddfe-3484-a698bb22bc1e.png">

このスタブ `.h` ファイルは、新しい`NSWindow`が作​​成されたときに自動的にXamarin.Macプロジェクトに追加される`ViewController.designer.cs`を反映しています。このファイルは、Interface Builderによって行われた変更を同期させるために使用されます。そしてこのファイルでOutletとActionが作成され、UI要素がC＃コードに公開されます。

### Outletの追加
OutletとActionが何であるかの基本を理解し、作成したラベルをC＃コードに公開するOutletを作成します。

次の操作を行います。

1. 画面の右上にあるXcodeで、**Double Circle**ボタンをクリックして**Assistant Editor**を開きます。
<img width="1390" alt="スクリーンショット 2017-07-22 23.01.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/f7e43ad9-2f98-bb6a-bc4a-7c9162634178.png">

2. Xcodeは片面に**Interface Editor**、もう片面に**Code Editor**を持つスプリットビューモードに切り替わります。

3. Xcodeはコードエディタで自動的に**ViewController.m**ファイルを選択したことに注意してください。これは間違っています。OutletとActionの議論により、開発者は**ViewController.h**を選択する必要があります。

4. **Code Editor**の上部で、**Automatic Link**をクリックし、**ViewController.h**ファイルを選択します。
<img width="1486" alt="スクリーンショット 2017-07-22 23.14.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/f83f24a3-63f0-d304-b5d1-5a774dc469c2.png">

5. Xcodeで正しいファイルが選択されるようになりました。
<img width="1485" alt="スクリーンショット 2017-07-22 23.16.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/6cb2a257-fdc5-1b9d-a89c-1b4f4960359c.png">


6. **最後のステップは非常に重要でした！** 開発者が正しいファイルを選択していない場合、OutletsとActionsを作成することができないか、C＃で間違ったクラスに公開されます。

7. ** Interface Editor**で、キーボードの**Control**キーを押しながら、上で作成したラベルを`@interface ViewController：NSViewController {}`コードのすぐ下のコードエディタにドラッグします。
<img width="568" alt="スクリーンショット 2017-07-22 23.18.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/baa2633f-bb21-e1f1-6ae1-8380bb1ad45b.png">
（本家スクショ）

8. ダイアログボックスが表示されます。 **Connection**を**Outlet**に設定したまま、**Name**に`ClickedLabel`と入力します。
<img width="1229" alt="スクリーンショット 2017-07-22 23.19.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/cb6cc8ff-fe83-d32c-3c3d-5c5acda95288.png">

9. **Connect**ボタンをクリックして** Outlet**を作成します。
<img width="416" alt="スクリーンショット 2017-07-22 23.22.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/8c9d5e34-eac1-ca5f-3b6d-bb9e59d6e96f.png">

10. 変更をファイルに保存します。

### Actionの追加
次に、ボタンをC＃コードに公開します。上記のラベルのように、開発者はボタンを**Outlet**に接続することができます。クリックされたボタンにのみ応答したいので、代わりに**Action**を使用してください。

次の操作を行います。

1. Xcodeが**Assistant Editor**にまだ存在し、**Code Editor**で**ViewController.h**ファイルが表示されていることを確認します。

2. **Interface Editor**で、キーボードの**Control**キーを押したまま、上で作成したボタンを`@property(assign) IBOutlet NSTextField * ClickedLabel;`コードのすぐ下のコードエディタにドラッグします。
<img width="568" alt="スクリーンショット 2017-07-22 23.31.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/61361bdc-a28f-c51e-5e98-ebaa0eab7c90.png">
（本家スクショ）

3. **Connection**の種類を**Action**に変更します。
<img width="1227" alt="スクリーンショット 2017-07-22 23.33.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/90d1302c-3bb3-e90f-81f3-37ac735e3e9d.png">

4. **Name**に`ClickedButton`を入力します。
<img width="1227" alt="スクリーンショット 2017-07-22 23.34.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/9a80cdad-6947-1fd6-6557-358746a572e9.png">

5. *Connect*をクリックして**Action**を作成します。
<img width="415" alt="スクリーンショット 2017-07-22 23.36.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/0ea57f9f-11b1-3367-1be1-a289c7d6a241.png">

6. 変更をファイルに保存します。

ユーザーインターフェイスを接続してC＃コードに公開し、Xamarin Studioに戻ってXcodeとInterface Builderで行った変更を同期させます。

注意: この最初のアプリのユーザーインターフェイスと**Outlet**と**Action**を作成するには時間がかかったことでしょう。作業量が多いように思われるかもしれませんが、多くの新しいコンセプトが導入され、新境地に至るために多くの時間が費やされたのです。Interface Builderを使用して練習した後、このインターフェイスとすべての**Outlet**と**Action**をわずか1〜2分で作成できるようになります。

## 変更をXcodeと同期する
開発者がXcodeからXamarin Studioに戻ると、Xcodeで行った変更は自動的にXamarin.Macプロジェクトと同期されます。

**ソリューションエクスプローラ**で**ViewController.designer.cs**を選択して、C＃コードで**Outlet**と**Action**がどのように接続されているかを確認します。

<img width="1493" alt="スクリーンショット 2017-07-22 23.48.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/a1ebacb2-3d3a-5173-a229-4272b9f8686f.png">

**ViewController.designer.cs**ファイル内の2つの定義がどのようになっているかに注目してください。

```
[Outlet]
AppKit.NSTextField ClickedLabel { get; set; }

[Action ("ClickedButton:")]
partial void ClickedButton (Foundation.NSObject sender);
```

Xcodeの``ViewController.h``ファイルの定義と並べてみましょう。
```
@property (assign) IBOutlet NSTextField *ClickedLabel;
- (IBAction)ClickedButton:(id)sender;
```

Xamarin Studioは**.h**ファイルの変更を待ち受け、それぞれの**.designer.cs**ファイルでこれらの変更を自動的に同期して、アプリケーションに公開します。**ViewController.designer.cs**がpartialクラスであるため、Xamarin Studioは、開発者がクラスに対して行った変更を上書きする**ViewController.cs**を変更する必要がないことに注意してください。

通常、開発者は**ViewController.designer.cs**を開く必要はありませんが、ここでは勉強目的でのみ提示されています。

注意: ほとんどの場合、Xamarin StudioはXcodeで行われた変更を自動的に確認し、Xamarin.Macプロジェクトに同期します。同期が自動的に行われないときはXcodeに戻り、再びXamarin Studioに戻ります。こうすると通常同期サイクルが開始します。

# コードを書く
ユーザーインターフェイスが作成され、UI要素が**Outlet**と**Action**を介してコードに公開されているので、最終的にプログラムを実現するためのコードを書く準備が整いました。

このサンプルアプリケーションでは、最初のボタンをクリックするたびにラベルが更新され、ボタンがクリックされた回数が表示されます。これを行うには、**ソリューションエクスプローラ**で`ViewController.cs`ファイルをダブルクリックして編集用に開きます。

<img width="1494" alt="スクリーンショット 2017-07-23 0.04.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/f4cc8493-a907-935c-d5cf-1cb0078a1ffa.png">

まず、`ViewController`クラスにクラス変数を作成して、発生したクリック数を追跡します。クラス定義を編集し、次のようにします。

```C#:ViewController.cs
namespace Hello_Mac
{
    public partial class ViewController : NSViewController
    {
        private int numberOfTimesClicked = 0;
        ...
```

次に、同じクラス（`ViewController`）で、`ViewDidLoad`メソッドをオーバーライドし、ラベルの初期メッセージを設定するコードを追加します。

```C#:ViewController.cs
public override void ViewDidLoad ()
{
    base.AwakeFromNib ();

    // Set the initial value for the label
    ClickedLabel.StringValue = "Button has not been clicked yet.";
}
```

`ViewDidLoad`はOSがロードされ、**.storyboard**ファイルからユーザーインターフェイスがインスタンス化された後に呼び出されるため、`Initialize`などの別のメソッドではなく、`ViewDidLoad`を使用します。**.storyboard**ファイルが完全に読み込まれてインスタンス化される前に開発者がラベルコントロールにアクセスしようとすると、ラベルコントロールがまだ作成されないため`NullReferenceException`エラーが発生します。

次に、ボタンをクリックしたユーザーに応答するコードを追加します。次のpartialクラスを`ViewController`クラスに追加します。

```C#:ViewController.cs
partial void ClickedButton (Foundation.NSObject sender) {

    // Update counter and label
    ClickedLabel.StringValue = string.Format("The button has been clicked {0} time{1}.",++numberOfTimesClicked, (numberOfTimesClicked < 2) ? "" : "s");
}
```

このコードは、XcodeおよびInterface Builderで作成されたActionにアタッチされ、ユーザーがボタンをクリックするたびに呼び出されます。

# アプリケーションのテスト
アプリを構築して実行して、期待どおりに動作することを確認します。開発者は段階的にビルド・実行することも実行せずビルドすることもできます。

アプリケーションのビルド時、開発者はビルドの種類を選ぶことができます。

* **Debug** - デバッグビルドは、アプリケーションの実行中に何が起きているのかを開発者がデバッグすることを可能にする追加のメタデータを含む**.app**（アプリケーション）ファイルにコンパイルされます。
* **Release** - リリースビルドでは、**.app**ファイルも作成されますが、デバッグ情報は含まれていないため、サイズが小さくて高速に実行されます。

開発者は、Xamarin Studio画面の左上隅にある**Configuration Selector**からビルドの種類を選択できます。

<img width="949" alt="スクリーンショット 2017-07-23 0.24.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/19a38fdd-fdef-07e7-df56-00f348fa24f0.png">

## アプリケーションのビルド
この例ではデバッグビルドで十分なので、**Debug**が選択されていることを確認してください。**⌘B**を押すか、**ビルド**メニューから**すべてビルド**を選択して、最初にアプリケーションをビルドします。

エラーがなければ、Xamarin Studioのステータスバーに**ビルドに成功しました。**というメッセージが表示されます。エラーがあった場合はプロジェクトを見直し、上記の手順が正しく実行されていることを確認してください。まず、コード（XcodeとXamarin Studioの両方）がチュートリアルのコードと一致していることを確認します。

## アプリケーションの実行
アプリを実行するには3つの方法があります。

* **⌘+Enter**を押す
* **実行**メニューの**デバッグの開始**を選択する
* Xamarin Studioツールバーの（**ソリューションエクスプローラ**のすぐ上にある）**▶️**ボタンをクリックします。

アプリケーションはビルドされ（まだビルドされていない場合）デバッグモードで起動し、メインインターフェイスウィンドウを表示します。

<img width="798" alt="スクリーンショット 2017-07-23 0.34.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/259a1f7d-b25d-af6d-a119-8089c35dbd87.png">

ボタンがクリックさるとラベルはカウント分更新されます。

<img width="477" alt="スクリーンショット 2017-07-23 0.36.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/f47369c5-ebb2-23d5-650f-43ef0e1611db.png">