読者です 読者をやめる 読者になる 読者になる

Macにrabbitをインストールし、プレゼンテーマを自作してみた

Ruby Rabbit

Macにプレゼンツールのrabbitをインストールし、プレゼンテーマを自作した時のメモを残します。
公式サイト:Rabbit - はじめに

 
目次

 

環境

 

rabbitの動作環境を構築

rbenvのインストール

以下を参考に、システムのRubyではなくrbenvのRubyを使う環境を構築します。

$ brew install rbenv ruby-build
...
🍺  /usr/local/Cellar/ruby-build/20170201: 334 files, 178.8K, built in 13 seconds
...
🍺  /usr/local/Cellar/rbenv/1.1.0: 36 files, 63.2K

 
rbenvの設定をします。

# rbenv initを実行
$ rbenv init
# Load rbenv automatically by appending
# the following to ~/.bash_profile:

eval "$(rbenv init -)"


# 上記メッセージに従って、.bash_profileを編集する
$ vi ~/.bash_profile
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

# .bash_profileを再読込
$ source .bash_profile

 

rbenvを使ったRubyのインストール

一番新しい2.4.0をインストールします。

# インストール可能なバージョンの確認
$ rbenv install -l
...
2.4.0
...

# Rubyのインストール(時間かかる)
$ rbenv install 2.4.0
...
Installed ruby-2.4.0 to ~/.rbenv/versions/2.4.0

# バージョン確認
$ rbenv versions
  system
* 2.4.0 (set by ~/.rbenv/version)

# rehashする 
$ rbenv rehash

# バージョンを指定
$ rbenv global 2.4.0
$ ruby --version
ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin15]

# 念のためどこにインストールされているかを確認
$ rbenv which irb
~/.rbenv/versions/2.4.0/bin/irb

 

Bundlerを使ってrabbitをインストール

rabbitはGemfileでインストールしたいため、以下を参考にBundlerまわりをインストールします。
Bundlerの使い方 - Qiita

 

Bundlerのインストール

no-documentオプションを付け、ドキュメントを除いてインストールします。
gemrcの–no-riと–no-rdoc、deprecatedなoptionなのでみなおしたほうがいいかもですよ - Qiita

# Bundlerのインストール
$ gem install bundler -​-no-document
...
Successfully installed bundler-1.14.4
1 gem installed

 

Gemfileの作成とrabbitのインストール

rabbit入れたいディレクトリへと移動して、Gemfileを作成します。

# ディレクトリを作って移動
$ mkdir rabbit_theme_sample
$ cd rabbit_theme_sample/

# Gemfileのひな形を作る
$ bundle init
Writing new Gemfile to /path/to/rabbit_theme_sample/Gemfile

 
作成されたGemfileにrabbitをインストールするように記載します。

Gemfile

# frozen_string_literal: true
source "https://rubygems.org"

gem "rabbit"

 
準備ができたため、bundlerを使ってインストールします。

--path vendor/bundleでインストール先を指定します。

# インストール(時間がかかる)
$ bundle install --path vendor/bundle
Fetching gem metadata from https://rubygems.org/........
Fetching version metadata from https://rubygems.org/.
Resolving dependencies...
Installing pkg-config 1.1.7
Installing coderay 1.1.1
Installing multipart-post 2.0.0
Installing locale 2.1.2
Installing text 1.3.1
Installing hikidoc 0.1.0
Installing kramdown 1.13.2
Installing mini_portile2 2.1.0
Installing rdtool 0.6.38
Installing rttool 1.0.3.0
Using bundler 1.14.4
Installing glib2 3.1.1 with native extensions
Installing cairo 1.15.5 with native extensions
Installing faraday 0.11.0
Installing gettext 3.2.2
Installing nokogiri 1.7.0.1 with native extensions
Installing atk 3.1.1 with native extensions
Installing gobject-introspection 3.1.1 with native extensions
Installing pango 3.1.1 with native extensions
Installing gio2 3.1.1 with native extensions
Installing gdk_pixbuf2 3.1.1
Installing gtk2 3.1.1 with native extensions
Installing poppler 3.1.1 with native extensions
Installing rsvg2 3.1.1 with native extensions
Installing rabbit 2.2.0
Bundle complete! 1 Gemfile dependency, 25 gems now installed.
Bundled gems are installed into ./vendor/bundle.

 

rabbit-themeコマンドによるひな形を作成

rabbitには、既存のテーマがいくつかあります。

 
ただ、今回は以下を参考にして、defaultテーマを拡張する形で作成します。

 
既存のテーマのソースコードを読むと、defaultテーマのincludeに対し、

  • include前に、インスタンス変数へ値をセット
  • include後に、オブジェクトに対して、prop_set()を実行

