トークアプリで絵文字を実装した話

Transcript

1. ز٦ؙ،فٔד窩俑㶵׾
   㹋鄲׃׋鑧 DroidKaigi 2017 @futabooo

2. 2 About me - Lead Engineer at eureka, Inc. -

   Java, Kotlin, Golang, TypeScript, AngularJS - FantasyEarth Zero, s.CRY.ed futabooo futabooo futabooo (ס׋ע٦)

3. 3 About eureka https://eure.jp/

4. 4 About eureka

5. 5 About eureka • Web • Golang, Gin • TypeScript,

   AngularJS • Android • Java, Kotlin • Dagger2, Orma, OkHttp3, Retrofit2, RxKotlin, Picasso, ButterKnife, DataBinding • iOS • Objective-C, Swift • CoreStore, Alamofire, Moya RxSwift, AsyncDisplayKit • Web • PHP, Codeigniter • Android • Java • ActiveAndroid, Volley, OkHttp3, Retrofit2, Socket.IO, RxJava, Glide • iOS • Swift, Objective-C • CoreStore, AFNetworking, SwiftyJSON, SDWebImage, RxSwift, Cartography

6. ס׋׶ך䙼ְ⳿׾知⽃חⰟ剣 ،ٕغيծ鎸䙀傈ծأ؛آُ٦ٕ׾מהאחկ 06 About Couples ،ٕغي ٖؕٝت٦ 2" ز٦ؙ

7. ס׋׶ך䙼ְ⳿׾知⽃חⰟ剣 ،ٕغيծ鎸䙀傈ծأ؛آُ٦ٕ׾מהאחկ 07 About Couples ،ٕغي ٖؕٝت٦ 2" ز٦ؙ

8. 08 About Couples ز٦ؙ ‣ ذؗأزًحإ٦آ
   ‣ 窩俑㶵
   ‣ ن؎أًحإ٦آ
   

   ‣ 歗⫷
   ‣ ⹛歗
   ‣ أةٝف
   ‣ ⡘縧䞔㜠
   ‣ 5IJOLJOH
   PG
   :PV

9. 09 About Couples ز٦ؙ ‣ ذؗأزًحإ٦آ
   ‣ 窩俑㶵
   ‣ ن؎أًحإ٦آ
   

   ‣ 歗⫷
   ‣ ⹛歗
   ‣ أةٝف
   ‣ ⡘縧䞔㜠
   ‣ 5IJOLJOH
   PG
   :PV

10. ،فٔ杝荈窩俑㶵㼪Ⰵ⵸ 10

11. 11 Ӣ$PVQMFTפך׀䠐鋅٥׀䠬䟝
    歗⫷ך鸐׶窩俑㶵ָ邌爙ׁ׸תׇ׿
    猘ָ鷏׏׋׮ךכ邌爙ׁ׸׷׫׋ְדׅ

12. Ӣ$PVQMFTפך׀䠐鋅٥׀䠬䟝
    歗⫷ך鸐׶窩俑㶵ָ邌爙ׁ׸תׇ׿
    猘ָ鷏׏׋׮ךכ邌爙ׁ׸׷׫׋ְדׅ 12 畭劣װٍؗٔ،ך麩ְח״׏ג
    姻׃ְ窩俑㶵ך邌爙ָדֹזְ

13. 杝荈窩俑㶵ְ׸״ֲ 13

14. $PVQMFT杝荈窩俑㶵
    㼪Ⰵתדך崧׸ 14

15. ‣ ➬圫׾寸׭׷
    ˖ ➭爡،فٔד杝荈窩俑㶵ָ㹋鄲ׁ׸גְ׷׮ ך׾灇瑔ׅ׷
    ˖ 堣腉׾峤ְ⳿ׅ
    ˖ ؙؔٔذ؍ך然钠
    ‣

    Ꟛ涪ׅ׷
    ˖ ➬圫寸׭ד峤ְ⳿׃׋堣腉ך㹋鄲 15 Couplesಠࣗֆจࣈಋೖ·ͰͷྲྀΕ

16. ➭爡،فٔך灇瑔 16

17. ‣ ➭爡،فٔד杝荈窩俑㶵ך֮׷،فٔ׾מ׋ׅ׵⢪ֲ
    ˖ -*/&ծ'BDFCPPL
    .FTTFOHFSծFUD
    ˖ غؚ׾鋅אֽ׷ּ׵ְך⹲ְד葿ղװ׷
    17 ଞࣾΞϓϦͷݚڀ

18. ‣ ػೳͷચ͍ग़݁͠Ռ • ֆจࣈΛදࣔͰ͖Δ • ֆจࣈͷίϐʔ&ϖʔετ͕Ͱ͖Δ • ΞϓϦ֎ʹϖʔετ͢Δͱ୅ସςΩετͰ දࣔ͞ΕΔ •

    ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ 18 ଞࣾΞϓϦͷݚڀ

19. ַֿֿ׵Ꟛ涪ך鑧דׅ 19

20. 窩俑㶵׾邌爙ׅ׷ 20

21. ‣ Ⳣ椚ך崧׸
    ˖ 邌爙ׅ׷俑㶵⴨ך⚥ַ׵窩俑㶵ח㼎䘔ׅ׷鿇ⴓ׾ 陎ⴽׅ׷
    ˖ 邌爙ׅ׷俑㶵⴨ךוֿחו׿ז窩俑㶵׾邌爙ׅ׷ ַ׾⥂䭯ׅ׷ٔأز׾⡲䧭ׅ׷
    ˖ 邌爙ׅ׷俑㶵⴨׾4QBOOBCMF4USJOHח׃ծٔأز

    ׾⯋ח㼎䘔ׅ׷鿇ⴓ׾窩俑㶵ה׃ג䲽歗ׅ׷ 21 ֆจࣈΛදࣔ͢Δ

22. ‣ Ⳣ椚ך崧׸ 22 ֆจࣈΛදࣔ͢Δ こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}} TalkMessageToken characterStyle : SticonSpan beginIndex

    : int endIndex : int TalkMessageToken characterStyle : SticonSpan beginIndex : int endIndex : int こんにちは 今日はいい天気ですね！ SpannableString型 String型 SticonSpan sticon : Drawable altText : String DynamicDrawableSpan draw() ύʔαʔ

23. ‣ ॲཧͷྲྀΕ 23 ֆจࣈΛදࣔ͢Δ こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}} TalkMessageToken characterStyle : SticonSpan beginIndex

    : int endIndex : int TalkMessageToken characterStyle : SticonSpan beginIndex : int endIndex : int こんにちは 今日はいい天気ですね！ SpannableString型 String型 SticonSpan sticon : Drawable altText : String DynamicDrawableSpan draw() ύʔαʔ

24. ‣ ॲཧͷྲྀΕ 24 ֆจࣈΛදࣔ͢Δ TalkMessageToken characterStyle : SticonSpan beginIndex :

    int endIndex : int TalkMessageToken characterStyle : SticonSpan beginIndex : int endIndex : int SticonSpan sticon : Drawable altText : String DynamicDrawableSpan draw() こんにちは 今日はいい天気ですね！ SpannableString型 こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}} String型 ύʔαʔ

25. ‣ ॲཧͷྲྀΕ 25 ֆจࣈΛදࣔ͢Δ TalkMessageToken characterStyle : SticonSpan beginIndex :

    int endIndex : int TalkMessageToken characterStyle : SticonSpan beginIndex : int endIndex : int SticonSpan sticon : Drawable altText : String DynamicDrawableSpan draw() こんにちは 今日はいい天気ですね！ SpannableString型 こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}} String型 ύʔαʔ

26. 26 ֆจࣈΛදࣔ͢Δ // 表示したい文字列 String message = "こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}}";
 
 //

    どこにどの絵文字を表示するかを保持したリストを取得する
 List<TalkMessageToken> tokenList = TalkMessageHelper.getSticonSpanTokens(message); // リストを元に文字列に絵文字を対応させて描画する SpannableString spanedMessage = new SpannableString(message);
 for (TalkMessageToken t : tokenList) {
 spanedMessage .setSpan(t.characterStyle, t.beginIndex, t.endIndex, t.flags);
 }
 talkView.setText(spanedMessage); ‣ ॲཧͷྲྀΕ

27. 27 ֆจࣈΛදࣔ͢Δ // 表示したい文字列 String message = "こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}}";
 
 //

    どこにどの絵文字を表示するかを保持したリストを取得する
 List<TalkMessageToken> tokenList = TalkMessageHelper.getSticonSpanTokens(message); // リストを元に文字列に絵文字を対応させて描画する SpannableString spanedMessage = new SpannableString(message);
 for (TalkMessageToken t : tokenList) {
 spanedMessage .setSpan(t.characterStyle, t.beginIndex, t.endIndex, t.flags);
 }
 talkView.setText(spanedMessage); ‣ ॲཧͷྲྀΕ

28. 28 ֆจࣈΛදࣔ͢Δ // 表示したい文字列 String message = "こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}}";
 
 //

    どこにどの絵文字を表示するかを保持したリストを取得する
 List<TalkMessageToken> tokenList = TalkMessageHelper.getSticonSpanTokens(message); // リストを元に文字列に絵文字を対応させて描画する SpannableString spanedMessage = new SpannableString(message);
 for (TalkMessageToken t : tokenList) {
 spanedMessage .setSpan(t.characterStyle, t.beginIndex, t.endIndex, t.flags);
 }
 talkView.setText(spanedMessage); ‣ ॲཧͷྲྀΕ

29. 29 ֆจࣈΛදࣔ͢Δ // 表示したい文字列 String message = "こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}}";
 
 //

    どこにどの絵文字を表示するかを保持したリストを取得する
 List<TalkMessageToken> tokenList = TalkMessageHelper.getSticonSpanTokens(message); // リストを元に文字列に絵文字を対応させて描画する SpannableString spanedMessage = new SpannableString(message);
 for (TalkMessageToken t : tokenList) {
 spanedMessage .setSpan(t.characterStyle, t.beginIndex, t.endIndex, t.flags);
 }
 talkView.setText(spanedMessage); ‣ ॲཧͷྲྀΕ

30. 30 ֆจࣈΛදࣔ͢Δ // 表示したい文字列 String message = "こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}}";
 
 //

    どこにどの絵文字を表示するかを保持したリストを取得する
 List<TalkMessageToken> tokenList = TalkMessageHelper.getSticonSpanTokens(message); // リストを元に文字列に絵文字を対応させて描画する SpannableString spanedMessage = new SpannableString(message);
 for (TalkMessageToken t : tokenList) {
 spanedMessage .setSpan(t.characterStyle, t.beginIndex, t.endIndex, t.flags);
 }
 talkView.setText(spanedMessage); ‣ ॲཧͷྲྀΕ

31. 31 ֆจࣈΛදࣔ͢Δ // 表示したい文字列 String message = "こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}}";
 
 //

    どこにどの絵文字を表示するかを保持したリストを取得する
 List<TalkMessageToken> tokenList = TalkMessageHelper.getSticonSpanTokens(message); // リストを元に文字列に絵文字を対応させて描画する SpannableString spanedMessage = new SpannableString(message);
 for (TalkMessageToken t : tokenList) {
 spanedMessage .setSpan(t.characterStyle, t.beginIndex, t.endIndex, t.flags);
 }
 talkView.setText(spanedMessage); ‣ ॲཧͷྲྀΕ

32. ‣ {{ mustache }} • Logic-less templates • ୯७ͳஔ͖׵͑Λߦ͏ςϯϓϨʔτ •

    Java࣮૷ samskivert/jmustache 32 ֆจࣈΛදࣔ͢Δ String text = "One, two, {{three}}. Three sir!";
 Template tmpl = Mustache.compiler().compile(text);
 Map<> data = new HashMap<String, String>();
 data.put("three", "five");
 System.out.println(tmpl.execute(data));
 //result: "One, two, five. Three sir!"

33. 33 ֆจࣈΛදࣔ͢Δ String text = "One, two, {{three}}. Three sir!";


    Template tmpl = Mustache.compiler().compile(text);
 Map<> data = new HashMap<String, String>();
 data.put("three", "five");
 System.out.println(tmpl.execute(data));
 //result: "One, two, five. Three sir!" ‣ {{ mustache }} • Logic-less templates • ୯७ͳஔ͖׵͑Λߦ͏ςϯϓϨʔτ • Java࣮૷ samskivert/jmustache

34. 34 ֆจࣈΛදࣔ͢Δ String text = "One, two, {{three}}. Three sir!";


    Template tmpl = Mustache.compiler().compile(text);
 Map<> data = new HashMap<String, String>();
 data.put("three", "five");
 System.out.println(tmpl.execute(data));
 //result: "One, two, five. Three sir!" ‣ {{ mustache }} • Logic-less templates • ୯७ͳஔ͖׵͑Λߦ͏ςϯϓϨʔτ • Java࣮૷ samskivert/jmustache

35. 35 ֆจࣈΛදࣔ͢Δ String text = "One, two, {{three}}. Three sir!";


    Template tmpl = Mustache.compiler().compile(text);
 Map<> data = new HashMap<String, String>();
 data.put("three", "five");
 System.out.println(tmpl.execute(data));
 //result: "One, two, five. Three sir!" ‣ {{ mustache }} • Logic-less templates • ୯७ͳஔ͖׵͑Λߦ͏ςϯϓϨʔτ • Java࣮૷ samskivert/jmustache

36. 36 ֆจࣈΛදࣔ͢Δ String text = "One, two, {{three}}. Three sir!";


    Template tmpl = Mustache.compiler().compile(text);
 Map<> data = new HashMap<String, String>();
 data.put("three", "five");
 System.out.println(tmpl.execute(data));
 //result: "One, two, five. Three sir!" ‣ {{ mustache }} • Logic-less templates • ୯७ͳஔ͖׵͑Λߦ͏ςϯϓϨʔτ • Java࣮૷ samskivert/jmustache

37. 37 ֆจࣈΛදࣔ͢Δ String text = "One, two, {{three}}. Three sir!";


    Template tmpl = Mustache.compiler().compile(text);
 Map<> data = new HashMap<String, String>();
 data.put("three", "five");
 System.out.println(tmpl.execute(data));
 //result: "One, two, five. Three sir!" ‣ {{ mustache }} • Logic-less templates • ୯७ͳஔ͖׵͑Λߦ͏ςϯϓϨʔτ • Java࣮૷ samskivert/jmustache

38. 38 ֆจࣈΛදࣔ͢Δ ‣ samskivert/jmustache ˖ 俑㶵
    UP
    俑㶵ך縧ֹ䳔ִז׵ֿה駈׶׷
    ˖ 窩俑㶵חׅ׷חכ穠㽷㹋鄲ָ䗳銲
    ˖ ٓ؎ـٓٔכ⢪׻׆חծػ٦؟׾荈⵸ד㹋鄲

39. 39 ֆจࣈΛදࣔ͢Δ ‣ ࣗલύʔαʔ • mustacheΛ࢖͍ͳ͕Βਖ਼نදݱͰΰϦΰϦ΍Δ • MatcherͱPatternΛ࢖͏ • {{sticon(1,10)}}

    → ରԠ͢Δֆจࣈ Λදࣔ͢ΔͨΊͷSpanΛ࡞੒͢Δ

40. 40 ֆจࣈΛදࣔ͢Δ ‣ {{sticon(1,10)}} • sticon͸ֆจࣈͷ͜ͱ • sticon(άϧʔϓIDɺID)ɺID͸શͯͷsticonͰҰҙ • શͯͷsticonͰҰҙͳID͸ελϯϓͱͯ͠ૹΔ

    ࣌ʹ׆༂

41. 41 ֆจࣈΛදࣔ͢Δ // 正規表現のパターンを作成する Pattern STICON = Pattern.compile("\\{\\{sticon\\(.+?\\)\\}\\}");
 Pattern IDS

    = Pattern.compile("(\\d+),(\\d+)"); List<TalkMessageToken> getSticonSpanTokens(String rawText) { ArrayList<TalkMessageToken> tokens = new ArrayList<>(); // Matcherを用いてパターンにマッチした部分へ処理を行う
 Matcher t = STICON.matcher(rawText);
 Matcher ids = IDS.matcher(""); while (t.find()) {// {{sticon(1,10)}}と{{sticon(2,20)}} matcherIds.reset(matcherTemplate.group());
 if (ids.find()) {// (1,10)と(2,20) TalkMessageToken token = new TalkMessageToken(sticonSpan, t.start(), t.end());
 tokens.add(token); } } } ‣ Ͳ͜ʹͲͷֆจࣈΛදࣔ͢Δ͔อ࣋ͨ͠Ϧετͷऔಘ

