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

EmojiPicker触ってみた

 EmojiPicker触ってみた

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

napplecomputer

March 03, 2023
Tweet

More Decks by napplecomputer

Other Decks in Programming

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