bespokeを使ってスライドを作る環境を構築した
今朝からなんとなく自分用のスライド作成環境がほしくなってしまい作成しました。 再来週にLTがあるためそれの準備です。 最近のスライド作るフレームワークは何があるのかわからないのとbespokeで満足しているので今回はbespokeで作ることにしました。
また、個人的にreveal.jsは作るまでが難しいと思っています。
bespoke.js自体も前に少し使っていたのですが、環境構築まではしていなかったので今回は、せっかくだしと思いwebpackやらpostcssやらbabelやらのセットを入れたすぐに新規スライドが作れる環境を構築しました。
リポジトリ
とりあえずリポジトリ作った https://t.co/jSZxu8mCve
— hiroppy😶soliste (@about_hiroppy) 2017年3月17日
サンプルスライド
基本的には上のスライドに使っているライブラリとかは書いてあります。
目的
手早くスライドを作れるようにする というのは第一目的でした。
しかし、自己紹介のスライド部分とかを毎回書くのだるいなってよく思っているので、それも理由の一つです。
あと、自分の好きな色とかも共有して使えるのは楽になりそう。
bespoke
スライドを作るためのフレームワーク。
他のスライドを作るフレームワークと同じ感じですが、軽量でプラグインを使いカスタマイズしていきます。
公式のプラグイン
https://github.com/bespokejs/bespoke#official-plugins
個人的に結構テーマが好きで、nebulaが特に好きです。(サンプルのスライドのテーマです)
スライドの作り方
bespokeはHTMLを読み込むのですが、嫌だったのでwebpackを使いmarkdownからHTMLへ置換させています。
その後、require.contextを使いreactへ流し込んでいます。
lib/fetch-slides#L19
hello/main.js#L26
require.contextの第一(directory)には変数やpathがおそらく使えないので、一旦全件取得になっています。
背景の変更
背景の変更にはbackdropを使います。
今回はmarkdownへの特定のコメントにフックさせ背景を変えるようにしました。
hello/main.js#L25へ流し込めばclassとして名前が入るのでcssを設定すれば背景が変わるようになります。
詰まった点
webpackでarrayとして設定を返す(ココ)とhtml-webpack-pluginがバンドルされたjsを読み込みにいけないっぽい。
これはpublichPahでも解決できなかったので少し調べないとダメそう。
まぁ開発中に同時に別のスライドもデバッグしたいということは普通無いので、一旦webpack.config.jsへの引数としてファイル名を渡し長さ1の配列を返すようにした。
気になる点
上のスライドを見てもらえばわかるのですが、ページ読み込み時にすべてのスライドが見えてしまうのでどうにかしないと汚いなぁって思っている。
同じこと考えている人おおそうなので多分探せば出そう。
おわり
詳しくはリポジトリみてください。
当分はkeynoteではなく、markdownでスライドを作っていこうかなと思っています。