42. 42 ֆจࣈΛදࣔ͢Δ // 正規表現のパターンを作成する Pattern STICON = Pattern.compile("\\{\\{sticon\\(.+?\\)\\}\\}");
 Pattern IDS

    = Pattern.compile("(\\d+),(\\d+)"); List<TalkMessageToken> getSticonSpanTokens(String rawText) { ArrayList<TalkMessageToken> tokens = new ArrayList<>(); // Matcherを用いてパターンにマッチした部分へ処理を行う
 Matcher t = STICON.matcher(rawText);
 Matcher ids = IDS.matcher(""); while (t.find()) {// {{sticon(1,10)}}と{{sticon(2,20)}} matcherIds.reset(t.group());
 if (ids.find()) {// (1,10)と(2,20) TalkMessageToken token = new TalkMessageToken(sticonSpan, t.start(), t.end());
 tokens.add(token); } } } ‣ Ͳ͜ʹͲͷֆจࣈΛදࣔ͢Δ͔อ࣋ͨ͠Ϧετͷऔಘ

43. 43 ֆจࣈΛදࣔ͢Δ // 正規表現のパターンを作成する Pattern STICON = Pattern.compile("\\{\\{sticon\\(.+?\\)\\}\\}");
 Pattern IDS

    = Pattern.compile("(\\d+),(\\d+)"); List<TalkMessageToken> getSticonSpanTokens(String rawText) { ArrayList<TalkMessageToken> tokens = new ArrayList<>(); // Matcherを用いてパターンにマッチした部分へ処理を行う
 Matcher t = STICON.matcher(rawText);
 Matcher ids = IDS.matcher(""); while (t.find()) {// {{sticon(1,10)}}と{{sticon(2,20)}} matcherIds.reset(t.group())
 if (ids.find()) {// (1,10)と(2,20) TalkMessageToken token = new TalkMessageToken(sticonSpan, t.start(), t.end());
 tokens.add(token); } } } ‣ Ͳ͜ʹͲͷֆจࣈΛදࣔ͢Δ͔อ࣋ͨ͠Ϧετͷऔಘ

44. 44 ֆจࣈΛදࣔ͢Δ // 正規表現のパターンを作成する Pattern STICON = Pattern.compile("\\{\\{sticon\\(.+?\\)\\}\\}");
 Pattern IDS

    = Pattern.compile("(\\d+),(\\d+)"); List<TalkMessageToken> getSticonSpanTokens(String rawText) { ArrayList<TalkMessageToken> tokens = new ArrayList<>(); // Matcherを用いてパターンにマッチした部分へ処理を行う
 Matcher t = STICON.matcher(rawText);
 Matcher ids = IDS.matcher(""); while (t.find()) {// {{sticon(1,10)}}と{{sticon(2,20)}}
 matcherIds.reset(t.group()); if (ids.find()) {// (1,10)と(2,20) TalkMessageToken token = new TalkMessageToken(sticonSpan, t.start(), t.end());
 tokens.add(token); } } } ‣ Ͳ͜ʹͲͷֆจࣈΛදࣔ͢Δ͔อ࣋ͨ͠Ϧετͷऔಘ

45. 45 ֆจࣈΛදࣔ͢Δ // 正規表現のパターンを作成する Pattern STICON = Pattern.compile("\\{\\{sticon\\(.+?\\)\\}\\}");
 Pattern IDS

    = Pattern.compile("(\\d+),(\\d+)"); List<TalkMessageToken> getSticonSpanTokens(String rawText) { ArrayList<TalkMessageToken> tokens = new ArrayList<>(); // Matcherを用いてパターンにマッチした部分へ処理を行う
 Matcher t = STICON.matcher(rawText);
 Matcher ids = IDS.matcher(""); while (t.find()) {// {{sticon(1,10)}}と{{sticon(2,20)}} matcherIds.reset(t.group());
 if (ids.find()) {// (1,10)と(2,20) TalkMessageToken token = new TalkMessageToken(sticonSpan, t.start(), t.end());
 tokens.add(token); } } } ‣ Ͳ͜ʹͲͷֆจࣈΛදࣔ͢Δ͔อ࣋ͨ͠Ϧετͷऔಘ

46. 46 ֆจࣈΛදࣔ͢Δ // 正規表現のパターンを作成する Pattern STICON = Pattern.compile("\\{\\{sticon\\(.+?\\)\\}\\}");
 Pattern IDS

    = Pattern.compile("(\\d+),(\\d+)"); List<TalkMessageToken> getSticonSpanTokens(String rawText) { ArrayList<TalkMessageToken> tokens = new ArrayList<>(); // Matcherを用いてパターンにマッチした部分へ処理を行う
 Matcher t = STICON.matcher(rawText);
 Matcher ids = IDS.matcher(""); while (t.find()) {// {{sticon(1,10)}}と{{sticon(2,20)}} matcherIds.reset(t.group());
 if (ids.find()) {// (1,10)と(2,20) TalkMessageToken token = new TalkMessageToken(sticonSpan, t.start(), t.end());
 tokens.add(token); } } } ‣ Ͳ͜ʹͲͷֆจࣈΛදࣔ͢Δ͔อ࣋ͨ͠Ϧετͷऔಘ

