Xamarinの概要

Xamarin 概要
2018.01.25 タガヤス３

Introduction
 福地雅之 [Masayuki FUKUCHI]
 仙台市泉区在住
 勤務先：グレープシティ株式会社(泉区紫山)
 Xamarin歴
 2015年2月
 Xamarin用コンポーネント製品の立ち上げ参加とともに
Xamarinに出会う
 2015年5月～2017年5月
 同製品の日本語版プロダクトマネージャ
 製品化、マーケティング、サポートなどを担当

業務
アプリケーション
開発支援ツールの
製品マーケティング

タガヤスで
お伝えしたい
こと
 Xamarin（ザマリン）概要
 Visual Studioを利用したモバイルアプリ開発

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

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#でアプリ開発

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

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

Visual Studio
Visual Studioを利用した開発
 開発可能なアプリ(Xamarin関連のみ)
 Xamarin.Forms(Android、iOS、Windows 10 UWP)
 Xamarin.Android(Android)
 Xamarin.iOS(iOS – Watch、tvOS)
 ライブラリ

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

Xamarin
コード
HelloWorldで見るコードの違い
Xamarin.Android
Xamarin.iOS
Xamarin.Forms

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#

<?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_height=“wrap_content”
android:id=“@+id/textView1” />
<Button
android:text=“ボタン”
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_height="wrap_content"
android:id="@+id/textView1"/>
<Button
android:text="ボタン"
android:layout_height="wrap_content"
android:id="@+id/button1" />
</LinearLayout>
レイアウト定義は同様レイアウト定義は同様

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#

同じようにStoryboardを編集

<?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#

Demo
Xamarin.Forms
Xamarin.Forms
アプリサンプル
・Android／iOS／UWP アプリをC#で開発

iOS Android
Windows 10
UWP
それぞれのプラットフォームにあわせたUI表示

共通ライブラリでUI(MainPage.xaml)と
処理(MainPage.xaml.cs)を定義
共通リソースの画像を表示
各プラットフォーム
のプロジェクト

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

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/

Demo
Visual Studio App Center
・アプリの利用状況を見る（Analytics）
ユーザーの選択動作をトラッキングしてWebで確認

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

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

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

Try Xamarin
Xamarin使用中、壁に当たることがある。
壁を乗り越えるために先人の知恵がある。
 Xamarin(ザマリン) とはなんぞや – Qiita
 Xamarin 日本語情報
 Xamarin やりたい人向け Visual Studio 2017 インストール手引書
 Xamarinの検索結果,のエラー・バグ・問題の解決方法｜teratail
 Xamarin Advent Calendar 2013-2017
 Xamarin本の歩き方 / How to deal with xamarin books [動画]

サンプル
コード
 サンプルデモのコード
 XF_SampleApp
 XF_ListView
Visual StudioまたはVisual Studio for Macで利用可能
https://github.com/fukuchima/Tagayas_201801

本日収穫
Xamarin
への興味と、はじめる決意

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

アンケート
http://bit.ly/tagayas3_20180125

Xamarinの概要

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Xamarinの概要

Similar to Xamarinの概要 (20)

More from Developer Solutions事業部メシウス株式会社（旧グレープシティ株式会社）

More from Developer Solutions事業部メシウス株式会社（旧グレープシティ株式会社） (20)

Recently uploaded

Recently uploaded (9)