20140712-ksgstudy-lt
スライドを作ろう
- Author: か
- Twitter: @ka_
- GitHub: @kaosf
- Homepage: http://kaosfield.net
reveal.js の紹介
"reveal.js" でググって下さい
Markdown で書く方法
GitHub kaosf reveal.js-2.5.0-customized を参考にして下さい
index.markdown を編集すればいいようになっています
確認方法ですが index.html をブラウザで開くだけでは多分ダメです
オススメは
python -m SimpleHTTPServer
で簡易 Web サーバ立ててブラウザから http://localhost:8000 にアクセスする方法
ソース見せます
https://raw.githubusercontent.com/kaosf/20140712-ksgstudy-lt/gh-pages/index.markdown
簡単！
デモスライド
見出し1だよ
見出し2だよ
見出し3だよ
# 見出し1だよ ## 見出し2だよ ### 見出し3だよ
普通の文章だよ
普通の文章だよ
- 順序無しリストアイテム1だよ
- 順序無しリストアイテム2だよ
- 順序無しリストアイテム3だよ
* 順序無しリストアイテム1だよ * 順序無しリストアイテム2だよ * 順序無しリストアイテム3だよ
1. 順序付きリストアイテム1だよ 1. 順序付きリストアイテム2だよ 1. 順序付きリストアイテム3だよ
とりあえず全部 1. って書いておくの順序入れ替えに強いのでオススメ
<div> <p>This is a paragraph.</p> </div>
``` <div> <p>This is a paragraph.</p> </div> ```
ハイライトを賢くする方法募集中
Pandoc とか使う方法もあるよ
Ubuntu の場合
sudo apt-get install haskell-platform
echo 'export PATH=$HOME/.cabal/bin:$PATH' >> $HOME/.bash_profile source $HOME/.bash_profile
.bash_profile の代わりに .zshenv とかにするのは適宜
cabal update cabal install pandoc
pandoc index.markdown -t revealjs > slide.html
これで後は slide.html を reveal.js の index.html の
<div class="slides">
<!-- ここ -->
</div>
に挿入すればOK
LT時に本当に言いたかったことを改めて補足します
かつて思っていたこと
- PowerPoint とか Impress とか起動してマウスをちまちま動かしながらスライド作るのってダルい
- Vim だけでスライド作れたらいいのに
- スライドだって大別すれば構造化文書の一つだし Markdown 書くだけでスライドが作れてもいいじゃないか
それ reveal.js で出来るよ(2013年に知った)
参考
JavaScript - なんかかっこいいプレゼンテーションテンプレートを探しているならreveal.js使ってみろって - Qiita
テキストファイルでスライドが作れることで得られた利点
- バージョン管理しやすい
つまり以下の利点が得られることでもあります
- ミスを PullRequest で修正してもらえる
HTML になることの利点
- ブラウザさえあれば見える(※でもさすがにIE8とかでは動かないみたいです)
- SlideShare や SpeakerDeck のようにモッサリしない
- ハンズオン時に使いやすい
- 公開しておいて URL を示しておけば講師のスライドのページ送りにいちいち合わせる必要がない
- スマホでも割と綺麗に見える
今までスライド作成に対して非常に重かった腰が90%くらい軽くなりました
目標
今って Twitter Bootstrap デザインの Web ページを見ると「また Bootstrap か(笑)」みたいになりますよね
それと同じように「また reveal.js か(笑)」みたいになって欲しいです
そりゃ当然不便なこともあるけどテキストエディタだけでスライドが作れるのってマジお手軽嬉しい
ということでどんどん皆さんも文字書いていってスライド作ってLTしましょう
画像貼り付けも普通に出来ます
ていうか HTML で出来ることは理論上何でも出来ますね
おわり
当然このスライドも GitHub 上に公開されてます ので誤字脱字の指摘から内容の追加まで任意のご意見を Issues と PullRequest でお待ちしております