47. 47 ֆจࣈΛදࣔ͢Δ class TalkMessageToken {
 public CharacterStyle characterStyle;
 public int

    beginIndex;
 public int endIndex; } ‣ TalkMessageToken • Ͳ͜ʹͲΜͳελΠϧΛ౰ͯΔ͔อ࣋͢ΔΫϥε こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}} TalkMessageToken characterStyle = sticonSpan beginIndex = 5 endIndex = 20 TalkMessageToken characterStyle = sticonSpan beginIndex = 32 endIndex = 47

48. 48 ֆจࣈΛදࣔ͢Δ ‣ TalkMessageToken • Ͳ͜ʹͲΜͳελΠϧΛ౰ͯΔ͔อ࣋͢ΔΫϥε こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}} TalkMessageToken characterStyle =

    sticonSpan beginIndex = 5 endIndex = 20 TalkMessageToken characterStyle = sticonSpan beginIndex = 32 endIndex = 47 class TalkMessageToken {
 public CharacterStyle characterStyle;
 public int beginIndex;
 public int endIndex; }

49. 49 ֆจࣈΛදࣔ͢Δ ‣ TalkMessageToken • Ͳ͜ʹͲΜͳελΠϧΛ౰ͯΔ͔อ࣋͢ΔΫϥε こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}} TalkMessageToken characterStyle =

    sticonSpan beginIndex = 5 endIndex = 20 TalkMessageToken characterStyle = sticonSpan beginIndex = 32 endIndex = 47 class TalkMessageToken {
 public CharacterStyle characterStyle;
 public int beginIndex;
 public int endIndex; }

50. 50 ֆจࣈΛදࣔ͢Δ ‣ SticonSpan • ֆจࣈ৘ใΛอ࣋͢ΔΫϥε class SticonSpan extends DynamicDrawableSpan

    { Drawable sticon;
 String altText;
 String rawText; int stickerId; 
 @Override
 public void draw(Canvas canvas, CharSequence text,
 int start, int end, float x,
 int top, int y, int bottom, Paint paint) { // 自身が適用されたstring部分をsticonに置換して描画する
 } }

51. 51 ֆจࣈΛදࣔ͢Δ class SticonSpan extends DynamicDrawableSpan { Drawable sticon;
 String

    altText;
 String rawText; int stickerId; 
 @Override
 public void draw(Canvas canvas, CharSequence text,
 int start, int end, float x,
 int top, int y, int bottom, Paint paint) { // 自身が適用されたstring部分をsticonに置換して描画する
 } } ‣ SticonSpan • ֆจࣈ৘ใΛอ࣋͢ΔΫϥε

52. 52 ֆจࣈΛදࣔ͢Δ ‣ SticonSpan • ֆจࣈ৘ใΛอ࣋͢ΔΫϥε class SticonSpan extends DynamicDrawableSpan

    { Drawable sticon;
 String altText;
 String rawText; int stickerId; 
 @Override
 public void draw(Canvas canvas, CharSequence text,
 int start, int end, float x,
 int top, int y, int bottom, Paint paint) { // 自身が適用されたstring部分をsticonに置換して描画する
 } }

53. 53 ֆจࣈΛදࣔ͢Δ ‣ SticonSpan • ֆจࣈ৘ใΛอ࣋͢ΔΫϥε class SticonSpan extends DynamicDrawableSpan

    { Drawable sticon;
 String altText;
 String rawText; int stickerId; 
 @Override
 public void draw(Canvas canvas, CharSequence text,
 int start, int end, float x,
 int top, int y, int bottom, Paint paint) { // 自身が適用されたstring部分をsticonに置換して描画する
 } }

54. 54 ֆจࣈΛදࣔ͢Δ ‣ SticonSpan • ֆจࣈ৘ใΛอ࣋͢ΔΫϥε class SticonSpan extends DynamicDrawableSpan

    { Drawable sticon;
 String altText;
 String rawText; int stickerId; 
 @Override
 public void draw(Canvas canvas, CharSequence text,
 int start, int end, float x,
 int top, int y, int bottom, Paint paint) { // 自身が適用されたstring部分をsticonに置換して描画する
 } }

55. 55 ֆจࣈΛදࣔ͢Δ class SticonSpan extends DynamicDrawableSpan { Drawable sticon;
 String

    altText;
 String rawText; int stickerId; 
 @Override
 public void draw(Canvas canvas, CharSequence text,
 int start, int end, float x,
 int top, int y, int bottom, Paint paint) { // 自身が適用されたstring部分をsticonに置換して描画する
 } } ‣ SticonSpan • ֆจࣈ৘ใΛอ࣋͢ΔΫϥε

56. 56 ֆจࣈΛදࣔ͢Δ ‣ SticonSpan • ֆจࣈ৘ใΛอ࣋͢ΔΫϥε class SticonSpan extends DynamicDrawableSpan

    { Drawable sticon;
 String altText;
 String rawText; int stickerId; 
 @Override
 public void draw(Canvas canvas, CharSequence text,
 int start, int end, float x,
 int top, int y, int bottom, Paint paint) { // 自身が適用されたstring部分をsticonに置換して描画する
 } }

57. こんにちは 今日はいい天気ですね！ 57 ֆจࣈΛදࣔ͢Δ こんにちは{{sticon(1,10)}}今日はいい天気ですね！{{sticon(2,20)}} TalkMessageToken characterStyle : SticonSpan beginIndex

    : int endIndex : int TalkMessageToken characterStyle : SticonSpan beginIndex : int endIndex : int SpannableString型 String型 SticonSpan sticon : Drawable altText : String DynamicDrawableSpan draw() ύʔαʔ ‣ ͓͞Β͍

