技術探し

JavaScriptを中心に記事を書いていきます :;(∩´﹏`∩);:

トップ > JavaScript > Markdownだけでスライドを作るCLIのv1.0.0をリリースした

Markdownだけでスライドを作るCLIのv1.0.0をリリースした

JavaScript library

一年前に作ったライブラリのv1.0.0リリースです。

blog.hiroppy.me

リポジトリ

github.com

Fusumaとは？

以下の機能をサポートしているCLIです。

  • 開発環境(webpack-dev-server)
  • 本番環境(最適化含む)
  • GitHub Pagesへのデプロイ
  • PDFの出力
  • SNS, OGP対応
  • 発表者モード
    • 発表者ノートやタイマー等

以下を実行するだけで、スライドが作れます。

$ npm i fusuma -D
$ npx fusuma init
$ mkdir slides && echo '# Hello😄' > slides/title.md
$ npx fusuma build

f:id:about_hiroppy:20190508060526p:plain

内部では、markdownで書いたファイルをhtmlに変換して、それをhtmlで作るスライドライブラリに読み込ませています。

大きな変更

スライドライブラリ

もともと、bespoke.jsというのを使ってたのですが、メンテナンスが2016ぐらいから止まりつつあって、今後しんどいなって気持ちになったので、WebSlidesというライブラリに切り替えました。(メンテもされています)

Fusumaは以下のライブラリにmarkdownからhtmlへ変換し渡す役割を持ちます。

WebSlides

webslides.tv

サイト自体もスライドになっています。

用意されているクラスやコンポーネントがめっちゃ豊富で、レスポンシブ対応されています。
また、独自でプラグインを追加したりできます。

コンポーネント

f:id:about_hiroppy:20190508054212p:plain

サンプルスライド

webslides.tv

クラス

f:id:about_hiroppy:20190508054408p:plain

サンプルスライド

webslides.tv

マークダウンで書く

## 1ページ目

Hi!

---

## 2ページ目

Hi!

みたいに書くと、webSlidesのcssがついた2ページ分のスライドが生成されます。
githubのfileでもmarkdownだと整形して見れるので、案外markdownで書く利点あると思う。

æ‹¡å¼µ

JSとCSSは拡張できるので、webSlidesの気に入らない部分とかあったら上書きできます。

本番ビルド

画像圧縮やcssの最適化等はすべて設定してあるので、今はwebpackはさわれないようにしています。

発表者モード

f:id:about_hiroppy:20190508060144p:plain

(上記は登壇者画面、UI変更する可能性あり)

Presentation APIを使ってキャストします。(chrome castとかでも多分いけるけど試してない)

developer.mozilla.org

もし、対応していなくてもlocalstrageで同期する仕組みも自動でフォールバックするので、問題は無いと思います。

ノート

以下のようにスライドに書いておくと、ノートとして見れます。

<!-- note
Hi!
-->

サンプルリポジトリ

fusuma/samples/intro at master · hiroppy/fusuma · GitHub

最後に

さくっとスライド使いたいときに便利です:)

github.com

こちらも進んでいます