などを行えば、defaultテーマを拡張できそうでした。

   
まずは、rabbit-themeコマンドを使って、テーマのひな形を作成します。

コマンドではidの指定が必要なので、今回はsample-themeとします。

# rabbit-themeコマンドで生成
$ bundle exec rabbit-theme new --id sample_theme
[情報]
ディレクトリを作成中: sample_theme
[情報]
ディレクトリを作成中: sample_theme/data
[情報]
ファイルを作成中:     sample_theme/.gitignore
[情報]
ファイルを作成中:     sample_theme/config.yaml
[情報]
ファイルを作成中:     sample_theme/README.rd
[情報]
ファイルを作成中:     sample_theme/Rakefile
[情報]
ファイルを作成中:     sample_theme/property.rb
[情報]
ファイルを作成中:     sample_theme/theme.rb
[情報]
ディレクトリを作成中: ~/.rabbit
[情報]
ファイルを作成中:     ~/.rabbit/author.yaml


# ディレクトリへと移動
$ cd sample_theme/

# テーマファイルの中身を確認
## defaultテーマのincludeだけがされている
$ cat theme.rb 
include_theme("default")

 

確認用スライドを準備

スライドがないとテーマを確認しづらいため、markdown形式のスライドを用意しました。

slide.md

# スライドタイトル

subtitle
:   サブタイトル

date
:   2017/2/28

author
:   著者

allotted-time
:   10s

# リスト

* リスト1段目
  * リスト2段目
    * リスト3段目


# 画像サイズはそのまま表示
![](images/shinanogold.png){:height='80' :width='80'}

# 画像サイズは調整して表示
![](images/shinanogold.png){:relative_height='80' :relative_width='80'}

 
この時点のスライドを表示してみます。

$ bundle exec rabbit slide.md -t theme

スライドタイトル

f:id:thinkAmi:20170301081648p:plain

スライド

f:id:thinkAmi:20170301081701p:plain

 

タイマー(カメ)について

スライドに

allotted-time
:   10s

と、allotted-timeを設定しているため、、タイマー(カメ)が出ています。

f:id:thinkAmi:20170301124052p:plain

 

テーマの編集

スライド全体のフォントを変更

デフォルト値は、base.rbテーマにあります。
https://github.com/rabbit-shocker/rabbit/blob/master/lib/rabbit/theme/base/base.rb

 
今回は、以前も使用したことのあるやさしさゴシックボールドへ変更します。
フリーフォントやさしさゴシックボールドのダウンロード | フォントな

フォントは公式サイトに従ってインストールします。
Mac OS Xのフォントのインストール | フォントな

 
スライドで使うには、find_font_family()にフォント名を渡し、インスタンス変数font_familyへセットすれば良さそうでした。

ただ、やさしさゴシックボールドの英字表記のフォント名が分かりませんでした。

そこで、以下を参考に調べたところ、07YasashisaGothicBoldということが分かりました。
Mac ハンドブック:Font Book - Apple サポート

そのため、

@font_family = find_font_family("07YasashisaGothicBold")

include_theme("default")

と実装します。

テーマの変更を確認するため、起動中のスライド上でrキーを押します。
Rabbit - rabbit-themeコマンドの使い方

フォントが変わりました。

f:id:thinkAmi:20170301082028p:plain

 

スライドタイトルを変更

rabbitでは、スライドタイトルとそれ以降のスライドでは別設定になっているため、まずはスライドタイトルを変更します。

 

書体を変更

デフォルト値は、default-title-text.rbテーマにあります。
https://github.com/rabbit-shocker/rabbit/blob/master/lib/rabbit/theme/default-title-text/default-title-text.rb

今回は、日付(Date)の書体をイタリック体から通常へと変更します。

...
include_theme("default")

match(TitleSlide, Date) do |dates|
  dates.prop_set("style", "normal")
end

 
Dateの書体が変わりました。

f:id:thinkAmi:20170301123407p:plain

 

表示を右詰めに変更

デフォルト値は、default-title-slide.rbテーマにあります。
https://github.com/rabbit-shocker/rabbit/blob/master/lib/rabbit/theme/default-title-slide/default-title-slide.rb

今回は、著者(Author)を中央揃えから右詰めへと変更します。

なお、horizontal_centering = falseにしてからでないと、alignの値が反映されないことに注意します。

...
include_theme("default")

match(TitleSlide, Author) do |authors|
  authors.horizontal_centering = false
  authors.align = :right
  authors.margin_top = @space * 15
end

 
著者の表示が右詰めになりました。

f:id:thinkAmi:20170301123605p:plain

