2015 年 06 月 25 日に 2015 世代の C# 勉強会 (https://twitter.com/neri78) で弊社池原 (https://twitter.com/neri78) がお話させていただいた内容です。

1. 1
Visual Studio
+
Xamarin で始める
モバイル アプリ開発

2. 2
自己紹介
 池原 大然
 Microsoft MVP for Windows Platform Development
 XAML スキー
 Twitter ID: @Neri 78
 インフラジスティックス・ジャパン株式会社
 製品担当
 Web: http://jp.infragistics.com
 Email: dikehara@infragistics.com

3. 3
本日の内容
Visual Studio 2015 + Xamarin でモバイル アプリ開発
XAML で行こう
よりリッチな表現の実現
まとめ

4. Visual Studio 2015
+ Xamarin で
モバイル アプリ開発

5. 5
Visual Studio 2015 がやってくる
 「いろいろ」開発できる統合開発環境
環境そのもの詳細はこちら
http://j.mp/vs2015mvaJP
 今回の Xamarin に関連するところはこちら
@IT - Visual Studio 2015の新機能をプレ
ビュー版で見てみよう (1/5)
http://j.mp/atmarkITXamarin

6. 6
Visual Studio 2015 はクロスプラットフォームに力が入っている
画像出典元:MSDN - Visual Studio 日本チーム ブログ http://j.mp/MSDNJPVS2015

7. 7
インストール時に選択できる

8. 8
様々なプロジェクト テンプレート
 Windows Phone
 Android
 iOS
 Mobile Apps (後述)

9. 9
iOS
Objective-C/Swift
Xcode
Android
Java
Eclipse
Windows
C#
Visual Studio
Xamarin を利用した開発環境・コード共有
Xamarin (C#)
Visual Studio / Xamarin.Studio
詳細は XLsoft 田淵さんの SlideShare でチェック! - http://www.slideshare.net/ytabuchi/

10. 10
Xamarin.iOS
 VS で Storyboard を
デザイン可能
 ビルドには Mac が必要
 Apple …
 デバッグは実機、もしくは
Mac の iOS シミュレーター

11. 11
Xamarin.Android
 VS 用の Android デザイナー
で UI を構築可能
 デバッグは実機、もしくは
Android エミュレーター

12. 12
Visual Studio Emulator for Android
画像出典元: MSDN – Visual Studio 日本チーム ブログhttp://j.mp/msvsteam-blog

13. 13
Xamarin Android Player
 Windows / Mac 版を提供
https://xamarin.com/android-player
 Xamarin の（何がしらかの）
ライセンスが必要
 30 日トライアル版、無償の Starter
あり

14. 14
Windows Phone
 Windows Phone アプリ開
発はそのままだが、
ポータブル クラス
ライブラリー (PCL) を
利用し、Xamarin.Android
/ Xamarin.iOS と
コードを共有できる
 デバッグは実機もしくは
エミュレーター

15. 15
VS + Xamarin を利用することで
 開発環境、開発言語を統一できる
 ポータブル クラス ライブラリー (PCL) を利用することで
ビジネスロジックを共通化できる
 UI は個々に実装する

16. XAML で行こう

17. 17
XAML とは
 .NET Framework 3.0 で登場した言語
eXtensible Application Markup Language
 WPF で初めて UI 定義を行う用途で使用された
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Margin="12" Content="クリック" />
</Grid>
</Window>
MSDN – 新井省三のBlog - XAML とは何か？
http://blogs.msdn.com/b/shozoa/archive/2014/07/23/what-s-xaml.aspx

18. 18
XAML について（私見）
 WPF の時代から利用
 Silverlight、Windows Phone、Windows ストア アプリ開発においても
ナレッジを流用できている
 強力なデータ バインディング機能とテンプレート エンジンを利用することで
コントロールとしての機能と外観の分離を進めやすい
マイクロソフトが提供する
プラットフォームにおいて
今後も UI 構築のための
言語として利用される! … と思う

19. 19
iOS
Objective-C/Swift
Xcode
Android
Java
Eclipse
Windows
C#
Visual Studio
Xamarin.Forms で UI 部分を共有 (特に XAML で)
Xamarin (C#)
Visual Studio / Xamarin.Studio
Xamarin.Forms
(共有 UI: C# or XAML)

20. 20
Xamarin.Forms プロジェクトを作成
 Visual C# -
Mobile Apps から
テンプレートを
選択

21. 21
Xamarin.Forms の典型的なソリューション
 4 つのプロジェクトの集合体
 プラットフォーム共通部
• 共通 UI はこちらで構築
• ボタンなどの UI は
実行時に各 OS ごとの
コントロールに置き換わる
 Android
 iOS
 Windows Phone

22. 22
XAML を利用したページ作成
 XAML を利用しページ構築、バインディングが可能
PageData.cs Page1.xaml App.cs

23. 23
Xamarin.Forms の特性
 共通の UI 定義を利用できる
 個別に設定することもできる
 WPF/SL アプリを構築している「風味」で実装できる（ここ重要!)
 仕組みは大体同じだが、全く一緒ではない
 提供されているコントロールを利用できるが、
基本的なコントロールが多い – 業務系アプリに向いている
 コントロール一覧 http://xamarin.com/forms

24. よりリッチな表現を実現する

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

26. 26
対応プラットフォーム、収録ツール
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.Android) -
CTP
Xamarin.Forms

27. Windows Phone
Windows Phone 対応コントロール
WPF/Silverlight/Windows UI で提供している
データ視覚化パターンを実装
• チャート
• エディター
• バーコード
• ゲージ
• インタラクション
• レイアウト
• メニュー & リスト

28. NuclioOS (iOS)
iOS 対応コントロール
Objective-C、Xamarin.iOS をサポート
• チャート
• グリッド
• ゲージ
• ウィジェット
• Xamarin.iOS サポート

29. Android
Android 対応コントロール
Java で開発できる Android 専用ネイティブ コントロール
Xamarin.Android サポート
• グリッド
• ゲージ
• バーコード
• チャート

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

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

32. まとめ

33. 33
Visual Studio 2015 でモバイル アプリ開発
VS 2015 + Xamarin で
C# / .NET Framework の知識を活用
XAML スキーにはたまらない
Xamarin.Forms
インフラジスティックスのツールもよろしく!

34. 34
リソース
 Microsoft Virtual Academy - Visual Studio 2015 における統合開発環境の進化
http://j.mp/vs2015mvaJP
 MSDN - Visual Studio 日本チーム ブログ
http://j.mp/MSDNJPVS2015
 Xamarin / Xamarin 日本語情報
http://xamarin.com/
http://www.xlsoft.com/jp/products/xamarin/
 インフラジスティックス・ジャパン株式会社 - Infragistics Ultimate
http://jp.infragistics.com/Ultimate

35. 告知

36. 36
Xamarin + Infragistics セミナー開催!
 de:code 2015 ランチセッションの拡大版
 Xamarin, Xamarin.Forms
 Infragistics Xamarin.Forms コントロール
それぞれので具体的な利用方法をお伝えします!
日時 2015 年 7 月 8 日 (水) 14:00
開催場所 エクセルソフト株式会社 セミナールーム
詳細・登録 http://j.mp/XamarinIGSeminar

37. ありがとうございました!
@Neri 78