EmojiPicker触ってみた

DeNA.apk #4で発表した内容です

Transcript

1. Mobility Technologies Co., Ltd.
   Emoji Picker৮ͬͯΈͨ
   @napplecomputer
   

   View Slide

2. Mobility Technologies Co., Ltd.
   2
   ■ @napplecomputer
   ■ ͳͬͽʔ
   ■ גࣜձࣾMobility Technologies(MoT)ॴଐ
   ■ λΫγʔΞϓϦʮGOʯͷϢʔβʔΞϓϦ
   ■ ࠷ۙϨϞϯͷ໦Λങ͍·ͨ͠
   ࣗݾ঺հ
   

   View Slide

3. Mobility Technologies Co., Ltd.
   Emoji Picker
   3
   

   View Slide

4. Mobility Technologies Co., Ltd.
   ͷલʹ
   4
   

   View Slide

5. Mobility Technologies Co., Ltd.
   Emoji PickerͷͨΊʹEmoji2
   5
   

   View Slide

6. Mobility Technologies Co., Ltd.
   Emoji2ͷͨΊʹEmoji
   6
   

   View Slide

7. Mobility Technologies Co., Ltd.
   EmojiͷͨΊʹ
   Downloadable fonts
   ֆจࣈޓ׵ੑ໰୊
   7
   

   View Slide

8. Mobility Technologies Co., Ltd.
   ͷઆ໌Λ͠·͢
   8
   

   View Slide

9. Mobility Technologies Co., Ltd.
   Downloadable fonts
   9
   

   View Slide

10. Mobility Technologies Co., Ltd.
    10
    ■ Font Providerʢ࣮࣭Google Play ServicesͷΈʣ͕μ΢ϯϩʔυͨ͠ϑΥ
    ϯτΛ୺຤಺ͷΞϓϦʹڞ༗͢Δػೳ
    Downloadable Fonts
    Device Font Provider
    App1
    Font
    Font Server
    App2
    Font
    

    View Slide

11. Mobility Technologies Co., Ltd.
    11
    ■ ΞϓϦ͕ಠࣗʹϑΥϯτΛ༻ҙ͢ΔσϝϦοτ͕ճආͰ͖Δ
    ■ ΞϓϦʹϑΥϯτΛຒΊࠐΉͱΞϓϦαΠζ͕ංେԽ
    ■ ΞϓϦىಈޙʹμ΢ϯϩʔυ͢Δ৔߹΋௨৴ྔͱετϨʔδΛѹഭ
    ■ ෳ਺ͷΞϓϦ͕ಉ͡ϑΥϯτΛڞ༗Ͱ͖ΔͷͰશһϋοϐʔ
    ■ ͍ͭʹͳͬͨΒNoto Sans JP࢖͑ΔΑ͏ʹͳΔͷʁ
    Downloadable Fonts
    

    View Slide

12. Mobility Technologies Co., Ltd.
    ֆจࣈޓ׵ੑ໰୊
    12
    

    View Slide

13. Mobility Technologies Co., Ltd.
    13
    ■ Androidͷݹ͍OSͰ͸৽͍͠ֆจࣈ͕จࣈԽ͚͢Δ
    ■ OSͷγεςϜϑΥϯτͷֆจࣈϑΥϯτΛ࢖ͬͯֆจࣈΛද͍ࣔͯ͠ΔͨΊɺ
    දࣔͰ͖Δֆจࣈ͸OSόʔδϣϯґଘ
    ■ Android 11·Ͱ͸γεςϜϑΥϯτ͸OSΞοϓσʔτҎ֎Ͱ͸ߋ৽Ͱ͖ͳ
    ͍
    ■ AndroidͰ͸OS͝ͱʹUnicodeͷରԠঢ়گ͕ҧ͏
    ■ ֆจࣈͷഽͷ৭ରԠͳͲ
    ■ ྫ͑͹ഽͷ৭͸ϑΥϯτ͕ߋ৽͞Εͯ΋ղܾͰ͖ͳ͍
    ֆจࣈޓ׵ੑ໰୊
    

    View Slide

14. Mobility Technologies Co., Ltd.
    Emoji
    14
    

    View Slide

