日本マイクロソフト様の de:code 2015 のランチセッションにてお話させていただいた資料です。 7/8 に本セミナーの内容をより深くご紹介する無料セミナーを開催いたしますので、是非ご参加をご検討ください。 http://j.mp/XamarinIGSeminar がりっち先生！ありがとうございましたー。 http://garicchi.hatenablog.jp/entry/decode2015

1. Windows Phone/
iOS/Android
アプリ同時開発の
ススメ
インフラジスティックス・ジャパン株式会社
製品担当
池原 大然
dikehara@infragistics.com
03-6892-8034
エクセルソフト株式会社
Business Development Manager
田淵 義人
ytabuchi@xlsoft.com
03-5440-7875 / 080-7015-3586

2. 会社概要 名称 エクセルソフト株式会社
設立 平成３年７月１日
所在地 東京都港区三田3-9-9
資本金 １０００万円
事業内容 ソフトウェアの開発・販売事業
主要取引先 伊藤忠テクノソリューションズ, インテル, SCSK, HPCシステムズ, NTTコム
ウェア, NTTデータ, シネックスインフォテック, 新日鉄住金ソリューションズ,
ソニー, ソフトバンクBB, ダイワボウ情報システム, 東芝, 日本アイ・ビー・エ
ム, 日本SGI, 日本電気, 日本ヒューレット・パッカード, 日本ユニシス, ネッ
トワールド, 野村総合研究所, パナソニック, 日立製作所, 富士通, マイク
ロソフト, 三菱電機 等
関連会社 XLsoft Corporation アメリカ カリフォルニア州
「開発ツールはエクセルソフトで」をモットーに。
販売/サポートだけでなく、運用もお客様と一緒に考えます。
大きい会社ではありませんが、レスポンスの速さと技術の高さが自慢です。

3. 自己紹介 • 田淵義人
• エクセルソフトの Xamarin 担当。非開発者。
• Xamarin でググるとブログが出てきます。
• Twitter, SNS, Web, HTML5/CSS/JS, モバイル
/ガジェット, Web マーケティングなどが好
き
• Twitter: @ytabuchi
• facebook: ytabuchi.xlsoft
• Blog: http://ytabuchi.hatenablog.com/

4. 会社概要 名称 インフラジスティックス・ジャパン株式会社
設立 平成 18 年
所在地 東京都渋谷区渋谷 1-20-1 井門美竹ビル 2F
資本金 1 億円
事業内容 ソフトウェアの開発・販売事業
関連会社 Infragistics, Inc. アメリカ ニュージャージー州
「高い生産性の実現」を UI コンポーネントやモバイル ソリューションで
お届けします。
製品そのものだけではなく、コンサルティング、トレーニング、オンサイト サポート
などお「顔の見える」会社であることも強みの一つです。

5. 自己紹介 • 池原 大然
• インフラジスティックス・ジャパン株式会社
製品担当
• Microsoft MVP for Windows Platform Development
• UI 全般の技術についてウォッチしています。
• Twitter: @Neri78
• Blog: http://blogs.jp.infragistics.com/blogs/dikehara

6. はじめに

7. セッションゴール
・Xamarin/Infragistics に興味を持つ
・Xaml で Xamarin.Forms を書いてみたくなる
・Silverlight/WPF アプリを Xamarin/Infragistics
でモバイル化しよっかな？という気持ちになる

8. アプリはスマ
ホの利用時間
の72%
• スマートフォンの利用時間全体のうち、ア
プリからの利用時間は Web ブラウザの約
2.5倍で、全体の72％を占めている
http://www.netrat
ings.co.jp/news_r
elease/2014/10/
Newsrelease2014
1001.html

9. 分かってるところ

10. 開発チームに必要なモノ

11. 今までのアプ
リ開発

12. モバイル向けクロス
プラットフォーム開発環境
“No silver bullet”

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

14. C#/.NET/Visual Studio

15. 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 >= 20
select p;

16. Windows
API

17. iOS
API
100% 対応

18. Android
API
100% 対応

19. “ネイティブ” アプリ

20. “ネイティ
ブ” アプリ
• ネイティブ UI / UX
• ネイティブ “パフォーマンス”
• ネイティブ API

21. API 100% 移植

22. 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 をサ
ポート (紹介記事)

23. コード共通化

24. Xamarin を
使用した開発

25. Xamarin.Forms

26. Xamarin.For
ms - 画面の
共通化
UI “コード”の共
通化
ビルド時にネイ
ティブ UI にマッ
プ
XAML

27. Pages
Content MasterDetail Navigation Tabbed Carousel

28. Layouts
Stack Absolute Relative Grid ContentView ScrollView Frame

29. 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

31. DEMO

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

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

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

35. UI 開発コンポーネント セット Infragistics Ultimate
• 様々なプラットフォームに対応したユーザー インターフェイス コントロール
• 開発生産性および UI の質の向上生産性 ユーザビリティ 信頼性

36. 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 製品