フォントサイズを変更

デフォルト値は、default-title-text.rbテーマにあります。
https://github.com/rabbit-shocker/rabbit/blob/master/lib/rabbit/theme/default-title-text/default-title-text.rb

今回は

@title_slide_title_font_size = screen_size(1 * Pango::SCALE)
@title_slide_subtitle_font_size = screen_size(2 * Pango::SCALE)
@title_slide_author_font_size = screen_size(3 * Pango::SCALE)
@title_slide_date_font_size = screen_size(4 * Pango::SCALE)

include_theme("default")

としたところ、フォントサイズが変更されました。

f:id:thinkAmi:20170301123645p:plain

 

スライドの設定
フォントサイズを変更

スライドタイトル以外のスライドのフォントサイズを変更します。

設定やデフォルト値は、

にあります。

今回は

# 共通で使われるフォントサイズなので、主に使われるところをコメント
# ヘッドライン
@large_font_size = screen_size(1 * Pango::SCALE)
# スライド内で一般的に使われるサイズ(リストの1段目とか)
@normal_font_size = screen_size(2 * Pango::SCALE)
# リストの2段目
@small_font_size = screen_size(3 * Pango::SCALE)
# リストの3段目
@x_small_font_size = screen_size(4 * Pango::SCALE)
# 旗の大きさ
@xx_small_font_size = screen_size(5 * Pango::SCALE)

include_theme("default")

としたところ、通常スライドのフォントサイズが変更されました。

f:id:thinkAmi:20170301123714p:plain

 

ヘッドラインを変更

デフォルト値から、

  • 太さ
  • センタリング

を変更します。

デフォルト値は、

にあります。

今回は

# 色
@default_headline_line_color = "#0066FF"
# 太さ
@default_headline_line_width = 10

include_theme("default")

# ヘッドラインのセンタリング
match(Slide, HeadLine) do |headlines|
  headlines.each do |headline|
    # trueはセンタリング、falseは左詰め
    headline.horizontal_centering = true
  end
end

としたところ、ヘッドラインの設定が反映されました。

f:id:thinkAmi:20170301123737p:plain

 

箇条書きリストのビュレットを変更

ビュレットのデフォルト値から、

を変更します。

 
デフォルト値はdefault-item-mark.rbテーマにあります。 https://github.com/rabbit-shocker/rabbit/blob/master/lib/rabbit/theme/default-item-mark/default-item-mark.rb

今回は

# 形
@default_item1_mark_type = "rectangle"  # 四角
@default_item2_mark_type = "circle"     # 円
@default_item3_mark_type = "dash"       # 直線

# 色
# 16進数表記のほか、以下のような色名も使える
# http://noz.day-break.net/webcolor/colorname.html
@default_item1_mark_color = "#FF0000"   # red
@default_item2_mark_color = "#009900"   # green
@default_item3_mark_color = "green"

include_theme("default")

としたところ、箇条書きリストでビュレットが変更されました。

f:id:thinkAmi:20170301123750p:plain

 

画像を表示

画像を表示するには、

を行います。

今回は  
theme.rb

# theme.rbと同じ階層にあるimagesディレクトリを画像ディレクトリとする
add_image_path("images")
...
include_theme("default")

 
slide.md

# そのまま表示
![](images/shinanogold.jpg){:height='80' :width='80'}

# いい感じに調整
![](images/shinanogold.jpg){:relative_height='80' :relative_width='80'}

 
としたところ、以下のように表示されました。

そのまま表示する場合

f:id:thinkAmi:20170301123823p:plain

 
いい感じに調整して表示する場合

f:id:thinkAmi:20170301123834p:plain

 
なお、

# 2つの画像は表示できるか?
![](images/shinanogold.png){:height='80' :width='80'}
![](images/shinanogold.png){:height='80' :width='80'}

のように、一つのスライドに複数の画像を指定した場合、以下のログが出て、スライドが表示されません。

[警告]
ひとつの段落中で複数の「![alt]{image}」を使うことはできません。

複数の画像を1ページの中に入れるのは無理そうです。

 

その他

その他いろいろ機能があるようですが、とりあえずはこのへんにします。
Rabbit - テーマの作り方

 

スライドをpdfへ変換

以下を参考に、作成したスライド(slide.md)をpdf(slide.pdf)へ変換します。
Debianでプレゼンテーションツールrabbitを使用する – ぺけみさお

$ bundle exec rabbit slide.md -t theme -p -o slide.pdf

 

ソースコード

GitHubに上げました。
GitHub - thinkAmi-sandbox/rabbit_theme-sample

  • slide.md
  • theme.rb
  • slide.pdf

などが含まれます。