Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

56
Xamarin 基基基基 Xamarin 基基基基基 Japan Xamarin User Group 基基 基基 Twitter: @amay077 Qiita: http://qiita.com/amay077 Teratail , 基基基基基基基基基基基

Transcript of Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

Page 1: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

Xamarin 基礎講座Xamarin ハンズオン

Japan Xamarin User Group奥山 裕紳Twitter: @amay077Qiita: http://qiita.com/amay077Teratail, スタックオーバーフロー

Page 2: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

2

奥山 裕紳モバイルアプリ開発者 , from 愛知県豊橋市 , 東京企業のリモート会社員Xamarin, Android, iOS, Windows, C#, Java, VB, C++, Geo, GPS, Map連載Build Insider – Xamarin逆引きTipsコミュニティTwitter: @amay077Qiita: http://qiita.com/amay077Teratail, スタックオーバーフロー

自己紹介

Page 3: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

3

第 1 部 30 分+ 90 分Xamarin 概要Android, iOS 概要Xamarin ネイティブ

第 2 部 30 分+ 90 分Xamarin.Formsまとめ

LT 大会&キャッチアップ 30 分

本日のスケジュール

Page 4: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

http://github.com/ytabuchi/XamarinHOL

4

資料

Page 5: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

開発したことがあるのは?• Xamarin アプリ• iOS アプリ• Android アプリ• Windows アプリ

今日使用する OS/IDE は?• Windows / Visual Studio• MacOS / Xamarin Studio

5

受講者の皆さん

Page 6: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

アジェンダ

Xamarin 概要Android, iOS 概要Xamarin ネイティブXamarin.Formsまとめ

6

Page 7: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

Miguel, NatMono, XimianNovell, AttachmateMicrosoft

7

Xamarin ( ザマリン・企業 )

Page 8: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

C# / .NET / Visual Studioフル “ネイティブ” アプリAPI 100% 移植コード共通化

8

Xamarin

Page 9: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

C#

9

using System.Collections.Generic;using System.IO;using System.Linq;using System.Net.Http;using System.Xml.Serialization;

button.Click += async (sender, e) =>{ using (var client = new HttpClient()) { using (var reader = new StreamReader(await client.GetStreamAsync("xxx"))) { var deserializer = new XmlSerializer(typeof(Rss)); var latest = deserializer.Deserialize(reader) as Rss; var feed = latest.Channel.Items .Where(x => x.Link.Contains("xamarin")) .Select(x => x.Title).ToList(); } }};

Page 10: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

2つの開発手法

10

Shared C# App Logic(PCL)

Shared XAML/C# UI Code(Xamarin.Forms)

iOSC# UI

Shared C# App Logic(PCL)

AndroidC# UI

WindowsC# UI

Xamarin.Formsロジックと UI を共通化

UI は各プラットフォームの同じ役割の UI が自動マッピング

Xamarin Nativeロジックのみ共通化

UI はネイティブで個別に作りこむ

Page 11: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

必要な知識

11

プラットフォーム個別

Xamarin Native

iOS   API Objective-C, Swift Xcode

Android   API Java Android Studio

Windows   API Visual StudioC#

API 言語 統合開発環境

iOS   API Objective-C, Swift Xcode

Android   API Java Android Studio

Windows   API Visual StudioC#

Xamarin.Forms

iOS   API

Android   API

Windows   API

Objective-C, Swift Xcode

Java Android Studio

Visual StudioC#Xamarin.Forms

UI toolkit

Page 12: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

Visual Studio Community の利用条件:https://www.microsoft.com/ja-jp/dev/products/community.aspx

12

必要なライセンス

http://nuits.hatenadiary.jp/entry/2016/05/06/174037

Page 13: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

アジェンダ

Xamarin 概要Android, iOS 概要Xamarin ネイティブXamarin.Formsまとめ

13

Page 14: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

Xamarin.Android

14

Page 15: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

15

構成

ソースファイル(C#)

UI 定義(axml)

メタデータ(Resources)

Page 16: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

16

Activity

Activity 1

UI

Code

Activity 2

UI

Code

Activity 3

UI

Code

Data, files, images など

アプリ

Page 17: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

17

Layout

Page 18: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

Layout

18

Page 19: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

19

Activity + Layout

<LinearLayout ... > <TextView ... /> <EditText ... /> <Button ... /> <TextView ... /></LinearLayout>

[Activity]public class PiActivity : Activity{ ... ...}

Pi.axml PiActivity.cs

Page 20: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

20

Resource Id[Activity(MainLauncher = true)]public class MainActivity : Activity{ protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); SetContentView(Resource.Layout.Main);

var et = FindViewById<EditText>(Resource.Id.digitsInput); ... } ...}

