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をこれから始める皆様へ

2017/3/25(土) の CLR/H #104 の発表資料です。

  • Login to see the comments

Xamarinをこれから始める皆様へ

  1. 1. Xamarinをこれから始める皆様へ 2017/3/25(土) CLR/H #clrh104 ~ Xamarin in 札幌 ~ Japan Xamarin User Group 田淵義人@エクセルソフト Twitter: @ytabuchi facebook: ytabuchi.xlsoft
  2. 2. 営業(セールスエンジニア) 兼 新規事業開発室 室長 Xamarin コミュニティエバンジェリスト Microsoft MVP Visual Studio and Development Technologies Xamarin MVP 連載・執筆 Build Insider Xamarin Tips .NET開発テクノロジ入門2016年版 コミュニティ Japan Xamarin User Group 主宰 Twitter: @ytabuchi facebook: ytabuchi.xlsoft Blog: Xamarin 日本語情報 3 田淵義人@エクセルソフト
  3. 3. Xamarinとは 銀の弾丸ではない
  4. 4. C# / .NET / Visual Studio フル “ネイティブ” アプリ API 100% 移植 コード共通化 Xamarin 5
  5. 5. 2つの開発手法 Shared C# App Logic (PCL) Shared XAML/C# UI Code (Xamarin.Forms) iOS C# UI Shared C# App Logic (PCL) Android C# UI Windows C# UI Xamarin.FormsXamarin Native ロジックのみ共通化 UIはネイティブで個別に作りこむ 6
  6. 6. 必要な知識 プラットフォーム 個別 Xamarin Native iOS API Objective-C, Swift Xcode Android API Java Android Studio Windows API Visual StudioC# API 言語 統合開発環境 iOS API Objective-C, Swift Xcode Android API Java Android Studio Windows API Visual StudioC# Xamarin.Forms iOS API Android API Windows API Objective-C, Swift Xcode Java Android Studio Visual StudioC#Xamarin.Forms UI toolkit 7
  7. 7. UIは個別 ネイティブAPIは個別 PCL or Shared ネットワーク Json, XML 永続化 async/await 8 Xamarin ネイティブ iOS C# UI Shared C# App Logic (PCL) Android C# UI Windows C# UI Xamarin Native ロジックのみ共通化 UIはネイティブで個別に作りこむ
  8. 8. Xamarin ネイティブ 9
  9. 9. 抽象化UIライブラリ 最大公約数 ワンソース・ネイティブUI/UX XAML / MVVM 拡張可能 10 Xamarin.Forms Shared C# App Logic (PCL) Shared XAML/C# UI Code (Xamarin.Forms) Xamarin.Forms
  10. 10. Pages 11
  11. 11. Layouts 12
  12. 12. 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 13
  13. 13. Xamarin.Forms ワンソース ネイティブの UI/UX XAML MVVM 14
  14. 14. XAML 15
  15. 15. XAMLの機能 16 機能 Xamarin.Forms でのサポート XAML 2009 仕様 a シェイプ (四角、楕円、パス など) BoxView Resource, Style, Trigger a Data binding a Data template a Control template Custom Renderer Render Transform a アニメーション コードのみ カスタム XAML behavior a カスタムマークアップ拡張 a Value converter a
  16. 16. XAML
  17. 17. 2*3 の Grid 図のようになるように設定 1行目と2行目は高さが1:3 3行目の高さは100 Aはサイズ指定なし、Bは50x50、CはDの 上に重なる、Dは高さ100、Eは幅150高 さ50、Fは幅は50、右から20のマージン 18 Grid 1 3
  18. 18. 19 <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="3*" /> <RowDefinition Height="100" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Red" /> <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Red" HeightRequest="50" WidthRequest="50" HorizontalOptions="Center" VerticalOptions="Center" /> <BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" HeightRequest="100" VerticalOptions="Center" /> <BoxView Grid.Row="1" Grid.Column="0" BackgroundColor="Gray" Opacity="0.5" /> <BoxView Grid.Row="2" Grid.Column="0" BackgroundColor="Red" HeightRequest="50" WidthRequest="150" VerticalOptions="Start" /> <BoxView Grid.Row="2" Grid.Column="1" BackgroundColor="Red" Margin="0,0,20,0" WidthRequest="50" HorizontalOptions="End" /> </Grid>
  19. 19. Forms Previewer Visual Studio:[表示>その他のウィ ンドウ>Forms Previewer] Xamarin Studio:XAML ファイルを開い て右上のプレビューボタンをクリック 22
  20. 20. どんなアプリが作れるの?
  21. 21. Expense(経費精算)アプリ 適度な機能 ログイン、カメラ、クラウドにデータ保存、オフライン 保存、日付/金額/場所などの入力、チャート 更に OCR、GPS、管理者モード、承認、Excel出力などの機 能も Prism for Xamarin.Forms Pattern&Practices Testable&Maintenable 24 Project Blue Monkey
  22. 22. フェンリル株式会社 様 http://biz.fenrir- inc.com/application_dev elopment/casestudy_ap p/nhk_kouhaku.html NHK 紅白 25
  23. 23. 株式会社エムティーアイ 様 http://www.xlsoft.com/jp/pr oducts/xamarin/apps_saken omy.html Xamarin.Forms 活用事例 Sakenomy 26
  24. 24. @muak_x さん http://kamusoft.hatenab log.jp/entry/2016/11/08/ 220810 27 色しらべ
  25. 25. @yamamo さん https://docs.com /yamamoto- takahiro/9893/jxu gc-17-xamarin 28 AzureVM Power Switch
  26. 26. @kikutaro_ さん http://kikutaro777 .hatenablog.com/ entry/2016/08/07 /230423 29 坂道46セレクション
  27. 27. https://www.xamarin.com/prebuilt Prebuilt サンプル 30 Acquaint Sport Xamarin CRM My Shoppe
  28. 28. 資料一覧 ビデオ録画 31 JXUGC #17 お前の Xamarin アプリを見せてみろ!
  29. 29. C#er/XAMLer/WPF/UWP → Forms iOS/Android ネイティブ経験者 → ネイティブ 素早く簡単に作る → Forms きれいに細かく作る → ネイティブ 社内プロジェクト → Forms 受託開発 → ?? HTML/JS → Cordova? React Native? 32 Xamarin.Forms VS Xamarin ネイティブ
  30. 30. Xamarinをこれから始める皆様へ
  31. 31. Visual Studio 2017 なら、インストールするだけ! http://ytabuchi.hatenablog.com/entry/visualstudio2017 Android SDK をちゃんとインストール Intel HAXM の x86 Emulator を使用する *個人的な見解です 丁寧に環境構築 34
  32. 32. Android SDK/各バージョンのSDK Platform 35
  33. 33. Xamarin逆引きTips - Build Insider Xamarinに関する投稿 - Qiita Xamarin Advent Calendar 2016 Insider.NET > .NET TIPS - @IT JXUG : 関連ページ、ブログ一覧 Xamarin 日本語ドキュメントの紹介 : XLsoft エクセルソフト 36 日本語ドキュメントを読む
  34. 34. かずきのXamarin.Forms入門 Xamarinエキスパート養成読本 (Software Design plus) Xamarinではじめるスマホアプリ開発 (I/O BOOKS) 37 書籍
  35. 35. Xamarin Charange (←New) Xamarin ハンズオン (初級) Xamarin.Android ListView ハンズオン (初級) Xamarin Dev Days Tokyo ハンズオン (中級) Xamarin.Forms CustomRenderer ハンズオン (中級) JXUG で主催しているハンズオンやもくもく会に参加 http://jxug.connpass.com 38 手を動かす
  36. 36. Teratail Twitter (#Xamarin #JXUG タグで呟く) 39 聞く
  37. 37. 読む・見る・聞く・調べる Guides - Xamarin (ドキュメント) Recipes - Xamarin (逆引き辞典) Xamarin Blog Xamarin channel - Youtube (セッション動画) Xamarin Forums Stackoverflow PreBuilt アプリ Build Apps Quickly using Prebuilt App Templates - Xamarin 40 英語ドキュメント
  38. 38. Xamarin.iOS/Xamarin.Android は iOS API/Android API の薄いラッパーである ネイティブの情報を探して Xamarin で使う 41 iOS/Android ネイティブの情報
  39. 39. 通称「Forms本」または「ペゾルド本」 日本語版を作成中です。 原文は以下で公開中 https://developer.xamarin.com/guides/xamarin- forms/creating-mobile-apps-xamarin-forms/ 42 Creating Mobile Apps with Xamarin.Forms Book
  40. 40. まとめ
  41. 41. C# だけで iOS/Android アプリを開発できる ネイティブ API はゆっくり覚えれば良い Xamarin は怖くない 44
  42. 42. ありがとうございます http://jxug.org http://jxug.connpass.com もご参加ください。また来ます! 田淵義人@エクセルソフト Twitter: @ytabuchi facebook: ytabuchi.xlsoft 080-7015-3586 45

×