15. Mobility Technologies Co., Ltd.
    ■ ֆจࣈͷޓ׵ੑͷͨΊͷEmojiCompatΛ༗͢ΔϥΠϒϥϦ
    ■ EmojiCompatͰ͸Donwloadable fontsΛར༻ͯ͠࠷৽ͷֆจࣈΛऔಘ
    ■ UnicodeͷରԠঢ়گ͸SpanͰղܾ
    ■ ͪΐͬͱ໘౗
    ■ EmojiTextViewͳͲͷઐ༻ͷViewΛ࢖͏ඞཁ͕͋Δ
    ■ ॳظԽॲཧ͕ඞཁ
    15
    Emoji
    

    View Slide

16. Mobility Technologies Co., Ltd.
    Emoji2
    16
    

    View Slide

17. Mobility Technologies Co., Ltd.
    ■ AppCompat1.4͔ΒAppCompatʹEmojiCompat͕૊Έࠐ·Εɺ
    AppCompatTextViewͳͲͷAppCompatViewΛ࢖༻͢Δ͚ͩͰ࠷৽ͷֆจࣈΛදࣔ
    Ͱ͖ΔΑ͏ʹͳͬͨ
    ■ AppCompat͔Βࢀর͢ΔͨΊʹEmojiΛ੔ཧͨ͠ͷ͕Emoji2
    ■ Inflater͕TextViewΛAppCompatTextViewʹஔ͖׵͑ΔͨΊɺAppCompat1.4Ҏ্
    Λ࢖͍ͬͯΕ͹উखʹద༻͞ΕΔ
    ■ ৄ͘͠͸DroidKaigi2021ͷAndroid Emoji 2021ΛݟΑ͏
    ■ https://droidkaigi.jp/2021/timetable/277220/?day=2
    17
    Emoji2
    

    View Slide

18. Mobility Technologies Co., Ltd.
    Emoji Picker
    18
    

    View Slide

19. Mobility Technologies Co., Ltd.
    Emoji Pickerͱ͸
    19
    

    View Slide

20. Mobility Technologies Co., Ltd.
    20
    ■ 2023೥1݄຤ʹಥ೗ϦϦʔε͞ΕͨEmoji2ͷ৽ػೳ
    ■ ίϛοτϩάΛݟΔͱ2022೥9݄͔Β։ൃ͍ͯͨͬ͠Ά͍
    ■ release noteʹ΋υΩϡϝϯτʹ΋આ໌͕͋·Γͳ͍
    Emoji Picker
    

    View Slide

21. Mobility Technologies Co., Ltd.
    21
    Emoji Picker
    https://developer.android.com/jetpack/androidx/releases/emoji2?hl=ja#emoji2_emojipicker_version_10_2
    

    View Slide

22. Mobility Technologies Co., Ltd.
    22
    Emoji Picker
    https://developer.android.com/jetpack/androidx/releases/emoji2?hl=ja#emoji2_emojipicker_version_10_2
    

    View Slide

23. Mobility Technologies Co., Ltd.
    23
    Emoji Picker
    https://developer.android.com/reference/androidx/emoji2/emojipicker/EmojiPickerView
    

    View Slide

24. Mobility Technologies Co., Ltd.
    24
    Emoji Picker
    https://developer.android.com/reference/androidx/emoji2/emojipicker/EmojiPickerView
    

    View Slide

25. Mobility Technologies Co., Ltd.
    Emoji PickerΛ࢖͏
    25
    

    View Slide

26. Mobility Technologies Co., Ltd.
    26
    Emoji PickerΛ࢖͏
    implementation 'androidx.emoji2:emoji2-emojipicker:1.0.0-alpha02'
    
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    
    
    android:id="@+id/emoji_piker"
    
    
    android:layout_width="match_parent"
    
    
    android:layout_height="match_parent"
    
    
    />
    

    View Slide

27. Mobility Technologies Co., Ltd.
    27
    

    View Slide

28. Mobility Technologies Co., Ltd.
    https://youtube.com/shorts/
    TpB2dR3TBrA?feature=share
    28
    

    View Slide

