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

by yto (60°)

Slide 1

Slide 1 text

pixiv.inc pixivখઆͷӾཡମݧΛ େ͖͘ม͑Δʂ  ʮӾཡҐஔͷอଘʯػೳͷ։ൃͱͦͷޙ yto (Ϣτ)

Slide 2

Slide 2 text

Profile yto (Ϣτ) pixivࣄۀຊ෦ খઆϚϯΨඦՊ෦ 2021೥৽ଔೖࣾͷϑϩϯτΤϯυ  ΤϯδχΞɾͨ·ʹ PdM pixivখઆͷ։ൃΛ͍ͯ͠·͢ ޷͖ͳখઆՈ͸ถᖒึ৴͞ΜͰ͢

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

pixivখઆͷಛ௃

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ͦΜͳئ͍Λ׎͑Δͷ͕

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ϦϦʔε·Ͱͷ՝୊

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ಡΜͩจࣈ਺Λϒϥ΢β্Ͱܭଌ͢Δ 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 }))

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

2. ʮಡΜͩҐஔʯΛ  ͲͷΑ͏ʹอଘ͢Δ͔ʁ

Slide 28

Slide 28 text

ͱʹ͔͘๲େͳσʔλྔͱϦΫΤετྔ ● Ϣʔβʔ͕খઆ࡞඼ΛӾཡ͢Δ౓ʹϨίʔυ͕௥Ճ͞ΕΔ  … ໿7.1ԯ/݄ ● ݕࡧ݁Ռɾখઆৄࡉͷؔ࿈࡞඼ͳͲɺ͋ΒΏ ΔҰཡܥը໘Ͱऔಘ͞ΕΔ  … Ӿཡ਺ͱಉఔ౓ͷΦʔμʔ

Slide 29

Slide 29 text

ͲͷΑ͏ʹอଘ͢Δ͔ ● 🤔 Ͳ͜ʹอଘ͢Δʁ  ΦϯϓϨDB (ScyllaDB or Cassandra)ʁɹΫϥ΢υ DB (GCP BigTable)ʁɹϢʔ βʔͷϩʔΧϧ୺຤ (indexedDB)ʁ ● 💰 Ϋϥ΢υΛ࢖͏৔߹ͷίετ͸ʁ  → GCP BigTable Λ࢖͍ɺ࣮ࡍͷϢʔβʔϦΫΤετʹΑ ΔίετݕূɾվળΛ࣮ࢪ

Slide 30

Slide 30 text

ͲͷΑ͏ʹอଘ͢Δ͔ʢิ଍ʣ 1. ϢʔβʔͷϩʔΧϧ୺຤ (indexedDB)  … 1stϦϦʔε͸ͪ͜ΒͰग़͢͜ͱʹͨ͠ 2. Ϋϥ΢υ DB (GCP BigTable)  … ϦϦʔεޙͷ࢖ΘΕํɾ൓ԠΛݟͭͭɺ  ɹɹɹ͍ͭɾͲͷΑ͏ʹग़͔͢ΛվΊͯݕ౼͍ͯ͘͠

Slide 31

Slide 31 text

2023/6/29 ϦϦʔε 🎉

Slide 32

Slide 32 text

ϦϦʔεޙͷ൓ԠͱมԽ

Slide 33

Slide 33 text

ϦϦʔεޙͷ൓Ԡ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

● 💬 ࠷ޙʹಡΜͩҐஔ·ͰҠಈͯ͠΄͘͠ͳ͍͜ͱ΋͋Δ  → ϑΟʔυόοΫΛड͚ɺʮઌ಄ʹ໭ΔʯϘλϯΛ௥Ճ ● 💬 ੨͍όʔ͕ؾʹͳΔɺअຐ  → ΦϓτΞ΢τઃఆΛ࢖ͬͯ΋Β͏Α͏ʹҊ಺ ҰํͰɺվળ఺΋

Slide 36

Slide 36 text

ϢʔβʔߦಈͷมԽ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

ࠓޙͷల๬

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ pixivΛ࠷ڧͷখઆ౤ߘαΠτʹ͍ͨ͠ ΤϯδχΞΛืू͍ͯ͠·͢ʂ