Skip to content

スライドをシェアできるサービスを作る

公開日:

東京都新宿区株式会社キュービックで開催された『第178回 PHP勉強会@東京』でレギュラーセッション(20分)として発表しました。

香川県高松市サンポートあなぶきアリーナ香川 交流エリアで開催された『PHPカンファレンス香川2025 懇親会』でライトニングトーク(5分)として発表しました。

東京都渋谷区道玄坂GMO Yours フクラスで開催された『TokyuRuby会議16』で当日飛び入りの抽選LT(3分)として発表しました。

Download PDF

スライドテキスト

Page 1

スライドをシェアできる

サービスを作る

Build your own slide deck

pixiv Inc.

USAMI Kenta

2025-08-27 #phpstudy

第178回PHP勉強会@東京

Page 2

お前誰よ

  • うさみけんた (@tadsan) / Zonu.EXE / にゃんだーすわん
  • ピクシブ株式会社 Platform Div > WebTechnology Team PHPer
  • 2012年末から現職、APIとかCIとかいろいろなところを見つめてきました
  • 最近チームが再編されてインフラっぽい仕事もしてます
  • Emacs PHP Modeを開発しています (2017年-)
  • プログラミング言語にちょっとこだわりのある素人 (spcamp2010)

Page 3

私事ですがわりと発表しています

Page 4

みなさんは発表したスライドをどうしていますか?

Page 5

スライド投稿サイトにアップロード?

Page 6

私も以前はそうしていました…

Page 7

2010~2016年頃 (24スライド)

Page 8

2014年頃 (2スライド)

Page 9

2015年に新サービスが登場

Page 10

Page 11

手触りもいいし最高のサービスでは?

Page 12

2015~2019年頃 (35スライド)

Page 13

2019年2月 (リニューアル)

Page 14

2019年3月 (サ終のお知らせ)

Page 15

2019年3月 (サ終のお知らせ)

Page 16

もう誰も信じない…

Page 17

Page 18

自社サービス始まったしドッグフーディングしよ

Page 19

サービス終ったら怒りの矛先は自社に向ければいいからね

Page 20

2019年~現在 (たぶん60回超)

Page 21

スライド投稿サービスの問題点

  • 収益性・持続可能性が低い
  • スライドを読むコストは誰が支払うべきか
  • 読者
  • 広告モデル (うまく出さないと採算がとれない) モラルが低い
  • 投稿者
  • プレミアムモデル (投稿に量や時間の制限をつける)

Page 22

スライド投稿サービス各社の動向

  • SlideShare
  • 2020年にScribd社に買収された
  • 電子書籍・オーディオブックのサブスク
  • SpeakerDeck
  • 2011年にGitHubが買収→停滞→2018年にスピンアウト

Page 23

スライド投稿サービス各社の動向

  • ニコナレ (niconare)
  • サービスとしての手触りはよかったが… 2019年終了
  • ドクセル (Docswell)
  • がんばってるらしい (サ終の恐怖で触っていない)
  • pixivFANBOX
  • スライド投稿サービスではない… (PDFのアップロードが可能)

Page 24

まあこれでいいかという停滞の気持ち

Page 25

PDFを直接配る方式

Page 26

それではいけないという気持ちもくすぶっていた

Page 27

2019年4月

Page 28

Page 29

PDFを表示するための技術スタック

  • mozilla/pdf.js
  • FirefoxでPDFを表示するのに使われている
  • azu/slide-pdf.js
  • スライドっぽく表示するためのHTML+JSで構築されたアプリケーション
  • クエリパラメータでPDFをURLで指定

Page 30

iframeで表示すれば自分専用のスライドをホストできる

Page 31

いつかやるぞと誓って幾星霜

Page 32

Twilogの事故が契機

Page 33

やった

Page 34

どうやって実現するか

  • あくまで静的サイトで実現したい
  • ファイルがあれば最悪いつでも移動できる
  • ローカルでも実現できるがGitHub Actionsで楽をしたい
  • せっかくなのでHonoとか使ったことない技術スタックでやってみたい
  • Honoxとか使えば静的サイトジェネレータできるらしい???

Page 35

できた

Page 36

作業の流れ

  • だいたいCursorのエージェントモードにやらせた
  • HTML/JavaScript/CSS だいたい要求通りに作ってくれる
  • 要求さえまとめれば全部やってくれる
  • Honoxとして載せるのはうまくいかなかった
  • 当てずっぽうで問題解決しようとしてくる ← LLMの限界

Page 37

感想

  • 意思を持って「こう作ってくれ」と具体的にオーダーするのが必要
  • エージェントが雑に作ってくるものに流されてはいけない
  • AIごときより自分の方がアイディアがあると確信する

Page 38

実装した機能

  • スライド一覧
  • メタデータはYAMLに自分で書いておくことにする
  • スライド画面
  • <iframe>でPDFを埋め込み表示 (slide-pdf.jsをカスタマイズ)
  • PDFファイルダウンロード、拡大表示、Full screen API
  • 表示中のスライド画像のダウンロードとクリップボードへのコピペ