29. Mobility Technologies Co., Ltd.
    ■ ButtonͷΑ͏ʹListenerΛ࢖ͬͯϢʔβʔ͕ԿΛλοϓͨ͠ͷ͔औಘͰ͖Δ
    ■ આ໌௨Γਫฏํ޲ͷϔομʔͱਨ௚ํ޲ͷεΫϩʔϧͷ͋ΔView
    ■ ੑผ΍ഽͷ৭ͳͲ͸௕ԡ͠Ͱ੾Γସ͑ΒΕΔ
    ■ ௕ԡ͠Ͱ͖Δ΋ͷ͸ӈԼʹද͕ࣔ͋Δ
    ■ ࠷ۙ࢖༻ͨ͠ֆจࣈ͸εΫϩʔϧ͠ͳ͍ͱߋ৽͞Εͳ͍…
    ■ ԣ෯Λwrap_contentʹ͢Δͱֆจࣈ͕දࣔ͞Εͳ͍
    29
    Emoji Picker
    

    View Slide

30. Mobility Technologies Co., Ltd.
    Emoji PickerΛΧελϚΠζ͢Δ
    30
    

    View Slide

31. Mobility Technologies Co., Ltd.
    31
    ■ ΧελϚΠζͰ͖Δ߲໨
    ■ දࣔ͢Δֆจࣈ਺ͷࢦఆ
    ■ ࠷ۙ࢖ͬͨֆจࣈProviderͷมߋ
    Emoji PickerΛΧελϚΠζ͢Δ
    

    View Slide

32. Mobility Technologies Co., Ltd.
    32
    ■ emojiGridColumnsɺemojiGridRowsͰը໘ʹදࣔ͢Δԣํ޲ɺॎํ޲ʹ
    දࣔ͢Δֆจࣈ਺ΛࢦఆͰ͖Δ
    ■ EmojiPickerViewͰ͸ը໘ͷى͖͞ʹ߹Θܾͤͯ·ͬͨ਺ͷֆจࣈΛදࣔ͢
    ΔͨΊɺֆจࣈ਺ΛݮΒͤ͹ֆจࣈ͕େ͖͘දࣔ͞ΕΔ
    ■ ը໘αΠζʹ߹Θͤͯ਺Λมߋ͢Δ͜ͱͰֆจࣈͷେ͖͞ΛίϯτϩʔϧͰ
    ͖Δ
    දࣔ͢Δֆจࣈ਺ͷࢦఆ
    

    View Slide

33. Mobility Technologies Co., Ltd.
    33
    Emoji Picker
    columns 3
    default
    

    View Slide

34. Mobility Technologies Co., Ltd.
    34
    ࠷ۙ࢖ͬͨֆจࣈProviderͷมߋ
    interface RecentEmojiProvider {
    
    
    /**
    
    
    * Records an emoji into recent emoji list.
    
    
    * This fun will be called when an emoji is selected.
    
    
    * Clients could specify the behavior to record recently used emojis.(e.g. click frequency).
    
    
    */
    
    
    fun recordSelection(emoji: String)
    
    
    /**
    
    
    * Returns a list of recent emojis.
    
    
    * Default behavior: The most recently used emojis will be displayed first.
    
    
    * Clients could also specify the behavior such as displaying the emojis from high click
    
    
    * frequency to low click frequency.
    
    
    */
    
    
    suspend fun getRecentEmojiList(): List
    
    
    }
    

    View Slide

35. Mobility Technologies Co., Ltd.
    35
    ■ σϑΥϧτͷRecentEmojiProvider͸internalʹͳ͓ͬͯΓ֎෦͔Β͸ࢀর
    Ͱ͖ͳ͍
    ■ ࣮૷ΛݟΔͱSharedPreferenceʹ஋Λอଘ͍ͯ͠Δ͕ɺ஋͕ཉ͍͠৔߹
    ʹ௚઀SharedPreferenceΛݟΔͷ͸΍Ίͨ΄͏͕ྑͦ͞͏
    ■ ಠ࣮ࣗ૷ͷRecentEmojiProviderΛ࢖༻͢Δ͜ͱͰɺEmojiPickerViewΛද
    ࣔ͠ͳͯ͘΋࠷ۙ࢖༻ͨ͠ֆจࣈΛऔಘ͢Δ͜ͱ͕ՄೳʹͳΔ
    ■ ༗ޮظݶ΍্ݶΛઃఆͨ͠Γ΋Ͱ͖Δ
    ࠷ۙ࢖ͬͨֆจࣈProviderͷมߋ
    

    View Slide

