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

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

1. Practical Glass EE2 app development @shanonim 1 ࣮ફ Glass EE2 ޲͚ΞϓϦ։ൃ
3. ࠓ೔࿩͢͜ͱ • Google Glass ͷྺ࢙ • Glass EE2 ʹ͍ͭͯ • ಋೖࣄྫ • σβΠϯΨΠυϥΠϯͷղઆ • ϢʔβʔΠϯλʔϑΣʔεͷղઆ • αϯϓϧϓϩμΫτͷղઆ 3
4. ࠓ೔࿩͞ͳ͍͜ͱ • Glass EE2 Ҏ֎ͷεϚʔτάϥεʹ͍ͭͯ • ߪೖํ๏ͱηοτΞοϓํ๏ • Glass EE2 ޲͚ΞϓϦͷӡ༻ʢϦϦʔε΍Ξοϓσʔτʣʹ͍ͭͯ 4
5. Google Glass 5
6. 6 ref: https://www.youtube.com/watch?v=9c6W4CCU9M4
7. • 2013೥: ൃച։࢝ ◦ HMD/ARσόΠεͷઌۦ͚ ◦ Glassware ͷ஀ੜ • 2015೥: ൢചऴྃ ◦ ϓϥΠόγʔ໰୊ ◦ σΟεϓϨΠ஫ࢹʹΑΔ҆શੑͷݒ೦ 7 Google Glass
8. 8 Glass Enterprise Edition • 2017೥: Enterprise Edition (EE) ൢച։࢝ ◦ toB ޲͚σόΠεͱͯ͠ϦχϡʔΞϧ • 2019೥: Enterprise Edition 2 (EE2) ൢച։࢝ ◦ EE ͷεϖοΫ޲্൛ ◦ ։ൃऀ޲͚αϙʔτͷॆ࣮ ◦ 2020೥ʹҰൠ։ൃऀ޲͚ͷൢച։࢝
9. 9 Glass Enterprise Edition • 2017೥: Enterprise Edition (EE) ൢച։࢝ ◦ toB ޲͚σόΠεͱͯ͠ϦχϡʔΞϧ • 2019೥: Enterprise Edition 2 (EE2) ൢച։࢝ ◦ EE ͷεϖοΫ޲্൛ ◦ ։ൃऀ޲͚αϙʔτͷॆ࣮ ◦ 2020೥ʹҰൠ։ൃऀ޲͚ͷൢച։࢝
10. Tech spec 10
11. • ӈ໨ͷલʹ͋ΔϓϦζϜ͕σΟ εϓϨΠͱͯ͠ػೳ͢Δ • ؟ڸͷϨϯζ͕σΟεϓϨΠʹ ͳ͍ͬͯͨΓɺ໢ບʹ௚઀ө૾ Λ౤Ө͢ΔܗࣜͰ͸ͳ͍ 11 Tech spec
12. 12 ref: https://www.youtube.com/watch?v=cJA0E19REHQ
13. 13 Tech Spec • Android 8.1 (Oreo) • Memory 3GB / Storage 32GB • Display (640x360) • WiFi / Bluetooth • Camera / Microphones / Audio-out • Touchpad
14. 14 Tech Spec • Android 8.1 (Oreo) • Memory 3GB / Storage 32GB • Display (640x360) • WiFi / Bluetooth • Camera / Microphones / Audio-out • Touchpad
15. 15 Tech Spec • Android 8.1 (Oreo) • Memory 3GB / Storage 32GB • Display (640x360) • WiFi / Bluetooth • Camera / Microphones / Audio-out • Touchpad
16. • ӈ໨ଆͷଆ෦͕λονύουʹ ͳ͍ͬͯΔ 16 Touchpad
17. 17 GlassGestureDetector ref: https://github.com/googlesamples/glass-enterprise-samples • λονύουͷδΣενϟʔΛఆٛ • جຊδΣενϟʔ4બ ◦ TAP ◦ SWIPE_FORWARD ◦ SWIPE_BACKWARD ◦ SWIPE_DOWN
18. 18 TAP • ຊମͷଆ໘Λλοϓ ◦ બ୒ࢶͷ֬ఆ ◦ ೖྗͷܾఆ
19. 19 SWIPE_FORWARD • ຊମͷޙΖ͔Βલ΁εϫΠϓ ◦ ࣍ϖʔδͷදࣔ ◦ બ୒ࢶΛਐΊΔ
20. 20 SWIPE_BACKWARD • ຊମͷલ͔ΒޙΖ΁εϫΠϓ ◦ લϖʔδͷදࣔ ◦ બ୒ࢶΛ໭͢
21. 21 SWIPE_DOWN • Touchpad ͷதԝ෇͔ۙΒԼ΁εϫΠ ϓ ◦ Android εϚʔτϑΥϯͷ 
 back Ωʔʹ૬౰͢ΔΞΫγϣϯ ◦ લʹ໭Δ ◦ ऴྃ͢Δ
