Upgrade to Pro — share decks privately, control downloads, hide ads and more …

じゃじゃ馬UIフレームワークXamarin.Formsを活用した アプリ開発のノウハウ

じゃじゃ馬UIフレームワークXamarin.Formsを活用した アプリ開発のノウハウ

meetup app tokyo@1 2016/06/24

yo ohtagawa

June 24, 2016
Tweet

More Decks by yo ohtagawa

Other Decks in Programming

Transcript

  1. ͡Ό͡ΌഅUIϑϨʔϜϫʔΫ
    Xamarin.FormsΛ׆༻ͨ͠
    ΞϓϦ։ൃͷϊ΢ϋ΢
    meetup app tokyo@1 2016/06/24
    גࣜձࣾΤϜςΟʔΞΠ
    ଠా઒ɹ༸

    View Slide

  2. ࣗݾ঺հ
    • ଠా઒ ༸ ʢ͓͓͕ͨΘ Α͏ʣ
    • Twitter : @AyaseSH
    • Ϗδωε

    iOS΍AndroidͷωΠςΟϒΞϓϦ։ൃ(Xamarin,obj-c)

    TypeScriptॻ͍ͨΓɹ.Net MVCͰC#ॻ͍ͨΓɻɻɻ
    • ϗϏʔ

    in JXUG (Japan Xamarin User Group)

    “#jxug” ΍ ”Xamarin” Ͱͷ೔ຊޠΤΰα͍ͯ͠·͢

    View Slide

  3. ΞδΣϯμ
    Xamarin
    Xamarin.Forms
    Renderer, DataBinding

    View Slide

  4. Xamarinͱ͸ʁ
    • ։ൃݴޠΛC# ΦϯϦʔʹ
    • ։ൃ؀ڥΛVisual Studioʹ
    • Xamarin͸ɺ֤ϓϥοτϑΥʔϜͷAPIΛ

    શͯϥοϓͯ͋͠Γ·͢ʂ
    • iOSͳΒswift΍objective-CͰॻ͔Ε͍ͯΔίʔυΛ
    • AndroidͳΒjavaͰॻ͔Ε͍ͯΔίʔυΛ
    • C#(Mono)Λ࢖ͬͯಉ͡ϑϧίʔσΟϯά͕Մೳʂ

    View Slide

  5. Xamarinͱ͸ʁ
    • XamarinͷΠϝʔδਤ
    Xamarin.iOS
    (Watch Kit, tvOS)
    Xamarin.Android
    (Wear)
    Xamarin.Mac
    Shared C# App Logic
    (BCL, PCL)
    Xamarin Studio

    (IDE)

    Xamarin.Forms
    Test Cloud

    (UITest)
    Insight

    (Hockey App)


    View Slide

  6. Xamarinͷඞཁ஌ࣝ
    ϓϥοτ
    ϑΥʔϜผ
    Xamarin
    Native
    iOSɹAPI Objective-C, Swift Xcode
    AndroidɹAPI Java Android Studio
    WindowsɹAPI Visual Studio (*1)
    C#
    API ݴޠ ౷߹։ൃ؀ڥ
    iOSɹAPI Objective-C, Swift Xcode
    AndroidɹAPI Java Android Studio
    WindowsɹAPI Visual Studio (*1)
    C#
    Xamarin.Forms
    iOSɹAPI
    AndroidɹAPI
    WindowsɹAPI
    Objective-C, Swift Xcode
    Java Android Studio
    Visual Studio (*1)
    C#
    Xamarin.Forms
    UI toolkit
    (*1) Macͷ৔߹͸Xamarin Studio

    View Slide

  7. Xamarin.Formsͱ͸
    • Xamarin.Forms = ந৅ԽϨΠϠʔ
    • Xamarin.iOS Xamarin.Androidͱ͸ҧ͍ɺXamarin.Forms
    ͸ϥοϓ͍ͯ͠ΔͷͰ͸ͳ͘ந৅Խ
    • ந৅Խͱ͍͏͜ͱ͸APIͷ਺͸ɻɻɻ࠷௿ݶͷ΋ͷ͚ͩ
    • ྫ͑͹ɹςΩετͷUI

    Xamarin.Forms.Label =>

    UILabel(iOS), TextView(Android), TextBlock(WinPhone)

    View Slide

  8. ந৅Խ
    Xamarin.iOS Xamarin.Android
    Xamarin.Forms

    View Slide

  9. εΫγϣ

    View Slide

  10. ϑΥϯτม͍͑ͨ

    View Slide

  11. εΫγϣ

    View Slide

  12. ϨϯμϦϯά
    • Renderer

    σϞ
    • Device.OnPlatform

    ؆୯ʹϓϥοτϑΥʔϜ͝ͱʹ஋ͷઃఆ΋Ͱ͖Δ
    ଞʹ΋͋Γ·͕͢ɺ

    ·ͣ͸͜ͷ͕͓̎ͭ͢͢ΊͰ͢

    View Slide

  13. DataBinding
    • Xamarin.Forms ʹ͸ DataBinding ͕͋Δ
    • DataBindingʢσʔλͷදࣔ౳Λ؆ૉԽʣ
    • ιʔεΦϒδΣΫτʢσʔλ, ViewModelʣ
    • λʔήοτΦϒδΣΫτʢදࣔ, Viewʣ
    ࢀߟɿ΋ͬͱ͍͍σϞ͕ build2016Ͱ͋Γ·͢

    https://channel9.msdn.com/Events/de-code/2016/DEV-023

    View Slide

  14. MVVM

    View Slide

  15. εΫγϣ

    View Slide

  16. એ఻

    View Slide

  17. Xamarin.FormsͰΞϓϦ࡞Γ·ͨ͠
    • Sakenomy (iOS, Android)

    View Slide

  18. iPhone6S
    εΫϦʔϯγϣοτ
    iPhone5S Android

    View Slide

  19. ॏͶΔͱ͖͸Absolute

    View Slide

  20. ݴޠରԠ͸Resx

    View Slide

  21. ·ͱΊ
    • Xamarin ͸֤ϓϥοτϑΥʔϜͷAPI͕ݺ΂Δ
    • Xamarin.Forms ͸ந৅Խ͞ΕͨUIͷϑϨʔϜϫʔΫ

    ݸผ࣮૷ʹ͸ RendererͱOnPlatform͕͓͢͢Ί
    • Xamarin.Forms ͸DataBinding͕Ͱ͖Δ
    • SakenomyΛΑΖ͓͘͠ئ͍͠·͢
    ࠔͬͨ͜ͱ͕͋Ε͹
    Facebook ͔ #jxug λά෇͖πΠʔτͰʂ
    ΋͘͠͸Mentions Ͱ@AyaseSH ෇͖Ͱw

    View Slide

  22. Xamarin͸͍͍ͧ

    View Slide

  23. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide