Hello, Mac - チュートリアルHello, Mac – Walkthrough

Xamarin.Mac を使うと、Objective-C または Swift で開発するときに使用するのと同じ macOS API を使用して、C# と .NET で完全にネイティブな Mac アプリを開発できます。Xamarin.Mac allows for the development of fully native Mac apps in C# and .NET using the same macOS APIs that are used when developing in Objective-C or Swift. Xamarin.Mac は直接 Xcode と統合できるため、開発者は Xcode の Interface Builder を使用して、アプリのユーザー インターフェイスを作成できます (または、必要に応じて C# コードで直接作成することも可能です)。Because Xamarin.Mac integrates directly with Xcode, the developer can use Xcode's Interface Builder to create an app's user interfaces (or optionally create them directly in C# code).

さらに、Xamarin.Mac アプリケーションは C# と .NET で記述されているため、コードを Xamarin.iOS や Xamarin.Android モバイル アプリと共有し、なおかつ各プラットフォームでネイティブ エクスペリエンスを提供することができます。Additionally, since Xamarin.Mac applications are written in C# and .NET, code can be shared with Xamarin.iOS and Xamarin.Android mobile apps; all while delivering a native experience on each platform.

この記事では、ボタンがクリックされた回数を数えるシンプルな Hello Mac アプリを構築するプロセスを示しながら、Xamarin.Mac、Visual Studio for Mac、Xcode の Interface Builder を使用して Mac アプリを作成するために必要な主要概念を紹介します。This article will introduce the key concepts needed to create a Mac app using Xamarin.Mac, Visual Studio for Mac and Xcode's Interface Builder by walking through the process of building a simple Hello, Mac app that counts the number of times a button has been clicked:

Hello, Mac アプリの実行例Example of the Hello, Mac app running

次の概念について説明します。The following concepts will be covered:

  • Visual Studio for Mac – Visual Studio for Mac の概要と、Visual Studio for Mac を使って Xamarin.Mac アプリケーションを作成する方法。Visual Studio for Mac – Introduction to the Visual Studio for Mac and how to create Xamarin.Mac applications with it.
  • Xamarin.Mac アプリケーションの構造 – Xamarin.Mac アプリケーションの構成。Anatomy of a Xamarin.Mac Application – What a Xamarin.Mac application consists of.
  • Xcode の Interface Builder – Xcode の Interface Builder を使用してアプリのユーザー インターフェイスを定義する方法。Xcode’s Interface Builder – How to use Xcode’s Interface Builder to define an app’s user interface.
  • Outlet と Action – Outlet と Action を使用してユーザー インターフェイスのコントロールを接続する方法。Outlets and Actions – How to use Outlets and Actions to wire up controls in the user interface.
  • 配置/テスト – Xamarin.Mac アプリを実行してテストする方法。Deployment/Testing – How to run and test a Xamarin.Mac app.

必要条件Requirements

Xamarin.Mac アプリケーションの開発に必要な条件は次のとおりです。Xamarin.Mac application development requires:

Xamarin.Mac を使って構築されたアプリケーションを実行するには、次のものが必要です。To run an application built with Xamarin.Mac, you will need:

  • macOS 10.7 以上を搭載している Mac コンピューター。A Mac computer running macOS 10.7 or greater.

警告

今度の Xamarin.Mac 4.8 リリースでは、macOS 10.9 以降のみをサポートします。The upcoming Xamarin.Mac 4.8 release will only support macOS 10.9 or higher. 以前のバージョンの Xamarin.Mac では macOS 10.7 以降をサポートしていましたが、これらの古い macOS バージョンは TLS 1.2 をサポートするための十分な TLS インフラストラクチャがありませんでした。Previous versions of Xamarin.Mac supported macOS 10.7 or higher, but these older macOS versions lack sufficient TLS infrastructure to support TLS 1.2. macOS 10.7 または macOS 10.8 をターゲットにするには、Xamarin.Mac 4.6 以前を使用してください。To target macOS 10.7 or macOS 10.8, use Xamarin.Mac 4.6 or earlier.

Visual Studio for Mac で新しい Xamarin.Mac アプリを起動するStarting a new Xamarin.Mac App in Visual Studio for Mac

前述のように、このガイドでは、Hello_Mac という Mac アプリを作成する手順を説明します。このアプリはメイン ウィンドウにボタンとラベルを 1 つずつ追加します。As stated above, this guide will walk through the steps to create a Mac app called Hello_Mac that adds a single button and label to the main window. ボタンがクリックされたとき、クリックされた回数がラベルに表示されます。When the button is clicked, the label will display the number of times it has been clicked.

開始するには、次の手順を実行します。To get started, do the following steps:

  1. Visual Studio for Mac を起動します。Start Visual Studio for Mac:

    メインの Visual Studio for Mac インターフェイスThe main Visual Studio for Mac interface

  2. [新しいプロジェクト...] ボタンをクリックして [新しいプロジェクト] ダイアログ ボックスを開き、 [Mac] > [アプリ] > [Cocoa アプリ] の順に選択して [次へ] ボタンをクリックします。Click on the New Project... button to open the New Project dialog box, then select Mac > App > Cocoa App and click the Next button:

    Cocoa アプリの選択Selecting a Cocoa App

  3. [アプリ名] に「Hello_Mac」と入力し、それ以外はすべて既定値のままにします。Enter Hello_Mac for the App Name, and keep everything else as default. [次へ] をクリックします。Click Next:

    アプリの名前の設定Setting the name of the app

  4. コンピューター上の新しいプロジェクトの場所を確認します。Confirm the location of the new project on your computer:

    新しいソリューションの詳細の確認Verifying the new solution details

  5. [作成] ボタンをクリックします。Click the Create button.

Visual Studio for Mac で新しい Xamarin.Mac アプリが作成され、アプリのソリューションに追加される既定のファイルが表示されます。Visual Studio for Mac will create the new Xamarin.Mac app and display the default files that get added to the app's solution:

ソリューションの新しい既定のビューThe new solution default view

Visual Studio for Mac では、Visual Studio 2019 と同じ [ソリューション][プロジェクト] の構造が使用されます。Visual Studio for Mac uses the same Solution and Project structure as Visual Studio 2019. ソリューションは 1 つまたは複数のプロジェクトを保持できるコンテナーです。プロジェクトには、アプリケーション、サポート ライブラリ、テスト アプリケーションなどを含めることができます。 [ファイル] > [新しいプロジェクト] テンプレートにより、ソリューションとアプリケーション プロジェクトが自動的に作成されます。A solution is a container that can hold one or more projects; projects can include applications, supporting libraries, test applications, etc. The File > New Project template creates a solution and an application project automatically.

Xamarin.Mac アプリケーションの構造Anatomy of a Xamarin.Mac Application

