pixiv小説の閲覧体験を大きく変える！ 「閲覧位置の保存」機能の開発とその後 / Development of the pixiv novels reading progress feature and beyond

どの作品をどこまで読んだかをユーザーごとに保存する「閲覧位置の保存」機能の開発にあたり、読んだ位置をブラウザ上でどのように計算するかなど、様々な課題がありました。 リリースまでの道のりと、その後のユーザー行動の変化についてお話しします。
2023/9/29 pixiv MEETUP 2023 にて発表 https://conference.pixiv.co.jp/2023/meetup

Transcript

1. pixiv.inc
   pixivখઆͷӾཡମݧΛ
   େ͖͘ม͑Δʂ

   ʮӾཡҐஔͷอଘʯػೳͷ։ൃͱͦͷޙ
   yto (Ϣτ)
   

   View Slide

2. Profile
   yto (Ϣτ)
   pixivࣄۀຊ෦
   খઆϚϯΨඦՊ෦
   2021೥৽ଔೖࣾͷϑϩϯτΤϯυ

   ΤϯδχΞɾͨ·ʹ PdM
   pixivখઆͷ։ൃΛ͍ͯ͠·͢
   ޷͖ͳখઆՈ͸ถᖒึ৴͞ΜͰ͢
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   

   View Slide

4. pixivখઆͷ
   ʮӾཡҐஔͷอଘʯػೳ
   

   View Slide

5. pixivখઆ
   pixiv಺ͷখઆ౤ߘɾӾཡػೳ
   

   View Slide

6. pixivখઆ
   pixiv಺ͷখઆ౤ߘɾӾཡػೳ
   ݄ؒ࡞඼Ӿཡ਺ɿ໿7.1ԯ / ݄
   
   
   ྦྷܭ౤ߘ࡞඼਺ɿ໿1900ສ࡞඼
   
   
   ྦྷܭ౤ߘจࣈ਺ɿ໿1000ԯจࣈ
   
   
   (2023೥7݄࣌఺)
   

   View Slide

7. pixivখઆͷಛ௃
   

   View Slide

8. 1.৽ணҰཡɺ࢖ΘΕ͕ͪ
   

   View Slide

9. ಛ௃1: ৽ணҰཡɺ࢖ΘΕ͕ͪ
   λά৽ண ϑΥϩʔ৽ண
   

   View Slide

10. ಛ௃1: ৽ணҰཡɺ࢖ΘΕ͕ͪ
    ● ேى͖ͨΒϑΥϩʔ৽ணΛ։͍ͯɺ৽͘͠૿͑ͨখઆ
    Λશ෦ಡΉ
    ● ޷͖ͳδϟϯϧͷλάͷݕࡧ݁ՌΛຖ೔ݟͯɺ৽͘͠
    ૿͑ͨখઆΛશ෦ಡΉ
    ྫ
    

    View Slide

11. ಛ௃1: ৽ணҰཡɺ࢖ΘΕ͕ͪ
    ● ேى͖ͨΒϑΥϩʔ৽ணΛ։͍ͯɺ৽͘͠૿͑ͨখઆ
    Λશ෦ಡΉ
    ● ޷͖ͳδϟϯϧͷλάͷݕࡧ݁ՌΛຖ೔ݟͯɺ৽͘͠
    ૿͑ͨখઆΛશ෦ಡΉ
    ྫ
    ҰཡͰͲͷখઆΛಡΜͩ
    ͜ͱ͕͋Δ͔ɺҰ໨Ͱ
    

    ෼͔Δͱ͍͍ͳ͋
    

    View Slide

12. 2. ௕จখઆɺॻ͔Ε͕ͪ
    

    View Slide

13. ಛ௃2: ௕จখઆɺॻ͔Ε͕ͪ
    ● ౤ߘ࡞඼ͷ50%ఔ౓͕4000จࣈҎ
    ্ɺ20%ఔ౓͕1ສจࣈҎ্
    ෳ਺ϖʔδͷখઆ
    

    View Slide

14. ෳ਺ϖʔδͷখઆ
    ● ౤ߘ࡞඼ͷ50%ఔ౓͕4000จࣈҎ
    ্ɺ20%ఔ౓͕1ສจࣈҎ্
    ಛ௃2: ௕จখઆɺॻ͔Ε͕ͪ
    ్த·ͰಡΜͩখઆɺ
    લճಡΈऴΘͬͨҐஔ
    
    
    ͔ΒಡΈ͍ͨͳ͋
    

    View Slide

15. ͦΜͳئ͍Λ׎͑Δͷ͕
    

    View Slide

