どの作品をどこまで読んだかをユーザーごとに保存する「閲覧位置の保存」機能の開発にあたり、読んだ位置をブラウザ上でどのように計算するかなど、様々な課題がありました。 リリースまでの道のりと、その後のユーザー行動の変化についてお話しします。 2023/9/29 pixiv MEETUP 2023 にて発表 https://conference.pixiv.co.jp/2023/meetup
pixiv.incpixivখઆͷӾཡମݧΛେ͖͘ม͑Δʂ ʮӾཡҐஔͷอଘʯػೳͷ։ൃͱͦͷޙyto (Ϣτ)
View Slide
Profileyto (Ϣτ)pixivࣄۀຊ෦খઆϚϯΨඦՊ෦2021৽ଔೖࣾͷϑϩϯτΤϯυ ΤϯδχΞɾͨ·ʹ PdMpixivখઆͷ։ൃΛ͍ͯ͠·͖͢ͳখઆՈถᖒึ৴͞ΜͰ͢
ࠓ͢͜ͱ
pixivখઆͷʮӾཡҐஔͷอଘʯػೳ
pixivখઆpixivͷখઆߘɾӾཡػೳ
pixivখઆpixivͷখઆߘɾӾཡػೳ݄ؒ࡞Ӿཡɿ7.1ԯ / ݄ྦྷܭߘ࡞ɿ1900ສ࡞ྦྷܭߘจࣈɿ1000ԯจࣈ(20237݄࣌)
pixivখઆͷಛ
1.৽ணҰཡɺΘΕ͕ͪ
ಛ1: ৽ணҰཡɺΘΕ͕ͪλά৽ண ϑΥϩʔ৽ண
ಛ1: ৽ணҰཡɺΘΕ͕ͪ● ேى͖ͨΒϑΥϩʔ৽ணΛ։͍ͯɺ৽͘͠૿͑ͨখઆΛશ෦ಡΉ● ͖ͳδϟϯϧͷλάͷݕࡧ݁ՌΛຖݟͯɺ৽͘͠૿͑ͨখઆΛશ෦ಡΉྫ
ಛ1: ৽ணҰཡɺΘΕ͕ͪ● ேى͖ͨΒϑΥϩʔ৽ணΛ։͍ͯɺ৽͘͠૿͑ͨখઆΛશ෦ಡΉ● ͖ͳδϟϯϧͷλάͷݕࡧ݁ՌΛຖݟͯɺ৽͘͠૿͑ͨখઆΛશ෦ಡΉྫҰཡͰͲͷখઆΛಡΜͩ͜ͱ͕͋Δ͔ɺҰͰ ͔Δͱ͍͍ͳ͋
2. จখઆɺॻ͔Ε͕ͪ
ಛ2: จখઆɺॻ͔Ε͕ͪ● ߘ࡞ͷ50%ఔ͕4000จࣈҎ্ɺ20%ఔ͕1ສจࣈҎ্ෳϖʔδͷখઆ
ෳϖʔδͷখઆ● ߘ࡞ͷ50%ఔ͕4000จࣈҎ্ɺ20%ఔ͕1ສจࣈҎ্ಛ2: จখઆɺॻ͔Ε్͕ͪத·ͰಡΜͩখઆɺલճಡΈऴΘͬͨҐஔ͔ΒಡΈ͍ͨͳ͋
ͦΜͳئ͍Λ͑Δͷ͕
● খઆΛͲ͜·ͰಡΜ͔ͩΛࣗಈతʹอଘʮӾཡҐஔͷอଘʯػೳ ϦϦʔεʂ● Ұཡܥը໘ͷαϜωΠϧͰɺಡΜׂͩ߹Λදࣔ● ಡΈ్தͷ࡞Λ։͍ͨΒɺલճಡΜͩҐஔҠಈ
͢͜ͱ● ϦϦʔε·Ͱͷ՝ͱͦͷղܾ● ϦϦʔεޙͷԠͱϢʔβʔߦಈͷมԽ● ࠓޙͷల
ϦϦʔε·Ͱͷ՝
1.ʮಡΜͩҐஔʯΛͲͷΑ͏ʹܭଌ͢Δ͔ʁϒϥβ্Ͱ
ԿΛܭଌ͢Δ͔ʁখઆͷʮಡΜͩҐஔʯͱʁ● ϖʔδʁ … ָ࣮͕ͩɺϖʔδ୯ҐͰ͔͠อଘͰ͖ͳ͍● ߦʁ … ɾը໘෯ʹΑ͕ͬͯมΘΔ● εΫϩʔϧྔʁ … ɾը໘෯ʹΑ͕ͬͯมΘΔ● จࣈʁ … ͜ΕΛ࠾༻
ಡΜͩจࣈΛϒϥβ্Ͱܭଌ͢Δࠓϒϥβʹදࣔ͞Ε͍ͯΔͷ͜ͷখઆͷԿจࣈͳͷ͔ʁɹΛΔඞཁ͕͋ΔԿจࣈʁ
ಡΜͩจࣈΛϒϥβ্Ͱܭଌ͢Δ1. ຊจͷύʔεɾϨϯμϦϯά࣌ʹɺ֤ཁૉ·ͰͷจࣈΛΧϯτͯ͠ DOM ʹೖΕ͓ͯ͘
ಡΜͩจࣈΛϒϥβ্Ͱܭଌ͢Δ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}))
ಡΜͩจࣈΛϒϥβ্Ͱܭଌ͢Δ3. ͦͷ࣌ͰͷεΫϩʔϧྔ (window.scrollY) ͱ 2. ͷྻΛͬͯɺͲͷจࣈ·ͰಡΜ͔ͩΛܭࢉจࣈʂ
Ͱ͖ͨ 🎉σϞಈըͪ͜Β
2. ʮಡΜͩҐஔʯΛ ͲͷΑ͏ʹอଘ͢Δ͔ʁ
ͱʹ͔͘େͳσʔλྔͱϦΫΤετྔ● Ϣʔβʔ͕খઆ࡞ΛӾཡ͢ΔʹϨίʔυ͕Ճ͞ΕΔ … 7.1ԯ/݄● ݕࡧ݁Ռɾখઆৄࡉͷؔ࿈࡞ͳͲɺ͋ΒΏΔҰཡܥը໘Ͱऔಘ͞ΕΔ … ӾཡͱಉఔͷΦʔμʔ
ͲͷΑ͏ʹอଘ͢Δ͔● 🤔 Ͳ͜ʹอଘ͢Δʁ ΦϯϓϨDB (ScyllaDB or Cassandra)ʁɹΫϥυ DB (GCP BigTable)ʁɹϢʔβʔͷϩʔΧϧ (indexedDB)ʁ● 💰 ΫϥυΛ͏߹ͷίετʁ → GCP BigTable Λ͍ɺ࣮ࡍͷϢʔβʔϦΫΤετʹΑΔίετݕূɾվળΛ࣮ࢪ
ͲͷΑ͏ʹอଘ͢Δ͔ʢิʣ1. ϢʔβʔͷϩʔΧϧ (indexedDB) … 1stϦϦʔεͪ͜ΒͰग़͢͜ͱʹͨ͠2. Ϋϥυ DB (GCP BigTable) … ϦϦʔεޙͷΘΕํɾԠΛݟͭͭɺ ɹɹɹ͍ͭɾͲͷΑ͏ʹग़͔͢ΛվΊͯݕ౼͍ͯ͘͠
2023/6/29 ϦϦʔε 🎉
ϦϦʔεޙͷԠͱมԽ
ϦϦʔεޙͷԠ
تͼͷ● ʮͲ͜·ͰಡΜ͔ͩόʔ͔Δطಡػೳɺͣͬͱ͜Ε͕ཉ͔ͬͨ͠ʂʯ● ʮͪΜͰ͍ͨػೳ͕ʂʯ● ʮҰճดͯ͡͠·ͬͯ։͖ͨ͠ΒલճಡΜͩॴʹҠಈͯ͘͠Εͯ༏लʯ● ʮલճಡΜͩҐஔ͔Βදࣔͯ͘͠ΕΔػೳΊͬͪΌศརʯ
● 💬 ࠷ޙʹಡΜͩҐஔ·ͰҠಈͯ͠΄͘͠ͳ͍͜ͱ͋Δ → ϑΟʔυόοΫΛड͚ɺʮઌ಄ʹΔʯϘλϯΛՃ● 💬 ੨͍όʔ͕ؾʹͳΔɺअຐ → ΦϓτΞτઃఆΛͬͯΒ͏Α͏ʹҊҰํͰɺվળ
ϢʔβʔߦಈͷมԽ
ಡॻ։࢝ɾಡྃಡ͕ྃ 0.5% ఔ্ঢର܈ʢ੨ʣɾඇର܈ʢʣͷ50%ͣͭʹ͚ͯɺ1ϲ݄ఔͷA/BςετΛ࣮ࢪʮຊʹಡΈ͍ͨখઆʯΛݟ͚ͭ͘͢ͳ͍ͬͯΔʂ
ࠓޙͷల
·ͩ·ͩ։ൃத 💪● web͚ͩͰͳ͘ΞϓϦʹಉ͡ػೳΛ͚ͭΔ● ϚϯΨ࡞ͰಡΜͩҐஔΛอଘͰ͖ΔΑ͏ʹ● σʔλͷαʔόʔอଘɾؒಉظࠓޙΓ͍ͨ͜ͱ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠pixivΛ࠷ڧͷখઆߘαΠτʹ͍ͨ͠ΤϯδχΞΛืू͍ͯ͠·͢ʂ