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

実践 Glass EE2 向けアプリ開発 / Practical Glass EE2 app development

shanonim
October 05, 2022

実践 Glass EE2 向けアプリ開発 / Practical Glass EE2 app development

2022.10.05
DroidKaigi 2022
https://droidkaigi.jp/2022/timetable/364496

shanonim

October 05, 2022
Tweet

More Decks by shanonim

Other Decks in Technology

Transcript

  1. Practical Glass EE2


    app development
    @shanonim
    1
    ࣮ફ Glass EE2 ޲͚ΞϓϦ։ൃ

    View full-size slide

  2. ࠓ೔࿩͢͜ͱ
    ● Google Glass ͷྺ࢙


    ● Glass EE2 ʹ͍ͭͯ


    ● ಋೖࣄྫ


    ● σβΠϯΨΠυϥΠϯͷղઆ


    ● ϢʔβʔΠϯλʔϑΣʔεͷղઆ


    ● αϯϓϧϓϩμΫτͷղઆ
    3

    View full-size slide

  3. ࠓ೔࿩͞ͳ͍͜ͱ
    ● Glass EE2 Ҏ֎ͷεϚʔτάϥεʹ͍ͭͯ


    ● ߪೖํ๏ͱηοτΞοϓํ๏


    ● Glass EE2 ޲͚ΞϓϦͷӡ༻ʢϦϦʔε΍Ξοϓσʔτʣʹ͍ͭͯ
    4

    View full-size slide

  4. Google Glass
    5

    View full-size slide

  5. 6
    ref: https://www.youtube.com/watch?v=9c6W4CCU9M4

    View full-size slide

  6. ● 2013೥: ൃച։࢝


    ○ HMD/ARσόΠεͷઌۦ͚


    ○ Glassware ͷ஀ੜ


    ● 2015೥: ൢചऴྃ


    ○ ϓϥΠόγʔ໰୊


    ○ σΟεϓϨΠ஫ࢹʹΑΔ҆શੑͷݒ೦
    7
    Google Glass

    View full-size slide

  7. 8
    Glass Enterprise Edition
    ● 2017೥: Enterprise Edition (EE) ൢച։࢝


    ○ toB ޲͚σόΠεͱͯ͠ϦχϡʔΞϧ


    ● 2019೥: Enterprise Edition 2 (EE2) ൢച։࢝


    ○ EE ͷεϖοΫ޲্൛


    ○ ։ൃऀ޲͚αϙʔτͷॆ࣮


    ○ 2020೥ʹҰൠ։ൃऀ޲͚ͷൢച։࢝

    View full-size slide

  8. 9
    Glass Enterprise Edition
    ● 2017೥: Enterprise Edition (EE) ൢച։࢝


    ○ toB ޲͚σόΠεͱͯ͠ϦχϡʔΞϧ


    ● 2019೥: Enterprise Edition 2 (EE2) ൢച։࢝


    ○ EE ͷεϖοΫ޲্൛


    ○ ։ൃऀ޲͚αϙʔτͷॆ࣮


    ○ 2020೥ʹҰൠ։ൃऀ޲͚ͷൢച։࢝

    View full-size slide

  9. ● ӈ໨ͷલʹ͋ΔϓϦζϜ͕σΟ
    εϓϨΠͱͯ͠ػೳ͢Δ


    ● ؟ڸͷϨϯζ͕σΟεϓϨΠʹ
    ͳ͍ͬͯͨΓɺ໢ບʹ௚઀ө૾
    Λ౤Ө͢ΔܗࣜͰ͸ͳ͍
    11
    Tech spec

    View full-size slide

  10. 12
    ref: https://www.youtube.com/watch?v=cJA0E19REHQ

    View full-size slide

  11. 13
    Tech Spec
    ● Android 8.1 (Oreo)


    ● Memory 3GB / Storage 32GB


    ● Display (640x360)


    ● WiFi / Bluetooth


    ● Camera / Microphones / Audio-out


    ● Touchpad

    View full-size slide

  12. 14
    Tech Spec
    ● Android 8.1 (Oreo)


    ● Memory 3GB / Storage 32GB


    ● Display (640x360)


    ● WiFi / Bluetooth


    ● Camera / Microphones / Audio-out


    ● Touchpad

    View full-size slide

  13. 15
    Tech Spec
    ● Android 8.1 (Oreo)


    ● Memory 3GB / Storage 32GB


    ● Display (640x360)


    ● WiFi / Bluetooth


    ● Camera / Microphones / Audio-out


    ● Touchpad

    View full-size slide

  14. ● ӈ໨ଆͷଆ෦͕λονύουʹ
    ͳ͍ͬͯΔ
    16
    Touchpad

    View full-size slide

  15. 17
    GlassGestureDetector
    ref: https://github.com/googlesamples/glass-enterprise-samples
    ● λονύουͷδΣενϟʔΛఆٛ


    ● جຊδΣενϟʔ4બ


    ○ TAP


    ○ SWIPE_FORWARD


    ○ SWIPE_BACKWARD


    ○ SWIPE_DOWN

    View full-size slide

  16. 18
    TAP
    ● ຊମͷଆ໘Λλοϓ


    ○ બ୒ࢶͷ֬ఆ


    ○ ೖྗͷܾఆ

    View full-size slide

  17. 19
    SWIPE_FORWARD
    ● ຊମͷޙΖ͔Βલ΁εϫΠϓ


    ○ ࣍ϖʔδͷදࣔ


    ○ બ୒ࢶΛਐΊΔ

    View full-size slide

  18. 20
    SWIPE_BACKWARD
    ● ຊମͷલ͔ΒޙΖ΁εϫΠϓ


    ○ લϖʔδͷදࣔ


    ○ બ୒ࢶΛ໭͢

    View full-size slide

  19. 21
    SWIPE_DOWN
    ● Touchpad ͷதԝ෇͔ۙΒԼ΁εϫΠ
    ϓ


    ○ Android εϚʔτϑΥϯͷ

    back Ωʔʹ૬౰͢ΔΞΫγϣϯ


    ○ લʹ໭Δ


    ○ ऴྃ͢Δ

    View full-size slide

  20. Demo
    ● 🤔 Glass ΞϓϦ͕ͲͷΑ͏ʹಈ͘ͷ͔


    ○ 🃏 CardSample


    ■ ͍͔ͭ͘ͷจষ͕ॱ൪ʹදࣔ͞ΕΔΞϓϦ


    ○ 📷 Camera + Gallery


    ■ Glass ͰࣸਅΛࡱӨ͢Δ


    ■ ࡱӨͨࣸ͠ਅΛӾཡ͢Δ
    23

    View full-size slide

  21. Don't try to replace smartphone, tablet, or laptop features


    with Glass.
    24

    View full-size slide

  22. 25
    ● Glass EE2 ͸ɺεϚʔτϑΥϯΛ׬શʹ୅ସ͢ΔσόΠεͰ͸ͳ͍


    ● εϚʔτϑΥϯ΍λϒϨοτͦͷଞͷσόΠεͱڠௐ͠ɺͦΕΒͷػೳΛ

    ʮิ׬ʯ͢ΔσόΠεͱͯ͠ར༻͢Δ͜ͱ͕ਪ঑͞ΕΔ
    Glass is …?

    View full-size slide

  23. Case studies
    26

    View full-size slide

  24. 27
    ● ෺ྲྀ૔ݿͰͷՙ෺؅ཧ


    ○ QRίʔυϦʔμʔͰಡΈ
    औͬͨ৘ใΛ Glass ͷσΟε
    ϓϨΠʹදࣔͯ͠࡞ۀ͢Δ


    ○ ՙ෺ͷ࢓෼͚ɾνΣοΫϦ
    ετͷ֬ೝ౳
    Case studies
    ref: https://www.google.com/glass/case-studies/

    View full-size slide

  25. 28
    ● େܕػցͷอकϝϯςφϯεۀ຿


    ○ Glass ͷΧϝϥө૾Λԕִ஍ͱ
    ϦΞϧλΠϜʹڞ༗͠ɺ࡞ۀࢦ
    ࣔΛड͚Δ


    ○ ϚχϡΞϧΛ Glass ͷσΟεϓ
    ϨΠʹදࣔ͠ͳ͕Β࡞ۀ͢Δ
    Case studies
    ref: https://www.google.com/glass/case-studies/

    View full-size slide

  26. Good case👍
    ● ϋϯζϑϦʔ


    ○ ໨ͷલʹৗʹը໘͕͋Δঢ়ଶ


    ■ ը໘Λݟͳ͕Β࡞ۀ͢Δݱ৔ͰಛʹޮՌΛൃش͢Δ


    ○ Ի੠ʹΑΔૢ࡞
    29

    View full-size slide

  27. Not good case 🥲
    ● ࡉ͔͍จࣈͷӾཡ


    ○ σΟεϓϨΠαΠζͷ౎߹্ɺݟ΍͍͢จࣈαΠζ͕ݶΒΕΔ


    ○ طଘͷ Web ϖʔδΛͦͷ··ϒϥ΢δϯά͢Δͷ͸ࠔ೉


    ● ෳࡶͳը໘ૢ࡞


    ○ 1ը໘Ͱෳ਺ͷΞΫγϣϯΛ࣮ߦͤ͞Δͷ͸ࠔ೉
    30

    View full-size slide

  28. Design guidelines
    31

    View full-size slide

  29. 32
    ● Glass ޲͚ΞϓϦ։ൃʹಛԽͨ͠σβΠϯΨΠυϥΠϯ


    ● σΟεϓϨΠͷࢹೝੑͱૢ࡞ੑΛଛͳΘͳ͍ͨΊͷϧʔϧ
    Design guidelines

    View full-size slide

  30. ● ͻͱ໨ͰΘ͔Δ


    ○ Ϣʔβʔ͕ը໘ͷϝοηʔ
    δ΍ΞϓϦͷૢ࡞Λ͙͢ʹ
    ཧղͰ͖Δ


    ○ ໨ΛࡉΊͯݟΔඞཁͷͳ͍
    ৘ใ
    33
    Glanceable


    View full-size slide

  31. 34
    Timely
    ● ద੾ͳλΠϛϯάͰ৘ใΛఏڙ
    ͢Δ


    ○ ݱࡏͷঢ়ଶͱɺΞΫγϣϯ
    ͨ͠ޙͷঢ়ଶΛཧղͯ͠΋
    Β͏
    TAP

    View full-size slide

  32. 35
    Easy to tap
    ● λοϓ͠΍͍͢͜ͱ


    ● λοϓͰ͖Δ͜ͱ͕Θ͔Δ͜ͱ

    View full-size slide

  33. 36
    Time saving
    ● ࣌ؒͷઅ໿


    ○ Ϣʔβʔ͕λεΫΛૉૣ͘
    ׬ྃͰ͖ΔΑ͏ʹ͢Δ


    ○ ͜ͷը໘ͰԿ͕Ͱ͖Δͷ͔
    ॠ࣌ʹཧղͰ͖ΔఏҊΛߦ
    ͏
    TAP
    TAP
    Ұཡ
    ৄࡉ
    ૢ࡞

    View full-size slide

  34. User interface
    37

    View full-size slide

  35. User interface
    ● Theme


    ● Layout


    ○ Main Layout


    ○ Left column layout
    38

    View full-size slide

  36. ● ActionBar ͷͳ͍શը໘දࣔ


    ● ࠇ৭ͷഎܠ


    ○ ి஑ফඅͷ཈੍


    ● ന৭ͷςΩετ
    39
    Theme

    View full-size slide

  37. ● body


    ○ ϝΠϯςΩετΛ഑ஔ͢ΔྖҬ


    ○ .fontSize = 40.sp


    ● footer


    ○ ิ଍༻ͷαϒςΩετΛ഑ஔ͢ΔྖҬ


    ○ ϝΠϯςΩετͱൺ΂ͯࢹೝੑ͕௿͍ͷͰ
    ஫ҙ͕ඞཁ


    ○ .fontSize = 14.sp
    40
    Main Layout

    View full-size slide

  38. ● left-body


    ○ ը૾Λ഑ஔ͢ΔྖҬ


    ○ .width(240.dp)


    ● right-body


    ○ ϝΠϯςΩετΛ഑ஔ͢ΔྖҬ


    ○ .fontSize = 30.sp


    ● footer


    ○ ิ଍༻ͷαϒςΩετΛ഑ஔ͢ΔྖҬ


    ○ .fontSize = 14.sp
    41
    Left column layout

    View full-size slide

  39. App development
    42

    View full-size slide

  40. Glass EE2 App development
    43
    ● ։ൃ؀ڥ


    ○ εϚʔτϑΥϯ޲͚ͷ Android ΞϓϦ։ൃͱಉ༷


    ■ ✅ Android Studio


    ■ ✅ Jetpack Compose


    ■ ⚠ GMS (Google Mobile Services) ར༻ෆՄ

    View full-size slide

  41. sample: GlassRecipe
    44
    ● ྉཧϨγϐΛӾཡ͢Δ Glass ΞϓϦ


    ○ Recipes


    ■ 🍳 ྉཧΛબ୒͢Δ


    ○ Steps


    ■ 📝 ྉཧͷखॱΛӾཡ͢Δ

    View full-size slide

  42. 45
    Recipes
    ● Left column layout


    ○ left body


    ■ ࣸਅϓϨϏϡʔ


    ○ right body


    ■ λΠτϧͱࡐྉ


    ○ footer


    ■ ࣍ͷը໘΁ભҠͰ͖Δ͜ͱΛهࡌ
    Glanceable
    Time saving
    Glanceable

    View full-size slide

  43. 46
    Steps
    ● Main layout


    ○ body


    ■ ྉཧखॱͷઆ໌


    ○ footer


    ■ Πϯδέʔλʔ


    ■ ྉཧखॱ͕͍ͭ͋͘Δ͔Λࣔ
    ͍ͯ͠Δ
    Time saving
    Timely
    Glanceable

    View full-size slide

  44. Jetpack Compose in Glass App
    48
    ● Glass ΞϓϦͰ͸ Horizontal ViewPager ͕ଟ༻͞ΕΔ


    ● Jetpack Compose Λ࢖͏͜ͱͰ؆ܿʹ࣮૷Մೳ


    ○ accompanist-pager


    ○ accompanist-pager-indicators


    ● Preview Λ࢖ͬͯ Glass UI Λ࠶ݱ

    View full-size slide

  45. Jetpack Compose in Glass App
    49
    ● Glass ΞϓϦͰ͸ Horizontal ViewPager ͕ଟ༻͞ΕΔ


    ● Jetpack Compose Λ࢖͏͜ͱͰ؆ܿʹ࣮૷Մೳ


    ○ accompanist-pager


    ○ accompanist-pager-indicators


    ● Preview Λ࢖ͬͯ Glass UI Λ࠶ݱ

    View full-size slide

  46. Jetpack Compose in Glass App
    51
    ● Glass ΞϓϦͰ͸ Horizontal ViewPager ͕ଟ༻͞ΕΔ


    ● Jetpack Compose Λ࢖͏͜ͱͰ؆ܿʹ࣮૷Մೳ


    ○ accompanist-pager


    ○ accompanist-pager-indicators


    ● Preview Λ࢖ͬͯ Glass UI Λ࠶ݱ

    View full-size slide

  47. Conclusion
    53

    View full-size slide

  48. Glass Enterprise Edition 2
    54
    ● Android OS ͕ಈ͘εϚʔτάϥε


    ○ ։ൃऀ͕ࣗ༝ʹεϚʔτάϥεΞϓϦΛ։ൃͰ͖Δ


    ● εϚʔτϑΥϯ΍λϒϨοτΛ׬શʹ୅ସ͢ΔσόΠεͰ͸ͳ͍͕ɺͦΕΒ
    ͱ૊Έ߹ΘͤΔ͜ͱͰ৽͍͠ମݧΛ࡞ΕΔՄೳੑ͕͋Δ

    View full-size slide

  49. Google Glass ͷະདྷ
    55
    ● Enterprise Edition ͷීٴ


    ○ ϋʔυ΢ΣΞͷՁ֨ͱௐୡͷ໰୊


    ○ ޙܧػछ


    ● toC ޲͚ Glass ͷ࠶དྷ


    ○ ϓϥΠόγʔ໰୊ͷղܾ


    ○ εϚʔτϑΥϯΛʮิ׬ʯ͢ΔσόΠε͔Βɺʮ୅ସʯ͢ΔσόΠε΁

    View full-size slide

  50. 56
    @shanonim @cookpad_jp

    View full-size slide

  51. Appendix
    57
    ● Project Glass: One day…


    ○ https://www.youtube.com/watch?v=9c6W4CCU9M4


    ● Google Glass (Glass EE2) ߪೖϨϙʔτ


    ○ https://medium.com/@shanonim/glass-ee2-buying-guide-
    5e84f55496ce

    View full-size slide