#pixiv小説画像メーカーはこうしてできた / The Making of the pixiv Novel Image Maker

by roiban

Slide 1

Slide 1 text

#pixiv小説画像メーカーはこうしてできた roiban

Slide 2

Slide 2 text

● 2023年中途入社 ● pixivの開発をしています ● フロントエンドメイン ● SF小説を愛しています roiban

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

pixivでは小説を読めます！

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

pixivでは小説を投稿できます！

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

読んでもらいたい……

Slide 9

Slide 9 text

OG 画像

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

リリースまでの道のり

Slide 15

Slide 15 text

リリースまでの道のり 2023年 11月1日入社 2023年 12月21日期間限定版リリース 2024年 3月26日常設版リリース企画デザインアサイン etc. 実装フェーズ再始動

Slide 16

Slide 16 text

Slide 17

Slide 17 text

リリースまでの道のり 2023年 11月1日入社 2023年 12月21日期間限定版リリース 2024年 3月26日常設版リリース企画デザインアサイン etc. 実装フェーズ再始動当時のお知らせ画像

Slide 18

Slide 18 text

Slide 19

Slide 19 text

どう作る？

Slide 20

Slide 20 text

要件 1. 小説の一部を選択できること 2. 選択したテキストを画像にできること 3. 画像を SNS などにシェアできること

Slide 21

Slide 21 text

要件 1. 小説の一部を選択できること 2. 選択したテキストを画像にできること 3. 画像を SNS などにシェアできることすばやく提供したい

Slide 22

Slide 22 text

どれくらい使ってもらえるか分からない ↓ すばやく出して反応を見たい

Slide 23

Slide 23 text

要件1. テキスト選択

Slide 24

Slide 24 text

要件1. テキスト選択 ● ルビや挿絵の処理？ ● どのUIから選択する？ ○ 小説本文ページから直接引用できると便利そうだが…… ● タッチデバイスでも動作する？ 🤔

Slide 25

Slide 25 text

document .getSelection()? .toString() Selection API

Slide 26

Slide 26 text

要件1. テキスト選択 ● ルビや挿絵の処理？ →「記法」をそのまま出す ● どのUIから選択する？ → pre タグ内のプレーンテキスト ● タッチデバイスでも動作する？ → Selection API なら問題なし 💡 npm や MDN を見ながら

Slide 27

Slide 27 text

要件2. テキストの画像化

Slide 28

Slide 28 text

要件2. テキストの画像化 ● 小説の表紙やPDFの生成に使われている社内向けパッケージ ● なんと組版を内製している ● 背景を変えたり正方形の画像に収まるよう微調整小説の投稿時に表紙をカスタマイズできる

Slide 29

Slide 29 text

要件2. テキストの画像化 ● 背景画像切り替え →期間限定版で9種、常設版で30種 ● 縦書き or 横書き →期間限定版では縦書きのみ、常設版で横書きも追加 ● フォント切り替え →今はまだ…… 「コア体験」は何か？

Slide 30

Slide 30 text

要件3. SNSへのシェア

Slide 31

Slide 31 text

要件3. SNSへのシェア ● 画像 + URL を簡単に投稿したい ● 色々な SNS に対応したい ○ X，Facebook，LINE，...etc. ○ 各サービスの API を叩く？

Slide 32

Slide 32 text

https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API navigator .share(data)

Slide 33

Slide 33 text

要件3. SNSへのシェア ● 基本的にSNSアプリが必要 ● ブラウザの実装率が低め →未実装なら画像を添付してもらう形に技術選定は可能性の剪定なんだなぁ

Slide 34

Slide 34 text

2回リリースできた 🎉 期間限定版+常設化常設化時はユーザーの意見をもとに機能追加細かい話は Ask the Speaker で 🙏