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

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

yto (60°)
September 29, 2023
460

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

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

yto (60°)

September 29, 2023
Tweet

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