はじめてのXamarin HelloWorldをAndroid実機で実行しよう!

こんにちは、最近Xamarinの勉強を始めました。杉野です。
今日はXamarinでAndroidアプリを開発の第一歩としてHelloWorldをAndroid実機で実行してみようと思います。

開発環境
・Visual Studio 2017

使用端末
・Android Sony SOV31

今回はVisual Studio 2017 での開発になるのでVisual studio 2017をインストールしていない方やXamarinのインストールをしていない方は下のサイトを参考にしてください。

Xamarinやりたい人向けVisual Studio 2017 インストール手引書

http://ytabuchi.hatenablog.com/entry/visualstudio2017

Visual Studio 2017をインストールできたらいよいよ開発スタートです!

1.新規プロジェクトの作成

まずはじめにVisual Studio 2017を起動します。

Home

次に画面左上にあるファイルをクリックし「新規作成>プロジェクト」の順でクリックすると「新しいプロジェクト」という画面が開きます。ここで「テンプレート>Visual C#>Cross Platform App (Xamarin)」の順で選択し、名前をHelloWorldに変更します。そして画面右下の「OK」ボタンをクリックします。

mkproject
テンプレートの選択画面が開いたら「空のアプリ」を選択して「OK」ボタンをクリックします。

template

ここまでするとプロジェクトの作成が始まるので少し待てばプロジェクトの作成完了です!

NewProject

2.プログラムの変更

では次にAndroidの画面上で「HelloWorld!」と表示されるようにプログラムを変更してみましょう。

まずは画面右側にある「ソリューションエクスプローラー」の中にある「MainPage.xaml」をクリックして開きます。するとプログラムが表示されるので次のように変更します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 xmlns:local="clr-namespace:HelloWorld"
 x:Class="HelloWorld.MainPage">

 <Label Text="HelloWorld!" 
 VerticalOptions="Center" 
 HorizontalOptions="Center" />

</ContentPage>

これでプログラムの変更は完了です!

3.Android実機で実行

いよいよAndroidでの実行ですがその前に準備しなければいけないことがありますのでそれをやっていきましょう。

まずAndroid SDK Managerを起動します。赤枠で囲ったアイコンをクリックしてください。

SDKManager

Android SDK Managerが起動したら「Android SDK Tools」と「Android SDK Platform-tools」、「Google USB Driver」にチェックを付けて画面右下の「Install 3 package」をクリックしてインストールします。確認画面がでますが「Accept」をクリックしてください。

AndroidSDK

USB Driver

これでVisual Studio 2017の設定は完了です。

次にWindows開発者向け設定の「開発者モード」を有効化します。既に変更している方はスキップしてください。

まずWindowsのスタートメニューを開き「設定」を起動します。次に「更新とセキュリティ>開発者向け」の順で選択し「開発者モード」のラジオボタンをクリックしてください。少し時間がかかりますがこれで「開発者モード」が有効化されます。

DevelopperMode

最後にAndroidの「開発者向けオプション」の有効化をする必要があります。「開発者向けオプション」の有効化の方法は端末の種類によって異なりますのでここで紹介するのは一例です。もし有効化できなかったときは「端末名 開発者オプション」などで検索してみてください。

まずAndroidで「設定アプリ>端末情報」の順で選択し「ビルド番号」という項目があることを確認します。次に「ビルド番号」を連続でタップしてください。すると「これでデベロッパーになりました!」と表示されたので一つ前の設定画面に戻って「開発者向けオプション」が追加されていることを確認して開いてみてください。そこで「開発者向けオプション」がONになっていることを確認し、「USBデバッグ」を許可します。

Screenshot_20170606-115126

これでAndroidの設定は完了です!

ではいよいよAndroidにアプリをインストールして実行してみましょう!
まずAndroidとPCをUSBケーブルで接続してVisual Studio 2017でAndroidが認識されていることを確認します。

SOV31

このように自分の端末名が表示されていればOKです。では端末名が表示されているところをクリックして実行します!

クリックしたらアプリがAndroidへインストールされて…

Screenshot_20170606-115140

見事!HelloWorldを表示できました!

これでXamarinでAndroidアプリ開発の第一歩を踏み出すことができました!

長くなってしまいましたが今回はここまでです。
これからもXamarinでの開発を記事にしていきます。
興味のある人はまた見に来て下さい。
感想等いただけると励みになるのでどんどんコメントしていってくださいね!

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中