SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Xamarinで作るAndroid/iOSアプリ

Xamarinを始めよう ~テンプレートをビルドする~

Xamarinで作るAndroid/iOSアプリ 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

初めてのアプリを作る - Windows編

 それでは早速Visual StudioでXamarinを使ってみましょう。今回はテンプレートをそのまま実行するだけですが、次回以降では、より具体的なXamarinの使い方を紹介していきます。

プロジェクトを作成する

 Visual Studioを起動し、メニューから[ファイル]→[新規作成]→[プロジェクト]を選択します。

 表示された[新しいプロジェクト]ダイアログで[テンプレート]→[Visual C#]→[Cross-Platform]→[Blank App(Native Portable)]を選択し[OK]ボタンをクリックします。今回はApp1という名称で作成しました。

Blank App(Native Portable)を選択する
Blank App(Native Portable)を選択する

 Xamarinには、いくつかのテンプレートが用意されていますが、今回利用する「Blank App(Native Portable)」テンプレートではiOS/Android/Windows Phone/ポータブルクラスライブラリ(PCL)という4つのプロジェクトで構成されるソリューションが作成されます。ソリューションエクスプローラーを見ると、これら4つのプロジェクトが作成されていることが分かります。

ソリューションエクスプローラーの画面例
ソリューションエクスプローラーの画面例

 では初めに、iOS用のアプリをビルド/実行してみましょう。

Hello Xamarin.iOS!

 App1.iOSをビルドして実行してみましょう(注:iOS版のビルド、実行にはMacが必要です)。

Macの設定を行う

 Xamarin.iOSを使用すると、プロジェクトを読み込んだ時やビルドを実行しようとした時に、Macと接続するための設定画面が表示されます。

Macと接続する際の画面例(1)
Macと接続する際の画面例(1)
Macと接続する際の画面例(2)
Macと接続する際の画面例(2)
Macと接続する際の画面例(3)
Macと接続する際の画面例(3)

 一度設定すれば接続先が記憶され、次回からは自動的に同じMacに接続されます。接続先のMacを変更したい場合は、メニューから[ツール]→[iOS]→[Xamarin iOS Agent]で再設定が可能です。

 それでは早速Macと接続するための設定を行いましょう。

 画面にはMacのSystem PreferencesのRemote Loginを設定するように表示されていますが、これは日本語版のMacでは[システム環境設定]→[共有]のリモートログイン設定に当たります。

 この画面を開き[リモートログイン]をチェックし、[アクセスを許可]を[次のユーザのみ]としてリモートログインに使用するユーザーを選択します。画面上にも表示されていますが、この設定により外部からsshでこのMacにログインできるようになります。ですから、アクセスを許可するユーザーのパスワードはしっかりとしたものを設定しておくべきです。ユーザーのパスワードは[システム環境設定]→[ユーザとグループ]で設定できます。

 以上でMac側の設定ができました。

Mac上のリモートログイン設定画面例
Mac上のリモートログイン設定画面例

Visual Studioの設定を行う

 続いて、Visual Studio側のXamarin Mac Agentダイアログでの設定を行います。

 接続先のMacが一覧に表示されている場合はダブルクリック、もしくは選択して[Connect]ボタンをクリックします。表示されていない場合は画面下部の[Add Mac]ボタンをクリックし、接続先Macの名称もしくはIPアドレスを入力します。

接続先Macの選択画面例
接続先Macの選択画面例
接続先Macの追加画面例
接続先Macの追加画面例

 すると、接続先MacのユーザーID/パスワードを入力する画面が表示されます。Mac側でリモートログイン許可を与えたユーザーのユーザーID/パスワードを入力します。

Macへリモートログインする際の認証画面例
Macへリモートログインする際の認証画面例

 もし接続に失敗した場合は、Mac側の設定やネットワーク設定などから、きちんとMacと通信できるかなどを確認してください。

アプリをビルド/実行する

 それでは、いよいよアプリをビルド/実行してみましょう。

 Visual Studioのツールバーから[スタートアッププロジェクト]→[App1.iOS]を選択します。

App1.iOSを選択する
App1.iOSを選択する

 続いて同じくツールバーから[ソリューションプラットフォーム]をクリックし、iPhone/iPadの実機で実行するか、iPhoneシミュレーターで実行するかを選択します。ここでは、まず[iPhoneSimulator]を選択してシミュレーターで実行してみます。

iPhoneSimulatorを選択する
iPhoneSimulatorを選択する

 iPhoneSimulatorを選択すると、実行ボタンの▼でシミュレーターの種類を選択できるようになります。この時に表示されるシミュレーターの種類はMac側でサポートされているシミュレーターです。

使用するシミュレーターを選択する

使用するシミュレーターを選択する

 そのため、MacにインストールされているXcodeのバージョンを変更すると、ここに表示されるシミュレーターの種類も変わります。また、Macと正常に接続できていないとシミュレーターの種類が表示されません。もし表示されていない場合は、上記を参考にメニューの[ツール]→[iOS]→[Xamarin iOS Agent]から接続先Macを設定してください。

 使用するシミュレーターを選択した上で、アプリの実行を開始(▶をクリックする/メニューから[デバッグ]→[デバッグの開始]を実行する/F5キーを押す)すればアプリが実行されます。すると、アプリをビルドする→シミュレーターを起動する→シミュレーター上のiOSにアプリをインストールする→アプリを起動させる、という一連の流れが実行されます。

 なお、この時に実行されるシミュレーターはMacのものです。Windows上でiPhoneシミュレーターが動作するわけではありません。

シミュレーターの画面例(Mac上)
シミュレーターの画面例(Mac上)

 このようにiPhoneシミュレーター上でアプリが起動すれば成功です。

 「Blank App(Native Portable)」テンプレートで作成されたアプリは真っ白の背景に「Hello World, Click Me!」とだけ書かれたアプリとなっています。この文字部分をクリック(タップ)するとメッセージが変化します。

 もちろんiPhoneシミュレーターだけでなく、iPhone実機を接続してアプリの実行やデバッグを行うことができます。

 この場合、MacにUSBケーブルでiPhone/iPad/iPodを接続します。Windowsに接続するわけではありません。また、LANやWi-Fi経由での接続はサポートされていませんので、必ずUSBケーブルで接続する必要があります。

 これはXamarinの制約ではなく、Xcodeでの実機デバッグがUSBケーブル経由のみしかサポートしていないことに起因しているようです。Xamarin.iOSの実機デバッグ機能は、Xcodeの実機デバッグ機能を利用しているため、そのような制約があると考えられます。

 Xcodeでデバッグできるようになっていれば、Xamarin.iOSでもデバッグできます。より具体的な設定方法については次回以降に説明する予定です。

Hello Xamarin.Android!

 続いてApp1.Droidをビルドして実行してみましょう。基本的な手順はXamarin.iOSと同様です。

アプリをビルド/実行する

 まずはVisual Studioのツールバーの[スタートアッププロジェクト]→[App1.Droid]を選択します。

App1.Droidを選択する
App1.Droidを選択する

 次にツールバーの[ソリューションプラットフォーム]→[Any CPU]を選択します。

 スタートアッププロジェクトを選択すると、実行ボタンの▼でエミュレーターの種類を選択できるようになります。標準ではKitKat(Android 4.4)の5インチと7インチのいずれかを選択できます。

利用するエミュレーターを選択する
利用するエミュレーターを選択する

 選択したAndroid OSが、Microsoft製のVisual Studio Emulator for Androidで実行されます。ほかのバージョンのAndroid OSや、ほかの画面サイズ/解像度のデバイスをエミュレーターで実行することもできます。これについての説明は次回以降に行う予定です。

 それでは実行してみましょう。

 使用するエミュレーターを選択した上で、アプリの実行を開始(▶をクリック/メニューから[デバッグ]→[デバッグの開始]を実行する/F5キーを押す)します。するとアプリがビルドされ、エミュレーターが起動します。

 初めてVisual Studio Emulator for Androidを起動する時には、以下のメッセージが表示されるかもしれません。その場合は[再起動]ボタンをクリックし、続く「このアプリがデバイスに変更を加えることを許可しますか?」というダイアログに[はい]と応える必要があります。

Visual Studio Emulator for Androidを初めて起動する際のメッセージ例(Windows 10)
Visual Studio Emulator for Androidを初めて起動する際のメッセージ例(Windows 10)
ユーザーアカウント制御の画面例(Windows 10)
ユーザーアカウント制御の画面例(Windows 10)

 本記事執筆時点では、上図のように「Windows Phone Packages」と表示されます。また、エミュレーターが起動した際には「Windows Phone OSを起動しています」とも表示されます。これはどうやらWindows Phoneエミュレーターの仕組みを使ってAndroid OSを実行しているからと考えられます。将来的にはメッセージが変更されるかもしれませんが、特に気にする必要はありません。

Androidエミュレーターの画面例
Androidエミュレーターの画面例

 エミュレーターが起動すると、上図のように表示されます。

 「Blank App(Native Portable)」テンプレートで作成されたアプリは、真っ黒の背景に「Hello World, Click Me!」と書かれたボタンが配置されています。このボタンをクリック(タップ)するとメッセージが変化します。

Xamarinの更新

 XamarinをインストールしたVisual Studioを使用していると、まれにXamarinが更新されたと通知が出る場合があります。この場合には以下の手順でXamarinを更新します。

 Visual Studioの[ツール]→[オプション]メニューを選択し、表示されたオプションダイアログで[Xamarin]→[Other]を開きます。

Xamarinを更新するためのオプションダイアログ画面例
Xamarinを更新するためのオプションダイアログ画面例

 [Xamarin for Visual Studio Updates]の[Check Now]をクリックします。なお、Stable/Beta/Alphaを選択することもできます。Stableは安定バージョンのことで、正式リリースされたものです。BetaやAlphaを選択すれば、正式リリース前のバージョンをいち早く試すことができます。もちろん、不具合などの問題が発生する可能性も認識した上で選択するようにしてください。

Xamarinの更新画面
Xamarinの更新画面

 アップデート版がある場合にはこのように表示されるので、[Download]ボタンをクリックし、インストールします。

 次のページでは、Mac上で同様のアプリを作成していきます。

次のページ
初めてのアプリを作る - Mac編

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Xamarinで作るAndroid/iOSアプリ連載記事一覧
この記事の著者

青柳 臣一(アオヤギ シンイチ)

Twiter: https://twitter.com/ShinichiAoyagi中学生のころにプログラミングの楽しさを知り、それ以来趣味として仕事としてプログラミングに関わるようになる。23才のときに株式会社ディーバを設立。CADソフトウエア、給水設備監視システムなどのオリジナルソフトの開発、また、さま...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9620 2016/10/12 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング