Markdownでスライド作成

Symfony Meetup #11 LT 資料
https://symfony.doorkeeper.jp/events/42490

Transcript

1. Markdown でスライド作成 #symfony_meetup 2016.04.24 @qckanemoto 1 / 38
2. @qckanemoto （たつ き ち） 名古屋 か ら来ました （株）カルテットコミュニケーションズ CTO PHP 歴 4 年 , Symfony 歴 2 年（ 1 年 ぐ ら いROM 専） 　　　　　　 ちょっとだ けお 手伝 い しました 2 / 38
3. カルテットコミュニケーションズ 絶賛 PHPer 募集中！ 「Symfony2 本 」 の @hidenorigoto さん Joined ！ リスティング広告運用ツール 「Lisket」 3 / 38
4. カルテットコミュニケーションズ エンジニアの働 き やすさ超大事にしてます 4 / 38
5. カルテットコミュニケーションズ SNSか メールで お 気軽に ご 連絡 く ださ い 5 / 38
6. 本題 6 / 38
7. Markdown でスライド作成 7 / 38
8. 以前の僕 8 / 38
9. 最近の僕 9 / 38
10. Ｉ ＭＤ 10 / 38
11. メジャーなツール が いく つ かあ ります 11 / 38
12. Reveal.js 12 / 38
13. Cleaver 13 / 38
14. わ が ままな僕 最終的に 4:3 と か16:9 と か で PDF 化した い Keynote みた い にタイマーとノートを見な が ら発表 した い 14 / 38
15. Remark 15 / 38
16. 16 / 38
17. 17 / 38
18. 18 / 38
19. 使 い 方 19 / 38
20. インストール $ g i t c l o n e g i t @ g i t h u b . c o m : q c k a n e m o t o / r e m a r k b a s e . g i t $ c d r e m a r k b a s e $ n p m i n s t a l l - - g l o b a l g u l p $ n p m i n s t a l l $ g u l p t h e m e # デフォルトテーマを有効化 $ g u l p s l i d e # サンプルスライドを有効化 20 / 38
21. スライドを表示 $ g u l p s e r v e 21 / 38
22. スライドを新規作成 $ m k d i r s l i d e s $ v i s l i d e s / s y m f o n y - m e e t u p - 1 1 . m d # これを編集 $ g u l p s l i d e - t s l i d e s / s y m f o n y - m e e t u p - 1 1 . m d $ g u l p s e r v e 22 / 38
23. スライドを編集 中はファイルの変更を監視してリアル タイムにブラウザ が 更新されるので 、 快適に編集 で き ます Remark 独自の拡張記法と か は https://github.com/gnab/remark/wiki 参照 remarkbase 独自のユーティリティ class と か は https://github.com/qckanemoto/remarkbase 参照 g u l p s e r v e 23 / 38
24. テーマを自作 テーマと言っても CSS ファイル 1 つで OK 自分用に作ったものを https://github.com/qckanemoto/remarkbase-themes で公開してるのでよろし け ればど う ぞ $ m k d i r - p t h e m e s / y o u r - o w n - t h e m e $ v i t h e m e s / y o u r - o w n - t h e m e / s t y l e . c s s # これを編集 $ g u l p t h e m e - t t h e m e s / y o u r - o w n - t h e m e $ g u l p s e r v e 24 / 38
25. プレゼンテーション ブラウザ上で をタイプするとプレゼンテーショ ンモードに P 25 / 38
26. プレゼンテーション ブラウザ上で をタイプするとウィンドウを複製 （複製したウィンドウはページ が 同期される） C 26 / 38
27. プレゼンテーション ブラウザ上で をタイプするとフルスクリーンモ ードに F 27 / 38
28. プレゼンテーション 手元はプレゼンテーションモード プロジェクタ側はフルスクリーンモード こ れで気分は Keynote 28 / 38
29. PDF 出力 Remark 自体にそ ういう 機能はな い OS の印刷機能で PDF 出力する し か も謎の苦し い ハック が 必要 でも出来るには出来る！ 29 / 38
30. PDF 出力（ Chrome の例） 1. （ファイル→ 印刷） 2. を に 3. を に ⌘+ P 送信先 P D F に保存 余白 なし 30 / 38
31. PDF 出力（ Chrome の例） こ のままだと 、 変な余白 が で き てしま う 31 / 38
32. PDF 出力（ Chrome の例） し か し 、 ウィンドウの大 き さを調整すると … 32 / 38
33. PDF 出力（ Chrome の例） ピッタリ！ 33 / 38
34. PDF 出力（ Chrome の例） あ とは 「 保存 」 するだ け です 34 / 38
35. PDF 出力（ Chrome の例） ピッタリ！ってなるウィンドウのサイズは多分環 境によって変わるので 、 探り当てて く ださ い ｗ 僕の MacBook Pro 13in では 910 x 682 でピッタリ です Window Resizer って いうChrome 拡張を使 う と 、 サイズを覚 え させて おい てワンクリックでリサイ ズと か で き て便利です 35 / 38
36. まとめ 36 / 38
37. Ｉ ＭＤ Markdown 最高 Keynote の代わりなら Remarkがいい と思 い ます remarkbase 便利だと思 う のでぜひ使ってみて く だ さ い 37 / 38
38. Thanks :) 38 / 38