Page 21: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

21

Intent

Page 22: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

22

Intent

public class MainActivity : Activity{ ... void OnClick(object sender, EventArgs e) { var intent = new Intent(this, typeof(Activity2));

base.StartActivity(intent); }}

Page 23: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

23

Intent

Page 24: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

24

Navigation

Page 25: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

Xamarin.iOS

25

Page 26: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

26

構成

ソースファイル(C#)

UI 定義(Storyboard +

XiB)メタデータ

(property lists)

Page 27: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

27

Frame

Page 28: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

28

Bounds

Page 29: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

29

View ( コードで )

Page 30: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

30

Storyboard

Page 31: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

31

Constraints ( 制約 )

Page 32: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

32

Multi Screen

Page 33: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

33

Segue

Page 34: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

34

Segue

Page 35: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

アジェンダ

Xamarin 概要Android, iOS 概要Xamarin ネイティブXamarin.Formsまとめ

35

Page 36: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

Xamarin ネイティブiOS

36

Android

Page 37: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

UI は個別ネイティブ API は個別PCL vs SharedネットワークJson, XML永続化async/await

37

Xamarin ネイティブ

iOSC# UI

Shared C# App Logic(PCL)

AndroidC# UI

WindowsC# UI

Xamarin Nativeロジックのみ共通化

UI はネイティブで個別に作りこむ

Page 38: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

アジェンダ

Xamarin 概要Android, iOS 概要Xamarin ネイティブXamarin.Formsまとめ

38

Page 39: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

39

抽象化 UI ライブラリ最大公約数

ワンソース・ネイティブUI/UXXAML / MVVM拡張可能

Xamarin.Forms

Shared C# App Logic(PCL)

Shared XAML/C# UI Code(Xamarin.Forms)

Xamarin.Formsロジックと UI を共通化

UI は各プラットフォームの同じ役割の UI が自動マッピング

Page 40: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

40

Pages

New!

Page 41: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

41

Layouts

New!

New!

Page 42: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

42

ControlsActivityIndicat

or BoxView Button DatePicker Editor

Entry Image Label ListView Map

OpenGLView Picker ProgressBar SearchBar Slider

Stepper TableView TimePicker WebView

EntryCell ImageCell SwitchCell TextCell ViewCell

Page 43: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

Xamarin.Formsワンソースネイティブの UI/UX

43

Page 44: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

XAMLXamarin.Forms XAML

44

UWP/WPF XAML

Page 45: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

45

XAML の機能

Page 46: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

XAML の機能ResourceStyleTriggerBehaviorValue ConverterData TemplateData Binding

46

Page 47: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

Model View ViewModelData BindingMessaging Center

47

MVVM

Page 48: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

ネイティブコントロール (UI)Custom RendererEffects

48

Page 49: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

ネイティブ APIDependency ServicePlugin

49

Page 50: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

アジェンダ

Xamarin 概要Android, iOS 概要Xamarin ネイティブ , Xamarin.Forms開発手法まとめ

50

Page 51: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

C# / .NET / Visual Studioフル “ネイティブ” アプリAPI 100% 移植コード共通化

51

Xamarin

Page 52: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

2つの開発手法

52

Shared C# App Logic(PCL)

Shared XAML/C# UI Code(Xamarin.Forms)

iOSC# UI

Shared C# App Logic(PCL)

AndroidC# UI

WindowsC# UI

Xamarin.Formsロジックと UI を共通化

UI は各プラットフォームの同じ役割の UI が自動マッピング

Xamarin Nativeロジックのみ共通化

UI はネイティブで個別に作りこむ

Page 53: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

#Xamarin はいいぞ

53

Page 55: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

• 9/7 【東京】日本 Android の会 定例会「クロスプラットフォーム開発最前線」 by 田淵さん

• 9/10 【横浜】 Xamarin バッドノウハウ大全 by 田淵さん&ちょまどさん

• 9/17 【東京】初心者向け Xamarin ハンズオン!• 10/1 【東京】 .NET Fringe Japan 2016• 10/15 【東京】 JXUGC #17 お前の Xamarin アプ

リを見せてみろ!• 11/12 【東京】 Xamarin Dev Days Tokyo

55

WHAT’S NEXT

Page 56: Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama

ありがとうございました

Japan Xamarin User Group田淵 義人080-7015-3586Twitter: @ytabuchifacebook: xlsoft.ytabuchiBlog: Xamarin日本語情報