58. 窩俑㶵׾
    ؝ؾ٦ل٦أزדֹ׷ 58

59. ‣ ॲཧͷྲྀΕ • ίϐʔ͞ΕͨΒԼهจࣈྻΛΞϓϦ಺Ͱอ࣋͢Δ • ੜςΩετ ʮ͜Μʹͪ͸{{sticon(1,10)}}ʯ • ୅ସςΩετ ʮ͜Μʹͪ͸(bo)ʯ

    • ୅ସςΩετΛΫϦοϓϘʔυʹอଘ͢Δ • Couples֎Ͱͷϖʔετ͸୅ସςΩετදࣔ • ίϐʔ࣌ͷจࣈྻͱൺ্ֱͨ͠Ͱϖʔετ͢Δ 59 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ

60. ‣ ॲཧͷྲྀΕ 60 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ SpannableString型 こんにちは 今日はいい天気ですね！ Copy copiedRawText: String

    copiedAltText : String sticonCopied: boolean ΞϓϦ಺ ΫϦοϓϘʔυ copiedAltText : String Paste こんにちは 今日はいい天気ですね！ こんにちは(bo)今日はいい天気ですね！(Sunny)

61. ‣ ॲཧͷྲྀΕ 61 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ SpannableString型 こんにちは 今日はいい天気ですね！ Copy copiedRawText: String

    copiedAltText : String sticonCopied: boolean ΞϓϦ಺ ΫϦοϓϘʔυ copiedAltText : String Paste こんにちは 今日はいい天気ですね！ こんにちは(bo)今日はいい天気ですね！(Sunny)

62. ‣ ॲཧͷྲྀΕ 62 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ SpannableString型 こんにちは 今日はいい天気ですね！ Copy copiedRawText: String

    copiedAltText : String sticonCopied: boolean ΞϓϦ಺ ΫϦοϓϘʔυ copiedAltText : String Paste こんにちは 今日はいい天気ですね！ こんにちは(bo)今日はいい天気ですね！(Sunny)

63. ‣ ॲཧͷྲྀΕ 63 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ SpannableString型 こんにちは 今日はいい天気ですね！ Copy copiedRawText: String

    copiedAltText : String sticonCopied: boolean ΞϓϦ಺ ΫϦοϓϘʔυ copiedAltText : String Paste こんにちは 今日はいい天気ですね！ こんにちは(bo)今日はいい天気ですね！(Sunny)

64. 64 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ ‣ ॲཧͷྲྀΕ // 文字列をアプリ内に保持する setCopiedText(message); // クリップボードに代替テキストを保存 altText

    = TalkMessageHelper.getAltText(message);
 String[] mimetype = {ClipDescription.MIMETYPE_TEXT_PLAIN};
 ClipData.Item item = new ClipData.Item(altText);
 ClipData cd = new ClipData(new ClipDescription("text",mimetype),item);
 ClipboardManager cm = (ClipboardManager) getSystemService(CLIPBOARD_SERVICE);
 cm.setPrimaryClip(cd); // コピー時の文字列と比較した上で貼り付け @Override public void afterTextChanged(Editable s) { if (isSticonPasted()) { // 絵文字表示処理 } }

65. 65 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ ‣ ॲཧͷྲྀΕ // 文字列をアプリ内に保持する setCopiedText(message); // クリップボードに代替テキストを保存 altText

    = TalkMessageHelper.getAltText(message);
 String[] mimetype = {ClipDescription.MIMETYPE_TEXT_PLAIN};
 ClipData.Item item = new ClipData.Item(altText);
 ClipData cd = new ClipData(new ClipDescription("text",mimetype),item);
 ClipboardManager cm = (ClipboardManager) getSystemService(CLIPBOARD_SERVICE);
 cm.setPrimaryClip(cd); // コピー時の文字列と比較した上で貼り付け @Override public void afterTextChanged(Editable s) { if (isSticonPasted()) { // 絵文字表示処理 } }

66. 66 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ ‣ ॲཧͷྲྀΕ // 文字列をアプリ内に保持する setCopiedText(message); // クリップボードに代替テキストを保存 altText

    = TalkMessageHelper.getAltText(message);
 String[] mimetype = {ClipDescription.MIMETYPE_TEXT_PLAIN};
 ClipData.Item item = new ClipData.Item(altText);
 ClipData cd = new ClipData(new ClipDescription("text",mimetype),item);
 ClipboardManager cm = (ClipboardManager) getSystemService(CLIPBOARD_SERVICE);
 cm.setPrimaryClip(cd); // コピー時の文字列と比較した上で貼り付け @Override public void afterTextChanged(Editable s) { if (isSticonPasted()) { // 絵文字表示処理 } }

67. 67 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ ‣ ॲཧͷྲྀΕ // 文字列をアプリ内に保持する setCopiedText(message); // クリップボードに代替テキストを保存 altText

    = TalkMessageHelper.getAltText(message);
 String[] mimetype = {ClipDescription.MIMETYPE_TEXT_PLAIN};
 ClipData.Item item = new ClipData.Item(altText);
 ClipData cd = new ClipData(new ClipDescription("text",mimetype),item);
 ClipboardManager cm = (ClipboardManager) getSystemService(CLIPBOARD_SERVICE);
 cm.setPrimaryClip(cd); // コピー時の文字列と比較した上で貼り付け @Override public void afterTextChanged(Editable s) { if (isSticonPasted()) { // 絵文字表示処理 } }