36. Mobility Technologies Co., Ltd.
    Emoji Picker·ͱΊ
    36
    

    View Slide

37. Mobility Technologies Co., Ltd.
    37
    ■ Emoji Picker͸ֆจࣈͷબ୒ʹϑΥʔΧε͓ͯ͠ΓɺViewͱͯ͠ఏڙ͞Ε͍ͯΔͨΊΞ
    ϓϦʹ૊ΈࠐΈ΍͍͢
    ■ Ͱ΋ΞϓϦͰϢʔβʔʹֆจࣈ͚ͩબ୒͍ͤͨ͞৔໘ͬͯ͋Δ…ʁ
    ■ ࠷ۙ࢖ͬͨֆจࣈProviderͷΧελϚΠζੑ͔Β࡯͢ΔʹɺIMEʹ૊ΈࠐΉ͜ͱΛલఏ
    ͱ͍ͯ͠Δͷ͔΋
    ■ ௨ৗ͸࠷ۙ࢖ͬͨֆจࣈProviderʹ͋Δֆจࣈ͚ͩΛϢʔβʔʹબ୒ͤ͞ʢͦͷը໘ͷ
    ࣮૷͸ඞཁʣɺ΋ͬͱଟ͘ͷֆจࣈΛબ୒ͤ͞Δͱ͖ʹEmoji PickerΛදࣔ͢ΔͳͲ
    Emoji Picker·ͱΊ
    

    View Slide

38. Mobility Technologies Co., Ltd.
    IMEʹೖΕͯΈΔ
    38
    

    View Slide

39. Mobility Technologies Co., Ltd.
    39
    ■ IMEʹೖΕΔͷ͕Emoji Pickerͷ࢖͍ํͬΆ͍
    ■ Ͱ΋IMEΛ࣮૷͢Δͷ͸େม
    ■ IMEʹ֦ுػೳ͕͋Ε͹…
    IMEʹೖΕͯΈΔ
    

    View Slide

40. Mobility Technologies Co., Ltd.
    ϚογϡϧʔϜ🍄͕͋Δʂ
    40
    

    View Slide

41. Mobility Technologies Co., Ltd.
    https://youtube.com/shorts/
    mjk3gtoWJrc?feature=share
    41
    

    View Slide

42. Mobility Technologies Co., Ltd.
    42
    ■ ϚχΞοΫͳֆจࣈ͕͔ΜͨΜʹೖྗͰ͖ͯศར
    ■ ֦ுػೳͩͱRecentEmojiProvider׆༻͸೉͍͠
    ■ EmojiCompatͷॳظԽॲཧ͕૸ΔͷͰىಈ͕ͪΐͬͱ஗͍
    ■ ΧελϚΠζͰ͖Δ͸ͣ
    ■ ϚογϡϧʔϜͷ࢓༷ॻ͔Ε͍ͯΔαΠτ͕ফ͍͑ͯΔͷͰɺ࢓༷͸౰࣌ͷ
    ϒϩάͳͲΛ୳ͯ͠ؾ߹ͰಡΈऔΔ͔͠ແ͍
    ϚογϡϧʔϜ͔ΒEmoji PickerΛར༻͢Δ
    

    View Slide

43. Mobility Technologies Co., Ltd.
    ·ͱΊ
    43
    

    View Slide

44. Mobility Technologies Co., Ltd.
    44
    ■ AndroidͰͷֆจࣈ͸৭ʑେม
    ■ Emoji PickerΛ࢖͑͹ֆจࣈͷબ୒ը໘͸؆୯ʹ࡞ΕΔ
    ■ ಛʹੑผͱഽͷ৭બ୒ͱ͔͸ͱͯ΋خ͍͠
    ■ Emoji Picker͸IMEΛλʔήοτʹ͍ͯͦ͠͏
    ■ ϚογϡϧʔϜͷ࢓༷͕ॻ͔Ε͍ͯΔαΠτ͸ফ͍͑ͯΔ
    ·ͱΊ
    

    View Slide

45. จষ·ը૾౳ͷ಺༰ͷແஅసࡌٴͼෳ੡౳ͷߦҝ͸͝ԕྀ͍ͩ͘͞ɻ
    
    
    Mobility Technologies Co., Ltd.
    

    View Slide