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 (Ϣτ)
2. Profile yto (Ϣτ) pixivࣄۀຊ෦ খઆϚϯΨඦՊ෦ 2021೥৽ଔೖࣾͷϑϩϯτΤϯυ
 ΤϯδχΞɾͨ·ʹ PdM pixivখઆͷ։ൃΛ͍ͯ͠·͢ ޷͖ͳখઆՈ͸ถᖒึ৴͞ΜͰ͢
3. ࠓ೔࿩͢͜ͱ
4. pixivখઆͷ ʮӾཡҐஔͷอଘʯػೳ
5. pixivখઆ pixiv಺ͷখઆ౤ߘɾӾཡػೳ
6. pixivখઆ pixiv಺ͷখઆ౤ߘɾӾཡػೳ ݄ؒ࡞඼Ӿཡ਺ɿ໿7.1ԯ / ݄ ྦྷܭ౤ߘ࡞඼਺ɿ໿1900ສ࡞඼ ྦྷܭ౤ߘจࣈ਺ɿ໿1000ԯจࣈ (2023೥7݄࣌఺)
7. pixivখઆͷಛ௃
8. 1.৽ணҰཡɺ࢖ΘΕ͕ͪ
9. ಛ௃1: ৽ணҰཡɺ࢖ΘΕ͕ͪ λά৽ண ϑΥϩʔ৽ண
10. ಛ௃1: ৽ணҰཡɺ࢖ΘΕ͕ͪ • ேى͖ͨΒϑΥϩʔ৽ணΛ։͍ͯɺ৽͘͠૿͑ͨখઆ Λશ෦ಡΉ • ޷͖ͳδϟϯϧͷλάͷݕࡧ݁ՌΛຖ೔ݟͯɺ৽͘͠ ૿͑ͨখઆΛશ෦ಡΉ ྫ
11. ಛ௃1: ৽ணҰཡɺ࢖ΘΕ͕ͪ • ேى͖ͨΒϑΥϩʔ৽ணΛ։͍ͯɺ৽͘͠૿͑ͨখઆ Λશ෦ಡΉ • ޷͖ͳδϟϯϧͷλάͷݕࡧ݁ՌΛຖ೔ݟͯɺ৽͘͠ ૿͑ͨখઆΛશ෦ಡΉ ྫ ҰཡͰͲͷখઆΛಡΜͩ ͜ͱ͕͋Δ͔ɺҰ໨Ͱ 
 ෼͔Δͱ͍͍ͳ͋
12. 2. ௕จখઆɺॻ͔Ε͕ͪ
13. ಛ௃2: ௕จখઆɺॻ͔Ε͕ͪ • ౤ߘ࡞඼ͷ50%ఔ౓͕4000จࣈҎ ্ɺ20%ఔ౓͕1ສจࣈҎ্ ෳ਺ϖʔδͷখઆ
14. ෳ਺ϖʔδͷখઆ • ౤ߘ࡞඼ͷ50%ఔ౓͕4000จࣈҎ ্ɺ20%ఔ౓͕1ສจࣈҎ্ ಛ௃2: ௕จখઆɺॻ͔Ε͕ͪ ్த·ͰಡΜͩখઆɺ લճಡΈऴΘͬͨҐஔ ͔ΒಡΈ͍ͨͳ͋
15. ͦΜͳئ͍Λ׎͑Δͷ͕
16. pixivখઆͷ ʮӾཡҐஔͷอଘʯػೳ
17. • খઆΛͲ͜·ͰಡΜ͔ͩΛ ࣗಈతʹอଘ ʮӾཡҐஔͷอଘʯػೳ 
    ϦϦʔεʂ • Ұཡܥը໘ͷαϜωΠϧͰɺ ಡΜׂͩ߹Λදࣔ • ಡΈ్தͷ࡞඼Λ։͍ͨΒɺ લճಡΜͩҐஔ΁Ҡಈ