Xamarin.Mac アプリケーションのプログラミングは、Xamarin.iOS を扱う場合とよく似ています。Xamarin.Mac application programming is very similar to working with Xamarin.iOS. iOS では、Mac で使われる Cocoa をスリムにしたバージョンである CocoaTouch フレームワークが使用されています。iOS uses the CocoaTouch framework, which is a slimmed-down version of Cocoa, used by Mac.

プロジェクト内のファイルを見てください。Take a look at the files in the project:

  • Main.cs には、アプリのメイン エントリ ポイントが含まれています。Main.cs contains the main entry point of the app. アプリが起動した時点では、Main クラスには実行される最初のメソッドが含まれます。When the app is launched, the Main class contains the very first method that is run.
  • AppDelegate.cs には、オペレーティング システムからのイベントをリッスンする AppDelegate クラスが含まれています。AppDelegate.cs contains the AppDelegate class that is responsible for listening to events from the operating system.
  • Info.plist には、アプリケーション名、アイコンなどのアプリのプロパティが含まれています。Info.plist contains app properties such as the application name, icons, etc.
  • Entitlements.plist にはアプリの権利が含まれています。アプリの権利によってサンドボックスや iCloud のサポートなどにアクセスできます。Entitlements.plist contains the entitlements for the app and allows access to things such as Sandboxing and iCloud support.
  • Main.storyboard ではアプリのユーザー インターフェイス (ウィンドウとメニュー) が定義され、ウィンドウ間の相互接続が Segues 経由でレイアウトされます。Main.storyboard defines the user interface (Windows and Menus) for an app and lays out the interconnections between Windows via Segues. ストーリーボードは、ビュー (ユーザー インターフェイス要素) の定義を含む XML ファイルです。Storyboards are XML files that contain the definition of views (user interface elements). このファイルは、Xcode 内の Interface Builder で作成、維持管理することができます。This file can be created and maintained by Interface Builder inside of Xcode.
  • ViewController.cs はメイン ウィンドウのコントローラーです。ViewController.cs is the controller for the main window. コントローラーについては別の記事で詳しく説明しますが、ここでは、コントローラーを特定のビューのメイン エンジンと考えることができます。Controllers will be covered in detail in another article, but for now, a controller can be thought of the main engine of any particular view.
  • ViewController.designer.cs には、メイン画面のユーザー インターフェイスとの統合のための組み込みコードが含まれています。ViewController.designer.cs contains plumbing code that helps integrate with the main screen’s user interface.

以下のセクションでは、これらのファイルのいくつかを簡単に見ていきます。The following sections, will take a quick look through some of these files. 後で詳しく説明しますが、まず基本を理解することをお勧めします。Later, they will be explored in more detail, but it’s a good idea to understand their basics now.

Main.csMain.cs

Main.cs ファイルはとてもシンプルです。The Main.cs file is very simple. これには、新しい Xamarin.Mac アプリ インスタンスを作成し、OS イベントを処理するクラスの名前を渡す静的 Main メソッドが含まれています。ここでは、AppDelegate クラスが該当します。It contains a static Main method which creates a new Xamarin.Mac app instance and passes the name of the class that will handle OS events, which in this case is the AppDelegate class:

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.csAppDelegate.cs

AppDelegate.cs ファイルには AppDelegate クラスが含まれています。このクラスは、ウィンドウの作成と OS イベントのリッスンを行います。The AppDelegate.cs file contains an AppDelegate class, which is responsible for creating windows and listening to OS events:

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 アプリを構築したことがある開発者以外にはおそらくなじみの薄いものですが、かなりシンプルです。This code is probably unfamiliar unless the developer has built an iOS app before, but it’s fairly simple.

DidFinishLaunching メソッドは、アプリがインスタンス化された後に実行され、実際にアプリのウィンドウを作成して、その中にビューを表示するプロセスを開始します。The DidFinishLaunching method runs after the app has been instantiated, and it’s responsible for actually creating the app's window and beginning the process of displaying the view in it.

WillTerminate メソッドは、ユーザーまたはシステムがアプリのシャットダウンをインスタンス化したときに呼び出されます。The WillTerminate method will be called when the user or the system has instantiated a shutdown of the app. 開発者はこのメソッドを使用して、アプリが終了する前に最終処理を行う必要があります (ユーザー設定やウィンドウのサイズと位置を保存するなど)。The developer should use this method to finalize the app before it quits (such as saving user preferences or window size and location).

ViewController.csViewController.cs

Cocoa (と派生の CocoaTouch) は、モデル ビュー コントローラー (MVC) パターンと呼ばれるパターンを使用します。Cocoa (and by derivation, CocoaTouch) uses what’s known as the Model View Controller (MVC) pattern. ViewController 宣言は、オブジェクトが実際のアプリ ウィンドウを制御することを表します。The ViewController declaration represents the object that controls the actual app window. 一般に、作成されたすべてのウィンドウ (およびウィンドウ内の他の多くの要素) には、ウィンドウのライフサイクルに関する処理を行うコントローラーがあります。コントローラーは、ウィンドウを表示したり、ウィンドウに新しいビュー (コントロール) を追加したりします。Generally, for every window created (and for many other things within windows), there is a controller, which is responsible for the window’s lifecycle, such as showing it, adding new views (controls) to it, etc.

ViewController クラスはメイン ウィンドウのコントローラーです。The ViewController class is the main window’s controller. コントローラーによって、メイン ウィンドウのライフ サイクルに関する処理が行われます。The controller is responsible for the life cycle of the main window. これについては後で詳しく説明します。ここでは簡単に見ていきます。This will be examined in detail later, for now take a quick look at it:

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.csViewController.Designer.cs

メイン ウィンドウ クラスのデザイナー ファイルは最初は空ですが、Xcode Interface Builder を使用してユーザー インターフェイスを作成すると、Visual Studio for Mac によって自動的に作成されます。The designer file for the Main Window class is initially empty, but it will be automatically populated by Visual Studio for Mac as the user interface is created with Xcode Interface Builder:

// WARNING
//
// This file has been generated automatically by Visual Studio for Mac 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 ()
        {
        }
    }
}

デザイナー ファイルを直接編集しないでください。デザイナー ファイルは Visual Studio for Mac によって自動的に管理され、アプリ内のウィンドウまたはビューに追加されたコントロールへのアクセスに必要なコードを提供します。Designer files should not be edited directly, as they’re automatically managed by Visual Studio for Mac to provide the plumbing code that allows access to controls that have been added to any window or view in the app.

Xamarin.Mac アプリ プロジェクトを作成し、そのコンポーネントの基本を理解したので、Xcode に切り替え、Interface Builder を使用してユーザー インターフェイスを作成します。With the Xamarin.Mac app project created and a basic understanding of its components, switch to Xcode to create the user interface using Interface Builder.

Info.plistInfo.plist