68. 68 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ ‣ ॲཧͷྲྀΕ // 文字列をアプリ内に保持する setCopiedText(message); // クリップボードに代替テキストを保存 altText

    = TalkMessageHelper.getAltText(message);
 String[] mimetype = {ClipDescription.MIMETYPE_TEXT_PLAIN};
 ClipData.Item item = new ClipData.Item(altText);
 ClipData cd = new ClipData(new ClipDescription("text",mimetype),item);
 ClipboardManager cm = (ClipboardManager) getSystemService(CLIPBOARD_SERVICE);
 cm.setPrimaryClip(cd); // コピー時の文字列と比較した上で貼り付け @Override public void afterTextChanged(Editable s) { if (isSticonPasted()) { // 絵文字表示処理 } }

69. ‣ ͓͞Β͍ 69 ֆจࣈΛίϐʔ&ϖʔετͰ͖Δ SpannableString型 こんにちは 今日はいい天気ですね！ Copy copiedRawText: String

    copiedAltText : String sticonCopied: boolean ΞϓϦ಺ ΫϦοϓϘʔυ copiedAltText : String Paste こんにちは 今日はいい天気ですね！ こんにちは(bo)今日はいい天気ですね！(Sunny)

70. 窩俑㶵⦐׌ֽד鷏׷ה أةٝفחז׷ 70

71. ‣ ॲཧͷྲྀΕ • ϝοηʔδૹ৴ͷλΠϛϯάͰֆจࣈ1ݸ͚͔ͩ Ͳ͏͔Λ൑ఆ͢Δ • ֆจࣈ1ݸ͚ͩͷ৔߹ɺελϯϓͱͯ͠ૹ৴͢Δ 71 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ

72. ‣ ελϯϓͱͯ͠ૹΔ͔Ͳ͏͔൑ఆ͢Δ 72 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ public boolean isSendSticonAsSticker(){
 SticonSpan[] tokens =editText.getText().getSpans(

    0, editText.getText().length(), SticonSpan.class); if(tokens.length == 1){ // 絵文字を表す文字列が1個だけ入力されてる場合
 if(tokens[0].getTemplateString().equals(editText.getText())){
 return true;
 }
 } // 絵文字が1個だけじゃない場合
 return false;
 }

73. ‣ ελϯϓͱͯ͠ૹΔ͔Ͳ͏͔൑ఆ͢Δ 73 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ public boolean isSendSticonAsSticker(){
 SticonSpan[] tokens =editText.getText().getSpans(

    0, editText.getText().length(), SticonSpan.class); if(tokens.length == 1){ // 絵文字を表す文字列が1個だけ入力されてる場合
 if(tokens[0].getTemplateString().equals(editText.getText())){
 return true;
 }
 } // 絵文字が1個だけじゃない場合
 return false;
 }

74. ‣ ελϯϓͱͯ͠ૹΔ͔Ͳ͏͔൑ఆ͢Δ 74 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ public boolean isSendSticonAsSticker(){
 SticonSpan[] tokens =editText.getText().getSpans(

    0, editText.getText().length(), SticonSpan.class); if(tokens.length == 1){ // 絵文字を表す文字列が1個だけ入力されてる場合
 if(tokens[0].getTemplateString().equals(editText.getText())){
 return true;
 }
 } // 絵文字が1個だけじゃない場合
 return false;
 }

75. ‣ ελϯϓͱͯ͠ૹΔ͔Ͳ͏͔൑ఆ͢Δ 75 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ public boolean isSendSticonAsSticker(){
 SticonSpan[] tokens =editText.getText().getSpans(

    0, editText.getText().length(), SticonSpan.class); if(tokens.length == 1){ // 絵文字を表す文字列が1個だけ入力されてる場合
 if(tokens[0].getTemplateString().equals(editText.getText())){
 return true;
 }
 } // 絵文字が1個だけじゃない場合
 return false;
 }

76. ‣ ελϯϓͱͯ͠ૹΔ͔Ͳ͏͔൑ఆ͢Δ 76 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ public boolean isSendSticonAsSticker(){
 SticonSpan[] tokens =editText.getText().getSpans(

    0, editText.getText().length(), SticonSpan.class); if(tokens.length == 1){ // 絵文字を表す文字列が1個だけ入力されてる場合
 if(tokens[0].getTemplateString().equals(editText.getText())){
 return true;
 }
 } // 絵文字が1個だけじゃない場合
 return false;
 }

