Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ

Preview:

Citation preview

Windows Phone/iOS/Androidアプリ同時開発のススメ

インフラジスティックス・ジャパン株式会社

製品担当

池原大然

dikehara@infragistics.com

03-6892-8034

エクセルソフト株式会社

Business Development Manager

田淵義人

ytabuchi@xlsoft.com

03-5440-7875 / 080-7015-3586

会社概要 名称 エクセルソフト株式会社

設立 平成3年7月1日

所在地 東京都港区三田3-9-9

資本金 1000万円

事業内容 ソフトウェアの開発・販売事業

主要取引先 伊藤忠テクノソリューションズ, インテル, SCSK, HPCシステムズ, NTTコムウェア, NTTデータ, シネックスインフォテック, 新日鉄住金ソリューションズ, ソニー, ソフトバンクBB, ダイワボウ情報システム, 東芝, 日本アイ・ビー・エム, 日本SGI, 日本電気, 日本ヒューレット・パッカード, 日本ユニシス, ネットワールド, 野村総合研究所, パナソニック, 日立製作所, 富士通, マイクロソフト, 三菱電機 等

関連会社 XLsoft Corporation アメリカ カリフォルニア州

「開発ツールはエクセルソフトで」をモットーに。

販売/サポートだけでなく、運用もお客様と一緒に考えます。

大きい会社ではありませんが、レスポンスの速さと技術の高さが自慢です。

自己紹介 • 田淵義人• エクセルソフトの Xamarin 担当。非開発者。

• Xamarin でググるとブログが出てきます。

• Twitter, SNS, Web, HTML5/CSS/JS, モバイル/ガジェット, Web マーケティングなどが好き

• Twitter: @ytabuchi

• facebook: ytabuchi.xlsoft

• Blog: http://ytabuchi.hatenablog.com/

会社概要 名称 インフラジスティックス・ジャパン株式会社

設立 平成 18 年

所在地 東京都渋谷区渋谷 1-20-1 井門美竹ビル 2F

資本金 1 億円

事業内容 ソフトウェアの開発・販売事業

関連会社 Infragistics, Inc. アメリカ ニュージャージー州

「高い生産性の実現」を UI コンポーネントやモバイル ソリューションで

お届けします。

製品そのものだけではなく、コンサルティング、トレーニング、オンサイト サポート

などお「顔の見える」会社であることも強みの一つです。

自己紹介 • 池原大然• インフラジスティックス・ジャパン株式会社製品担当

• Microsoft MVP for Windows Platform Development

• UI 全般の技術についてウォッチしています。

• Twitter: @Neri78

• Blog: http://blogs.jp.infragistics.com/blogs/dikehara

はじめに

セッションゴール

・Xamarin/Infragistics に興味を持つ

・Xaml で Xamarin.Forms を書いてみたくなる

・Silverlight/WPF アプリを Xamarin/Infragisticsでモバイル化しよっかな?という気持ちになる

アプリはスマホの利用時間の72%

• スマートフォンの利用時間全体のうち、アプリからの利用時間は Web ブラウザの約2.5倍で、全体の72%を占めている

http://www.netratings.co.jp/news_release/2014/10/Newsrelease20141001.html

分かってるところ

開発チームに必要なモノ

今までのアプリ開発

モバイル向けクロスプラットフォーム開発環境

“No silver bullet”

Xamarin(ザマリン)・ C# / .NET・ “ネイティブ” アプリ・ API 100% 移植・ コード共通化

C#/.NET/Visual Studio

C# で開発 • async/await, LINQ, ラムダ式などの実装が使える

• Java, Objective-C, Swift 記述不要

• NuGet ライブラリ、MS エコシステム• 31,490 unique packages

• Json.NET, HttpClient, SQLite, RestSharp, Reactive Extensions, MvvmCross

var ret = from p in List<Person>where p.Age >= 20select p;

Windows API

iOSAPI

100% 対応

AndroidAPI

100% 対応

“ネイティブ” アプリ

“ネイティブ” アプリ

• ネイティブ UI / UX

• ネイティブ “パフォーマンス”

• ネイティブ API

API 100% 移植

API • Xamarin.iOS• Unified API / WatchKit 対応済み

• iOS SDK リリースと同日

• 次期 iOS SDK Beta と Xamarin.iOS Alpha/Betaで次期 iOS 対応アプリを開発可能• Xamarin は iOS 8 に完全対応 - Xamarin で iOS 8 をさらに素晴らしく (紹介記事)

• Watch Kit Preview

• Xamarin.Android• Android Lollipop, Android wear 対応済み

• 大体 1ヶ月~3ヶ月程して対応版リリース• Android L Developer Preview / Android Wear をサポート (紹介記事)

コード共通化

Xamarin を使用した開発

Xamarin.Forms

Xamarin.Forms - 画面の共通化

UI “コード”の共通化

