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

pixiv には、投稿した小説の一部をシェア用に画像化できる「pixiv小説画像メーカー」という機能があります。そのリリースを事例に、pixiv に新しい機能を追加するため、何を考えてどのような技術選択を行なっているのかお話しします。

Transcript

1. #pixiv小説画像メーカー はこうしてできた roiban
2. • 2023年中途入社 • pixivの開発をしています • フロントエンドメイン • SF小説を愛しています roiban
4. pixivでは小説を 読めます！
6. pixivでは小説を 投稿できます！
8. 読んでもらいたい……
9. OG 画像
14. リリースまでの道のり
15. リリースまでの道のり 2023年 11月1日 入社 2023年 12月21日 期間限定版 リリース 2024年 3月26日 常設版 リリース 企画 デザイン アサイン etc. 実装フェーズ 再始動
16. リリースまでの道のり 2023年 11月1日 入社 2023年 12月21日 期間限定版 リリース 2024年 3月26日 常設版 リリース 企画 デザイン アサイン etc. 実装フェーズ 再始動
17. リリースまでの道のり 2023年 11月1日 入社 2023年 12月21日 期間限定版 リリース 2024年 3月26日 常設版 リリース 企画 デザイン アサイン etc. 実装フェーズ 再始動 当時のお知らせ画像
18. リリースまでの道のり 2023年 11月1日 入社 2023年 12月21日 期間限定版 リリース 2024年 3月26日 常設版 リリース 企画 デザイン アサイン etc. 実装フェーズ 再始動 当時のお知らせ画像
19. どう作る？
20. 要件 1. 小説の一部を選択できること 2. 選択したテキストを画像にできること 3. 画像を SNS などにシェアできること
21. 要件 1. 小説の一部を選択できること 2. 選択したテキストを画像にできること 3. 画像を SNS などにシェアできること すばやく提供したい
22. どれくらい使ってもらえるか分からない ↓ すばやく出して反応を見たい
23. 要件1. テキスト選択
24. 要件1. テキスト選択 • ルビや挿絵の処理？ • どのUIから選択する？ ◦ 小説本文ページから直接引用できると便利そうだが…… • タッチデバイスでも動作する？ 🤔
25. document .getSelection()? .toString() Selection API
26. 要件1. テキスト選択 • ルビや挿絵の処理？ →「記法」をそのまま出す • どのUIから選択する？ → pre タグ内のプレーンテキスト • タッチデバイスでも動作する？ → Selection API なら問題なし 💡 npm や MDN を見ながら
27. 要件2. テキストの画像化
28. 要件2. テキストの画像化 • 小説の表紙やPDFの生成に使われている 社内向けパッケージ • なんと組版を内製している • 背景を変えたり正方形の画像に 収まるよう微調整 小説の投稿時に表紙を カスタマイズできる
29. 要件2. テキストの画像化 • 背景画像切り替え →期間限定版で9種、常設版で30種 • 縦書き or 横書き →期間限定版では縦書きのみ、常設版で横書きも追加 • フォント切り替え →今はまだ…… 「コア体験」は 何か？
30. 要件3. SNSへのシェア
31. 要件3. SNSへのシェア • 画像 + URL を簡単に投稿したい • 色々な SNS に対応したい ◦ X，Facebook，LINE，...etc. ◦ 各サービスの API を叩く？
32. https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API navigator .share(data)
33. 要件3. SNSへのシェア • 基本的にSNSアプリが必要 • ブラウザの実装率が低め →未実装なら画像を添付してもらう形に 技術選定は可能性の 剪定なんだなぁ
34. 2回リリースできた 🎉 期間限定版+常設化 常設化時はユーザーの意見をもとに機能追加 細かい話は Ask the Speaker で 🙏