77. ‣ ελϯϓΛૹΔ 77 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ if (isSendSticonAsSticker()) { Editable t =

    editText.getText() SticonSpan[] spans = t.getSpans(0, t.length(), SticonSpan.class);
 // スタンプを生成して送信 Sticker sticker = new Sticker(spans[0].getSticonId());
 sendStamp(sticker); } else { // テキストメッセージ＆絵文字として送信 }

78. ‣ ελϯϓΛૹΔ 78 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ if (isSendSticonAsSticker()) { Editable t =

    editText.getText() SticonSpan[] spans = t.getSpans(0, t.length(), SticonSpan.class);
 // スタンプを生成して送信 Sticker sticker = new Sticker(spans[0].getSticonId());
 sendStamp(sticker); } else { // テキストメッセージ＆絵文字として送信 }

79. ‣ ελϯϓΛૹΔ 79 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ if (isSendSticonAsSticker()) { Editable t =

    editText.getText() SticonSpan[] spans = t.getSpans(0, t.length(), SticonSpan.class);
 // スタンプを生成して送信 Sticker sticker = new Sticker(spans[0].getSticonId());
 sendStamp(sticker); } else { // テキストメッセージ＆絵文字として送信 }

80. ‣ ελϯϓΛૹΔ 80 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ if (isSendSticonAsSticker()) { Editable t =

    editText.getText() SticonSpan[] spans = t.getSpans(0, t.length(), SticonSpan.class);
 // スタンプを生成して送信 Sticker sticker = new Sticker(spans[0].getSticonId());
 sendStamp(sticker); } else { // テキストメッセージ＆絵文字として送信 }

81. ‣ ͓͞Β͍ 81 ֆจࣈ1ݸ͚ͩͰૹΔͱελϯϓʹͳΔ

82. عو׏׋הֿ׹ 82

83. ‣ 㣐ꆀך窩俑㶵׾邌爙ׅ׷הأؙٗ٦ָؙٕؕאֻ
    ‣ 窩俑㶵ך؝ؾل׾ׅ׷ה俑㶵ָⴖ׸׷ 83 ϋϚͬͨͱ͜Ζ

84. ‣ 㣐ꆀך窩俑㶵׾邌爙ׅ׷הأؙٗ٦ָؙٕؕאֻ
    ‣ 窩俑㶵ך؝ؾل׾ׅ׷ה俑㶵ָⴖ׸׷ 84 ϋϚͬͨͱ͜Ζ

85. ‣ أؙٗ٦ٕךؙؕאֹכDBDIF㼪Ⰵד鍑寸
    ˖ -SV$BDIF
    ˖ 俑㶵؟؎ؤחさ׻ׇג窩俑㶵ך؟؎ؤ׮㢌⻉ׅ ׷ךדծLFZח俑㶵؟؎ؤ׮Ⰵ׸׷ 85 େྔͷֆจࣈΛදࣔ͢ΔͱεΫϩʔϧ͕ΧΫͭ͘

86. ‣ أؙٗ٦ٕךؙؕאֹכDBDIF㼪Ⰵד鍑寸 86 େྔͷֆจࣈΛදࣔ͢ΔͱεΫϩʔϧ͕ΧΫͭ͘ Before After

87. ‣ 㣐ꆀך窩俑㶵׾邌爙ׅ׷הأؙٗ٦ָؙٕؕאֻ
    ‣ 窩俑㶵ך؝ؾل׾ׅ׷ה俑㶵ָⴖ׸׷ 87 ϋϚͬͨͱ͜Ζ

88. ‣ ؝ؾلך眔㔲׾锃侭ׅ׷ٗآحؙ׾鷄⸇ׅ׷ 88 ֆจࣈͷίϐϖΛ͢Δͱจࣈ͕੾ΕΔ こんにちは 今日はいい天気ですね！ Copy こんにちは{{sticon(1,10)}} ׉ךתת׌הNVTUBDIFך鷿⚥דⴖ׸׷ こんにちは{{sticon(1,10)}}

    ؝ؾلך眔㔲׾NVTUBDIFך穄畭ח⠼לׅ

89. ‣ ؝ؾلך眔㔲׾锃侭ׅ׷ٗآحؙ׾鷄⸇ׅ׷ 89 ֆจࣈͷίϐϖΛ͢Δͱจࣈ͕੾ΕΔ こんにちは 今日はいい天気ですね！ Copy こんにちは{{sticon(1,10)}} ׉ךתת׌הNVTUBDIFך鷿⚥דⴖ׸׷ こんにちは{{sticon(1,10)}}

    ؝ؾلך眔㔲׾NVTUBDIFך穄畭ח⠼לׅ

90. ‣ ؝ؾلך眔㔲׾锃侭ׅ׷ٗآحؙ׾鷄⸇ׅ׷ 90 ֆจࣈͷίϐϖΛ͢Δͱจࣈ͕੾ΕΔ こんにちは 今日はいい天気ですね！ Copy こんにちは{{sticon(1,10)}} ׉ךתת׌הNVTUBDIFך鷿⚥דⴖ׸׷ こんにちは{{sticon(1,10)}}

    ؝ؾلך眔㔲׾NVTUBDIFך穄畭ח⠼לׅ

91. ‣ ؝ؾلך眔㔲׾锃侭ׅ׷ٗآحؙ׾鷄⸇ׅ׷ 91 ֆจࣈͷίϐϖΛ͢Δͱจࣈ͕੾ΕΔ こんにちは 今日はいい天気ですね！ Copy こんにちは{{sticon(1,10)}} ׉ךתת׌הNVTUBDIFך鷿⚥דⴖ׸׷ こんにちは{{sticon(1,10)}}

    ؝ؾلך眔㔲׾NVTUBDIFך穄畭ח⠼לׅ

92. תה׭ 92

93. ‣ 㹋鄲ך倯岀ָⴓַ׵זְ儗כ⿫罋חדֹ׷،فٔ׾ 䱱׃ג⹛⡲׾锃ץ׷
    ‣ 窩俑㶵ך邌爙חכ4QBOOBCMF4USJOHה䭁䓸׃׋ 4QBOؙٓأ׾⢪ֲ
    ‣ 邌爙♳窩俑㶵ח鋅ִ׷׌ֽדUFYUכ俑㶵⴨ָⰅ׏ג ְ׷ךדծ؝ؾلזו&EJU5FYUװ5FYU7JFXפךⳢ椚 כ岣䠐ׅ׷

    93 ·ͱΊ

94. Thank you Credit: NASA Earth Observatory/NOAA NGDC