• SELECT MENU

2017.11.14

【VisualStudio 2017】Windowsでjava経験者のプラットフォームツールはXamarinがいいらしい

SANAE ISHIKAWA
[ENGINEER]
祖国は舞浜

こんにちは。
アプリ開発勉強中のひよっこエンジニアです。
Androidのネイティブ基礎的なことは出来たし、次は最近流行りのクロスプラットフォームで開発するぞ!
ということで、備忘録も兼ねて環境構築の流れをまとめることにしました。

まず、2017年現在のクロスプラットフォーム開発環境について調べてみました。

 

ゲームを作るならこれ。
最近は個人開発でも企業開発でも大活躍です。
https://unity3d.com/jp

 

.NET技術が使え、iOS/Androidのコア部分のみ共通化が可能。
VisualStudioに無料で同梱されるようになり、利用者も増えている模様。
使用言語はC#やF#。
https://www.xamarin.com/

 

オープンソースでEclipseがベースになっている。
使用言語はJavaScriptだが、RubyやPythonでも出来るらしい。
参考サイトに日本語が少なく、英語苦手な人は詰まったら大変だそう。
http://www.appcelerator.com/mobile-app-development-products/

 

Adobeが提供するAir開発のモバイル向け版。
Flash、Flex、ActionScript、HTML、JavaScriptなどを使用するらしい。
私には未知の領域。
https://help.adobe.com/ja_JP/air/build/WS2d8d13466044a7337d7adee012406959c52-8000.html

 

