Road to presentation（vscode-revealの話）
※この記事はAPC Advente Calendar 2019 11日目向けに作成されています。
はじめに
3stepでプレゼン資料作っちゃおうぜ！ という記事です。
<読んでほしいかた>
「reveal.js」「vscode-reveal」を知らないかた
「頭に構想はあるけど作るの面倒」というかた
向けのご紹介です。
＜目次＞
そのナレッジ、誰かに伝えてますか？
こんにちは。kaoと申します。
この1年現場でRedmineに死ぬほどチケットをあげていたらだいぶmarkdownと仲良くなりました。
本題。
「自分で得た情報、誰かに伝えてますか？」
まあブーメラン発言なのですが。
業務で得たこと、好きなゲームやキャラクター（推し）のこと、最近行った居酒屋のおいしい夜定食のこと…日常生活で「あっこれみんなに伝えたい！」という時。
思いつく手段と個人的な思いはこんな感じです。
- slackとかExcelとか → 社内向けなら。。。
- twitter → ツリーの一部だけが伝わってしまうことがある
- blog → 長すぎると読んでもらえない
- プレゼンスライド → 目に入る情報をコンパクトにできるけど作るの面倒
要件をまとめると
- 目に入る情報を小分けにして、まとめて伝えたい。
- でも手軽に作りたい。
これを叶えるのがvscodeの拡張機能「vscode-reveal」です。
# markdown記法をおさらいしてたら見つけました。
vscode-reveal - Visual Studio Marketplace
こんなのが作れます。どーん！
（※サンプルなので中身はふざけ倒しています）
やりかた
step1 Visual Studio Codeをインストールする
入っているかたはスキップで。
入っていないかたはこの記事がわかりやすかったです。
step2 Extention「vscode-reveal」をインストール
vscodeの強みはこのExtention（拡張機能プラグイン）でカスタマイズが自由自在なこと！
「vscode-reveal」で検索してください。
step3 Markdownを書いて出力する
書きあがったらコマンドウィンドウ（Ctrl+Shift+P）で
Revealjs:Open presentation in browser
完成
はい！！！！！ブラウザに出ます。
文字で圧倒したいor喋りで補う前提の資料なのですが、
社内LTや勉強会後半の飛び込みLTぐらいならこれでじゅうぶんではないかと。
ちゃんと見せるデザインにしたい場合はHTMLでごりごり作りこんでください。
用途別エクスポート
持ち運ぶなら Revealjs:Export in HTML
slideshareにアップロードするなら Revealjs:Export in PDF
です。
これだけ覚えれば書けるmarkdownの呪文
- 改行は半角スペース×2（Extentionの「Trailing Spaces」で見えるようにしておくのがお勧め）
- 見出しは「#」
- 箇条書きは「*」
- リストは「1.」
- 区切りは「---」（-じゃなくてもよい）
- 表は「 | 値 | 値 | 値 | 」
- コード引用は「```」を上下に（言語名を書くとハイライトをつけてくれる）
# 普段使っているRedmineは適用したい箇所を選択→ボタンクリックでこれ（表以外）をやってくれるんですが、結局自分で打ったほうが早くなりました。
そういうわけで
参考サイト
元々のreveal.js（フレームワーク）公式
reveal.js – The HTML Presentation Framework
この記事の内容が完璧にまとまっています
お手軽reveal.js入門
実際作るときに見ていた記事
スライドをMarkdownで一瞬で作れる！vscode-revealが速くてスゴい。 - Qiita
ごりごり使い込みたいかた向け（最新ではないけど使える）
reveal.jsのREADME.mdを翻訳してみた - Qiita
さいごに
ここまでお読み頂きありがとうございました。
slideshareに出しているサンプルのコードをつけておきますので、よかったらやってみてください。
ホント手軽です。
※この記事の内容に誤りがあった場合、お手数をおかけしますがコメント欄でお知らせください。
サンプルコードを見る
<!--- 対応後、出力前に消してほしい書いた人からのお願いごとです 以下は置き換えてください ・ブログ掲載用のエスケープ文字「\」→削除 ・「好きな画像のJPGファイル名」 →.mdファイルと同一フォルダ内にいれたJPGファイル名 theme（デザイン）はvscode-reveal公式に一覧があります。 お勧めは「League」「Sky」「Beige」あたりです。 ---> --- theme : "League" transition : "default" --- # road to presentation 3ステッププレゼン資料作成 2019/12/11 --- プレゼン資料をmarkdownで作るぜ！ ひゃっほう！！の時間です。 3stepで済みます。 --- ## step1<br>Visual Studio Codeを<br>インストールする 詳しいことは公式を見てちょ。 --- ## step2<br> Extention「vscode-reveal」を<br>インストール Extention(拡張機能)メニュー上部に 「vscode-reveal」と打つんだ！さあ！ 「markdownlint」もRecommendされるので いれるとよいと思います。 --- ## step3<br>Markdownを書いて出力する \``` Ctrl+Shift+P \``` のコマンドウィンドウで \``` Revealjs:Open presentation in browser または Revealjs:Export in HTML \``` を入力 --- Done!!!!! <img class="plain" src="好きな画像のJPGファイル名"/> --- 以上！！！ 気軽にレッツナレッジプレゼン！！！
