$30 off During Our Annual Pro Sale. View Details »

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

Takayuki
PRO
September 17, 2021

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

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

Takayuki
PRO

September 17, 2021
Tweet

More Decks by Takayuki

Other Decks in Programming

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