Cordovaベースのハイブリッド用統合開発環境。
クラウド上の環境なので、導入の手間がないのがメリット。
ハイブリッド開発なので、使用言語はHTML5、CSS、JavaScriptなどのWeb言語ですね。
専用IDEの他に、ローカルでも開発できるらしい。
https://ja.monaca.io/

 

  • *Apache Cordova(提供元:Adobe

NitobiをAdobeが買収して、Nitobiが開発していたPhoneGapがCordovaに名称変更。
Node.jsで動作していて、色々なハイブリッド開発環境のベースになっている。
使用言語はもちろんHTML、CSS、JavaScriptなど。
https://cordova.apache.org/

 

 

 

と、有名どころだけでも色々ありますね。
今回はネイティブ開発の環境を入れるつもりなので、まずMonacaやCordovaは除外。
ガッツリゲーム作るわけじゃないし、Web言語はデバッグ大変だし、独自言語覚えるのも大変だし、C#ってJavaと記述法似てるし… ということで、Xamarinを導入することにしました。

今回はVisualStudio、およびXamarinの導入とサンプルアプリのビルドまで進めます。

 

 

【導入】

そもそも、クロスプラットフォーム?とか、Xamarinもっと詳しく!という方は、以下など参考に

クロスプラットフォームSDKとは|今話題のGMO独占『Marmalade』の実態
 →https://furien.jp/columns/115/

Xamarin(ザマリン)とはなんぞや?
 →https://qiita.com/amay077/items/38ee79b3e3e88cf751b9

 

 

【VisualStudioをインストールする】

では、VisualStudioをインストールしましょう。

私はWindows7を利用していますので、

Visual Studio
https://www.visualstudio.com/downloads/

こちらから、自身の目的にあったエディションを落とします。

 

macユーザはこちら…
Visual Studio for Mac
 →https://www.visualstudio.com/vs/visual-studio-mac/

 

VisualStudioはライセンスがややこしいのですが、今回は学習目的なので無料のCommunityを選択。

 

インストールが完了したら、早速インストーラーを起動しましょう。

wizard
インストーラーを起動するとウィザードが開きます。

 

下の方にある[.NETによるモバイル開発]にチェックを入れます。(画像①)

dotnet_checked

すると、右側の概要にインストールするコンポーネントが増えました。(画像②)
チェックが入っているものがインストール予定のものです。

 
 

各コンポーネントについて

  • Xamarin Workbooks

Xamarin Sketchesの後継。スタンドアロン型のC#用REAPアプリケーションだそうです。詳しくは以下。
 Xamarin Workbooks とかいうやつ
  →https://qiita.com/amay077/items/11255f6bafa53f1dd5d1

  • Android NDK

Android Native Development Kitの略。
アプリケーションの一部、または全部をC/C++で開発するためのキットです

  • Java SE Development Kit

JDKです。必須。

  • F#言語サポート

F#での開発もサポートされてます。

  • Intel Hardware Accelerated Execution Manager

HAXM。エミュレーターの動作速度を上げることができます。

  • Xamarin用ユニバーサルWindowsプラットフォーム

UWP開発用の諸々ですが、標準で未チェックなので注意です。
UWPアプリも作る方は、手動でチェックを入れてください。

 

その他、エミュレーター使わない、NDKは既にインストール済み、などがあれば、
自分の環境に応じてコンポーネントを選択してください。

準備が出来たらインストール(画像では「変更」)ボタンを押します。(画像③)

 
結構待ちます。
 

インストールが完了したら、起動します。

 
top

起動するとこんな感じ。

 

 

既にVisualStudioを導入済みで、Xamarinだけ新規にインストールする場合

VisualStudioを起動して、ツールバーの[ツール] → [ツールと機能を取得]で、インストールウィザードを開き、上記同様にインストールするか、同じく[ツール] → [拡張機能と更新プログラム]でコンポーネントを個別に選択してインストールできます。

change_com

 

 

Microsoftアカウントのサインインについて

サインインしなくてもインストール~利用までできますが、サインインしておかないと30日のトライアル期間が設けられ、それを過ぎるとロックがかかってしまいますので注意。

※ロックがかかった後でも、改めてサインインすれば解除されるようです

 

 

 

【Androidの新規プロジェクトを立ち上げる】

ツールバーの[ファイル] → [新規作成] → [プロジェクト]で新規プロジェクトを立ち上げていきます。(画像①~③

newPJ

 

iOSアプリのビルドにはmacサーバが必要なので、ひとまずAndroidアプリを作ります。

[インストール済み] → [VisualC#] → [Android] → [単一ビューアプリ(Android)]を選択、適当な名前と保存場所を決めて、[OK]を押します。(画像①~⑥)

createPJ

 

立ち上がりました。

createdPJ
 

 

 

 

【Xamarin版Androidアプリの構成】

左右どちらかにある[ソリューションエクスプローラー]をクリックすると、構成とファイル一覧が見れます。

solution
 

MainActivity.csと、[Resources] → [layout] のMain.axmlが一番初めに読まれるクラスとレイアウトファイルです。
構成やフォルダ/ファイル名がAndroid Studioとほとんど同じで親切設計。

 

※[ソリューションエクスプローラー]が無い時は、上部ツールバーの[表示] → [ソリューションエクスプローラー]を選択してください。

 

 

 

【サンプルをビルドする】

ではサンプルアプリをビルドしてみます。
特に何も記述・変更しなくても大丈夫です。

 

画面上部のツールバーに[▶(実行ボタン)]があります。

build_button

「Android_Accelerated_Nougat(Android 7.1 – API25)」が現在選択されている実行対象です。

 

ちなみにこれは、xamarinインストール時に最新版のAPIで自動生成されたエミュレーターです。
変更する時は、▼をクリックすれば、認識済みの実行対象一覧が出ますので、そこから選択しましょう。
実機を繋いだ時も、認識されていれば自動で項目追加されます。

 

手動でエミュレーターを追加する場合は、ツールバーの[ツール] → [Android] → [Android Emulator マネージャー](画像①~③)でAVDマネージャーが起動するので、[Create]から作成できます。

emulator

 

では今度こそビルドします。

実行ボタンを押します。

new-emulator

エミュレーターが立ち上がり…
 

build

無事サンプルアプリが起動しました。

CLICK ME! をタップすると回数がカウントされますので遊んでみてください。

 

これでAndroidアプリが開発できることは確認できました!

 

macサーバの環境構築は色々ハマったので、また今度…。

*追記*
mac側の環境構築について、記事を追加しました!
【VisualStudio 2017】Xamarinを使ってWindowsからiOSアプリを実機ビルドする+ハマったこと5例
 →https://co-lab.contents.ne.jp/20180118-232

glasses

[2,204]

Webテクノロジー

© 2017 Contents Co.,Ltd.