22. Demo 22
23. Demo • 🤔 Glass ΞϓϦ͕ͲͷΑ͏ʹಈ͘ͷ͔ ◦ 🃏 CardSample ▪ ͍͔ͭ͘ͷจষ͕ॱ൪ʹදࣔ͞ΕΔΞϓϦ ◦ 📷 Camera + Gallery ▪ Glass ͰࣸਅΛࡱӨ͢Δ ▪ ࡱӨͨࣸ͠ਅΛӾཡ͢Δ 23
24. Don't try to replace smartphone, tablet, or laptop features with Glass. 24
25. 25 • Glass EE2 ͸ɺεϚʔτϑΥϯΛ׬શʹ୅ସ͢ΔσόΠεͰ͸ͳ͍ • εϚʔτϑΥϯ΍λϒϨοτͦͷଞͷσόΠεͱڠௐ͠ɺͦΕΒͷػೳΛ 
 ʮิ׬ʯ͢ΔσόΠεͱͯ͠ར༻͢Δ͜ͱ͕ਪ঑͞ΕΔ Glass is …?
26. Case studies 26
27. 27 • ෺ྲྀ૔ݿͰͷՙ෺؅ཧ ◦ QRίʔυϦʔμʔͰಡΈ औͬͨ৘ใΛ Glass ͷσΟε ϓϨΠʹදࣔͯ͠࡞ۀ͢Δ ◦ ՙ෺ͷ࢓෼͚ɾνΣοΫϦ ετͷ֬ೝ౳ Case studies ref: https://www.google.com/glass/case-studies/
28. 28 • େܕػցͷอकϝϯςφϯεۀ຿ ◦ Glass ͷΧϝϥө૾Λԕִ஍ͱ ϦΞϧλΠϜʹڞ༗͠ɺ࡞ۀࢦ ࣔΛड͚Δ ◦ ϚχϡΞϧΛ Glass ͷσΟεϓ ϨΠʹදࣔ͠ͳ͕Β࡞ۀ͢Δ Case studies ref: https://www.google.com/glass/case-studies/
29. Good case👍 • ϋϯζϑϦʔ ◦ ໨ͷલʹৗʹը໘͕͋Δঢ়ଶ ▪ ը໘Λݟͳ͕Β࡞ۀ͢Δݱ৔ͰಛʹޮՌΛൃش͢Δ ◦ Ի੠ʹΑΔૢ࡞ 29
30. Not good case 🥲 • ࡉ͔͍จࣈͷӾཡ ◦ σΟεϓϨΠαΠζͷ౎߹্ɺݟ΍͍͢จࣈαΠζ͕ݶΒΕΔ ◦ طଘͷ Web ϖʔδΛͦͷ··ϒϥ΢δϯά͢Δͷ͸ࠔ೉ • ෳࡶͳը໘ૢ࡞ ◦ 1ը໘Ͱෳ਺ͷΞΫγϣϯΛ࣮ߦͤ͞Δͷ͸ࠔ೉ 30
31. Design guidelines 31
32. 32 • Glass ޲͚ΞϓϦ։ൃʹಛԽͨ͠σβΠϯΨΠυϥΠϯ • σΟεϓϨΠͷࢹೝੑͱૢ࡞ੑΛଛͳΘͳ͍ͨΊͷϧʔϧ Design guidelines
33. • ͻͱ໨ͰΘ͔Δ ◦ Ϣʔβʔ͕ը໘ͷϝοηʔ δ΍ΞϓϦͷૢ࡞Λ͙͢ʹ ཧղͰ͖Δ ◦ ໨ΛࡉΊͯݟΔඞཁͷͳ͍ ৘ใ 33 Glanceable ✅ ❌
34. 34 Timely • ద੾ͳλΠϛϯάͰ৘ใΛఏڙ ͢Δ ◦ ݱࡏͷঢ়ଶͱɺΞΫγϣϯ ͨ͠ޙͷঢ়ଶΛཧղͯ͠΋ Β͏ TAP
35. 35 Easy to tap • λοϓ͠΍͍͢͜ͱ • λοϓͰ͖Δ͜ͱ͕Θ͔Δ͜ͱ
36. 36 Time saving • ࣌ؒͷઅ໿ ◦ Ϣʔβʔ͕λεΫΛૉૣ͘ ׬ྃͰ͖ΔΑ͏ʹ͢Δ ◦ ͜ͷը໘ͰԿ͕Ͱ͖Δͷ͔ ॠ࣌ʹཧղͰ͖ΔఏҊΛߦ ͏ TAP TAP Ұཡ ৄࡉ ૢ࡞
37. User interface 37
38. User interface • Theme • Layout ◦ Main Layout ◦ Left column layout 38
39. • ActionBar ͷͳ͍શը໘දࣔ • ࠇ৭ͷഎܠ ◦ ి஑ফඅͷ཈੍ • ന৭ͷςΩετ 39 Theme
40. • body ◦ ϝΠϯςΩετΛ഑ஔ͢ΔྖҬ ◦ .fontSize = 40.sp • footer ◦ ิ଍༻ͷαϒςΩετΛ഑ஔ͢ΔྖҬ ◦ ϝΠϯςΩετͱൺ΂ͯࢹೝੑ͕௿͍ͷͰ ஫ҙ͕ඞཁ ◦ .fontSize = 14.sp 40 Main Layout
41. • left-body ◦ ը૾Λ഑ஔ͢ΔྖҬ ◦ .width(240.dp) • right-body ◦ ϝΠϯςΩετΛ഑ஔ͢ΔྖҬ ◦ .fontSize = 30.sp • footer ◦ ิ଍༻ͷαϒςΩετΛ഑ஔ͢ΔྖҬ ◦ .fontSize = 14.sp 41 Left column layout
42. App development 42
43. Glass EE2 App development 43 • ։ൃ؀ڥ ◦ εϚʔτϑΥϯ޲͚ͷ Android ΞϓϦ։ൃͱಉ༷ ▪ ✅ Android Studio ▪ ✅ Jetpack Compose ▪ ⚠ GMS (Google Mobile Services) ར༻ෆՄ
44. sample: GlassRecipe 44 • ྉཧϨγϐΛӾཡ͢Δ Glass ΞϓϦ ◦ Recipes ▪ 🍳 ྉཧΛબ୒͢Δ ◦ Steps ▪ 📝 ྉཧͷखॱΛӾཡ͢Δ
45. 45 Recipes • Left column layout ◦ left body ▪ ࣸਅϓϨϏϡʔ ◦ right body ▪ λΠτϧͱࡐྉ ◦ footer ▪ ࣍ͷը໘΁ભҠͰ͖Δ͜ͱΛهࡌ Glanceable Time saving Glanceable
46. 46 Steps • Main layout ◦ body ▪ ྉཧखॱͷઆ໌ ◦ footer ▪ Πϯδέʔλʔ ▪ ྉཧखॱ͕͍ͭ͋͘Δ͔Λࣔ ͍ͯ͠Δ Time saving Timely Glanceable
47. Demo 47
48. Jetpack Compose in Glass App 48 • Glass ΞϓϦͰ͸ Horizontal ViewPager ͕ଟ༻͞ΕΔ • Jetpack Compose Λ࢖͏͜ͱͰ؆ܿʹ࣮૷Մೳ ◦ accompanist-pager ◦ accompanist-pager-indicators • Preview Λ࢖ͬͯ Glass UI Λ࠶ݱ
49. Jetpack Compose in Glass App 49 • Glass ΞϓϦͰ͸ Horizontal ViewPager ͕ଟ༻͞ΕΔ • Jetpack Compose Λ࢖͏͜ͱͰ؆ܿʹ࣮૷Մೳ ◦ accompanist-pager ◦ accompanist-pager-indicators • Preview Λ࢖ͬͯ Glass UI Λ࠶ݱ
51. Jetpack Compose in Glass App 51 • Glass ΞϓϦͰ͸ Horizontal ViewPager ͕ଟ༻͞ΕΔ • Jetpack Compose Λ࢖͏͜ͱͰ؆ܿʹ࣮૷Մೳ ◦ accompanist-pager ◦ accompanist-pager-indicators • Preview Λ࢖ͬͯ Glass UI Λ࠶ݱ
53. Conclusion 53
54. Glass Enterprise Edition 2 54 • Android OS ͕ಈ͘εϚʔτάϥε ◦ ։ൃऀ͕ࣗ༝ʹεϚʔτάϥεΞϓϦΛ։ൃͰ͖Δ • εϚʔτϑΥϯ΍λϒϨοτΛ׬શʹ୅ସ͢ΔσόΠεͰ͸ͳ͍͕ɺͦΕΒ ͱ૊Έ߹ΘͤΔ͜ͱͰ৽͍͠ମݧΛ࡞ΕΔՄೳੑ͕͋Δ
55. Google Glass ͷະདྷ 55 • Enterprise Edition ͷීٴ ◦ ϋʔυ΢ΣΞͷՁ֨ͱௐୡͷ໰୊ ◦ ޙܧػछ • toC ޲͚ Glass ͷ࠶དྷ ◦ ϓϥΠόγʔ໰୊ͷղܾ ◦ εϚʔτϑΥϯΛʮิ׬ʯ͢ΔσόΠε͔Βɺʮ୅ସʯ͢ΔσόΠε΁
56. 56 @shanonim @cookpad_jp
57. 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
58. Appendix 58