[Xamarin.iOS] 01.XamarinでiOSアプリを開発してみよう

通常、iOSアプリを開発するにはXcodeという開発環境を使用しますが、Microsoftが提供するXamarinを使用すればC#を使用して開発することができます。

今回からの連載では、Xamarinを使用してiOSのネイティブアプリ開発について解説していきます。

今回は、Xamarinを使用してどのようなアプリが開発できるのかと、Single View Applicationプロジェクトの作成方法について説明します。

なお、Xamarinのインストール方法については説明しませんので、各自で準備してください。

作成可能なアプリケーション

以下はVisual Studio for MacのCommunity版バージョン7.4(build 1033)で作成可能なアプリケーションの一覧です。

Windows 版 Visual Studioも同様です。以下にスクリーンショットを掲載します。

上記の他にもtvOSやApple Watchのアプリ開発も可能です。またVS for MacであればOS X用のアプリ開発も可能です。

それでは、iOSアプリの中でももっともシンプルな単一ビューアプリのプロジェクトを作成してみましょう。

すでに説明した通り、単一ビューアプリは単純な1ページを持つアプリケーションです。後から必要なだけページを増やすことも可能ですし、タブバー付きアプリやマスター詳細アプリにすることもできます。

以下VS for Macのスクショのみ掲載しますが、Windows版も概ね手順は同じです。

はじめに、Visual Studioから新規プロジェクトの作成で単一ビューアプリを選択します。

続いて作成するアプリの構成設定を入力します。

次にプロジェクト名と保存先を設定します。

Gitでソース管理をしたい場合は「バージョンコントロールにGitを使用する」にチェックを付けます。

以上でプロジェクトの作成は完了です。

続いてソリューションの構成をみてみましょう。

様々なファイルで構成されていますが、よく使用するのはMain.storyboardとViewController.csの2つです。それ以外のファイルについては、今後の連載の中で必要に応じて説明をします。

ページのデザインを行うにはMain.storyboardをダブルクリックして開きます。

Main.storyboardを開くと、以下のようにiOSデザイナーが表示されます。上がVS for Macで下がWindows版Visual StudioでのiOSデザイナーです。

デザイン画面：iOSのページをデザインするための画面です。ユーザーインターフェースを視覚的に作成することができます。
制約ツールバー：iOSのアプリは、ユーザーが使用するデバイスによって画面サイズが異なります。このため配置するUI部品に制約をつけることで、画面サイズが変更されても、デザインが崩れないようにすることができます。
ツールボックス：ページ上に配置可能なUI部品が表示されます。ここからページにUI部品をドラッグアンドドロップしてページをデザインします。
プロパティパッド：ページに配置したUI部品にIDを付けたり、サイズや色などの要素の設定を行います。
ボトムツールバー：iOSデザイナー上に表示されるデバイスを変更することができます。作成するアプリケーションのデザインをデバイスを変更して確認することができます。