技術探し

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

トップ > JavaScript > Markdownだけで綺麗なスライドを作るCLIを作っている

Markdownだけで綺麗なスライドを作るCLIを作っている

JavaScript library

今現在、0.2.1

テーマ

本質ではないwebpackとかBabelとかPostcssとかの設定ファイルを書くことなく、1コマンドでリリースまで面倒を見てくれて、マークダウンだけクールなスライドを作れるようにしたい。

サッとスライドを作れて、サッっとデプロイしたい。

やりたかったこと

  • webpackやBabelの設定を隠蔽したい
  • 開発・プロダクトビルド・リリースを1コマンドで終わらせたい
  • マークダウン(or HTML)で書けるようにしたい
  • フレームワークへの接続
    • bespoke.js以外にも対応させる(予定)
  • サイドバーの実装
    • 付加価値として、サイドバーにSNSや目次、プレゼンターモードを提供

デモ

slides.hiroppy.me

コードはココ

手順

以下の三行を実行するだけで、スライドの実行、生成、デプロイを行えます。

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

# --- 実行可能タスク ---
$ npx fusuma start # development
$ NODE_ENV=production npx fusuma build # production
$ npx fusuma deploy # github pagesへデプロイ
$ npx fusuma pdf # HTMLのスライドをpdfへ吐き出す

# --- Tree ---
$ tree -a
.
├── .fusumarc.yml
└── slides
    └── title.md

1 directory, 2 files

npx fusuma startを実行すると、以下のように出力されます。

f:id:about_hiroppy:20180517085452p:plain

デフォルトのテーマはbespoke-theme-nebulaです。
実行に最低限必要なファイルは.fusumarc.ymlとslides/です。

サンプルのリポジトリは以下になります。

github.com

タスク

以下のタスクをサポートします。

  • init
    • 設定ファイル(.fusumarc.yml)を生成します
  • start
    • webpack-dev-serverを起動させます
  • build
    • webpack4でビルドを行います
  • deploy
    • gh-pagesへビルド済みファイルをアップロードします
  • pdf
    • ビルド済みファイルをHTMLからpdfへ変換します

仕組み

以前、記事を書きましたので、以下を見てもらうとわかりやすいです。 blog.hiroppy.me

できること・できないこと

できること

  • 各タスクが1コマンドで行える
  • 発表者用のモードがある
    • 発表者ノートと次のページが見える
  • 目次の一覧がつくれる
  • CSS, JSの拡張ができる
  • OGPとSNSが設定できる
  • etc...

できないこと

マークダウンを書くだけなので、アニメーションが難しいです。
一応、HTMLでも書けて、且つJSの拡張が可能なので出来なくはないです。
ただ、ちゃんと確認してないので、後から確認します。(あまり自分がアニメーションを使わないので。。)

次の実装

Bespoke.js以外も対応したいなーとは思っています。
特に、Reveal.jsには対応させたいなって考えています。

さいごに

もし興味があれば是非使ってみてください:)

詳しくは、リポジトリのREADMEを見てください。

github.com