一年前に作ったライブラリのv1.0.0リリースです。
リポジトリ
Fusumaとは？
以下の機能をサポートしているCLIです。
以下を実行するだけで、スライドが作れます。
$ npm i fusuma -D $ npx fusuma init $ mkdir slides && echo '# Hello😄' > slides/title.md $ npx fusuma build
内部では、markdownで書いたファイルをhtmlに変換して、それをhtmlで作るスライドライブラリに読み込ませています。
大きな変更
- bespokeからwebSlidesへ
- 発表者ツールのUI変更
- 内部リファクタリング + 最適化
スライドライブラリ
もともと、bespoke.jsというのを使ってたのですが、メンテナンスが2016ぐらいから止まりつつあって、今後しんどいなって気持ちになったので、WebSlidesというライブラリに切り替えました。(メンテもされています)
Fusumaは以下のライブラリにmarkdownからhtmlへ変換し渡す役割を持ちます。
WebSlides
サイト自体もスライドになっています。
用意されているクラスやコンポーネントがめっちゃ豊富で、レスポンシブ対応されています。
また、独自でプラグインを追加したりできます。
コンポーネント
サンプルスライド
クラス
サンプルスライド
マークダウンで書く
## 1ページ目 Hi! --- ## 2ページ目 Hi!
みたいに書くと、webSlidesのcssがついた2ページ分のスライドが生成されます。
githubのfileでもmarkdownだと整形して見れるので、案外markdownで書く利点あると思う。
拡張
JSとCSSは拡張できるので、webSlidesの気に入らない部分とかあったら上書きできます。
本番ビルド
画像圧縮やcssの最適化等はすべて設定してあるので、今はwebpackはさわれないようにしています。
発表者モード
(上記は登壇者画面、UI変更する可能性あり)
Presentation APIを使ってキャストします。(chrome castとかでも多分いけるけど試してない)
もし、対応していなくてもlocalstrageで同期する仕組みも自動でフォールバックするので、問題は無いと思います。
ノート
以下のようにスライドに書いておくと、ノートとして見れます。
<!-- note Hi! -->
サンプルリポジトリ
fusuma/samples/intro at master · hiroppy/fusuma · GitHub
最後に
さくっとスライド使いたいときに便利です:)
こちらも進んでいます
今週中にwebpack-dev-serverの新しいバージョンリリースする予定
— hiroppy🇮🇪 (@about_hiroppy) 2019年5月8日
