vue.jsで漢字のふりがな自動変換を実装した話

vue.jsで漢字のふりがな自動変換を実装した話

Transcript

1. vue.jsで漢字のふりがな自動ม換を
   ࣮૷した話
   鈴木孝之
   

   View Slide

2. "HFOEB
   ࣗݾ঺հ
   ࣮ݱ͔ͨͬͨ͠࢓༷
   ࣮ࡍʹ࣮૷ͨ͠ߏ੒
   

   View Slide

3. ࣗݾ঺հɾձࣾ঺հ
   

   View Slide

4. Copyright Re:Build.inc All Rights Reserved.
   ࣗݾ঺հ
   1
   ◆໊લ
   ླ໦ ޹೭(Suzuki Takayuki)
   ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ
   ◆ࣗݾ঺հ
   ɾ1990೥ੜ·Εɻ
   ɾԭೄͰىۀͯ͠໿3೥ɻ
   ɾPHPΧϯϑΝϨϯεԭೄ࣮ߦҕһ௕ɺ
   ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ࣮ߦҕһ௕
   ◆झຯ
   ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ
   BDD(Ϗʔνۦಈ։ൃ)
   

   View Slide

5. Copyright Re:Build.inc All Rights Reserved.
   ࣗݾ঺հ
   1
   

   View Slide

6. Copyright Re:Build.inc All Rights Reserved.
   ձࣾ঺հ
   1
   ◆ձ໊ࣾ
   גࣜձࣾRe:Build
   ◆ॅॴ
   ԭೄݝಹ೼ࢢٱໜ஍2-2-2 λΠϜεϏϧ
   ◆ࣄۀ಺༰
   ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ
   ɾडୗ։ൃ
   ◆ࣾһ
   10໊
   ◆ΤϯδχΞͷಇ͖ํ
   ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
   

   View Slide

7. Copyright Re:Build.inc All Rights Reserved.
   7
   ɾαʔϏε໊
   Tadoru

   https://tadoru.work/

   

   ɾγεςϜ֓ཁ
   ΤϯδχΞಛԽܕͷ
   ϦϑΝϥϧ
   Ϋϥ΢υιʔγϯά
   1 ձࣾ঺հ
   

   View Slide

8. Copyright Re:Build.inc All Rights Reserved.
   8
   ɾαʔϏε໊
   Re:Build Boot Camp

   https://rebuild-bootcamp.jp/

   

   ɾ֓ཁ
   ԭೄͱٶ࡚Ͱʮ࣮຿ϨϕϧʯΛ໨
   ࢦ͢ํ޲͚ͷϓϩάϥϛϯάε
   Ϋʔϧ
   ɾ࢖͏ٕज़
   LaravelɺVue.jsͳͲ
   1 ձࣾ঺հ
   

   View Slide

9. ࣮ݱ͔ͨͬͨ͠࢓༷
   

   View Slide

10. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ
    
    

    View Slide

11. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ
    
    ɾ׽ࣈͰೖྗͨ͠ࡍʹࣗಈͰ;Γ͕ͳ ม׵͢Δ
    ɾม׵͢Δࡍͷਫ਼౓͸ߴ͍΋ͷ͕ٻΊΒΕ͍ͯͨ
    ɾม׵εϐʔυ΋0.5ඵҎ্ΛٻΊΒΕ͍ͯͨ
    

    View Slide

12. ࣮ݱ͔ͨͬͨ͠࢓༷ ྫ
    
    ཁ๬͕ࡉ͔ͯ͘ɺͳ͔ͳ͔
    ࣮૷͕೉͍͠…
    

    View Slide

13. ࣮ࡍʹ࣮૷ͨ͠ߏ੒
    

    View Slide

14. ࠷ॳʹ࢖ͬͨϥΠϒϥϦ
    vue-autokana-sample
    vue.jsͰࣗಈͰ;Γ͕ͳΛೖྗ͢Δ
    ͨΊͷαϯϓϧʹͳΓ·͢ɻ
    ར༻ϥΠϒϥϦ͸ɺʮterrierscript/
    historykanaʯʹͳΓ·͢ɻ
    https://github.com/idani/vue-autokana-sample
    

    View Slide

15. ໰୊఺
    ɾม׵଎౓͸଎͍
    ɾ͚ΕͲɺม׵ͷਫ਼౓͸͋·Γߴ͘ͳ͍ɻ
    ɾ͜ΕͰ͸ɺਫ਼౓௿͍ͱ͓٬͞Μʹ٫Լ͞Εͨɻ
    

    View Slide

16. ࣍ʹ࣮૷ͨ͠ํ๏ɹkuromoji.jsͰܗଶૉղੳ
    https://github.com/takuyaa/kuromoji.js/
    

    View Slide

17. kuromori.js
    ࣙॻݕࡧ
    ׽ࣈΛܗଶૉղੳ
    ͻΒ͕ͳม׵
    ϩδοΫ
    ΧλΧφΛͻΒ͕ͳʹ
    ม׵ͯ͠දࣔ͢Δ
    גࣜձࣾϦϏϧυ
    ࣍ʹ࣮૷ͨ͠ํ๏ɹkuromoji.jsͰܗଶૉղੳ
    

    View Slide

18. ໰୊఺
    ɾม׵଎౓͸஗͍ɻม׵ʹ1.5ඵ΄Ͳ͔͔Δɻ
    ɾม׵ͷਫ਼౓͸͔ͳΓߴ͍ɻ
    ɾ͜ΕͰ͸ɺ଎౓͕஗͍ͱ͓٬͞Μʹ٫Լ͞Εͨɻ
    

    View Slide

19. Yahoo ϧϏৼΓ
    API
    גࣜձࣾϦϏϧυ
    ׽ࣈΛ͔ͳม׵
    https://developer.yahoo.co.jp/webapi/jlp/furigana/v1/furigana.html
    ࣍ʹ࣮૷ͨ͠ํ๏ɹYahoo API
    

    View Slide

20. ໰୊఺
    ɾม׵଎౓͸଎͍ɻ
    ɾม׵ͷਫ਼౓͸ߴ͍ɻ
    ɾ঎༻ར༻ͩͱYahooଆʹ՝ۚͷਃ੥͕ඞཁɻ
    ɾ͜ΕͰ͸ɺ͓͕͔͔ۚΔͱɺ͓٬͞Μʹ٫Լ͞Εͨɻ
    

    View Slide

21. ɾແྉͰ׽ࣈͷม׵ͷ଎౓΋ਫ਼౓Λߴ͘͢Δͷ͸
    ೉͔ͬͨ͠…ʂ
    ୭͔ྑ͍΍Γํ͋ͬͨΒɺڭ͍͑ͯͩ͘͞ʂʂʂ
    ·ͱΊ
    

    View Slide