Info.plist ファイルには、名前バンドル ID などの Xamarin.Mac アプリに関する情報が含まれています。The Info.plist file contains information about the Xamarin.Mac app such as its Name and Bundle Identifier:

Visual Studio for Mac plist エディターThe Visual Studio for Mac plist editor

また、メイン インターフェイス ドロップダウンの Xamarin.Mac アプリのユーザー インターフェイスを表示するために使用される_ストーリーボード_も定義します。It also defines the Storyboard that will be used to display the user interface for the Xamarin.Mac app under the Main Interface dropdown. 上記の例において、ドロップダウンの Mainソリューション エクスプローラーのプロジェクト ツリーにある Main.storyboard に関連しています。In example above, Main in the dropdown relates to the Main.storyboard in the project's source tree in the Solution Explorer. また、それらを含むアセット カタログ (この場合は AppIcons) を指定することで、アプリのアイコンが定義されます。It also defines the app's icons by specifying the Asset Catalog that contains them (AppIcon in this case).

Entitlements.plistEntitlements.plist

アプリの Entitlements.plist ファイルは、Xamarin.Mac アプリのサンドボックスiCloud などの権利を制御します。The app's Entitlements.plist file controls entitlements that the Xamarin.Mac app has such as Sandboxing and iCloud:

Visual Studio for Mac 権利エディターThe Visual Studio for Mac entitlements editor

Hello World の例に権利は不要です。For the Hello World example, no entitlements will be required. 次のセクションでは、Xcode の Interface Builder を使用して Main.storyboard ファイルを編集し、Xamarin.Mac アプリの UI を定義する方法を示します。The next section shows how to use Xcode's Interface Builder to edit the Main.storyboard file and define the Xamarin.Mac app's UI.

Xcode と Interface Builder の概要Introduction to Xcode and Interface Builder

Xcode の一部として、Apple は Interface Builder というツールを作成しました。このツールを使用すると、開発者はデザイナーでユーザー インターフェイスを視覚的に作成できます。As part of Xcode, Apple has created a tool called Interface Builder, which allows a developer to create a user interface visually in a designer. Xamarin.Mac は Interface Builder と完全に統合され、Objective-C ユーザーと同じツールで UI を作成できます。Xamarin.Mac integrates fluently with Interface Builder, allowing UI to be created with the same tools as Objective-C users.

作業を開始するには、ソリューション エクスプローラーMain.storyboard ファイルをダブルクリックして、Xcode と Interface Builder での編集用に開きます。To get started, double-click the Main.storyboard file in the Solution Explorer to open it for editing in Xcode and Interface Builder:

ソリューション エクスプローラーの Main.storyboard ファイルThe Main.storyboard file in the Solution Explorer

これで、次のスクリーンショットのように Xcode が起動します。This should launch Xcode and look like this screenshot:

既定の Xcode Interface Builder ビューThe default Xcode Interface Builder view

インターフェイスのデザインを始める前に、デザインに使用する主な機能を中心に Xcode の概要を簡単に説明します。Before starting to design the interface, take a quick overview of Xcode to orient with the main features that will be used.

注意

開発者は、Xamarin.Mac アプリのユーザー インターフェイスを作成するのに必ずしも Xcode と Interface Builder を使用する必要はありません。C# コードから UI を直接作成できますが、それについてはこの記事では説明しません。The developer doesn't have to use Xcode and Interface Builder to create the user interface for a Xamarin.Mac app, the UI can be created directly from C# code but that is beyond the scope of this article. わかりやすくするために、このチュートリアルでは Interface Builder を使用してユーザー インターフェイスを作成します。For the sake of simplicity, it will be using Interface Builder to create the user interface throughout the rest of this tutorial.

Xcode のコンポーネントComponents of Xcode

Visual Studio for Mac から Xcode で .storyboard ファイルを開くと、左側にプロジェクト ナビゲーター、中央にインターフェイス階層インターフェイス エディター、右側にプロパティとユーティリティのセクションが表示されます。When opening a .storyboard file in Xcode from Visual Studio for Mac, it opens with a Project Navigator on the left, the Interface Hierarchy and Interface Editor in the middle, and a Properties & Utilities section on the right:

Xcode での Interface Builder のさまざまなセクションThe various sections of Interface Builder in Xcode

以下のセクションでは、これらの Xcode の各機能と Xamarin.Mac アプリのインターフェイスを作成する方法について説明します。The following sections take a look at what each of these Xcode features do and how to use them to create the interface for a Xamarin.Mac app.

プロジェクトのナビゲーションProject Navigation

Xcode で .storyboard ファイルを開くと、Visual Studio for Mac によって Xcode プロジェクト ファイルがバックグラウンドで作成され、Visual Studio for Mac と Xcode の間で変更が通知されます。When opening a .storyboard file for editing in Xcode, Visual Studio for Mac creates a Xcode Project File in the background to communicate changes between itself and Xcode. その後、開発者が Xcode から Visual Studio for Mac に戻ると、このプロジェクトに対する変更は Visual Studio for Mac によって Xamarin.Mac プロジェクトと同期されます。Later, when the developer switches back to Visual Studio for Mac from Xcode, any changes made to this project are synchronized with the Xamarin.Mac project by Visual Studio for Mac.

プロジェクト ナビゲーション セクションでは、開発者はこの shim Xcode プロジェクトを構成するすべてのファイル間を移動できます。The Project Navigation section allows the developer to navigate between all of the files that make up this shim Xcode project. 通常、開発者の関心の対象は、この一覧の .storyboard ファイル (Main.storyboardなど) のみです。Typically, they will only be interested in the .storyboard files in this list such as Main.storyboard.

インターフェイス階層Interface Hierarchy

インターフェイス階層セクションでは、開発者はプレースホルダーやメイン ウィンドウなどのユーザー インターフェイスの主要な複数のプロパティに簡単にアクセスできます。The Interface Hierarchy section allows the developer to easily access several key properties of the user interface such as its Placeholders and main Window. このセクションを使用すると、ユーザー インターフェイスを構成する個々の要素 (ビュー) にアクセスしたり、階層内でそれらの要素をドラッグして、入れ子にする方法を調整したりできます。This section can be used to access the individual elements (views) that make up the user interface and to adjust the way they are nested by dragging them around within the hierarchy.

インターフェイス エディターInterface Editor

インターフェイス エディターのセクションでは、ユーザー インターフェイスをグラフィカルにレイアウトする画面が提供されます。プロパティとユーティリティのセクションにあるライブラリ セクションから要素をドラッグして、デザインを作成します。The Interface Editor section provides the surface on which the user interface is graphically laid out. Drag elements from the Library section of the Properties & Utilities section to create the design. ユーザー インターフェイス要素 (ビュー) をデザイン サーフェイスに追加すると、インターフェイス エディターに表示されている順序でインターフェイス階層セクションに追加されます。As user interface elements (views) are added to the design surface, they will be added to the Interface Hierarchy section in the order that they appear in the Interface Editor.

