2017年9月8日開催 仙台・宮城とれたてネタ1【タガヤス その1】 #タガヤス

1. Xamarin 概要
福地雅之
グレープシティ株式会社
2017.9.8開催：仙台・宮城とれたてネタ！【タガヤス その１】

2. Introduction
 福地雅之 [Masayuki FUKUCHI]
 仙台市泉区在住
 勤務先：グレープシティ株式会社(泉区紫山)

3. 業務
アプリケーション
開発支援ツール関連

4. お伝えしたい
こと
 Xamarin（ザマリン）概要
 クロスプラットフォームモバイルアプリ開発

6. Xamarin
 Xamarin（ザマリン）
Xamarin社が開発→2016年にMicrosoftに買収
 Android、iOS、Windows ”ネイティブ”モバイルアプリ
を開発するフレームワークとその関連ツール
※今回解説するのはアプリ開発環境部分

7. Xamarin
Platforms
Xamarinのアプリ開発方法
プラットフォーム(iOS、Android、macOS)のAPIを提供する
ラッパーのようなものとして利用
2種類のアプローチ
 Xamarin Native（Xamarin.Android、Xamarin.iOS、Xamarin.Mac…）
 プラットフォーム個別OS毎にUIを開発し、処理を共通化
 ネイティブ開発(Android StudioやXcode)と同様の開発を実現
 Xamarin.Forms
 iOS／Android／WindowsのUIと処理を共通化
 ワンソースで複数のプラットフォームアプリ開発を実現
C#でアプリ開発

8. Xamarin Native
ビジネスロジックはC#でコードを共通化できる
UI開発にはOS独自の知識と手法が必要
デバイス機能を利用するアプリ向き
通常のネイティブ開発の代替えとしても利用（C#で開発）
Xamarin.iOS Xamarin.Android
ビジネスロジック共通化
iOS UI Android UI Windows UI
iOS API Android API
Windows 10
UWP

9. Xamarin.Forms
Xamarin.Formsを利用し処理だけでなくUIも共通化
XAMLを利用したUI設計が可能
クロスプラットフォームアプリ開発向き
Xamarin.iOS Xamarin.Android
ビジネスロジック共通化
iOS API Android API
Windows 10
UWP
Xamarin.Forms
UI共通化

10. Visual Studio
Visual Studioを利用した開発
 開発可能なアプリ
 Xamarin.Forms(Android、iOS、UWP)
 Xamarin.Android(Android)
 Xamarin.iOS(iOS – Watch、tvOS)

11. Visual Studio
macOSの環境ではVisual Studio for Macを利用
 開発可能なアプリ
 Xamarin.Forms(Android、iOS、UWP)
 Xamarin.Android(Android)
 Xamarin.iOS(iOS – Watch、tvOS)
 Xamarin.Mac(macOS)

12. Demo
Xamarin.Android
でHelloWorld
・Android アプリをC#で開発

13. import android.support.v7.app.AppCompatActivity;
// 略
public class MainActivity extends
AppCompatActivity {
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button btn = (Button)
findViewById(R.id.button1);
btn.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View v) {
TextView txt = (TextView)
findViewById(R.id.textView1);
txt.setText("こんにちは Android");
}
});
}
}
using Android.App;
using Android.Widget;
using Android.OS;
namespace XA_HelloWorld
{
[Activity(Label = "XA_HelloWorld", MainLauncher =
true)]
public class MainActivity : Activity
{
protected override void OnCreate(Bundle
savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.Main);
Button btn =
FindViewById((Resource.Id.button1)) as Button;
btn.Click += (object sender,
System.EventArgs e) =>
{
var mesText =
FindViewById<TextView>(Resource.Id.textView1);
mesText.Text = "こんにちは Xamarin.Android";
};
}
}
}
Android Studio Java Xamarin.Android C#

14. <?xml version=“1.0” encoding=“utf-8”?>
<LinearLayout
xmlns:android=“http://schemas.android.com/apk/res/android”
android:orientation=“vertical”
android:layout_width=“match_parent”
android:layout_height=“match_parent”>
<TextView
android:text=“Text”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:id=“@+id/textView1” />
<Button
android:text=“ボタン”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:id="@+id/button1" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1"/>
<Button
android:text="ボタン"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button1" />
</LinearLayout>
レイアウト定義は同様 レイアウト定義は同様

15. Demo
Xamarin.iOS
でHelloWorld
・iOS アプリをC#で開発

16. import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
@IBOutlet weak var Label1: UILabel!
@IBAction func button_touch(_ sender: Any)
{
Label1.text = "こんにちは Xcode iOS"
}
override func didReceiveMemoryWarning()
{
super.didReceiveMemoryWarning()
}
}
using System;
using UIKit;
namespace XI_HelloWorld
{
public partial class ViewController :
UIViewController
{
public ViewController(IntPtr handle) :
base(handle){
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
Button1.TouchUpInside +=
Button1_TouchUpInside;
}
private void Button1_TouchUpInside(object sender,
EventArgs e)
{
Label1.Text = "こんにちは Xamarin.iOS";
}
public override void DidReceiveMemoryWarning()
{
base.DidReceiveMemoryWarning();
}
}
}
Xcode Swift Xamarin.iOS C#

17. 同じようにStoryboardを編集

18. Demo
Xamarin.Forms
でHelloWorld
・Android／iOS／UWP アプリをC#で開発

19. <?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:XF_HelloWorld"
x:Class="XF_HelloWorld.MainPage">
<StackLayout Orientation=“Vertical”
VerticalOptions="Center">
<Label Text="Welcome to Xamarin Forms!"
VerticalOptions="Center"
HorizontalOptions="FillAndExpand“
HorizontalTextAlignment="Center"
x:Name="Label1"/>
<Button x:Name="Button1" Text="ボタン"/>
</StackLayout>
</ContentPage>
Xamarin.Forms XAML
using System;
using Xamarin.Forms;
namespace XF_HelloWorld
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
Button1.Clicked += Button1_Clicked;
}
private void Button1_Clicked
(object sender, EventArgs e)
{
Label1.Text = "こんにちは Xamarin.Forms";
}
}
}
Xamarin.Forms C#

20. iOS Android
Windows 10
UWP
それぞれのプラットフォームに合った実行結果

22. Attention
【注意】
WindowsとVisual Studioだけでアプリ開発
 誤解：XamarinアプリはWebView？
 ハイブリッドではなくネイティブアプリ
 誤解：Macが無くてもできる
 iOSアプリのビルドにはmacOSが必要
 誤解：C#が書ければOK
 Android、iOSの各プラットフォームの知識が必要
 誤解：Xamarin.Formsで完全に共通化
 可能ではあるが最大公約数的ソリューション
 UI共通化の是非
 はやく、シンプルに開発する場合に最適

23. Visual Studio
Visual Studioのインストールからスタート
Visual Studio
https://www.visualstudio.com/ja/

24. Try Xamarin
使ってみましょう
日本マイクロソフト
https://www.microsoft.com/ja-jp/dev/campaign/vs-xamarin.aspx

25. Try Xamarin

26. Try Xamarin
ユーザーグループなどに豊富な情報
Japan Xamarin User Group（#JXUG）
http://jxug.org/

27. サンプル
コード
 サンプルデモのコード
 Xamarin.Android
 Xamarin.iOS
 Xamarin.Forms
Visual StudioまたはVisual Studio for Macで利用可能
https://github.com/fukuchima/Tagayas_201709

29. 良い開発ツールを
使っていきましょう