Zenn
📘

好きだったSlideSha○eが悲しいUXになっていたので、その怒りを糧にSlideの作成・共有サービスを爆誕させた話

2023/04/03に公開
React
TypeScript
WebAssembly
Amplify
webcontainers
idea

概要

スライド形式の資料が好きな筆者が、Markdownでおしゃれなスライドをつくって、即座にシェアできるようなサービス、Slidevookを開発したので、紹介します。
Demoページはこちら
この記事自体には、あまり技術的な話はでてきませんが、技術的な話は、別途記事にしていきたいと考えています。 書き起こしました。→ Wasmやモダンフロントエンドを駆使してMarkdownでLT資料を作ってシェアするアプリを作る技術の裏側

対象読者

  • よくLTで発表をする方
  • MarkdownでLT資料を作成するのが好きな方
  • つくったLT資料を公開するのに、いちいちPDF化してというのが大変という方

はじめに・動機

筆者は、いろいろな媒体から、技術やマネジメントや組織運営に関する情報を収集をしています。
その中でも、Slide形式は、記憶に残りやすく、好んで参照する癖があります。（もちろんZenn・Qiitaのようなブログ形式の情報も好きです。）

Slide形式の資料の中でも、SlideShareや、SpeakerDeckのような、Slide形式の資料が集約されていて、検索やシェアができるサービスを好んで参照しています。
良いSlideは、意図が読み手にも伝わりやすく、筆者自身が人生をかけて追いかけている、エンジニアの気付きや成長につながる表現方法として、大切にしています。
一方で、仮にSlideの間に広告が定期的に入り込んで来てしまったりすると、本来そのSlideが提供していたはずの価値が、読み手に届かなくなってしまう可能性が高まるため、正直そのような体験は好ましいものではありません。
今回、そういったユーザー体験を経験し、一ユーザーとして、大きな怒りを覚えたため、その怒りのエネルギーを、新しいサービス開発という形で、表現してみました。

余談ですが、昔から、MarkdownでSlideを作るのが好きで、　Marpやreveal.jsにも大変お世話になりました。　reveal.jsは、特に思い入れがあって、reveal_lightningという、reveal.js専用のエディタを作ったりしていました。今は、sli.devが、大のお気に入りです。

つくったもの

Slidevookは、簡単に言うと、ブラウザ上で、sli.devという、Markdownで素適なSlideが作れるOSSを利用して、Slideをつくって共有できるウェブサービスです。

Slidevook

ログインなしで体験できるDemoページはこちら(PC版Chromeブラウザ推奨)

また、主要な部分(sli.dev、WebContainer APIの利用箇所)は、OSSとして公開しています。slidevook/slidevook-core

使い方の説明

Slidevookの使い方は、Slidevookを使って、公開していますので、ぜひみてみてください。
MarkdownでSlideを作って簡単にシェアできる！！Slidevookの使い方

利用している技術スタック

このサービスでは、技術的な挑戦として、極力サーバを利用しないというテーマで開発を行っています。
利用している主要な技術は以下のとおりです。

フロントエンド

  • TypeScript
  • Vite
  • WebContainer API
  • React
  • Slidev
  • satori
  • aws-amplify,@aws-amplify/ui-react

インフラ・バックエンド(サーバレス)

  • AWS Amplify
    • Cognito
    • S3
    • Lambda
    • AppSync(GraphQL)
    • DynamoDB
  • Route53
  • AWS Cloudfront
    • Lambda@Edge

デザイン・UI系

  • PrimeReact
  • PrimeFlex
  • react-mosaic
  • ロゴやデザインガイドラインは、以下で購入

その他

機能追加の要望や、不具合の共有や、セキュリティ的な脆弱性を発見した場合などは、slidevook-core/issues で共有いただけると嬉しいです。

GitHubで編集を提案

Discussion