ビルド時にネイティブ UI にマップ

XAML

Pages

Content MasterDetail Navigation Tabbed Carousel

Layouts

Stack Absolute Relative Grid ContentView ScrollView Frame

Controls

ActivityIndicator BoxView Button DatePicker Editor

Entry Image Label ListView Map

OpenGLView Picker ProgressBar SearchBar Slider

Stepper TableView TimePicker WebView EntryCell

ImageCell SwitchCell TextCell ViewCell

DEMO

Json.NET, Absolute Layout, BoxView, Animation, Dependency Service

XAML, Data Binding, LINQ, ListView, Style, Trigger

よりリッチな表現を実現するInfragistics Xamarin.Forms

UI 開発コンポーネント セット Infragistics Ultimate

• 様々なプラットフォームに対応したユーザー インターフェイス コントロール

• 開発生産性および UI の質の向上生産性 ユーザビリティ 信頼性

Infragistics Ultimate 2015 Vol.1 に含まれる製品

Windows Forms ASP.NET WPF Silverlight

Ignite UI

(HTML5/jQuery/

ASP.NET MVC)

NucliOS

(iOS/Xamarin.iOS)

Windows UI

(Windows Store

Application)Windows Phone Icon

Indigo Studio

Android

(Java/Xamarin.A

ndroid) - CTP

Xamarin.Forms

合計 12 製品

モバイル用ネイティブ コントロール

Windows Forms ASP.NET WPF Silverlight

Ignite UI

(HTML5/jQuery/

ASP.NET MVC)

NucliOS

(iOS/Xamarin.iOS)

Windows UI

(Windows Store

Application)Windows Phone Icon

Indigo Studio

Android

(Java/Xamarin.A

ndroid) - CTP

Xamarin.Forms

「コード共有」と

「コード翻訳」

• XAML/C# ベースコア API を各プラットフォームに「共有」または「翻訳」

• 個々のプラットフォームに合わせて API をチューニング

• クロスプラットフォームかつパフォーマンス重視

• 類似の機能セット

Core

API

Xamarin

Forms

WPF

HTML5

iOS

Android

Windows

Phone

Windows

ストアアプリ

Xamarin.Forms 対応コントロール は

この仕組みをフル活用

Infragistics Xamarin.FormsWindows Phone 向け、iOS 向け、Android 向けそれぞれで提供している共通コントロールを集約

初期リリースでは「データ視覚化」コントロールを中心に提供

データチャート

• 拡大・縮小機能を備えた高速チャート

• 柱状、棒、ライン、スプライン、箱ひげ、

ローソク足など、多くのチャートタイプ

• 移動平均線やボリンジャーバンドといった

トレンドラインやインジケーターを標準提供

円チャート •要素の選択

•強調表示

•「その他」の表示

ゲージ • 円形、線形、ブレット

• 針、範囲、スケール

• アニメーショントランジション

バーコード(CTP)

•128 ASCII

データグリッド(CTP)

• 列の自動生成

• 自動、固定サイズ列

• テンプレート列

• グループ化

• データアダプター

• テキスト列

アプリケーションサンプル

Infragistics Xamarin.Forms コントロールを用いた様々なサンプルアプリケーションを公開

http://j.mp/IGAppSample

DEMO

Infragistics Xamarin.Forms の組み込み

・アセンブリ参照の追加

・画面へのコントロール追加

・アセンブリのロード

アセンブリ参照の追加

• 全ての関連プロジェクトに個々のコントロールに対応したアセンブリ参照を追加

• ローカル NuGet パッケージを利用することでプロジェクトへの追加を容易に実現できる

パッケージの読み込み

チャートデータの例

public class SimpleDataCollection :

ObservableCollection<SimpleDataPoint> {

public SimpleDataCollection() {

this.Add(new SimpleDataPoint() { Label = "1", Value = 3.0 });

this.Add(new SimpleDataPoint() { Label = "2", Value = 2.0 });

this.Add(new SimpleDataPoint() { Label = "3", Value = 3.0 });

this.Add(new SimpleDataPoint() { Label = "4", Value = 4.0 });

this.Add(new SimpleDataPoint() { Label = "5", Value = 5.0 });

this.Add(new SimpleDataPoint() { Label = "6", Value = 6.0 });

this.Add(new SimpleDataPoint() { Label = "7", Value = 5.0 });

}

}/// <summary> /// 文字列および double 値のペアに対するシンプルなストレージクラス

/// </summary>

public class SimpleDataPoint {

public double Value { get; set; }

public string Label { get; set; }

}

コントロール利用

• 共通画面でチャートの宣言や設定を行う

• WPF/Windows ストア アプリで提供している XamDataChart の設定とほぼ同じ

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns=http://xamarin.com/schemas/2014/forms