37. モバイル用ネイティブ コントロール
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

38. 「コード共有」
と
「コード翻訳」
• XAML/C# ベース コア API を各プラットフォームに
「共有」または「翻訳」
• 個々のプラットフォームに合わせて API をチューニング
• クロスプラットフォームかつパフォーマンス重視
• 類似の機能セット
Core
API
Xamarin
Forms
WPF
HTML5
iOS
Android
Windows
Phone
Windows
ストア アプリ
Xamarin.Forms 対応
コントロール は
この仕組みをフル活用

39. Infragistics Xamarin.Forms
Windows Phone 向け、iOS 向け、Android 向け
それぞれで提供している共通コントロールを集約
初期リリースでは「データ視覚化」コントロールを中心に提供

40. データ
チャート
• 拡大・縮小機能を備えた高速チャート
• 柱状、棒、ライン、スプライン、箱ひげ、
ローソク足など、多くのチャートタイプ
• 移動平均線やボリンジャーバンドといった
トレンドラインやインジケーターを標準提供

41. 円チャート •要素の選択
•強調表示
•「その他」の表示

42. ゲージ • 円形、線形、ブレット
• 針、範囲、スケール
• アニメーショントランジション

43. バーコード
(CTP)
•128 ASCII

44. データ
グリッド
(CTP)
• 列の自動生成
• 自動、固定サイズ列
• テンプレート列
• グループ化
• データ アダプター
• テキスト列

45. アプリケー
ション
サンプル
Infragistics Xamarin.Forms コントロールを
用いた様々なサンプル アプリケーションを公開
http://j.mp/
IGAppSample

46. DEMO

47. Infragistics Xamarin.Forms の
組み込み
・アセンブリ参照の追加
・画面へのコントロール追加
・アセンブリのロード

48. アセンブリ
参照の追加
• 全ての関連プロジェクトに個々のコントロールに
対応したアセンブリ参照を追加
• ローカル NuGet パッケージを利用することで
プロジェクトへの追加を容易に実現できる

49. パッケージの読み込み

50. チャート
データの例 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; }
}

51. コントロール
利用
• 共通画面でチャートの宣言や設定を行う
• 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/xaml
xmlns: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>

52. アセンブリ
ロード
• 各プラットフォーム用のプロジェクトで
利用しているアセンブリのロードを事前に
行う必要がある
• 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();

53. DEMO

54. Xamarin Test Cloud

55. Xamarin
Test Cloud
• UI 自動テストサービス
• ローカル版は Xamarin.UITest, Calabash
• 1,200台の実機
https://xamarin.c
om/test-
cloud#video

56. 評価版
http://j.mp/xm-eval
http://j.mp/IGXamarinForms

57. Xamarin
Starter for
Visual
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.co
m/starter

58. Xamarin for
Windows
Store
• Xamarin.Forms for Windows を使ってみた -
Xamarin 日本語情報
• http://ytabuchi.hatenablog.com/entry/xamarinf
orms-for-windows
http://developer.
xamarin.com/gui
des/cross-
platform/window
s/store/

59. まとめ

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

61. Xamarin.For
ms - 画面の
共通化
UI “コード”の共
通化
ビルド時にネイ
ティブ UI にマッ
プ
XAML

62. リソース • 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/

63. Xamarin
Test Cloud
• UI 自動テストサービス
• ローカル版は Xamarin.UITest, Calabash
• 1,200台の実機
https://xamarin.c
om/test-
cloud#video

64. Infragistics Ultimate
・Xamarin.Forms を含め様々な
プラットフォームに対応
・リッチ UI コントロール
・コード「共有」と「翻訳」

65. リソース • Infragistics Xamarin.Forms 製品ページ
http://j.mp/IGXamarinForms
• アプリケーション サンプル
http://j.mp/IGAppSample
• ドキュメンテーション
http://j.mp/IGOnlineDoc
• Blog
• http://j.mp/IGXamarinBlog

66. 謝辞
@garicchi 先生：Arduino で取得した温度データを
Azure にアップ＆ Web API 作成でご協力頂きました。
http://garicchi.hatenablog.jp/entry/decode2015

67. お知らせ • ブースにご来場ください!
• もれなく Xamarin 評価版ライセンスを 90 日に
延長します!
• さらに両日 1 名様に Xamarin、Infragistics
Ultimate 製品版ライセンスをプレゼントします!
• Xamarin + Infragistics セミナー開催決定!
日時 2015 年 7 月 8 日 (水) 14:00
開催場所 エクセルソフト株式会社
セミナールーム
詳細・登録 http://j.mp/XamarinIGSeminar

68. ご清聴ありがとう
ございます
ブースでお待ちしております!!
エクセルソフト株式会社
Business Development Manager
田淵 義人
ytabuchi@xlsoft.com
03-5440-7875 / 080-7015-3586
インフラジスティックス・ジャパン株式会社
製品担当
池原 大然
dikehara@infragistics.com
03-6892-8034