xamarin de:code セッション：windows phone / ios / android アプリ同時開発のススメ
TRANSCRIPT
Windows Phone/iOS/Androidアプリ同時開発のススメ
インフラジスティックス・ジャパン株式会社
製品担当
池原大然
03-6892-8034
エクセルソフト株式会社
Business Development Manager
田淵義人
03-5440-7875 / 080-7015-3586
会社概要 名称 エクセルソフト株式会社
設立 平成３年７月１日
所在地 東京都港区三田3-9-9
資本金 １０００万円
事業内容 ソフトウェアの開発・販売事業
主要取引先 伊藤忠テクノソリューションズ, インテル, 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
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
田淵義人
03-5440-7875 / 080-7015-3586
インフラジスティックス・ジャパン株式会社
製品担当
池原大然
03-6892-8034