16. pixivখઆͷ
    ʮӾཡҐஔͷอଘʯػೳ
    

    View Slide

17. ● খઆΛͲ͜·ͰಡΜ͔ͩΛ
    ࣗಈతʹอଘ
    ʮӾཡҐஔͷอଘʯػೳ
    ϦϦʔεʂ
    ● Ұཡܥը໘ͷαϜωΠϧͰɺ
    ಡΜׂͩ߹Λදࣔ
    ● ಡΈ్தͷ࡞඼Λ։͍ͨΒɺ
    લճಡΜͩҐஔ΁Ҡಈ
    

    View Slide

18. ࿩͢͜ͱ
    ● ϦϦʔε·Ͱͷ՝୊ͱͦͷղܾ
    ● ϦϦʔεޙͷ൓ԠͱϢʔβʔߦಈͷมԽ
    ● ࠓޙͷల๬
    

    View Slide

19. ϦϦʔε·Ͱͷ՝୊
    

    View Slide

20. 1.ʮಡΜͩҐஔʯΛ
    ͲͷΑ͏ʹܭଌ͢Δ͔ʁ
    ϒϥ΢β্Ͱ
    

    View Slide

21. ԿΛܭଌ͢Δ͔ʁ
    খઆͷʮಡΜͩҐஔʯͱ͸ʁ
    ● ϖʔδ਺ʁ … ࣮૷͸ָ͕ͩɺϖʔδ୯ҐͰ͔͠อଘͰ͖ͳ͍
    ● ߦ਺ʁ … ୺຤ɾը໘෯ʹΑͬͯ஋͕มΘΔ
    ● εΫϩʔϧྔʁ … ୺຤ɾը໘෯ʹΑͬͯ஋͕มΘΔ
    ● จࣈ਺ʁ … ͜ΕΛ࠾༻
    

    View Slide

22. ಡΜͩจࣈ਺Λϒϥ΢β্Ͱܭଌ͢Δ
    ࠓϒϥ΢βʹදࣔ͞Ε͍ͯΔͷ͸͜ͷখઆͷԿจࣈ໨ͳͷ
    ͔ʁɹΛ஌Δඞཁ͕͋Δ
    Կจࣈ໨ʁ
    

    View Slide

23. ಡΜͩจࣈ਺Λϒϥ΢β্Ͱܭଌ͢Δ
    1. ຊจͷύʔεɾϨϯμϦϯά࣌ʹɺ֤ཁૉ·Ͱͷจࣈ਺Λ
    Χ΢ϯτͯ͠ DOM ʹೖΕ͓ͯ͘
    

    View Slide

24. ಡΜͩจࣈ਺Λϒϥ΢β্Ͱܭଌ͢Δ
    2. ຊจͷඳըޙɺ֤ཁૉʹ͍ͭͯҎԼΛܭࢉͨ͠഑ྻΛ͓࣋ͬͯ͘
    ● 1. Ͱܭଌͨ͠จࣈ਺
    ● ϖʔδ಺Ͱͷ࠲ඪʢεΫϩʔϧҐஔʣ
    export const createTextNodes = (selectors: NodeListOf) =>
    
    
    [...selectors].map(node => ({
    
    
    // 1. で計測した文字数: DOM に持たせてある数字を読む
    
    
    readingProgress: Number(node.getAttribute('data-textcount')),
    
    
    // ページ内での座標: スクロール領域 (=window) の上端を0としたとき、本文ノードの上
    端の座標を計算
    
    
    offsetTop: window.scrollY + node.getBoundingClientRect().top
    
    
    }))
    

    View Slide

25. ಡΜͩจࣈ਺Λϒϥ΢β্Ͱܭଌ͢Δ
    3. ͦͷ࣌఺ͰͷεΫϩʔϧྔ (window.scrollY) ͱ 2. ͷ഑ྻ
    Λ࢖ͬͯɺͲͷจࣈ਺·ͰಡΜ͔ͩΛܭࢉ
    จࣈ໨ʂ
    

    View Slide

26. Ͱ͖ͨ 🎉
    σϞಈը͸ͪ͜Β
    

    View Slide

27. 2. ʮಡΜͩҐஔʯΛ

    ͲͷΑ͏ʹอଘ͢Δ͔ʁ
    

    View Slide

