Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xamarinの概要

829 views

Published on

2018年1月25日(木)開催
「タガヤス その3 ーXamarinを学んでみよう」
セッション2資料

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Xamarinの概要

  1. 1. Xamarin 概要 2018.01.25 タガヤス3
  2. 2. Introduction  福地雅之 [Masayuki FUKUCHI]  仙台市泉区在住  勤務先:グレープシティ株式会社(泉区紫山)  Xamarin歴  2015年2月  Xamarin用コンポーネント製品の立ち上げ参加とともに Xamarinに出会う  2015年5月~2017年5月  同製品の日本語版プロダクトマネージャ  製品化、マーケティング、サポートなどを担当
  3. 3. 業務 アプリケーション 開発支援ツールの 製品マーケティング
  4. 4. タガヤスで お伝えしたい こと  Xamarin(ザマリン)概要  Visual Studioを利用したモバイルアプリ開発
  5. 5. Xamarin  Xamarin(ザマリン) Xamarin社が開発→2016年にMicrosoftに買収  Android、iOS、Windows ”ネイティブ”モバイルアプリ を開発するフレームワークとその関連ツール ※今回解説するのはアプリ開発環境の部分
  6. 6. Xamarin Platforms Xamarinのアプリ開発方法 プラットフォーム(iOS、Android、macOS)のAPIを提供する ラッパーのようなものとして利用 2つのアプローチ  Xamarin ネイティブ(Xamarin.Android、Xamarin.iOS、Xamarin.Mac…)  プラットフォーム個別OS毎にUIを開発し、処理を共通化  OSネイティブの開発(Android StudioやXcode)と同様の開発を実現  Xamarin.Forms  iOS/Android/Windows/…のUIと処理を共通化  ワンソースで複数のプラットフォームアプリ開発を実現 C#でアプリ開発
  7. 7. Xamarin ネイティブ ビジネスロジックはC#でコードを共通化できる UI開発にはOS独自の知識と手法が必要 デバイス機能を利用するアプリ向き 通常のネイティブ開発の代替えとしても利用(C#で開発) Xamarin.iOS Xamarin.Android ビジネスロジック共通化 iOS UI Android UI Windows UI iOS API Android API Windows 10 UWP
  8. 8. Xamarin.Forms Xamarin.Formsを利用し処理だけでなくUIも共通化 XAMLを利用したUI設計が可能 クロスプラットフォームアプリ開発向き Xamarin.iOS Xamarin.Android ビジネスロジック共通化 iOS API Android API Windows 10 UWP Xamarin.Forms UI共通化
  9. 9. Visual Studio Visual Studioを利用した開発  開発可能なアプリ(Xamarin関連のみ)  Xamarin.Forms(Android、iOS、Windows 10 UWP)  Xamarin.Android(Android)  Xamarin.iOS(iOS – Watch、tvOS)  ライブラリ
  10. 10. Visual Studio macOSの環境ではVisual Studio for Macを利用  開発可能なアプリ(Xamarin関連のみ)  Xamarin.Forms(Android、iOS、UWP)  Xamarin.Android(Android)  Xamarin.iOS(iOS – Watch、tvOS)  Xamarin.Mac(macOS)  ライブラリ
  11. 11. Xamarin コード HelloWorldで見るコードの違い Xamarin.Android Xamarin.iOS Xamarin.Forms
  12. 12. 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#
  13. 13. <?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> レイアウト定義は同様 レイアウト定義は同様
  14. 14. 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#
  15. 15. 同じようにStoryboardを編集
  16. 16. <?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#
  17. 17. Demo Xamarin.Forms Xamarin.Forms アプリサンプル ・Android/iOS/UWP アプリをC#で開発
  18. 18. iOS Android Windows 10 UWP それぞれのプラットフォームにあわせたUI表示
  19. 19. 共通ライブラリでUI(MainPage.xaml)と 処理(MainPage.xaml.cs)を定義 共通リソースの画像を表示 各プラットフォーム のプロジェクト
  20. 20. Attention 【注意】 WindowsとVisual Studioだけでアプリ開発  誤解:XamarinアプリはWebView?  ハイブリッドではなくネイティブアプリ  誤解:Macが無くてもできる  iOSアプリのビルドにはmacOSが必要  誤解:C#が書ければOK  Android、iOSの各プラットフォームの知識が必要  誤解:Xamarin.Formsで完全に共通化  可能ではあるが最大公約数的ソリューション  UI共通化の是非  すばやく、シンプルに開発する場合に最適
  21. 21. Visual Studio App Center アプリケーション開発に必要な機能を提供する クラウドサービス  提供するサービス  ビルド(Build)、テスト(Test)、配布(Distribution)、 クラッシュログ収集(Crush)、利用分析(Analytics)、プッシュ通知(Push)  提供対象  Xamarinだけでなく、OSネイティブのAndroid、iOS、macOS、Windows 10アプリ で利用可能  有償サービス  ただし各サービスに無料枠 Visual Studio App Center https://azure.microsoft.com/ja-jp/services/app-center/
  22. 22. Demo Visual Studio App Center ・アプリの利用状況を見る(Analytics) ユーザーの選択動作をトラッキングしてWebで確認
  23. 23. Try Xamarin Visual Studioのインストールからスタート Visual Studio https://www.visualstudio.com/ja/
  24. 24. Try Xamarin 使ってみましょう 日本マイクロソフト https://www.microsoft.com/ja-jp/dev/campaign/vs-xamarin.aspx
  25. 25. Try Xamarin
  26. 26. Try Xamarin ユーザーグループなどに豊富な情報 Japan Xamarin User Group(#JXUG) http://jxug.org/
  27. 27. Try Xamarin Xamarin使用中、壁に当たることがある。 壁を乗り越えるために先人の知恵がある。  Xamarin(ザマリン) とはなんぞや – Qiita  Xamarin 日本語情報  Xamarin やりたい人向け Visual Studio 2017 インストール手引書  Xamarinの検索結果,のエラー・バグ・問題の解決方法|teratail  Xamarin Advent Calendar 2013-2017  Xamarin本の歩き方 / How to deal with xamarin books [動画]
  28. 28. サンプル コード  サンプルデモのコード  XF_SampleApp  XF_ListView Visual StudioまたはVisual Studio for Macで利用可能 https://github.com/fukuchima/Tagayas_201801
  29. 29. 本日収穫 Xamarin への興味と、はじめる決意
  30. 30. 良い開発ツールを 使っていきましょう Thank you.
  31. 31. アンケート http://bit.ly/tagayas3_20180125

×