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 Overview

7,704 views

Published on

いつもプレゼンで使っているスライドです。(VS2017の説明抜きバージョン)目次:
1. Xamarin 概要
2. C# 7
3. Xamarin Native と Xamarin.Forms
- Xamarin Native (ライブコーディングデモ+サンプルコード)
- Xamarin.Forms (ライブコーディングデモのみ)
4. 採用事例
5. バックエンドも構築しよう (Azure Mobile Apps 紹介)
6. モバイルアプリ開発サイクル (Visual Studio Mobile Center の紹介)
7. オススメ自学コンテンツへのリンク

Published in: Technology
  • Be the first to comment

Xamarin Overview

  1. 1. デベロッパー Microsoft マンガ家
  2. 2. 私が描いている漫画 「はしれ!コード学園」
  3. 3. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介 今日の内容もくじ Shared C# App Logic 共有 UI コード (XAML) iOS C# UI 共有ロジック部分のコード (C#) Android C# UI Windows C# UI
  4. 4. スマホアプリを 作ってみたいなあ。 作ったら ストアに公開して 皆に使ってもらいたい!
  5. 5. マルチプラットフォーム対応
  6. 6. マルチプラットフォーム対応
  7. 7. マルチプラットフォーム対応
  8. 8. 多くの機種で 自動UIテスト
  9. 9. テスターに テストビルド 配布
  10. 10. 各ストアで展開 (リリース)
  11. 11. ユーザの 使用状況 確認/分析
  12. 12. ユーザの 使用状況 確認/分析
  13. 13. • Xamarin + Visual Studio • Mobile Center
  14. 14. GitHub の草を 途切れさせないため のアラートアプリ 「keep.grass」 By @wraith13 さん UWP版 iOS版
  15. 15. 「keep.grass」は、 モバイルセンターも 対応している
  16. 16. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  17. 17. iOSアプリも Androidアプリも 全部 同じ1つの言語/IDE で 開発できたらなあ
  18. 18. iOS アプリ Android アプリ UWP アプリ
  19. 19. C# で Android / iOS アプリ開発 従来はターゲット OS ごと のスキル、開発言語、開発環境 統一された スキル、開発言語、開発環境 Xamarin.Forms
  20. 20. UIAlertController AlertDialog MessageDialog
  21. 21. DisplayAlert ("Alert", "You have been alerted", "OK");
  22. 22. <?xml version="1.0" encoding="UTF-8"?> <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml x:Class="MyApp.MainPage"> <TabbedPage.Children> <ContentPage Title="Profile" Icon="Profile.png"> <StackLayout Spacing="20" Padding="20" VerticalOptions="Center"> <Entry Placeholder="Username" Text="{Binding Username}"/> <Entry Placeholder="Password" Text="{Binding Password}" IsPassword="true"/> <Button Text="Login" TextColor="White" BackgroundColor="#77D065" Command="{Binding LoginCommand}"/> </StackLayout> </ContentPage> <ContentPage Title="Settings" Icon="Settings.png"> <!-- Settings --> </ContentPage> </TabbedPage.Children> </TabbedPage> Xamarin.Forms では、 「XAML」(ざむる)という マークアップ言語で UI を書く
  23. 23. <!–- Xamarin.Forms --> <ContentView> <StackLayout StackOrientation="Horizontal"> <Label Text="Work Order #" VerticalOptions="Center"/> <Entry Placeholder="Enter your work order" Text="{Binding WONumber}" /> <Button Text="Save" TextColor="White" BackgroundColor="#77D065" Command="{Binding SaveCommand}"/> </StackLayout> </ContentView> <!-- UWP XAML --> <UserControl> <StackPanel Orientation="Horizontal"> <TextBlock Text="Work Order #" VerticalAlignment="Center"/> <TextBox PlaceholderText="Enter your work order" Text="{Binding WONumber}" /> <Button Content="Save" Foreground="White" Background="#77D065" Command="{Binding SaveCommand}"/> </StackPanel> </UserControl> 同じく XAML だけど、 Xamarin.Forms の XAML と Windows 10 の XAML は ちょくちょく違う
  24. 24. A N N O U N C I N G XAML Standard 1.0 https://aka.ms/xamlstandard
  25. 25. Device Native Cloud .NET Standard
  26. 26. 言語仕様をこれから 固めていく。 GitHub で皆さまの フィードバックを お待ちしています 先月の Build 2017 で アナウンスされた! 「Xamarin.Forms と UWP 間で共通化されたXAMLを 作るつもりだ」という。
  27. 27. iCircuit
  28. 28. Mac iOS Android Windows Phone Calca iCircuit Touch Draw 86% 14% 72% 28% 77% 23% 70% 30% 61%39% 94% 6% 88% 12% 76% 24% 90% 10%
  29. 29. 共通化事例1 https://speakerdeck.com/amay077/xamarin-dot-android-teshi-merukurosuhuratutohuomumohairuahurikai-fa-number-jxug
  30. 30. 共通化事例 2 https://speakerdeck.com/amay077/xamarin-dot-android-teshi-merukurosuhuratutohuomumohairuahurikai-fa-number-jxug
  31. 31. 共通化事例 2 https://speakerdeck.com/amay077/xamarin-dot-android-teshi-merukurosuhuratutohuomumohairuahurikai-fa-number-jxug
  32. 32. Shared C# Backend
  33. 33. UI+APIs UI + APIsUI + APIs バッテリー GPS ライト 通知 設定 バッテリー GPS ライト 通知 設定 バッテリー GPS ライト 通知 設定
  34. 34. Windows での開発 Mac での開発
  35. 35. アプリのパフォーマンスも ネイティブアプリと同じ 各プラットフォームの ネイティブ UI・APIを 100%利用可能
  36. 36. だった!(過去形) 約 24万円/人・年
  37. 37. Xamarin が Microsoft に ジョインしてから 1年が経ったね! やったー!
  38. 38. タダ
  39. 39. • Xamarin.Forms Xamarin Native
  40. 40. 61 Shared C# App Logic (PCL) 共有 UI コード (XAML) iOS C# UI 共有ロジック部分のコード (C#) Android C# UI Windows C# UI Xamarin.FormsXamarin Native ロジックのみ共通化 UIはネイティブで個別に作りこむ
  41. 41. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  42. 42. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  43. 43. イベント
  44. 44. LINQ
  45. 45. null条件演算子 / null合体演算子
  46. 46. タプル LINQ async await ジェネリクス ラムダ式
  47. 47. github.com/dotnet/csharplang/
  48. 48. .NET Framework 互換環境である『Mono』 Xamarin も Mono の上で動いて
  49. 49. 色んな プラットフォームで 動くアプリが 開発できます!
  50. 50. 多値戻り値を可能にする「タプル」
  51. 51. 出力変数宣言 var out num
  52. 52. 型スイッチ switch (n) case Add add: case Const c:
  53. 53. ローカル関数
  54. 54. IEnumerable<string> DuplicateImpl(string s) { yield return s; yield return s; } ローカル関数
  55. 55. throw式
  56. 56. throw new ArgumentNullException(nameof(name)) throw式
  57. 57. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  58. 58. • Xamarin.Forms Xamarin Native Shared C# App Logic (PCL) 共有 UI コード (XAML) iOS C# UI 共有ロジック部分のコード (C#) Android C# UI Window s C# UI
  59. 59. • Xamarin.Forms Xamarin Native Shared C# App Logic (PCL) 共有 UI コード (XAML) iOS C# UI 共有ロジック部分のコード (C#) Android C# UI Window s C# UI
  60. 60. • Xamarin.Forms Xamarin Native Shared C# App Logic (PCL) 共有 UI コード (XAML) iOS C# UI 共有ロジック部分のコード (C#) Android C# UI Window s C# UI
  61. 61. • Xamarin.Forms Xamarin Native Shared C# App Logic (PCL) 共有 UI コード (XAML) iOS C# UI 共有ロジック部分のコード (C#) Android C# UI Window s C# UI
  62. 62. Demo:
  63. 63. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  64. 64. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  65. 65. tag
  66. 66. github.com/dotnet/csharplang/
  67. 67. クロスプラットフォーム開発ツール 無償 • Windows でも Mac でも開発できる • ネイティブAPI 100%
  68. 68. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  69. 69. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  70. 70. クライアントは Xamarin, サーバサイドは Microsoft Azure
  71. 71. ユーザーデータ 保存 プッシュ 通知 ログイン機能 認証 オフラインでもアプリが動く オフライン同期 マルチプラット フォーム対応 サーバ ログ監視 クライアントに持たせたくない ロジックなど (チート対策等) サーバでの独自処理
  72. 72. Web Service DB Management DB Access AuthenticationDistribution Device Authorization SNS Access Web Acce ss Push Service
  73. 73. Azure Mobile AppsMBaaS
  74. 74. RESTAPI Offline Sync https://azure.microsoft.com/ja-jp/services/app-service/mobile/
  75. 75. Shared C# codebase • 100% native API access • High performance iOS C# UI Windows C# UIAndroid C# UI クライアント側の共有C#コード
  76. 76. Shared C# codebase • 100% native API access • High performance iOS C# UI Windows C# UIAndroid C# UI クライアント側の共有C#コード C# Server Linux/Mono CoreCLRAzure クライアントとサーバ間での共有C#コード
  77. 77. Shared C# codebase • 100% native API access • High performance iOS C# UI Windows C# UIAndroid C# UI クライアント側の共有C#コード C# Server Linux/Mono CoreCLRAzure クライアントとサーバ間での共有C#コード
  78. 78. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  79. 79. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  80. 80. 作ったアプリの テストやモニタリング
  81. 81. A/B Testing Live Update Storage Push Notifications Crash Reporting Remote Config. Identity Tables 実現するにはたくさんのツールが必要!
  82. 82. iOS, Android アプリの UI テストも • Xamarin Test Recorder で、UI 自動テストをノンコーディング生成 • Android / iOSXamarin Test Recorder アプリパッケージもサポート • Visual Studio 用 と OS X 用が提供 • Visual Studio 版は Android のみサポート パッケージを指定して 操作記録 操作のたびにコードが追加。Asset も追加可能 https://www.xamarin.com/test-cloud/recorder
  83. 83. Xamarin Test Cloud 157 • Xamarin Test Recorder で作成した UI テストを、 Xamarin チームの保有する 2000 を超える実機上で実行 • テストステップごとにスクリーンショットが保存
  84. 84. HockeyApp • Android、Cordova、iOS、OS X、Unity、 Windows、Xamarin などをサポート • アプリ内でのフィードバックの収集 • クラッシュレポートやユーザーメトリックの収集 • アプリのベータテスターへの配布
  85. 85. HockeyApp Xamarin Test Cloud Xamarin Insights Distribute • Crashes • Analytics Device Tests Crashes • Analytics Azure Mobile Engagement Azure App Service CodePush Analytics • Push Tables • Auth • Push Distribution
  86. 86. Visual Studio Mobile Center
  87. 87. Visual Studio Mobile Center の動いている様子 Demo:
  88. 88. モバイルアプリ開発のミッションコントロール Visual Studio Mobile Center
  89. 89. 1. Xamarin 概要 2. Xamarin で開発するメリット 3. 開発環境 4. Xamarin Native と Xamarin.Forms 1. Xamarin Native 2. Xamarin.Forms 1. Azure Mobile Apps 紹介 1. Visual Studio Mobile Center の紹介
  90. 90. http://blog.okazuki.jp/entry/201 7/01/11/083800
  91. 91. https://channel9.msdn.com/Eve nts/de-code/2017/mw03 こちら
  92. 92. https://github.com/choma do/SimpleList

×