18. ࿩͢͜ͱ • ϦϦʔε·Ͱͷ՝୊ͱͦͷղܾ • ϦϦʔεޙͷ൓ԠͱϢʔβʔߦಈͷมԽ • ࠓޙͷల๬
19. ϦϦʔε·Ͱͷ՝୊
20. 1.ʮಡΜͩҐஔʯΛ ͲͷΑ͏ʹܭଌ͢Δ͔ʁ ϒϥ΢β্Ͱ
21. ԿΛܭଌ͢Δ͔ʁ খઆͷʮಡΜͩҐஔʯͱ͸ʁ • ϖʔδ਺ʁ … ࣮૷͸ָ͕ͩɺϖʔδ୯ҐͰ͔͠อଘͰ͖ͳ͍ • ߦ਺ʁ … ୺຤ɾը໘෯ʹΑͬͯ஋͕มΘΔ • εΫϩʔϧྔʁ … ୺຤ɾը໘෯ʹΑͬͯ஋͕มΘΔ • จࣈ਺ʁ … ͜ΕΛ࠾༻
22. ಡΜͩจࣈ਺Λϒϥ΢β্Ͱܭଌ͢Δ ࠓϒϥ΢βʹදࣔ͞Ε͍ͯΔͷ͸͜ͷখઆͷԿจࣈ໨ͳͷ ͔ʁɹΛ஌Δඞཁ͕͋Δ Կจࣈ໨ʁ
23. ಡΜͩจࣈ਺Λϒϥ΢β্Ͱܭଌ͢Δ 1. ຊจͷύʔεɾϨϯμϦϯά࣌ʹɺ֤ཁૉ·Ͱͷจࣈ਺Λ Χ΢ϯτͯ͠ DOM ʹೖΕ͓ͯ͘
24. ಡΜͩจࣈ਺Λϒϥ΢β্Ͱܭଌ͢Δ 2. ຊจͷඳըޙɺ֤ཁૉʹ͍ͭͯҎԼΛܭࢉͨ͠഑ྻΛ͓࣋ͬͯ͘ • 1. Ͱܭଌͨ͠จࣈ਺ • ϖʔδ಺Ͱͷ࠲ඪʢεΫϩʔϧҐஔʣ export const createTextNodes = (selectors: NodeListOf<Element>) => [...selectors].map(node => ({ // 1. で計測した文字数: DOM に持たせてある数字を読む readingProgress: Number(node.getAttribute('data-textcount')), // ページ内での座標: スクロール領域 (=window) の上端を0としたとき、本文ノードの上 端の座標を計算 offsetTop: window.scrollY + node.getBoundingClientRect().top }))
25. ಡΜͩจࣈ਺Λϒϥ΢β্Ͱܭଌ͢Δ 3. ͦͷ࣌఺ͰͷεΫϩʔϧྔ (window.scrollY) ͱ 2. ͷ഑ྻ Λ࢖ͬͯɺͲͷจࣈ਺·ͰಡΜ͔ͩΛܭࢉ จࣈ໨ʂ
26. Ͱ͖ͨ 🎉 σϞಈը͸ͪ͜Β
27. 2. ʮಡΜͩҐஔʯΛ
 ͲͷΑ͏ʹอଘ͢Δ͔ʁ
28. ͱʹ͔͘๲େͳσʔλྔͱϦΫΤετྔ • Ϣʔβʔ͕খઆ࡞඼ΛӾཡ͢Δ౓ʹϨίʔυ͕௥Ճ͞ΕΔ
 … ໿7.1ԯ/݄ • ݕࡧ݁Ռɾখઆৄࡉͷؔ࿈࡞඼ͳͲɺ͋ΒΏ ΔҰཡܥը໘Ͱऔಘ͞ΕΔ
 … Ӿཡ਺ͱಉఔ౓ͷΦʔμʔ
29. ͲͷΑ͏ʹอଘ͢Δ͔ • 🤔 Ͳ͜ʹอଘ͢Δʁ
 ΦϯϓϨDB (ScyllaDB or Cassandra)ʁɹΫϥ΢υ DB (GCP BigTable)ʁɹϢʔ βʔͷϩʔΧϧ୺຤ (indexedDB)ʁ • 💰 Ϋϥ΢υΛ࢖͏৔߹ͷίετ͸ʁ
 → GCP BigTable Λ࢖͍ɺ࣮ࡍͷϢʔβʔϦΫΤετʹΑ ΔίετݕূɾվળΛ࣮ࢪ
30. ͲͷΑ͏ʹอଘ͢Δ͔ʢิ଍ʣ 1. ϢʔβʔͷϩʔΧϧ୺຤ (indexedDB)
 … 1stϦϦʔε͸ͪ͜ΒͰग़͢͜ͱʹͨ͠ 2. Ϋϥ΢υ DB (GCP BigTable)
 … ϦϦʔεޙͷ࢖ΘΕํɾ൓ԠΛݟͭͭɺ
 ɹɹɹ͍ͭɾͲͷΑ͏ʹग़͔͢ΛվΊͯݕ౼͍ͯ͘͠
31. 2023/6/29 ϦϦʔε 🎉
32. ϦϦʔεޙͷ൓ԠͱมԽ
33. ϦϦʔεޙͷ൓Ԡ
34. تͼͷ੠ • ʮͲ͜·ͰಡΜ͔ͩόʔ෼͔Δطಡػೳɺͣͬͱ͜Ε͕ཉ͔ͬ͠ ͨʂʯ • ʮ଴ͪ๬ΜͰ͍ͨػೳ͕ʂʯ • ʮҰճดͯ͡͠·ͬͯ։͖௚ͨ͠ΒલճಡΜͩ৔ॴʹҠಈͯ͘͠Ε ͯ༏लʯ • ʮલճಡΜͩҐஔ͔Βදࣔͯ͘͠ΕΔػೳΊͬͪΌศརʯ
35. • 💬 ࠷ޙʹಡΜͩҐஔ·ͰҠಈͯ͠΄͘͠ͳ͍͜ͱ΋͋Δ
 → ϑΟʔυόοΫΛड͚ɺʮઌ಄ʹ໭ΔʯϘλϯΛ௥Ճ • 💬 ੨͍όʔ͕ؾʹͳΔɺअຐ
 → ΦϓτΞ΢τઃఆΛ࢖ͬͯ΋Β͏Α͏ʹҊ಺ ҰํͰɺվળ఺΋
36. ϢʔβʔߦಈͷมԽ
37. ಡॻ։࢝ɾಡྃ਺ ಡྃ཰͕ 0.5% ఔ౓্ঢ ର৅܈ʢ੨ʣɾඇର৅܈ʢ྘ʣͷ50%ͣͭʹ෼͚ͯɺ1ϲ݄ఔ౓ͷA/BςετΛ࣮ࢪ ʮຊ౰ʹಡΈ͍ͨখઆʯΛ ݟ͚ͭ΍͘͢ͳ͍ͬͯΔʂ
38. ࠓޙͷల๬
39. ·ͩ·ͩ։ൃத 💪 • web͚ͩͰͳ͘ΞϓϦʹ΋ಉ͡ػೳΛ͚ͭΔ • ϚϯΨ࡞඼Ͱ΋ಡΜͩҐஔΛอଘͰ͖ΔΑ͏ʹ • σʔλͷαʔόʔอଘɾ୺຤ؒಉظ ࠓޙ΍Γ͍ͨ͜ͱ
40. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ pixivΛ࠷ڧͷখઆ౤ߘαΠτʹ͍ͨ͠ ΤϯδχΞΛืू͍ͯ͠·͢ʂ