xmlns:x=http://schemas.microsoft.com/winfx/2009/xamlxmlns:local="clr-namespace:XFDemo1;assembly=XFDemo1“xmlns:ig="clr-namespace:Infragistics.XF.Controls;assembly=InfragisticsXF.Controls.Charts“

x:Class="XFDemo1.Page1">

<ContentPage.BindingContext><!-- バインディングコンテキストを指定 -->

<local:SimpleDataCollection />

</ContentPage.BindingContext>

<ig:XFDataChart x:Name="Chart" >

<ig:XFDataChart.Axes><!-- 軸 -->

<ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding}“ Label="Label" />

<ig:NumericYAxis x:Name="yAxis" />

</ig:XFDataChart.Axes>

<ig:XFDataChart.Series><!-- シリーズ -->

<ig:AreaSeries ItemsSource="{Binding}“ ValueMemberPath="Value“

XAxis="{x:Reference xAxis}” YAxis="{x:Reference yAxis}">

</ig:AreaSeries>

</ig:XFDataChart.Series>

</ig:XFDataChart >

</ContentPage>

アセンブリロード

• 各プラットフォーム用のプロジェクトで利用しているアセンブリのロードを事前に行う必要がある

• Windows Phone – MainPage.xaml.cs

• iOS – AppDelegate.cs

• Android – MainActivity.cs

Infragistics.XF.Initializers.Barcodes.Init();

Infragistics.XF.Initializers.Charts.Init();

Infragistics.XF.Initializers.Gauges.Init();

Infragistics.XF.Initializers.Grids.Init();

DEMO

Xamarin Test Cloud

Xamarin Test Cloud

• UI 自動テストサービス• ローカル版は Xamarin.UITest, Calabash

• 1,200台の実機

https://xamarin.com/test-cloud#video

評価版

http://j.mp/xm-eval

http://j.mp/IGXamarinForms

Xamarin Starter forVisual Studio

• Visual Studio 2015 / 2013 Community + Xamarin Starter for Visual Studio

•完全無料の開発環境

• 【速報】Xamarin Starter for Visual Studio リリースのお知らせ - Xamarin 日本語情報• http://ytabuchi.hatenablog.com/entry/xamarins

tarter-for-vs

http://xamarin.com/starter

Xamarin forWindows Store

• Xamarin.Forms for Windows を使ってみた -Xamarin 日本語情報• http://ytabuchi.hatenablog.com/entry/xamarinf

orms-for-windows

http://developer.xamarin.com/guides/cross-platform/windows/store/

まとめ

Xamarin(ザマリン)・ C# / .NET・ “ネイティブ” アプリ・ API 100% 移植・ コード共通化

Xamarin.Forms - 画面の共通化

UI “コード”の共通化

ビルド時にネイティブ UI にマップ

XAML

リソース • Xamarin逆引きTips - Build Insider • http://www.buildinsider.net/mobile/xamari

ntips

• Working with Xamarin.Forms - Xamarin • http://developer.xamarin.com/guides/cros

s-platform/xamarin-forms/working-with/

• Xamarin.Forms KickStarter • http://www.xforms-kickstarter.com/

• Syntax is my UI (Xamarin MVP) • https://www.syntaxismyui.com/

• Adventures in Xamarin Forms | Write Once Mobile Development• http://adventuresinxamarinforms.com/

Xamarin Test Cloud

• UI 自動テストサービス• ローカル版は Xamarin.UITest, Calabash

• 1,200台の実機

https://xamarin.com/test-cloud#video

Infragistics Ultimate・Xamarin.Forms を含め様々な

プラットフォームに対応・リッチ UI コントロール・コード「共有」と「翻訳」

リソース • Infragistics Xamarin.Forms 製品ページhttp://j.mp/IGXamarinForms

•アプリケーションサンプルhttp://j.mp/IGAppSample

•ドキュメンテーションhttp://j.mp/IGOnlineDoc

• Blog• http://j.mp/IGXamarinBlog

謝辞

@garicchi 先生:Arduino で取得した温度データをAzure にアップ& Web API 作成でご協力頂きました。

http://garicchi.hatenablog.jp/entry/decode2015

お知らせ • ブースにご来場ください!• もれなく Xamarin 評価版ライセンスを 90 日に

延長します!

• さらに両日 1 名様に Xamarin、Infragistics Ultimate 製品版ライセンスをプレゼントします!

• Xamarin + Infragistics セミナー開催決定!

日時 2015 年 7 月 8 日 (水) 14:00

開催場所 エクセルソフト株式会社セミナールーム

詳細・登録 http://j.mp/XamarinIGSeminar

ご清聴ありがとうございます

ブースでお待ちしております!!

エクセルソフト株式会社

Business Development Manager

田淵義人

ytabuchi@xlsoft.com

03-5440-7875 / 080-7015-3586

インフラジスティックス・ジャパン株式会社

製品担当

池原大然

dikehara@infragistics.com

03-6892-8034