Blog, The

1 月 22 日生まれ、ブログ座です。

deck.js とうまくやっていくための gem を作った

ruby javascript

deck.js は便利です。

HTML でスライドを書くツールは色々あるけど、デフォルトのテーマでも見栄えが良かったり、プログラマブルなところが気に入ってます。

ただその HTML っていうのが結構大変で・・・

(deck.js に付いてるテンプレート)
deck.js/boilerplate.html at master · imakewebthings/deck.js · GitHub

JS や CSS を読み込んだり、HTML (Snippet) をコピペしたりと、スライド意外の部分でやる事が多いです。そもそも HTML でがっつりスライドを書くってのもしんどいですね。

そんなこともあって、「slim とか軽量なテンプレート言語で書けたらなー」とか「おいしいとこだけ書けたらなー」とか思いながら Ruby でスクリプト作ってたら、「これ意外と有用なんじゃね？」ってレベルになったので gem として公開してみる事にしました。

荒削りかつ不親切な部分もありますが、よければ使ってやってください。

ソースは以下から。

tkmsaoi/deckr · GitHub

できること

  • deck.js に特化した Sinatra アプリケーションの生成
  • スライド作成支援
    • テーマやら Extension やらの面倒を見てくれます
    • お気に入りのテンプレート言語が使えます

インストール

Ruby が入ってれば gem でインストールできます。
後で Bundler も使うので、入ってなければインストールしておいてください。

$ gem install deckr
$ gem install bundler # 入ってなければ

Sinatra アプリケーションの作成

適当なディレクトリで以下のコマンドを実行します。(presentations は任意の名前でOK)

$ deckr new presentations

実行すると、指定したディレクトリ以下に Sinatra アプリケーションが作られます。

presentations
├── Gemfile
├── config.ru
├── deck
│   └── ...
└── views
    ├── index.slim
    └── layout.slim

deck には deck.js のファイル群、views にはスライドのテンプレートが入ってます。Gemfile や config.ru はおなじみのファイルですね。

加えて以下のコマンドを実行すれば Web サーバーが起動します。

$ cd presentations
$ bundle install --path vendor/bundle
$ bundle exec rackup

ブラウザで http://localhost:9292/ にアクセスすれば、サンプル的なやつが表示されると思います。

テンプレートの書き方

以下はデフォルトの views/index.slim の内容です。
deck っていうヘルパーが使える事を除いては普通のテンプレートです。

- @title = "Your deck.js Presentation"
- deck.style "web-2.0"
- deck.transition "horizontal-slide"
- deck.enable "goto", "menu", "navigation", "status", "hash", "scale"

.slide
  h1 Slide

.slide
  h1 Content

.slide
  h1 Here

最初の 4 行ではスライドを設定しています。こう書いとけば views/layout.slim の方でよろしくやってくれるようになってます。

1 行目は単純に変数を設定してるだけですね。@title が設定されていれば title タグに出力されるようになってます。

2~3 行目の deck.style, deck.transition でテーマを指定しています。それぞれ deck/themes/style, deck/themes/transition 以下のファイルに対応します。

4 行目の deck.enable では Extension を有効にしています。deck/extensions 以下のディレクトリに対応します。

それ以降にはスライドの内容を書いていきます。
.slide (<div class="slide">...</div>) の内容がスライド 1 ページに対応します。
たとえばアジェンダだとこんな感じでしょうか。

.slide
  h2 Agenda
  ol
    li foo
    li bar
    li baz

テンプレートの追加とか

テンプレートを追加する時は、ちょっと面倒ですが config.ru にルートを追加してください。
たとえば views/foo.slim を追加する場合、以下のような感じです。

get "/foo" do
  slim :foo
end

また、以下のようにすれば slim 以外のテンプレート言語も利用出来ます。

get "/bar" do
  erb :bar, :layout_engine => :slim
end

やるかわからない TODO

  • 静的 HTML ファイルのビルド
  • Extension のビルド (Coffee Script とか SCSS とかをコンパイル)
  • deck.js を github から落としてくるようにする (今は gem に添付してるやつだけ)