プロパティとユーティリティProperties & Utilities

プロパティとユーティリティのセクションは、プロパティ (インスペクターとも呼ばれる) とライブラリという 2 つの主要なセクションに分かれています。The Properties & Utilities section is divided into two main sections, Properties (also called Inspectors) and the Library:

プロパティ インスペクターThe Properties Inspector

最初はこのセクションはほとんど空ですが、開発者がインターフェイス エディターまたはインターフェイス階層で要素を選択すると、プロパティ セクションには指定した要素と調整可能なプロパティに関する情報が設定されます。Initially this section is almost empty, however if the developer selects an element in the Interface Editor or Interface Hierarchy, the Properties section will be populated with information about the given element and properties that they can adjust.

プロパティ セクション内には、次の図に示すように 8 つの異なるインスペクター タブがあります。Within the Properties section, there are eight different Inspector Tabs, as shown in the following illustration:

すべてのインスペクターの概要An overview of all Inspectors

プロパティとユーティリティの種類Properties & Utility Types

左から順に次のタブがあります。From left-to-right, these tabs are:

  • ファイル インスペクター – ファイル インスペクターは編集中の Xib ファイルの場所やファイル名などのファイル情報を示します。File Inspector – The File Inspector shows file information, such as the file name and location of the Xib file that is being edited.
  • クイック ヘルプ – クイック ヘルプでは、Xcode での選択内容に基づいたヘルプが表示されます。Quick Help – The Quick Help tab provides contextual help based on what is selected in Xcode.
  • ID インスペクター – ID インスペクターでは、選択したコントロールまたはビューに関する情報が表示されます。Identity Inspector – The Identity Inspector provides information about the selected control/view.
  • 属性インスペクター – 属性インスペクターを使用すると、開発者は選択したコントロールまたはビューのさまざまな属性をカスタマイズできます。Attributes Inspector – The Attributes Inspector allows the developer to customize various attributes of the selected control/view.
  • サイズ インスペクター – サイズ インスペクターを使用すると、開発者は選択したコントロールまたはビューのサイズとサイズ変更の動作を制御できます。Size Inspector – The Size Inspector allows the developer to control the size and resizing behavior of the selected control/view.
  • 接続インスペクター – 接続インスペクターには、選択したコントロールのアウトレットアクションの接続が表示されます。Connections Inspector – The Connections Inspector shows the Outlet and Action connections of the selected controls. Outlet と Action については、以下で詳しく説明します。Outlets and Actions will be discussed in detail below.
  • バインド インスペクター – バインド インスペクターを使用すると、開発者は値が自動的にデータ モデルにバインドされるようにコントロールを構成できます。Bindings Inspector – The Bindings Inspector allows the developer to configure controls so that their values are automatically bound to data models.
  • 表示効果インスペクター – 表示効果インスペクターを使用すると、開発者はコントロールにアニメーションなどの効果を指定できます。View Effects Inspector – The View Effects Inspector allows the developer to specify effects on the controls, such as animations.

ライブラリ セクションでは、コントロールとオブジェクトを探してデザイナーに配置し、グラフィカルにユーザー インターフェイスを構築します。Use the Library section to find controls and objects to place into the designer to graphically build the user interface:

Xcode ライブラリ インスペクターThe Xcode Library Inspector

インターフェイスの作成Creating the Interface

Xcode IDE と Interface Builder の基本を理解したら、開発者はメイン ビューのユーザー インターフェイスを作成できます。With the basics of the Xcode IDE and Interface Builder covered, the developer can create the user interface for the main view.

次の手順に従って Interface Builder を使用します。Follow these steps to use Interface Builder:

  1. Xcode で、ライブラリ セクションからボタンをドラッグします。In Xcode, drag a Push Button from the Library Section:

    ライブラリ インスペクターからの NSButton の選択Selecting a NSButton from the Library Inspector

  2. Interface Editorビュー (ウィンドウ コントローラーの下) にボタンをドロップします。Drop the button onto the View (under the Window Controller) in the Interface Editor:

    インターフェイス デザインへのボタンの追加Adding a Button to the interface design

  3. 属性インスペクターTitle プロパティをクリックし、ボタンのタイトルを「クリックしてください」に変更します。Click on the Title property in the Attribute Inspector and change the button's title to Click Me:

    ボタンのプロパティの設定Setting the button's properties

  4. ライブラリ セクションからラベルをドラッグします。Drag a Label from the Library Section:

    ライブラリ インスペクターからのラベルの選択Selecting a Label from the Library Inspector

  5. Interface Editor のボタンの横にあるウィンドウにラベルをドラッグします。Drop the label onto the Window beside the button in the Interface Editor:

    インターフェイス デザインへのラベルの追加Adding a Label to the Interface Design

  6. ラベルの右ハンドルをつかみ、ウィンドウの端に近づくまでドラッグします。Grab the right handle on the label and drag it until it is near the edge of the window:

    ラベルのサイズの変更Resizing the Label

  7. 追加したボタンをインターフェイス エディターで選択し、ウィンドウ下部の制約エディター アイコンをクリックします。Select the Button just added in the Interface Editor, and click the Constraints Editor icon at the bottom of the window:

    ボタンへの制約の追加Adding constraints to the button

  8. エディターの上部で、左上の赤い I ビームをクリックします。At the top of the editor, click the Red I-Beams at the top and left. これにより、ウィンドウのサイズが変更されても、ボタンが画面の左上隅の同じ位置に維持されます。As the window is resized, this will keep the button in the same location at the top left corner of the screen.

  9. 次に、 [高さ][幅] のボックスをクリックし、既定のサイズをそのまま使用します。Next, check the Height and Width boxes and use the default sizes. こうすると、ウィンドウのサイズが変更されても、ボタンが同じサイズに維持されます。This keeps the button at the same size when the window resizes.

  10. [Add 4 Constraints](4 制約の追加) ボタンをクリックして制約を追加し、エディターを閉じます。Click the Add 4 Constraints button to add the constraints and close the editor.

  11. ラベルを選択し、制約エディター アイコンをもう一度クリックします。Select the label and click the Constraints Editor icon again:

    ラベルへの制約の追加Adding constraints to the label

  12. 制約エディターの上、右、左にある赤い I ビームをクリックすると、指定された X と Y の位置にラベルが固定され、実行中のアプリケーションでウィンドウのサイズが変更されたときに拡大、縮小するように指定されます。By clicking Red I-Beams at the top, right and left of the Constraints Editor, tells the label to be stuck to its given X and Y locations and to grow and shrink as the window is resized in the running application.

  13. もう一度 [高さ] ボックスをクリックし、既定のサイズをそのまま使用します。次に、 [Add 4 Constraints](4 制約の追加) ボタンをクリックして制約を追加し、エディターを閉じます。Again, check the Height box and use the default size, then click the Add 4 Constraints button to add the constraints and close the editor.

  14. ユーザー インターフェイスに対する変更を保存します。Save the changes to the user interface.

