[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)で作成可能なアプリケーションの一覧です。

  • 単一ビューアプリ
    単純な1ページを持つアプリケーション。
  • マスター-詳細アプリ
    項目の一覧を表示するアプリケーション。マスターと詳細を表示することができます。
  • タブ付きアプリ
    タブバーで複数ページを切り替えることができるアプリケーション。
  • ページベースアプリ
    ページベースのアプリケーションです。
  • WebViewアプリ
    HTMLを表示することができるアプリケーションです。
  • SpriteKitゲーム
    主に2Dベースのゲームアプリケーションを作成します。
  • SceneKitゲーム
    2D/3Dのゲームアプリケーションを作成します。
  • Metalゲーム
    Metalというライブラリを使用して3Dグラフィックアプリを作成します。
  • OpenGLゲーム
    OpenGLを使用したゲームアプリを作成します。

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

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

単一ビューアプリプロジェクトの作成

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

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

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

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

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

  • アプリ名:実際にアイコンに表示されるアプリの名称を入力
  • 組織の識別子:通常は自身のURLを逆から入力します。URLがhiros-dot.netの場合はnet.hiros-dotとなります。
  • チーム:Apple Developperに登録しているアカウントを選択します。
  • ターゲット:作成するアプリがサポートする、iOSの最低限のバージョンを選択します。

アプリの構成設定

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

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

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

ソリューションの構成

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

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

  • Main.storyboard:ページのデザインをするためのファイル
  • ViewController.cs:ページに対する操作を実装するためのファイル

iOSデザイナーの構成

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

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

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

UI部品を配置する

UI部品を配置するには、ツールボックスから必要な部品をページにドラッグアンドドロップします。

今回はLabelを配置することとします。

ツールボックスからLabelをページにドラッグアンドドロップします。このときページ上でLabelを動かすと青い点線が表示される位置があります。青い点線を目印にすると、縦横の中央に配置することが可能です。

次に、配置したLabelをクリックして選択状態にしてテキストを変更してみます。テキストを変更するには、プロパティパッドのTextプロパティを変更します。ここでは「Hello World!」に変更してみましょう。

全ての文字が表示されない場合は、ページ上のラベルを操作して幅を広げてください。

実行してみよう

実行するには、Visual Studioの実行ボタンをクリックします。このとき、実行するシミュレータは変更することができます。また、実機を接続している場合は、実機を選択して実行することも可能です。

最後に、iPhone8のシミュレータで実行した際のスクリーンショットを掲載します。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です