28. ͱʹ͔͘๲େͳσʔλྔͱϦΫΤετྔ
    ● Ϣʔβʔ͕খઆ࡞඼ΛӾཡ͢Δ౓ʹϨίʔυ͕௥Ճ͞ΕΔ

    … ໿7.1ԯ/݄
    ● ݕࡧ݁Ռɾখઆৄࡉͷؔ࿈࡞඼ͳͲɺ͋ΒΏ
    ΔҰཡܥը໘Ͱऔಘ͞ΕΔ

    … Ӿཡ਺ͱಉఔ౓ͷΦʔμʔ
    

    View Slide

29. ͲͷΑ͏ʹอଘ͢Δ͔
    ● 🤔 Ͳ͜ʹอଘ͢Δʁ

    ΦϯϓϨDB (ScyllaDB or Cassandra)ʁɹΫϥ΢υ DB (GCP BigTable)ʁɹϢʔ
    βʔͷϩʔΧϧ୺຤ (indexedDB)ʁ
    ● 💰 Ϋϥ΢υΛ࢖͏৔߹ͷίετ͸ʁ

    → GCP BigTable Λ࢖͍ɺ࣮ࡍͷϢʔβʔϦΫΤετʹΑ
    ΔίετݕূɾվળΛ࣮ࢪ
    

    View Slide

30. ͲͷΑ͏ʹอଘ͢Δ͔ʢิ଍ʣ
    1. ϢʔβʔͷϩʔΧϧ୺຤ (indexedDB)

    … 1stϦϦʔε͸ͪ͜ΒͰग़͢͜ͱʹͨ͠
    2. Ϋϥ΢υ DB (GCP BigTable)

    … ϦϦʔεޙͷ࢖ΘΕํɾ൓ԠΛݟͭͭɺ

    ɹɹɹ͍ͭɾͲͷΑ͏ʹग़͔͢ΛվΊͯݕ౼͍ͯ͘͠
    

    View Slide

31. 2023/6/29 ϦϦʔε 🎉
    

    View Slide

32. ϦϦʔεޙͷ൓ԠͱมԽ
    

    View Slide

33. ϦϦʔεޙͷ൓Ԡ
    

    View Slide

34. تͼͷ੠
    ● ʮͲ͜·ͰಡΜ͔ͩόʔ෼͔Δطಡػೳɺͣͬͱ͜Ε͕ཉ͔ͬ͠
    ͨʂʯ
    ● ʮ଴ͪ๬ΜͰ͍ͨػೳ͕ʂʯ
    ● ʮҰճดͯ͡͠·ͬͯ։͖௚ͨ͠ΒલճಡΜͩ৔ॴʹҠಈͯ͘͠Ε
    ͯ༏लʯ
    ● ʮલճಡΜͩҐஔ͔Βදࣔͯ͘͠ΕΔػೳΊͬͪΌศརʯ
    

    View Slide

35. ● 💬 ࠷ޙʹಡΜͩҐஔ·ͰҠಈͯ͠΄͘͠ͳ͍͜ͱ΋͋Δ

    → ϑΟʔυόοΫΛड͚ɺʮઌ಄ʹ໭ΔʯϘλϯΛ௥Ճ
    ● 💬 ੨͍όʔ͕ؾʹͳΔɺअຐ

    → ΦϓτΞ΢τઃఆΛ࢖ͬͯ΋Β͏Α͏ʹҊ಺
    ҰํͰɺվળ఺΋
    

    View Slide

36. ϢʔβʔߦಈͷมԽ
    

    View Slide

37. ಡॻ։࢝ɾಡྃ਺
    ಡྃ཰͕ 0.5% ఔ౓্ঢ
    ର৅܈ʢ੨ʣɾඇର৅܈ʢ྘ʣͷ50%ͣͭʹ෼͚ͯɺ1ϲ݄ఔ౓ͷA/BςετΛ࣮ࢪ
    ʮຊ౰ʹಡΈ͍ͨখઆʯΛ
    
    
    ݟ͚ͭ΍͘͢ͳ͍ͬͯΔʂ
    

    View Slide

38. ࠓޙͷల๬
    

    View Slide

39. ·ͩ·ͩ։ൃத 💪
    ● web͚ͩͰͳ͘ΞϓϦʹ΋ಉ͡ػೳΛ͚ͭΔ
    ● ϚϯΨ࡞඼Ͱ΋ಡΜͩҐஔΛอଘͰ͖ΔΑ͏ʹ
    ● σʔλͷαʔόʔอଘɾ୺຤ؒಉظ
    ࠓޙ΍Γ͍ͨ͜ͱ
    

    View Slide

40. ͝ਗ਼ௌ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠
    pixivΛ࠷ڧͷখઆ౤ߘαΠτʹ͍ͨ͠
    ΤϯδχΞΛืू͍ͯ͠·͢ʂ
    

    View Slide