コントロールのサイズ変更と移動中、macOS ヒューマン インターフェイス ガイドラインに基づく便利なヒントが Interface Builder に表示されます。While resizing and moving controls around, notice that Interface Builder gives helpful snap hints that are based on macOS Human Interface Guidelines. これらのガイドラインは、開発者が Mac ユーザーにとって使い慣れた外観と操作感を持つ高品質なアプリを作成するのに役立ちます。These guidelines will help the developer to create high quality apps that will have a familiar look and feel for Mac users.

インターフェイス階層セクションを参照して、ユーザー インターフェイスを構成する要素のレイアウトと階層がどのように表示されるかを確認します。Look in the Interface Hierarchy section to see how the layout and hierarchy of the elements that make up the user interface are shown:

インターフェイス階層内の要素の選択Selecting an element in the Interface Hierarchy

ここから、開発者は必要に応じて項目を選択して編集したり、UI 要素をドラッグして順序を変更したりできます。From here the developer can select items to edit or drag to reorder UI elements if needed. たとえば、UI 要素が別の要素で覆われている場合、その要素をリストの一番下にドラッグすると、その要素をウィンドウの一番上の項目にすることができます。For example, if a UI element was being covered by another element, they could drag it to the bottom of the list to make it the top-most item on the window.

ユーザー インターフェイスを作成したら、開発者は UI 項目を公開して、Xamarin.Mac が C# コードでそれらの項目にアクセスして対話できるようにする必要があります。With the user interface created, the developer will need to expose the UI items so that Xamarin.Mac can access and interact with them in C# code. 次の「Outlet と Action」のセクションで、その方法を説明します。The next section, Outlets and Actions, shows how to do this.

Outlet と ActionOutlets and Actions

OutletAction とは何でしょうか?So what are Outlets and Actions? 従来の .NET ユーザー インターフェイス プログラミングでは、ユーザー インターフェイスのコントロールは追加時にプロパティとして自動的に公開されます。In traditional .NET user interface programming, a control in the user interface is automatically exposed as a property when it’s added. Mac では事情が異なり、ビューにコントロールを追加しただけでは、コントロールはコードにアクセスできません。Things work differently in Mac, simply adding a control to a view doesn’t make it accessible to code. 開発者は、UI 要素を明示的にコードに公開する必要があります。The developer must explicitly expose the UI element to code. これを行うために、Apple は 2 つのオプションを提供しています。In order do this, Apple provides two options:

  • Outlet – Outlet はプロパティに似ています。Outlets – Outlets are analogous to properties. 開発者がコントロールをアウトレットに接続すると、プロパティを介してコードに公開されるため、イベント ハンドラーをアタッチしたり、メソッドを呼び出したりする操作を行うことができます。If the developer wires up a control to an Outlet, it’s exposed to the code via a property, so they can do things like attach event handlers, call methods on it, etc.
  • アクション – アクションは WPF のコマンド パターンに似ています。Actions – Actions are analogous to the command pattern in WPF. たとえば、コントロールに対してボタンのクリックなどのアクションが実行されると、コントロールはコード内でメソッドを自動的に呼び出します。For example, when an Action is performed on a control, say a button click, the control will automatically call a method in the code. 開発者は多くのコントロールを同じアクションに接続できるため、アクションは強力で便利です。Actions are powerful and convenient because the developer can wire up many controls to the same Action.

Xcode では、OutletActionコントロールのドラッグで直接コードに追加されます。In Xcode, Outlets and Actions are added directly in code via Control-dragging. 具体的には、アウトレットまたはアクションを作成するために、開発者はアウトレットまたはアクションを追加するコントロール要素を選択し、キーボードの Control キーを押したまま、コントロールをコードに直接ドラッグします。More specifically, this means that to create an Outlet or Action, the developer will choose a control element to add an Outlet or Action to, hold down the Control key on the keyboard, and drag that control directly into the code.

