簡単にプレゼンテーションのスライドを作るツールはたくさんあります。
SlidebeanやDecksetを使いましたがGitHubやGitLabなどで
Markdownを使う機会が多いと普段のエディターでスライドを作りたいです。
普段のエディターはSublime TextでMarkdown Previewのパッケージを使っています。
今回はMarkdown SlideshowのパッケージでSpeaker Deckに公開する手順を紹介します。
この手順で作成したスライドを勉強会で発表しました。
発表のスライド (Changelog on Blog)
Markdown
最初にMarkdownの良いところを紹介します。
- プレーンテキストとして文書を記述 --> 好きなエディターを使うことができます。
- 軽量で書きやすく、読みやすい --> シンプルなレイアウトなので文章に集中できます。
- HTMLへと変換 --> 画像、リスト、表などの高度な表現力を利用することができます。
これらはシンプルなプレゼンテーションのスライドを作ることに向いています。
Usage
プレゼンテーションのスライドに便利な記法を紹介します。
（拡張記法はエディターにより対応していない場合があります。）
画像のサイズ変更
<img>タグのwidth属性やheight属性を設定します。
Example
画像の幅を100pxにします。
Markdown:
{:width="100px"}
Output:
<p><img alt="original" src="https://octodex.github.com/images/original.png" width="100px" /></p>
画像のポジション変更
style属性が使えるので、スタイルシートのテクニックを活かす事ができます。
Example
画像の位置をセンタリングします。
Markdown:
{:width="100px" style="display:block;margin-left:auto;margin-right:auto;"}
Output:
<p><img alt="repo" src="https://octodex.github.com/images/repo.png" style="display:block;margin-left:auto;margin-right:auto;" width="100px" /></p>
画像にリンク追加
![]()を[]()に含めます。[![]()]()が合体の状態です。
Example
<a>タグの左マージンを100pxに指定します。
Markdown:
[{:width="100px"}](https://octodex.github.com){:style="margin-left:100px;"}
Output:
<p><a href="https://octodex.github.com" style="margin-left:100px;">
<img alt="benevocats" src="https://octodex.github.com/images/benevocats.png" width="100px" /></a></p>
アイコンフォントのスタイルシート
class属性が使えるので、リンクしたスタイルシートを利用することができます。
Example
<a>タグの色を黒にしてリンクと下線を無効しています。OcticonsのOctocatが表示されます。
Markdown:
<link rel="stylesheet" href="http://octicons.github.com/components/octicons/octicons/octicons.css">
[ ](){:class="mega-octicon octicon-mark-github" style="color:black;text-decoration:none;border-bottom:none"}
Output:
<p><link rel="stylesheet" href="http://octicons.github.com/components/octicons/octicons/octicons.css">
<a class="mega-octicon octicon-mark-github" href="" style="color:black;text-decoration:none;border-bottom:none"> </a></p>
表示されない文字
HTMLが記述できるので、コメントが使えます。
Example
HTMLはそのまま使えるので変わりはないです。
Markdown:
<!-- I ❤ CATS -->
Output:
<!-- I ❤ CATS -->
Workflow
プレゼンテーションのスライドを作る方法を紹介します。
Markdown -> HTML -> PDF -> ... と変換します。
Write in markdown
まずは、Markdownでテキストを記述します。
スライドの区切りは----です。____で区切るとスライドの文字が小さくなります。
# タイトル
コンテンツ
<!--
ノート
-->
----
次のコンテンツ
____
## コンテンツ文字が小さく
コンテンツ
Slideshow in browser
次に、Markdown SlideshowのパッケージでHTMLに変換します。
<slide>
<hgroup>
<h1>タイトル</h1>
</hgroup>
<article class="none">
<p>コンテンツ</p>
<aside class="note">
ノート
</aside>
</article>
</slide>
<slide>
<hgroup>
<p>次のコンテンツ</p>
</hgroup>
</slide>
<slide>
<hgroup>
<h2>コンテンツ文字が小さく</h2>
</hgroup>
<article class="smaller">
<p>コンテンツ</p>
</article>
</slide>
これだけでWebブラウザでプレゼンテーションができます。
- スライドのテンプレートにはGoogle I/O 2012 slide templateを利用しています。
- 高橋メソッドにはGoogle I/O 2011 slide templateが向いています。
Sublime Textを使わない場合は、mCiderがコマンドラインに対応しています。
Export to PDF
そして、Webブラウザの機能でPDFに変換します。
-
Safariのプリントで方向を横向きにしています。
Upload a PDF
最後に、PDFをSpeaker Deckにアップロードします。
パブリックに公開するにはPublish this deckをチェックしましょう。
また、PDFはPowerPointに変換できるので、Keynoteにも変換できます。
MarkdownがPowerPointになるのは、何かと便利です。
Tips
Jekyll sites on GitHub Pages
GitHub Pagesはkramdownをサポートしているので紹介した拡張記法を利用することができます。
kramdownのFenced code blocksの記法は~~~ですが、Jekyllの_config.ymlに
Github Flavored Markdownを設定すると```が利用できます。
markdown: kramdown
kramdown:
input: GFM