Post on 16-Apr-2017
Xamarin 基礎講座Xamarin ハンズオン
Japan Xamarin User Group奥山 裕紳Twitter: @amay077Qiita: http://qiita.com/amay077Teratail, スタックオーバーフロー
2
奥山 裕紳モバイルアプリ開発者 , from 愛知県豊橋市 , 東京企業のリモート会社員Xamarin, Android, iOS, Windows, C#, Java, VB, C++, Geo, GPS, Map連載Build Insider – Xamarin逆引きTipsコミュニティTwitter: @amay077Qiita: http://qiita.com/amay077Teratail, スタックオーバーフロー
自己紹介
3
第 1 部 30 分＋ 90 分Xamarin 概要Android, iOS 概要Xamarin ネイティブ
第 2 部 30 分＋ 90 分Xamarin.Formsまとめ
LT 大会＆キャッチアップ 30 分
本日のスケジュール
開発したことがあるのは？• Xamarin アプリ• iOS アプリ• Android アプリ• Windows アプリ
今日使用する OS/IDE は？• Windows / Visual Studio• MacOS / Xamarin Studio
5
受講者の皆さん
アジェンダ
Xamarin 概要Android, iOS 概要Xamarin ネイティブXamarin.Formsまとめ
6
Miguel, NatMono, XimianNovell, AttachmateMicrosoft
7
Xamarin ( ザマリン・企業 )
C# / .NET / Visual Studioフル “ネイティブ” アプリAPI 100% 移植コード共通化
8
Xamarin
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(); } }};
２つの開発手法
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 はネイティブで個別に作りこむ
必要な知識
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
Visual Studio Community の利用条件：https://www.microsoft.com/ja-jp/dev/products/community.aspx
12
必要なライセンス
http://nuits.hatenadiary.jp/entry/2016/05/06/174037
アジェンダ
Xamarin 概要Android, iOS 概要Xamarin ネイティブXamarin.Formsまとめ
13
Xamarin.Android
14
15
構成
ソースファイル(C#)
UI 定義(axml)
メタデータ(Resources)
16
Activity
Activity 1
UI
Code
Activity 2
UI
Code
Activity 3
UI
Code
Data, files, images など
アプリ
17
Layout
Layout
18
19
Activity + Layout
<LinearLayout ... > <TextView ... /> <EditText ... /> <Button ... /> <TextView ... /></LinearLayout>
[Activity]public class PiActivity : Activity{ ... ...}
Pi.axml PiActivity.cs
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); ... } ...}
21
Intent
22
Intent
public class MainActivity : Activity{ ... void OnClick(object sender, EventArgs e) { var intent = new Intent(this, typeof(Activity2));
base.StartActivity(intent); }}
23
Intent
24
Navigation
Xamarin.iOS
25
26
構成
ソースファイル(C#)
UI 定義(Storyboard +
XiB)メタデータ
(property lists)
27
Frame
28
Bounds
29
View ( コードで )
30
Storyboard
31
Constraints ( 制約 )
32
Multi Screen
33
Segue
34
Segue
アジェンダ
Xamarin 概要Android, iOS 概要Xamarin ネイティブXamarin.Formsまとめ
35
Xamarin ネイティブiOS
36
Android
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 はネイティブで個別に作りこむ
アジェンダ
Xamarin 概要Android, iOS 概要Xamarin ネイティブXamarin.Formsまとめ
38
39
抽象化 UI ライブラリ最大公約数
ワンソース・ネイティブUI/UXXAML / MVVM拡張可能
Xamarin.Forms
Shared C# App Logic(PCL)
Shared XAML/C# UI Code(Xamarin.Forms)
Xamarin.Formsロジックと UI を共通化
UI は各プラットフォームの同じ役割の UI が自動マッピング
40
Pages
New!
41
Layouts
New!
New!
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
Xamarin.Formsワンソースネイティブの UI/UX
43
XAMLXamarin.Forms XAML
44
UWP/WPF XAML
45
XAML の機能
XAML の機能ResourceStyleTriggerBehaviorValue ConverterData TemplateData Binding
46
Model View ViewModelData BindingMessaging Center
47
MVVM
ネイティブコントロール (UI)Custom RendererEffects
48
ネイティブ APIDependency ServicePlugin
49
アジェンダ
Xamarin 概要Android, iOS 概要Xamarin ネイティブ , Xamarin.Forms開発手法まとめ
50
C# / .NET / Visual Studioフル “ネイティブ” アプリAPI 100% 移植コード共通化
51
Xamarin
２つの開発手法
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 はネイティブで個別に作りこむ
#Xamarin はいいぞ
53
54
公式ドキュメントペゾルド本（PDFが無料配布中）
日本語の情報Japan Xamarin User GroupBuild InsiderQiita田淵のブログ各種ブログへのリンク
リソース
• 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
ありがとうございました
Japan Xamarin User Group田淵 義人080-7015-3586Twitter: @ytabuchifacebook: xlsoft.ytabuchiBlog: Xamarin日本語情報