Xamarin.Mac 開発者にとって、これは開発者がアウトレットまたはアクションを作成する Objective-C スタブ ファイル (C# ファイルに対応) にドラッグすることを意味します。For Xamarin.Mac developers, this means that the developer will drag into the Objective-C stub files that correspond to the C# file where they want to create the Outlet or Action. Visual Studio for Mac は、Interface Builder を使用するために生成した shim Xcode プロジェクトの一部として ViewController.h というファイルを作成しました。Visual Studio for Mac created a file called ViewController.h as part of the shim Xcode Project it generated to use Interface Builder:

Xcode でのソースの表示Viewing source in Xcode

このスタブ .h ファイルは、新しい NSWindow が作成されたときに自動的に Xamarin.Mac プロジェクトに追加される ViewController.designer.cs を反映しています。This stub .h file mirrors the ViewController.designer.cs that is automatically added to a Xamarin.Mac project when a new NSWindow is created. このファイルは、Interface Builder によって行われた変更を同期するためにも使用されます。そしてこのファイルで OutletAction が作成され、UI 要素が C# コードに公開されます。This file will be used to synchronize the changes made by Interface Builder and is where the Outlets and Actions are created so that UI elements are exposed to C# code.

アウトレットの追加Adding an Outlet

OutletAction が何であるかの基本を理解したので、作成したラベルを C# コードに公開するOutlet を作成します。With a basic understanding of what Outlets and Actions are, create an Outlet to expose the Label created to our C# code.

次の手順で行います。Do the following:

  1. Xcode の画面の右上の端にある二連の輪のボタンをクリックして、アシスタント エディターを開きます。In Xcode at the far right top-hand corner of the screen, click the Double Circle button to open the Assistant Editor:

    アシスタント エディターの表示Displaying the Assistant Editor

  2. Xcode が分割ビュー モードに切り替わり、一方の側にインターフェイス エディター、もう一方の側にコード エディターが表示されます。The Xcode will switch to a split-view mode with the Interface Editor on one side and a Code Editor on the other.

  3. Xcode によりコード エディターで自動的に ViewController.m ファイルが選択されたことに注意してください。これは間違っています。Notice that Xcode has automatically picked the ViewController.m file in the Code Editor, which is incorrect. 前述の OutletAction とは何かについての説明のように、開発者は ViewController.h を選択する必要があります。From the discussion on what Outlets and Actions are above, the developer will need to have the ViewController.h selected.

  4. コード エディターの上部で、 [自動リンク] をクリックし、ViewController.h ファイルを選択します。At the top of the Code Editor click on the Automatic Link and select the ViewController.h file:

    正しいファイルの選択Selecting the correct file

  5. Xcode で正しいファイルが選択されます。Xcode should now have the correct file selected:

    ViewController.h ファイルの表示Viewing the ViewController.h file

  6. 最後のステップは非常に重要です。 正しいファイルを選択しなかった場合、OutletAction を作成することができなくなるか、またはそれらが C# の間違ったクラスに公開されます。The last step was very important!: if you didn't have the correct file selected, you won't be able to create Outlets and Actions, or they will be exposed to the wrong class in C#!

  7. インターフェイス エディターで、キーボードの Control キーを押しながら、前述の手順で作成したラベルをクリックしてコード エディターの @interface ViewController : NSViewController {} コードのすぐ下にドラッグします。In the Interface Editor, hold down the Control key on the keyboard and click-drag the label created above onto the code editor just below the @interface ViewController : NSViewController {} code:

    ドラッグしてアウトレットを作成Dragging to create an Outlet

  8. ダイアログ ボックスが表示されます。A dialog box will be displayed. [接続][アウトレット] に設定したままにして、 [名前] に「ClickedLabel」と入力します。Leave the Connection set to Outlet and enter ClickedLabel for the Name:

    アウトレットの定義Defining the Outlet

  9. [接続] ボタンをクリックしてアウトレットを作成します。Click the Connect button to create the Outlet:

    最終アウトレットの表示Viewing the final Outlet

  10. 変更内容をファイルに保存します。Save the changes to the file.

アクションの追加Adding an Action

次に、ボタンを C# コードに公開します。Next, expose the button to C# code. 上記のラベルと同じように、開発者はボタンをアウトレットに接続できます。Just like the Label above, the developer could wire the button up to an Outlet. クリックされたボタンにのみ応答するようにしたいので、代わりにアクションを使用します。Since we only want to respond to the button being clicked, use an Action instead.

次の手順で行います。Do the following:

  1. Xcode でアシスタント エディターがまだ開いていて、ViewController.h ファイルがコード エディターに表示されていることを確認します。Ensure that Xcode is still in the Assistant Editor and the ViewController.h file is visible in the Code Editor.

  2. インターフェイス エディターで、キーボードの Control キーを押しながら、前述の手順で作成したボタンをクリックしてコード エディターの @property (assign) IBOutlet NSTextField *ClickedLabel; コードのすぐ下にドラッグします。In the Interface Editor, hold down the Control key on the keyboard and click-drag the button created above onto the code editor just below the @property (assign) IBOutlet NSTextField *ClickedLabel; code:

    ドラッグしてアクションを作成Dragging to create an Action

  3. [接続] の種類を [アクション] に変更します。Change the Connection type to Action:

    アクションの定義Defining the Action

  4. [名前] に「ClickedButton」を入力します。Enter ClickedButton as the Name:

    新しいアクションの名前付けNaming the new Action

  5. [接続] ボタンをクリックしてアクションを作成します。Click the Connect button to create Action:

    最終アクションの表示Viewing the final Action

  6. 変更内容をファイルに保存します。Save the changes to the file.

ユーザー インターフェイスを接続して C# コードに公開したので、Visual Studio for Mac に戻り、Xcode と Interface Builder で行った変更を同期させます。With the user interface wired-up and exposed to C# code, switch back to Visual Studio for Mac and let it synchronize the changes made in Xcode and Interface Builder.

注意

この最初のアプリのユーザー インターフェイスおよび OutletAction を作成するには時間がかかったことでしょう。作業量が多いように思われるかもしれませんが、多くの新しい概念が導入されているため、時間をかけて新しい作業方法を紹介しました。It probably took a long time to create the user interface and Outlets and Actions for this first app, and it may seem like a lot of work, but a lot of new concepts were introduced and a lot of time was spent covering new ground. Interface Builder を使用してしばらく練習すれば、このインターフェイスおよびすべての OutletAction をわずか 1、2 分で作成できるようになります。After practicing for a while and working with Interface Builder, this interface and all its Outlets and Actions can be created in just a minute or two.

Xcode との変更の同期Synchronizing Changes with Xcode

開発者が Xcode から Visual Studio for Mac に戻ると、Xcode で行った変更は自動的に Xamarin.Mac プロジェクトと同期されます。When the developer switches back to Visual Studio for Mac from Xcode, any changes that they have made in Xcode will automatically be synchronized with the Xamarin.Mac project.

ソリューション エクスプローラーViewController.designer.cs を選択して、OutletAction が C# コードでどのように接続されているかを確認します。Select the ViewController.designer.cs in the Solution Explorer to see how the Outlet and Action have been wired up in the C# code:

Xcode との変更の同期Synchronizing changes with Xcode

ViewController.designer.cs ファイル内の 2 つの定義がどのようになっているかに注目してください。Notice how the two definitions in the ViewController.designer.cs file:

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

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

Xcode の ViewController.h ファイルの定義と比べてみましょう。Line up with the definitions in the ViewController.h file in Xcode:

@property (assign) IBOutlet NSTextField *ClickedLabel;
- (IBAction)ClickedButton:(id)sender;

Visual Studio for Mac は .h ファイルの変更をリッスンし、それぞれの .designer.cs ファイルでこれらの変更を自動的に同期して、アプリに公開します。Visual Studio for Mac listens for changes to the .h file, and then automatically synchronizes those changes in the respective .designer.cs file to expose them to the app. ViewController.designer.cs が部分クラスであるため、Visual Studio for Mac は、開発者がクラスに対して行った変更を上書きする ViewController.cs を変更する必要がないことに注意してください。Notice that ViewController.designer.cs is a partial class, so that Visual Studio for Mac doesn't have to modify ViewController.cs which would overwrite any changes that the developer has made to the class.

通常、開発者は ViewController.designer.cs を開く必要はありませんが、ここでは学習の目的のためだけに示しています。Normally, the developer will never need to open the ViewController.designer.cs, it was presented here for educational purposes only.

注意

ほとんどの場合、Visual Studio for Mac は Xcode で行われた変更を自動的に確認し、Xamarin.Mac プロジェクトに同期します。In most situations, Visual Studio for Mac will automatically see any changes made in Xcode and sync them to the Xamarin.Mac project. 同期が自動的に行われないときは Xcode に戻り、再び Visual Studio for Mac に戻ります。In the off occurrence that synchronization doesn't automatically happen, switch back to Xcode and then back to Visual Studio for Mac again. こうすると通常、同期サイクルが開始します。This will normally kick off a synchronization cycle.

コードの記述Writing the Code

ユーザー インターフェイスが作成され、UI 要素が OutletAction を介してコードに公開されたので、最終的にプログラムを実現するためのコードを書く準備が整いました。With the user interface created and its UI elements exposed to code via Outlets and Actions, we are finally ready to write the code to bring the program to life.

このサンプル アプリでは、最初のボタンをクリックするたびにラベルが更新され、ボタンがクリックされた回数が表示されます。For this sample app, every time the first button is clicked, the label will be updated to show how many times the button has been clicked. これを行うには、ソリューション エクスプローラーViewController.cs ファイルをダブルクリックして編集用に開きます。To accomplish this, open the ViewController.cs file for editing by double-clicking it in the Solution Explorer:

Visual Studio for Mac での ViewController.cs ファイルの表示Viewing the ViewController.cs file in Visual Studio for Mac

まず、ViewController クラスにクラスレベル変数を作成して、発生したクリックの回数を記録します。First, create a class-level variable in the ViewController class to track the number of clicks that have happened. クラス定義を編集し、次のようにします。Edit the class definition and make it look like the following:

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

次に、同じクラス (ViewController) で、ViewDidLoad メソッドをオーバーライドし、ラベルの初期メッセージを設定するコードを追加します。Next, in the same class (ViewController), override the ViewDidLoad method and add some code to set the initial message for the label:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

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

ViewDidLoad (Initialize などの別のメソッドではなく) を使用します。ViewDidLoad は、OS が読み込まれ、 .storyboard ファイルからユーザー インターフェイスがインスタンス化されたに呼び出されるためです。Use ViewDidLoad, instead of another method such as Initialize, because ViewDidLoad is called after the OS has loaded and instantiated the user interface from the .storyboard file. .storyboard ファイルが完全に読み込まれてインスタンス化される前に開発者がラベル コントロールにアクセスしようとすると、ラベル コントロールがまだ存在しないため NullReferenceException エラーが発生します。If the developer tried to access the label control before the .storyboard file has been fully loaded and instantiated, they would get a NullReferenceException error because the label control would not exist yet.

次に、ボタンをクリックしたユーザーに応答するコードを追加します。Next, add the code to respond to the user clicking the button. 次の部分メソッドを ViewController クラスに追加します。Add the following partial method to the ViewController class:

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 で作成されたアクションにアタッチされ、ユーザーがボタンをクリックするたびに呼び出されます。This code attaches to the Action created in Xcode and Interface Builder and will be called any time the user clicks the button.

アプリケーションのテストTesting the Application

アプリをビルドして実行し、期待どおりに動作することを確認します。It’s time to build and run the app to make sure it runs as expected. 開発者は 1 つのステップですべてをビルドして実行することも、実行せずビルドすることもできます。The developer can build and run all in one step, or they can build it without running it.

アプリのビルド時、開発者はビルドの種類を選択できます。Whenever an app is built, the developer can choose what kind of build they want:

  • デバッグ – デバッグ ビルドは、アプリの実行中に何が起きているのかを開発者がデバッグすることを可能にする追加のメタデータを含む .app (アプリケーション) ファイルにコンパイルされます。Debug – A debug build is compiled into an .app (application) file with a bunch of extra metadata that allows the developer to debug what’s happening while the app is running.
  • リリース – リリース ビルドでは、 .app ファイルも作成されますが、デバッグ情報は含まれていないためサイズが小さく、高速に実行されます。Release – A release build also creates an .app file, but it doesn’t include debug information, so it’s smaller and executes faster.

開発者は、Visual Studio for Mac 画面の左上隅にある構成セレクターからビルドの種類を選択できます。The developer can select the type of build from the Configuration Selector at the upper left-hand corner of the Visual Studio for Mac screen:

デバッグ ビルドの選択Selecting a Debug build

アプリケーションのビルドBuilding the Application

この例ではデバッグ ビルドで十分なので、 [デバッグ] が選択されていることを確認してください。In the case of this example, we just want a debug build, so ensure that Debug is selected. ⌘B を押すか、 [ビルド] メニューの [すべてビルド] を選択して、最初にアプリをビルドします。Build the app first by either pressing ⌘B, or from the Build menu, choose Build All.

エラーがなければ、Visual Studio for Mac のステータス バーに "ビルドが成功しました" というメッセージが表示されます。If there weren't any errors, a Build Succeeded message will be displayed in Visual Studio for Mac's status bar. エラーがあった場合はプロジェクトを見直し、上記の手順に正しく従っていることを確認してください。If there were errors, review the project and make sure that the steps above have been followed correctly. まず、コード (Xcode と Visual Studio for Mac の両方) がチュートリアルのコードと一致していることを確認します。Start by confirming that the code (both in Xcode and in Visual Studio for Mac) matches the code in the tutorial.

アプリケーションの実行Running the Application

アプリを実行するには次の 3 つの方法があります。There are three ways to run the app:

  • ⌘+Enter を押します。Press ⌘+Enter.
  • [実行] メニューの [デバッグ] を選択します。From the Run menu, choose Debug.
  • Visual Studio for Mac ツール バー (ソリューション エクスプローラーのすぐ上) の [再生] ボタンをクリックします。Click the Play button in the Visual Studio for Mac toolbar (just above the Solution Explorer).

アプリはビルド (まだビルドされていない場合)、デバッグ モードで起動し、メイン インターフェイス ウィンドウを表示します。The app will build (if it hasn’t been built already), start in debug mode and display its main interface window:

アプリケーションの実行Running the application

ボタンを何回かクリックすると、ラベルのカウントが更新されます。If the button is clicked a few times, the label should be updated with the count:

ボタンをクリックした結果の表示Showing the results of clicking the button

次の場所Where to Next

Xamarin.Mac アプリケーションの操作の基礎をより深く理解するために、次のドキュメントを参照してください。With the basics of working with a Xamarin.Mac application down, take a look at the following documents to get a deeper understanding:

  • Introduction to Storyboards (ストーリーボードの概要) - この記事では、Xamarin.Mac アプリでのストーリーボードの使用について紹介しています。Introduction to Storyboards - This article provides an introduction to working with Storyboards in a Xamarin.Mac app. ストーリーボードと Xcode の Interface Builder を使用したアプリの UI の作成と維持管理に関する内容が含まれています。It covers creating and maintaining the app's UI using storyboards and Xcode's Interface Builder.
  • Window (ウィンドウ) - この記事では、Xamarin.Mac アプリケーションでのウィンドウとパネルの使用について説明しています。Windows - This article covers working with Windows and Panels in a Xamarin.Mac application. Xcode とインターフェイス ビルダーでのウィンドウとパネルの作成と維持管理、.xib ファイルからのウィンドウとパネルの読み込み、C# コードでのウィンドウの使用とウィンドウへの応答に関する内容が含まれています。It covers creating and maintaining Windows and Panels in Xcode and Interface builder, loading Windows and Panels from .xib files, using Windows and responding to Windows in C# code.
  • Dialogs (ダイアログ) - この記事では、Xamarin.Mac アプリケーションでのダイアログとモーダル ウィンドウの使用について説明しています。Dialogs - This article covers working with Dialogs and Modal Windows in a Xamarin.Mac application. Xcode とインターフェイス ビルダーでのモーダル ウィンドウの作成と維持管理、標準ダイアログの使用、C# コードでのウィンドウの表示とウィンドウへの応答に関する内容が含まれています。It covers creating and maintaining Modal Windows in Xcode and Interface builder, working with standard dialogs, displaying and responding to Windows in C# code.
  • Alerts (アラート) - この記事では、Xamarin.Mac アプリケーションでのアラートの使用について説明しています。Alerts - This article covers working with Alerts in a Xamarin.Mac application. C# コードからのアラートの作成と表示、アラートへの応答に関する内容が含まれています。It covers creating and displaying Alerts from C# code and responding to Alerts.
  • Menus (メニュー) - メニューは、Mac アプリケーションのユーザー インターフェイスのさまざまな部分で使用されます (画面上部にあるアプリケーションのメイン メニューから、ウィンドウ内のどこにでも表示されるポップアップ メニューとコンテキスト メニューまで)。Menus - Menus are used in various parts of a Mac application's user interface; from the application's main menu at the top of the screen to pop up and contextual menus that can appear anywhere in a window. メニューは、Mac アプリケーションのユーザー エクスペリエンスにとって不可欠な部分です。Menus are an integral part of a Mac application's user experience. この記事では、Xamarin.Mac アプリケーションでの Cocoa メニューの使用について説明しています。This article covers working with Cocoa Menus in a Xamarin.Mac application.
  • Toolbars (ツール バー) - この記事では、Xamarin.Mac アプリケーションでのツール バーの使用について説明しています。Toolbars - This article covers working with Toolbars in a Xamarin.Mac application. ここでは作成と維持について説明します。It covers creating and maintaining. Xcode と Interface Builder でのツール バー、Outlet と Action を使用してツール バー項目をコードに公開する方法、ツール バー項目の有効化と無効化、最後に C# コードでのツール バー項目への応答に関する内容が含まれています。Toolbars in Xcode and Interface builder, how to expose the Toolbar Items to code using Outlets and Actions, enabling and disabling Toolbar Items and finally responding to Toolbar Items in C# code.
  • Table Views (テーブル ビュー) - この記事では、Xamarin.Mac アプリケーションでのテーブル ビューの使用について説明しています。Table Views - This article covers working with Table Views in a Xamarin.Mac application. Xcode とインターフェイス ビルダーでのテーブル ビューの作成と維持管理、Outlet と Action を使用してテーブル ビュー項目をコードに公開する方法、テーブル ビュー項目の設定、最後に C# コードでのテーブル ビュー項目への応答に関する内容が含まれています。It covers creating and maintaining Table Views in Xcode and Interface builder, how to expose the Table View Items to code using Outlets and Actions, populating Table Items and finally responding to Table View Items in C# code.
  • Outline View (アウトライン ビュー) - この記事では、Xamarin.Mac アプリケーションでのアウトライン ビューの使用について説明しています。Outline Views - This article covers working with Outline Views in a Xamarin.Mac application. Xcode とインターフェイス ビルダーでのアウトライン ビューの作成と維持管理、Outlet と Action を使用してアウトライン ビュー項目をコードに公開する方法、アウトライン ビュー項目の設定、最後に C# コードでのアウトライン ビュー項目への応答に関する内容が含まれています。It covers creating and maintaining Outline Views in Xcode and Interface builder, how to expose the Outline View Items to code using Outlets and Actions, populating Outline Items and finally responding to Outline View Items in C# code.
  • Source Lists (ソース リスト) - この記事では、Xamarin.Mac アプリケーションでのソース リストの使用について説明しています。Source Lists - This article covers working with Source Lists in a Xamarin.Mac application. Xcode とインターフェイス ビルダーでのソース リストの作成と維持管理、Outlet と Action を使用してソース リスト項目をコードに公開する方法、ソース リスト項目の設定、最後に C# コードでのソース リスト項目への応答に関する内容が含まれています。It covers creating and maintaining Source Lists in Xcode and Interface builder, how to expose the Source Lists Items to code using Outlets and Actions, populating Source List Items and finally responding to Source List Items in C# code.
  • Collection Views (コレクション ビュー) - この記事では、Xamarin.Mac アプリケーションでのコレクション ビューの使用について説明しています。Collection Views - This article covers working with Collection Views in a Xamarin.Mac application. Xcode とインターフェイス ビルダーでのコレクション ビューの作成と維持管理、Outlet と Action を使用してコレクション ビュー項目をコードに公開する方法、コレクション ビューの設定、最後に C# コードでのコレクション ビューへの応答に関する内容が含まれています。It covers creating and maintaining Collection Views in Xcode and Interface builder, how to expose the Collection View elements to code using Outlets and Actions, populating Collection Views and finally responding to Collection Views in C# code.
  • イメージの処理 - この記事では、Xamarin.Mac アプリケーションでの画像の使用について説明しています。Working with Images - This article covers working with Images and Icons in a Xamarin.Mac application. アプリのアイコンを作成するために必要な画像の作成と維持管理、C# コードと Xcode の Interface Builder の両方での画像の使用に関する内容が含まれています。It covers creating and maintaining the images needed to create an app's Icon and using Images in both C# code and Xcode's Interface Builder.

Mac サンプル ギャラリーには、Xamarin.Mac の学習に役立つすぐに使用できるコード例が含まれています。The Mac Samples Gallery contains ready-to-use code examples to help learn Xamarin.Mac.

ユーザーが一般的な Mac アプリケーションに期待する機能を多数含んでいる完全な Xamarin.Mac アプリの 1 つが、SourceWriter サンプル アプリです。One complete Xamarin.Mac app that includes many of the features a user would expect to find in a typical Mac application is the SourceWriter Sample App. SourceWriter は、コードの完了とシンプルな構文の強調表示をサポートするシンプルなソース コード エディターです。SourceWriter is a simple source code editor that provides support for code completion and simple syntax highlighting.

SourceWriter のコード全体に詳細なコメントが付いており、また利用可能な場合には、重要な技術やメソッドから Xamarin.Mac ドキュメントの関連情報まで、さまざまなリンクが用意されています。The SourceWriter code has been fully commented and, where available, links have been provided from key technologies or methods to relevant information in the Xamarin.Mac documentation.

まとめSummary

この記事では、標準的な Xamarin.Mac アプリの基本について説明しています。This article covered the basics of a standard Xamarin.Mac app. Visual Studio for Mac での新しいアプリの作成、Xcode と Interface Builder でのユーザー インターフェイスのデザイン、OutletAction を使用して UI 要素を C# コードに公開する方法、UI 要素と連携するようにコードを追加する方法、最後に Xamarin.Mac アプリのビルドとテストに関する内容が含まれます。It covered creating a new app in Visual Studio for Mac, designing the user interface in Xcode and Interface Builder, exposing UI elements to C# code using Outlets and Actions, adding code to work with the UI elements and finally, building and testing a Xamarin.Mac app.