Declaimerっていうやつつくった(つくってる)

Declaimer
っていうやつつくった
ホンザワ
2014/09/12

はじめに
プレゼン資料の作り方
全人類共通の課題
要件
難しくない
出来るだけWYSIWYG
PDF出力
slideshareとかに上げるため

パワポ系
結局これ最強
けど使ったら負けな気がする
あんまり楽しくない
所詮、我々は書いたものが意図した通りに動くこ
とが嬉しいのです

TeX → PDF
悪くはない
覚えること多くてつらい
styファイルいじるとか、もうつらい
ちょっと調整するのつらい
将来的にほぼ使わない

Markdown
意外と表現力が貧弱
文法の拡張が難しい
そもそもプレゼン資料作りには...

反面教師
やたら動きが派手
5枚目くらいで飽きる
謎のクソオシャ
文字が小さすぎて見えない
読ませる気のないコード
シャトーブリアン・スタイル

要件の再考
ちょっとした調整が簡単
PDF出力
文法が拡張できる
覚えることは少なく
大きく見やすく

そこで
Webの力を借りれば
プレゼンごとにCSSがあれば編集OK
HTMLをPDFに印刷
自分でDSLつくれば
文法が拡張やり放題
(たぶん)覚えやすい

つくってる
Declaimer (仮)
Elixir製 (v1.0.0出たよ！)
ElixirマクロでDSL

導入
mix new presen
cd presen
vim mix.exs
defp deps
[{ , }]
mix deps.get
$
$
$
do
:declaimer github: "Joe-noh/declaimer"
end
$ # 依存ライブラリ取得
mix = タスクランナー

$ mix declaimer.init
ディレクトリ構成を初期化
presentation.exs
ここにDSLを書く
css, js, imgディレクトリ
名前の通り
ユーザが書き換えてる可能性があるので、原則
的に上書きしない

$ mix declaimer.compile
presentation.exs → presentation.html

文法
use
Declaimer
presentation
titile
subtitle
author
date
slide
do
"Declaimer"
"っていうやつつくった"
"ホンザワ"
"2014/09/12"
"はじめに" do
:
end
end

文法
テキストとリスト
slide
text
list
"Slide Title" do
"textはpタグ"
:bullet do
item
item
"one"
"two"
end
end

文法
コード
code
"html" do
"<html lang="en">"
" <body> ABC </body>"
"</html>"
end
↓
<html lang="en">
<body> ABC
</body>
</html>

文法
画像
image "/img/man.png"

文法
画像(横にびろーん)
image "/img/man.png", size: "width-max"

テーブル
table
do
[ "種族" , "職業" , "HP"
]
[ "もぐら" , "戦士" , 100
]
[ "ヒト" , "ドクター" , 120
]
end
↓
種族職業HP
もぐら戦士100
ヒトドクター120

テーマ変更
slide ,
"テーマ変更" theme: :dark do
:
end
これ書くと
Declaimer.Theme.Dark.css()
css/dark.cssに保存される
css/テーマ名.cssのlinkタグがheadに入る
このスライド(div)にdarkクラスが付く

仕組み
ざっくり説明
その前にマクロの話をします
マクロ
ASTを受け取りASTを返す
コンパイル時に展開される
コードが増えたり変換される

マクロの例
defmodule
Mod do
defmacro twice(cmd)
quote
.puts
unquote(cmd)
.puts
unquote(cmd)
do
do
IO "1回目" # quote(code) -> AST
# unquote(AST) -> code
IO "2回目" # unquoteでASTをコードに埋め込む
# quoteでASTにして返す
end
end
end

マクロの例
import
Mod
twice( IO .puts "Hey!"
)
これと等価
.puts
.puts
.puts
.puts
IO "1回目"
IO "Hey!"
IO "2回目"
IO "Hey!"

マクロの例
defmacro raise(exception, attrs)
quote
.error(
unquote(exception).exception(unquote attrs)
)
do
do
:erlang
end
end
こうなる
raise RuntimeError, message: "Oops!"
#=> :erlang.error RuntimeError.exception(message: "Oops!")

引数の編集
defmacro force_hello(ast)
do
{func, context, args} = ast
{func, context, [ ]}
force_hello( .puts )
force_hello( .puts )
#=> 3つ組の入れ子
"Hello"
end
IO "Hey" #=> "Hello"
IO "Boo" #=> "Hello"

もっと頑張ると
defmacro a_macro(arg, block)
a_macro
do: do
:
#=> ["first", "second"]
# 煮るなり焼くなり
:
end
"arg" do
"first"
"second"
end

ここまでくれば
defmacro presentation( block)
presentation
slide
slide
do: do
:
#=> [{:slide, [], [...]}, {:slide, [], [...]}, ... ]
:
end
do
"Agenda" do
:
end
"Intro" do
:
end
end

HTMLの前にもう1段階
slide
"Intro" do
:
end
#=> { :div,
# [ {:h2, ["Intro"], []}, ... ],
# [class: ["slide"]] }
HTMLに近い形にしてから変換
{タグ名, 中身, 属性}
タグ属性を扱いやすくするため

スライド表示
body , html ,
.slide {
{
}
height: 100%; width: 100%;
}
.slide { overflow: hidden; }
@media screen
div.slide.active {
;
visibility: visible
}
div.slide.inactive {
visibility: hidden
display: none
;
;
}

文字サイズ
CSSではremで指定
.slide h2 { font-size: 5rem; }
JSでルートのサイズを変える
$( window ).on( "load resize" , function()
{
h = ($( ).height());
$( ).css(
,
(h* )+
);
});
var parseInt window
"html"
"font-size"
parseInt 0.018 "px"

印刷のために
{
,
@media print
}
div.slide.active
div.slide.inactive {
;
visibility: visible
}

TODO
リンク(aタグ)
ページ番号
高橋メソッド的センタリング
突然の死的センタリング
左右分割レイアウト ← これ重要

TODO
装飾系
太字
斜体
取り消し線
等幅
要らない気もしている

TODO - 文法の洗練
list
:bullet do
item
list
"one"
:bullet do
item
"two"
end
end
案
bullet
item
item
/g とか？
do
"one" do
"two"
end
end # s/item/~>

TODO - highlight.js
ハイライトできる言語増やす
当然のようにElixir無い
highlight.jsのパス指定するオプション新設

TODO - 設定ファイル
config/config.exs
プロジェクト内グローバルな設定
presentation.exsの記述量を減らす

TODO - Mixタスク
mix declaimer.watch
ファイル変更を監視してcompile
mix declaimer.deploy
gh-pagesにデプロイ

まとめ
Elixirでスライド作るツールつくってる
絶賛発展途上中
PullRequest お待ちしております
PullRequest お待ちしております

Declaimerっていうやつつくった(つくってる)

Recommended

Recommended

More Related Content

Similar to Declaimerっていうやつつくった(つくってる)

Similar to Declaimerっていうやつつくった(つくってる) (20)

More from Joe_noh

More from Joe_noh (20)

Recently uploaded

Recently uploaded (14)

Declaimerっていうやつつくった(つくってる)