Xamarin ～ iOS/Android/Windows アプリをC# で作ろう～
91
Xamarin ～ iOS/Android/Windows アアアア C# アアアア～ アア アアア 2014-04
-
Upload
fujio-kojima -
Category
Technology
-
view
5.102 -
download
10
description
2014年4月
Transcript of Xamarin ～ iOS/Android/Windows アプリをC# で作ろう～
Xamarin～ iOS/Android/Windows アプリを
C# で作ろう～
小島 富治雄
2014-04
対象者
iOS/Android/Windows アプリ開発に関心のある開発者
本日のゴール
Xamarin ( ザマリン ) について知っていただき、開発で使うかどうかの判断材料にしていただく
本日の内容
1. Xamarin とは2. なぜ Xamarin か3. Xamarin の開発環境4. Xamarin で効率よく開発
Xamarin とは
Xamarin とは
会社名開発ツールの名前
Xamarin は会社名
Mono プロジェクトを開発 / サポートECMA 規格 335 (共通言語基盤 : CLI に関する規格 ) に準じた
.NET Framework 互換の開発 / 実行環境Ximian → ノベル → Xamarin
名前は猿に由来Mono はスペイン語で猿Ximian は simian ( 類人猿 ) からXamarin は tamarin ( タマリン ) から
Xamarin は開発ツールの名前
前身は Mono 、 MonoTouch 、 Mono for Android などの開発ツールMono
• Linux 、 FreeBSD 、 UNIX 、 Mac OS X 、 Solaris 、 Windows 用 CLI (.NET Framework 互換環境 )
MonoTouch• iOS 用
Mono for Android• Android 用
C# で開発できる
Xamarin は開発ツールの名前
クロス プラットフォームの開発環境iOS 、 Android 、 Windows 、 Mac
C# の開発環境
Xamarin とは何ではないか
一つのコードで iOS アプリと Android アプリを開発
Xamarin をマスターするだけで両方作れる !
Xamarin は「薄いラッパー」
各プラットフォームのアプリ開発のノウハウは必要
Xamarin は「薄いラッパー」
C# によるビジネス ロジック
Mono.NET Framework
Android UI
AndroidiOSWindows
iOS UIWindows UI
Xamarin 以外のクロス プラットフォーム ツール( 少なくとも iOS と Android の両方に対応したもの )
Unityhttp://japan.unity3d.comゲーム開発環境Windows や Mac OS で開発可
RAD Studio XE5https://www.embarcadero.com/jp/products/rad-studio
Delphi/C/C++RAD ツール単一コードで対応エンバカデロ
Xamarin と他のツールの違い
Xamarin は「薄いラッパー」なので基本ネイティブコードiOS と Android 等のネイティブ API をコール• 従来と同じ構造
Xamarin は基本ネイティブコード
iOSネイティブコードにコンパイルされる
AndroidJIT コンパイラによってコンパイルされる
従来アプリと同じ → 高速に動
作
Xamarin はマイクロソフトと業務提携
2012 年 9 月 20 日マイクロソフトが Xamarin との業務提携を発表
2014 年 4 月 3 日マイクロソフトが「 Build 2014 」で発表Xamarin と提携して新たに .Net Foundation を設立• フレームワークやプログラミング言語をさらにオープンソース化
Xamarin の価格
http://www.xlsoft.com/jp/products/xamarin/price.html製品名 価格 ( 税抜 )
Xamarin.Android Business ( 年間サブスクリプション ) \127,800 ( 税抜 )
Xamarin.Android Enterprise ( 年間サブスクリプション ) \243,000 ( 税抜 )
Xamarin.iOS Business ( 年間サブスクリプション ) \127,800 ( 税抜 )
Xamarin.iOS Enterprise ( 年間サブスクリプション ) \243,000 ( 税抜 )
Xamarin.Mac Business ( 年間サブスクリプション ) \127,800 ( 税抜 )
Xamarin.Mac Enterprise ( 年間サブスクリプション ) \243,000 ( 税抜 )
MSDN Subscriber 向け特別価格キャンペーン開催中
なぜ Xamarin か
これまでの開発環境 (Web アプリを除く )
iOS
• Xcode• Objective-C
(C++/C)
Android
• Eclipse• Java
(C++/C)
Windows
• Visual Studio
• C#/C++
Xamarin を使うと
iOS
• Xamarin Studio/Visual Studio
• C#
Android
• Xamarin Studio/Visual Studio
• C#
Windows
• Visual Studio• C#
これまでの開発環境 iOS
デモ
これまでの開発環境 - Android
デモ
これまでの開発環境 (Web アプリを除く )
iOS
View
ViewModel
Model
Android
View
ViewModel
Model
Windows
View
ViewModel
Model
Xamarin を使うと
iOS
View
ViewModel
Model
Android
View
ViewModel
Model
Windows
View
ViewModel
Model
ViewModel
Model
Xamarin は C# が使える
既に C# 5.0 に対応async/await が使える
// ボタンが押されたときに呼ばれるasync void OnButtonClick(object sender, EventArgs e){ await 何か時間の掛かる処理 1(); await 何か時間の掛かる処理 2(); 処理 3();}
iOS でのボタンが押されたときの処理 (Objective-C)
// アラートのボタンが押された時に呼ばれるデリゲート
-(void)alertView:(UIAlertView*)alertView
clickedButtonAtIndex:(NSInteger)buttonIndex {
switch (buttonIndex) {
case 0:
// １番目のボタンが押されたときの処理
break;
case 1:
// ２番目のボタンが押されたときの処理
break;
}
}
UIAlertView *alert = [[UIAlertView alloc] init];
alert.delegate = self;
alert.title = @" 確認 ";
alert.message = @" よろしいですか？ ";
[alert addButtonWithTitle:@" いいえ "];
[alert addButtonWithTitle:@" はい "];
[alert show];
Android でのボタンが押されたときの処理 (Java)
@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.button1:
// １番目のボタンが押されたときの処理
break;
case R.id.button2:
// 2 番目のボタンが押されたときの処理
break;
}
}
}
public class MyActivity extends Activity
implements OnClickListener {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
View showButton = findViewById(R.id.button1);
showButton.setOnClickListener(this);
}
Xamarin の開発環境
Xamarin の二つの IDE
Visual Studio + Xamarin プラグイン
Xamarin Studio
Xamarin の開発環境
マシンMac または PC
OSMac OS または Windows
Xamarin Studioと Visual Studio + Xamarin プラグイン
マシン OS iOS アプリ開発 Android アプリ開発
Xamarin Studio
Visual Studio +Xamarin プラグイン
Xamarin Studio
Visual Studio +Xamarin プラグイン
PC Windows × ○
( 要 Mac 上のXamarin.iOSBuild Host)
○ ○
Mac Mac OS ○ × ○ ×Windows ○ ○
( 要 Mac 上のXamarin.iOSBuild Host)
○ ○
Android アプリの開発 基本構成
PC + Windows + Visual Studio + Xamarin.Android
Mac + Mac OS + Xamarin Studio + Xamarin.Android
iOS アプリの開発 基本構成
Mac + Mac OS + Xamarin Studio + Xamarin.iOS
PC + Windows + Visual Studio + Xamarin.iOS+ Mac + Mac OS + Xamarin.iOS
※ Apple の縛りにより、何れにしても Mac は必要
Xamarin Studio
Xamarin Studio デモ (Mac 上 )Android アプリ開発iOS アプリ開発
Visual Studio + Xamarin プラグイン デモ
いずれにせよ Mac が必要ならMac で Visual Studio という選択肢も
Mac + Windows + Visual Studio + Xamarinで iOS アプリ開発
Mac OSXamarin.iOSVMWare Fusion または Parallels Desktop• Windows• Visual Studio
• Xamarin.iOS
Mac + VMWare Fusion + Windows
Mac + Xamarin.iOS+ VMWare Fusion + Windows+ Visual Studio + Xamarin.iOS
Mac + Parallels Desktop + Windows + Visual Studio
Xamarin で効率よく開発
Xamarin で効率よく開発
「クロス プラットフォーム開発」は可能か ?Xamarin で、各プラットフォーム用に「それぞれ」作っ
ただけではコードの共有が難しい共通部分を DLL 化しただけでは動かない
これまでの開発環境 (Web アプリを除く )
iOS
View
ViewModel
Model
Android
View
ViewModel
Model
Windows
View
ViewModel
Model
Xamarin
iOS
View
ViewModel
Model
Android
View
ViewModel
Model
Windows
View
ViewModel
Model
ViewModel
Model
MVVM パターン
MVVM パターンとは
Model – View – ViewModel パターン
MVC の派生パターンGUI アプリケーションで Model と View を分離する設
計方法の一種
.NET の WPF や Siliverlight あたりが始まりコードビハインドで書かない
MVVM パターン
View ViewModel Modelデータバインド
参照 / 更新
更新通知
プレゼンテーション プレゼンテーション ロジック ビジネス ロジック / データ
MVVM でないもの
コードビハインドイベントハンドラー
MVVM パターン 参考サイト
Model View ViewModel - Wikipediahttps://ja.wikipedia.org/wiki/Model_View_ViewModel
MVVM パターンと他の UI パターンhttp://www.slideboom.com/presentations/257972
ViewModel と Model をなるべく共通に
ViewModel と ModelXamarin はポータブル クラス ライブラリに対応• Windows 、 iOS 、 Android 等で共通のライブラリが可能
View など、プラットフォーム固有の部分はそれぞれ作る
MvvmCross
マルチプラットフォーム MVVM フレームワークXamarin.iOS 、 Xamarin.Android 、 Windows ストア
アプリ、 Windows Phone 、 WPF 、 Mac に対応
ポータブル クラス ライブラリで ViewModel と Model を
View(iOS アプリ )
View(Android アプリ )
View(Windows アプ
リ )
ViewModel Model
MV
VM
Cro
ss
PCL
MvvmCross による共通ライブラリの開発
Visual Studio でポータブル クラス ライブラリを作成
NuGet で MvvmCross をインストール
MvvmCross インストール後のプロジェクト
参考 : Xamarin Studio の場合先ず、 NuGet をアドインとして追加
参考 : Xamarin Studio の場合先ず、 NuGet をアドインとして追加
参考 : Xamarin Studio の場合プロジェクトに NuGet から MvvmCross をインストール
参考 : Xamarin Studio の場合プロジェクトに NuGet から MvvmCross をインストール
ViewModel の例using Cirrious.MvvmCross.ViewModels;
namespace MvvmDemo.Core.ViewModels
{
public class FirstViewModel : MvxViewModel
{
int price = 0;
public int Price
{
get { return price; }
set {
price = value;
RaisePropertyChanged(() => Price );
RaisePropertyChanged(() => TaxInclusivePrice);
}
}
int tax = 8;
public int Tax
{
get { return tax; }
set {
tax = value;
RaisePropertyChanged(() => Tax );
RaisePropertyChanged(() => TaxInclusivePrice);
}
}
public int TaxInclusivePrice
{
get { return (int)(Price * (1.0 + Tax / 100.0)) ; }
}
}
}
Windows ストア アプリの場合
プロジェクトで MvvmDemo.Core と MvvmCross を参照
App.xmal.cs
if (rootFrame.Content == null) {
//rootFrame.Navigate(typeof(MainPage), e.Arguments);
var setUp = new Setup(rootFrame);
setUp.Initialize();
var start = Cirrious.CrossCore.Mvx.Resolve
<Cirrious.MvvmCross.ViewModels.IMvxAppStart>();
start.Start();
}
FirstView.xmal
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<TextBlock Text="Price" FontSize="64"/>
<TextBox Text="{Binding Price, Mode=TwoWay}" FontSize="64"/>
<TextBlock Text="Tax (%)" FontSize="64"/>
<TextBox Text="{Binding Tax, Mode=TwoWay}" FontSize="64"/>
<TextBlock Text="Tax Inclusive Price" FontSize="64"/>
<TextBlock Text="{Binding TaxInclusivePrice}" FontSize="64" />
</StackPanel>
</Grid>
実行結果
iOS アプリの場合
プロジェクトで MvvmDemo.Core と MvvmCross を参照
info.plist の編集
参考 : 編集後の info.plist
<key>CFBundleDisplayName</key>
<string>MvvmDemo.iOS</string>
<key>CFBundleIdentifier</key>
<string>com.your-company.MvvmDemo.iOS</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1.0</string>
AppDelegate.cs
AppDelegate.cs → 削除AppDelegate.cs.txt → AppDelegate.cspublic override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
_window = new UIWindow (UIScreen.MainScreen.Bounds);
var setup = new Setup(this, _window);
setup.Initialize();
var startup = Mvx.Resolve<IMvxAppStart>();
startup.Start();
_window.MakeKeyAndVisible ();
return true;
}
FirstView.cspublic override void ViewDidLoad()
{
View = new UIView(){ BackgroundColor = UIColor.White};
base.ViewDidLoad();
if (RespondsToSelector(new Selector("edgesForExtendedLayout")))
EdgesForExtendedLayout = UIRectEdge.None;
var priceLabel = new UILabel(new RectangleF(10, 10, 300, 40));
priceLabel.Text = "Price";
Add(priceLabel);
var priceTextField = new UITextField(new RectangleF(10, 50, 300, 40));
Add(priceTextField);
var taxLabel = new UILabel(new RectangleF(10, 90, 300, 40));
taxLabel.Text = "Tax (%)";
Add(taxLabel);
var taxTextField = new UITextField(new RectangleF(10, 130, 300, 40));
Add(taxTextField);
var taxInclusivePriceLabel = new UILabel(new RectangleF(10, 170, 300, 40));
Add(taxInclusivePriceLabel);
var set = this.CreateBindingSet<FirstView, Core.ViewModels.FirstViewModel>();
set.Bind(priceTextField ).To(vm => vm.Price );
set.Bind(taxTextField ).To(vm => vm.Tax );
set.Bind(taxInclusivePriceLabel).To(vm => vm.TaxInclusivePrice);
set.Apply();
}
Mac 側の Xamarin.iOS Build Host と接続(Visual Studio 側 )
※ 最新の Xamarin で同一サブネット内でないと繋がらない、という話もある
Mac 側の Xamarin.iOS Build Host と接続(Mac 側 )
※ 最新の Xamarin で同一サブネット内でないと繋がらない、という話もある
実行結果
Android アプリの場合
プロジェクトで MvvmDemo.Core と MvvmCross を参照
FirstView.axml
FirstView.axml<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize=“30dp"
android:text="Price" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize=“30dp"
local:MvxBind="Text Price" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="40dp"
android:text="Tax" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:tex
tSize="40dp"
local:MvxBind="Text Tax" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="40dp"
android:text="Tax Inclusive Price" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="40dp"
local:MvxBind="Text TaxInclusivePrice" />
</LinearLayout>
Android エミュレータを起動
実行結果
ValueConverter - Core
namespace MvvmDemo.Core.Converters
{
public class PriceValueConverter : MvxValueConverter<int, string>
{
protected override string Convert(int value, Type targetType, object parameter, CultureInfo culture)
{
return string.Format("{0:#,0} 円 ", value);
}
protected override int ConvertBack(string value, Type targetType, object parameter, CultureInfo culture)
{
value = ToDigitText(value) ?? "0";
int result;
return int.TryParse(value, out result) ? result : 0;
}
string ToDigitText(string text)
{
var stringBuilder = new StringBuilder();
foreach (var character in text) {
if (char.IsDigit(character))
stringBuilder.Append(character);
}
return stringBuilder.ToString();
}
}
}
ValueConverter – Windows ストア アプリnamespace MvvmDemo.WindowsStore.NativeConverters{ public class NativePriceValueConverter : MvxNativeValueConverter<PriceValueConverter> {}}
<Application x:Class="MvvmDemo.WindowsStore.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:MvvmDemo.WindowsStore" xmlns:nativeConverters="using:MvvmDemo.WindowsStore.NativeConverters"> <Application.Resources> <ResourceDictionary> <nativeConverters:NativePriceValueConverter x:Key="Price"></nativeConverters:NativePriceValueConverter> </ResourceDictionary> </Application.Resources></Application>
<TextBox FontSize="64“ Text="{Binding Price, Mode=TwoWay, Converter={StaticResource Price}}" />
ValueConverter – iOS アプリ var set = this.CreateBindingSet<FirstView, Core.ViewModels.FirstViewModel>(); set.Bind(priceTextField ).To(vm => vm.Price ).WithConversion("Price"); set.Bind(taxTextField ).To(vm => vm.Tax ); set.Bind(taxInclusivePriceLabel).To(vm => vm.TaxInclusivePrice).WithConversion("Price"); set.Apply();
ValueConverter – Android アプリ
<EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="30dp" local:MvxBind="Text Price,Converter=Price" />
注意点
Xamarin のバージョンに注意なるべく最新のものをMono や Java SDK なども自動アップデートが便利
本日お話したこと
1. Xamarin とは2. なぜ Xamarin か3. Xamarin の開発環境4. Xamarin で効率よく開発
Xamarin 参考サイト
XamarinXLsoft エクセルソフト (国内正規販売代理店 )
Xamarin (ザマリン) ホーム - C# と .NET で iOS, Android (アンドロイド), Mac (マック), Windows アプリを開発
Xamarin 価格Hello, iPhone 初めての Xamarin.iOS アプリケーション開発 - 入門ガイド
Hello, Android 初めての Xamarin.Android アプリケーション開発 - 入門ガイド
Xamarin 参考サイト
Xamarin for Visual Studio 概説 Visual Studio で iOS/Android アプリが書ける Xamarin を試してみた(iOS 編)
Visual Studio で iOS/Android アプリが書ける Xamarin を試してみた(Android 編)
インサイド Xamarin Xamarinを構成するソフトウェア。その主要な10要素とは?
Xamarinの基盤となっている「Mono」と、C#コンパイラ「mcs」 Xamarinの基盤「Mono」のmonoランタイムとクラスライブラリ Mono のモバイル化の流れ ― Xamarin.iOS/Xamarin.Androidの誕生 Xamarin.iOS の仕組みとアプリケーションの構成 Xamarin.iOS で使用するライブラリ
MvvmCross 参考サイト
N plus 1 Videos Of MvvmCross · MvvmCross/MvvmCross Wiki
Xamarin - マルチプラットフォーム MVVMフレームワーク「MvvmCross」を使う - Qiita
Xamarin+MvvmCrossでアプリ開発をはじめる準備 2014年3月版 - Qiita
