Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Introduction to Xamarin - JXUG 20171209

227 vues

Publié le

JXUG Fukuoka Material at 9th, December, 2017.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Introduction to Xamarin - JXUG 20171209

  1. 1. Xamarin 概要 2017/12/9(土) JXUG福岡 Xamarin 初心者向けハンズオン Japan Xamarin User Group 株式会社 アイキューブドシステムズ 藤本武
  2. 2. アジェンダ 事例 Xamarin 概要 共通化のしくみ まとめ
  3. 3. Xamarin でどんなアプリが作れるの?
  4. 4. フェンリル株式会社 様 http://biz.fenrir- inc.com/application_dev elopment/casestudy_ap p/nhk_kouhaku.html NHK 紅白 4
  5. 5. @muak_x さん http://kamusoft.hatenab log.jp/entry/2016/11/08/ 220810 5 色しらべ
  6. 6. @yamamo さん https://docs.com /yamamoto- takahiro/9893/jxu gc-17-xamarin 6 AzureVM Power Switch
  7. 7. https://www.xamarin.com/prebuilt Prebuilt サンプル 7 Acquaint Sport Xamarin CRM My Shoppe
  8. 8. Xamarin とは
  9. 9. C#/.NET/Visual Studio フル “ネイティブ” アプリ API 100% 移植 コード共通化 9 Xamarin
  10. 10. C# 10 button.Click += async (sender, e) => { var client = new HttpClient(); using (var reader = new StreamReader(await client.GetStreamAsync("xxx"))) { var deserializer = new XmlSerializer(typeof(Rss)); var latest = deserializer.Deserialize(reader) as Rss; var feed = latest.Channel.Items .Where(x => x.Link.Contains("xamarin")) .Select(x => x.Title).ToList(); } };
  11. 11. 2つの開発手法 11 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はネイティブで個別に作りこむ
  12. 12. 必要な知識 プラットフォーム 個別 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 12
  13. 13. UIは個別 ネイティブAPIは個別 PCL or Shared ネットワーク Json, XML 永続化 async/await 13 Xamarin ネイティブ iOS C# UI Shared C# App Logic (PCL) Android C# UI Windows C# UI Xamarin Native ロジックのみ共通化 UIはネイティブで個別に作りこむ
  14. 14. Xamarin ネイティブ 14
  15. 15. 抽象化UIライブラリ 最大公約数 ワンソース・ネイティブUI/UX XAML / MVVM 拡張可能 15 Xamarin.Forms Shared C# App Logic (PCL) Shared XAML/C# UI Code (Xamarin.Forms) Xamarin.Forms
  16. 16. Pages 16
  17. 17. Layouts 17
  18. 18. 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 18 Switch
  19. 19. Xamarin.Forms ワンソース ネイティブの UI/UX XAML MVVM 19
  20. 20. XAML 20
  21. 21. Header と Footer シンプルな ImageCell を使用 21 例) ListView
  22. 22. 22 <ListView ItemsSource="{Binding Items}" CachingStrategy="RecycleElement" HasUnevenRows="true" IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}" RefreshCommand="{Binding RefreshDataCommand}"> <!--Header--> <ListView.Header> <StackLayout Padding="10" BackgroundColor="#dadada" HorizontalOptions="FillAndExpand" Orientation="Horizontal"> <Label FontAttributes="Bold" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" Text="Header" TextColor="Black" /> </StackLayout> </ListView.Header> <!--Built in Cells--> <ListView.ItemTemplate> <DataTemplate> <ImageCell Detail="{Binding Detail}" ImageSource="{Binding ImageUrl}" Text="{Binding Text}" /> </DataTemplate> </ListView.ItemTemplate> <!--Footer--> <ListView.Footer> <StackLayout Padding="10" BackgroundColor="#dadada" HorizontalOptions="FillAndExpand" Orientation="Horizontal"> <Label FontAttributes="Bold" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" Text="Footer" TextColor="Black" /> </StackLayout> </ListView.Footer> </ListView>
  23. 23. 共通化の仕組み
  24. 24. PCL vs Shared #if __ANDROID__ #if __IOS__ 24 Windows AndroidiOS
  25. 25. .NET Standard = PCL の上位互換 ポータブル クラス ライブラリとの比較 Xamarin.Forms の .NET Standard 対応 Share More Code with .NET Standard 2.0 | Xamarin Blog Xamarin.Forms Stable Comes to .NET Standard 2.0 | Xamarin Blog .NET Standard/PCL/Shared Library 25
  26. 26. .NET Standard | Microsoft Docs 主に技術日記: .NET Standard のおさらい さいきんの.NETのこととかNuGetとかCoreとかよく分からないよ ねーって話 - Qiita Xamarin.Forms+.NET Standard 1.6を試す – Takashi Kawasaki – Medium .NET Standard 26
  27. 27. C#er/XAMLer/WPF/UWP → Forms iOS/Android ネイティブ経験者 → ネイティブ 素早く簡単に作る → Forms きれいに細かく作る → ネイティブ 社内プロジェクト → Forms 受託開発 → ?? HTML/JS → Cordova? React Native? 27 Xamarin.Forms vs Xamarin ネイティブ
  28. 28. まとめ
  29. 29. アイディアをすぐにモバイルに! C# だけで iOS/Android アプリを開発できる Xamarin.Forms ではデスクトップアプリのように Xamarin.iOS/Xamarin.Android でしっかりと ネイティブ API はゆっくり覚えれば良い Xamarin は楽しい 29
  30. 30. Xamarin をやってみたくなったら
  31. 31. Mac Apple Developer Program への加入 勉強するのを楽しむ心 https://www.visualstudio.com/ja/ から評価版をダウンロード 必要なもの
  32. 32. 32 Visual Studio 評価版
  33. 33. Visual Studio 2017 なら、インストールするだけ! http://ytabuchi.hatenablog.com/entry/visualstudio2017 Android SDK をちゃんとインストール Intel HAXM の x86 Emulator を使用する 丁寧に環境構築 33
  34. 34. Android SDK/各バージョンのSDK Platform 34
  35. 35. Xamarin 逆引き Tips - Build Insider Xamarin に関する投稿 - Qiita Xamarin Advent Calendar YouTube の JXUG チャンネル Insider.NET > .NET TIPS - @IT JXUG : 関連ページ、ブログ一覧 Xamarin 日本語ドキュメントの紹介 : XLsoft エクセルソフト 35 日本語情報
  36. 36. プログラミング Xamarin 上巻 Xamarin ネイティブによるモバイルアプリ開発 Essential Xamarin Xamarinプログラミング入門 C#によるiOS、Androidアプリケー ション開発の基本 基礎から学ぶ Xamarinプログラミング かずきのXamarin.Forms入門 36 書籍
  37. 37. Xamarin ハンズオン (初級) Xamarin.Android ListView ハンズオン (初級) Xamarin Dev Days Tokyo ハンズオン (中級) Xamarin&Microsoft Cognitive Services ハンズオン (中級) Xamarin.Forms CustomRenderer ハンズオン (中級) Xamarin.Forms&Prism.Forms、Moq ハンズオン (上級) JXUG で主催しているハンズオンやもくもく会に参加 http://jxug.connpass.com 37 手を動かす
  38. 38. Teratail Facebook の JXUG グループ Twitter (#Xamarin #JXUG タグで呟く) 38 聞く
  39. 39. 読む・見る・聞く・調べる Guides - Xamarin (ドキュメント) Recipes - Xamarin (逆引き辞典) Xamarin Blog Xamarin channel - Youtube (セッション動画) Xamarin Forums Stackoverflow Prebuilt アプリを読む 39 英語情報
  40. 40. ありがとうございます。 ぜひ触ってみてください! 40

×