Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,415 views

Published on

日本マイクロソフト様の de:code 2015 のランチセッションにてお話させていただいた資料です。

7/8 に本セミナーの内容をより深くご紹介する無料セミナーを開催いたしますので、是非ご参加をご検討ください。
http://j.mp/XamarinIGSeminar

がりっち先生!ありがとうございましたー。
http://garicchi.hatenablog.jp/entry/decode2015

Published in: Technology
  • Be the first to comment

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

  1. 1. Windows Phone/ iOS/Android アプリ同時開発の ススメ インフラジスティックス・ジャパン株式会社 製品担当 池原 大然 dikehara@infragistics.com 03-6892-8034 エクセルソフト株式会社 Business Development Manager 田淵 義人 ytabuchi@xlsoft.com 03-5440-7875 / 080-7015-3586
  2. 2. 会社概要 名称 エクセルソフト株式会社 設立 平成3年7月1日 所在地 東京都港区三田3-9-9 資本金 1000万円 事業内容 ソフトウェアの開発・販売事業 主要取引先 伊藤忠テクノソリューションズ, インテル, SCSK, HPCシステムズ, NTTコム ウェア, NTTデータ, シネックスインフォテック, 新日鉄住金ソリューションズ, ソニー, ソフトバンクBB, ダイワボウ情報システム, 東芝, 日本アイ・ビー・エ ム, 日本SGI, 日本電気, 日本ヒューレット・パッカード, 日本ユニシス, ネッ トワールド, 野村総合研究所, パナソニック, 日立製作所, 富士通, マイク ロソフト, 三菱電機 等 関連会社 XLsoft Corporation アメリカ カリフォルニア州 「開発ツールはエクセルソフトで」をモットーに。 販売/サポートだけでなく、運用もお客様と一緒に考えます。 大きい会社ではありませんが、レスポンスの速さと技術の高さが自慢です。
  3. 3. 自己紹介 • 田淵義人 • エクセルソフトの Xamarin 担当。非開発者。 • Xamarin でググるとブログが出てきます。 • Twitter, SNS, Web, HTML5/CSS/JS, モバイル /ガジェット, Web マーケティングなどが好 き • Twitter: @ytabuchi • facebook: ytabuchi.xlsoft • Blog: http://ytabuchi.hatenablog.com/
  4. 4. 会社概要 名称 インフラジスティックス・ジャパン株式会社 設立 平成 18 年 所在地 東京都渋谷区渋谷 1-20-1 井門美竹ビル 2F 資本金 1 億円 事業内容 ソフトウェアの開発・販売事業 関連会社 Infragistics, Inc. アメリカ ニュージャージー州 「高い生産性の実現」を UI コンポーネントやモバイル ソリューションで お届けします。 製品そのものだけではなく、コンサルティング、トレーニング、オンサイト サポート などお「顔の見える」会社であることも強みの一つです。
  5. 5. 自己紹介 • 池原 大然 • インフラジスティックス・ジャパン株式会社 製品担当 • Microsoft MVP for Windows Platform Development • UI 全般の技術についてウォッチしています。 • Twitter: @Neri78 • Blog: http://blogs.jp.infragistics.com/blogs/dikehara
  6. 6. はじめに
  7. 7. セッションゴール ・Xamarin/Infragistics に興味を持つ ・Xaml で Xamarin.Forms を書いてみたくなる ・Silverlight/WPF アプリを Xamarin/Infragistics でモバイル化しよっかな?という気持ちになる
  8. 8. アプリはスマ ホの利用時間 の72% • スマートフォンの利用時間全体のうち、ア プリからの利用時間は Web ブラウザの約 2.5倍で、全体の72%を占めている http://www.netrat ings.co.jp/news_r elease/2014/10/ Newsrelease2014 1001.html
  9. 9. 分かってるところ
  10. 10. 開発チームに必要なモノ
  11. 11. 今までのアプ リ開発
  12. 12. モバイル向けクロス プラットフォーム開発環境 “No silver bullet”
  13. 13. Xamarin(ザマリン) ・ C# / .NET ・ “ネイティブ” アプリ ・ API 100% 移植 ・ コード共通化
  14. 14. C#/.NET/Visual Studio
  15. 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. 16. Windows API
  17. 17. iOS API 100% 対応
  18. 18. Android API 100% 対応
  19. 19. “ネイティブ” アプリ
  20. 20. “ネイティ ブ” アプリ • ネイティブ UI / UX • ネイティブ “パフォーマンス” • ネイティブ API
  21. 21. API 100% 移植
  22. 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. 23. コード共通化
  24. 24. Xamarin を 使用した開発
  25. 25. Xamarin.Forms
  26. 26. Xamarin.For ms - 画面の 共通化 UI “コード”の共 通化 ビルド時にネイ ティブ UI にマッ プ XAML
  27. 27. Pages Content MasterDetail Navigation Tabbed Carousel
  28. 28. Layouts Stack Absolute Relative Grid ContentView ScrollView Frame
  29. 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
  30. 30. DEMO
  31. 31. Json.NET, Absolute Layout, BoxView, Animation, Dependency Service
  32. 32. XAML, Data Binding, LINQ, ListView, Style, Trigger
  33. 33. よりリッチな表現を実現する Infragistics Xamarin.Forms
  34. 34. UI 開発コンポーネント セット Infragistics Ultimate • 様々なプラットフォームに対応したユーザー インターフェイス コントロール • 開発生産性および UI の質の向上生産性 ユーザビリティ 信頼性
  35. 35. 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 製品
  36. 36. モバイル用ネイティブ コントロール 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
  37. 37. 「コード共有」 と 「コード翻訳」 • XAML/C# ベース コア API を各プラットフォームに 「共有」または「翻訳」 • 個々のプラットフォームに合わせて API をチューニング • クロスプラットフォームかつパフォーマンス重視 • 類似の機能セット Core API Xamarin Forms WPF HTML5 iOS Android Windows Phone Windows ストア アプリ Xamarin.Forms 対応 コントロール は この仕組みをフル活用
  38. 38. Infragistics Xamarin.Forms Windows Phone 向け、iOS 向け、Android 向け それぞれで提供している共通コントロールを集約 初期リリースでは「データ視覚化」コントロールを中心に提供
  39. 39. データ チャート • 拡大・縮小機能を備えた高速チャート • 柱状、棒、ライン、スプライン、箱ひげ、 ローソク足など、多くのチャートタイプ • 移動平均線やボリンジャーバンドといった トレンドラインやインジケーターを標準提供
  40. 40. 円チャート •要素の選択 •強調表示 •「その他」の表示
  41. 41. ゲージ • 円形、線形、ブレット • 針、範囲、スケール • アニメーショントランジション
  42. 42. バーコード (CTP) •128 ASCII
  43. 43. データ グリッド (CTP) • 列の自動生成 • 自動、固定サイズ列 • テンプレート列 • グループ化 • データ アダプター • テキスト列
  44. 44. アプリケー ション サンプル Infragistics Xamarin.Forms コントロールを 用いた様々なサンプル アプリケーションを公開 http://j.mp/ IGAppSample
  45. 45. DEMO
  46. 46. Infragistics Xamarin.Forms の 組み込み ・アセンブリ参照の追加 ・画面へのコントロール追加 ・アセンブリのロード
  47. 47. アセンブリ 参照の追加 • 全ての関連プロジェクトに個々のコントロールに 対応したアセンブリ参照を追加 • ローカル NuGet パッケージを利用することで プロジェクトへの追加を容易に実現できる
  48. 48. パッケージの読み込み
  49. 49. チャート データの例 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; } }
  50. 50. コントロール 利用 • 共通画面でチャートの宣言や設定を行う • 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>
  51. 51. アセンブリ ロード • 各プラットフォーム用のプロジェクトで 利用しているアセンブリのロードを事前に 行う必要がある • 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();
  52. 52. DEMO
  53. 53. Xamarin Test Cloud
  54. 54. Xamarin Test Cloud • UI 自動テストサービス • ローカル版は Xamarin.UITest, Calabash • 1,200台の実機 https://xamarin.c om/test- cloud#video
  55. 55. 評価版 http://j.mp/xm-eval http://j.mp/IGXamarinForms
  56. 56. 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
  57. 57. 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/
  58. 58. まとめ
  59. 59. Xamarin(ザマリン) ・ C# / .NET ・ “ネイティブ” アプリ ・ API 100% 移植 ・ コード共通化
  60. 60. Xamarin.For ms - 画面の 共通化 UI “コード”の共 通化 ビルド時にネイ ティブ UI にマッ プ XAML
  61. 61. リソース • 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/
  62. 62. Xamarin Test Cloud • UI 自動テストサービス • ローカル版は Xamarin.UITest, Calabash • 1,200台の実機 https://xamarin.c om/test- cloud#video
  63. 63. Infragistics Ultimate ・Xamarin.Forms を含め様々な プラットフォームに対応 ・リッチ UI コントロール ・コード「共有」と「翻訳」
  64. 64. リソース • Infragistics Xamarin.Forms 製品ページ http://j.mp/IGXamarinForms • アプリケーション サンプル http://j.mp/IGAppSample • ドキュメンテーション http://j.mp/IGOnlineDoc • Blog • http://j.mp/IGXamarinBlog
  65. 65. 謝辞 @garicchi 先生:Arduino で取得した温度データを Azure にアップ& Web API 作成でご協力頂きました。 http://garicchi.hatenablog.jp/entry/decode2015
  66. 66. お知らせ • ブースにご来場ください! • もれなく Xamarin 評価版ライセンスを 90 日に 延長します! • さらに両日 1 名様に Xamarin、Infragistics Ultimate 製品版ライセンスをプレゼントします! • Xamarin + Infragistics セミナー開催決定! 日時 2015 年 7 月 8 日 (水) 14:00 開催場所 エクセルソフト株式会社 セミナールーム 詳細・登録 http://j.mp/XamarinIGSeminar
  67. 67. ご清聴ありがとう ございます ブースでお待ちしております!! エクセルソフト株式会社 Business Development Manager 田淵 義人 ytabuchi@xlsoft.com 03-5440-7875 / 080-7015-3586 インフラジスティックス・ジャパン株式会社 製品担当 池原 大然 dikehara@infragistics.com 03-6892-8034

×