Markdown Slideshow


簡単にプレゼンテーションのスライドを作るツールはたくさんあります。
[Slidebean](https://slidebean.com/)や[Deckset](http://www.decksetapp.com/)を使いましたがGitHubやGitLabなどで
Markdownを使う機会が多いと普段のエディターでスライドを作りたいです。

普段のエディターは`Sublime Text`で`Markdown Preview`のパッケージを使っています。
今回は`Markdown Slideshow`のパッケージで[Speaker Deck](https://speakerdeck.com/)に公開する手順を紹介します。

この手順で作成したスライドを[勉強会](http://ogom.github.io/2014/05/31/KansaiWorkshop061.html)で発表しました。
[発表のスライド (Changelog on Blog)](http://ogom.github.io/slides/changelog_on_blog/slide.html)

## Markdown

最初に[Markdown](http://daringfireball.net/projects/markdown/)の良いところを紹介します。

* プレーンテキストとして文書を記述 --> 好きなエディターを使うことができます。
* 軽量で書きやすく、読みやすい --> シンプルなレイアウトなので文章に集中できます。
* HTMLへと変換 --> 画像、リスト、表などの高度な表現力を利用することができます。

これらはシンプルなプレゼンテーションのスライドを作ることに向いています。

### Usage

プレゼンテーションのスライドに便利な[記法を紹介](http://ogom.github.io/sublimetext-markdown-slideshow/docs/)します。
（[拡張記法](https://pythonhosted.org/Markdown/extensions/index.html)はエディターにより対応していない場合があります。）

#### 画像のサイズ変更

`<img>`タグのwidth属性やheight属性を設定します。

##### Example

画像の幅を`100px`にします。

Markdown:

```Markdown
![original](https://octodex.github.com/images/original.png){:width="100px"}
```

Output:

```HTML
<p><img alt="original" src="https://octodex.github.com/images/original.png" width="100px" /></p>
```

#### 画像のポジション変更

style属性が使えるので、スタイルシートのテクニックを活かす事ができます。

##### Example 

画像の位置をセンタリングします。

Markdown:

```Markdown
![repo](https://octodex.github.com/images/repo.png){:width="100px" style="display:block;margin-left:auto;margin-right:auto;"}
```

Output:

```HTML
<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:

```Markdown
[![benevocats](https://octodex.github.com/images/benevocats.png){:width="100px"}](https://octodex.github.com){:style="margin-left:100px;"}
```

Output:

```HTML
<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](http://octicons.github.com)の`Octocat`が表示されます。

Markdown:

```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:

```HTML
<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:

```Markdown
<!-- I ❤ CATS -->
```

Output:

```HTML
<!-- I ❤ CATS -->
```

## Workflow

プレゼンテーションのスライドを作る方法を紹介します。
`Markdown` -> `HTML` -> `PDF` -> `...` と変換します。

### Write in markdown

まずは、Markdownでテキストを記述します。
スライドの区切りは`----`です。`____`で区切るとスライドの文字が小さくなります。

```Markdown
# タイトル

コンテンツ

<!--
  ノート
-->

----

次のコンテンツ

____

## コンテンツ文字が小さく

コンテンツ
```

### Slideshow in browser

次に、[Markdown Slideshow](http://ogom.github.io/sublimetext-markdown-slideshow/)のパッケージで`HTML`に変換します。

```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](http://qiita.com/ogomr/items/83fb0062f926045067c8)を利用しています。
* 高橋メソッドには[Google I/O 2011 slide template](http://ogom.github.io/python-mcider/examples/io2011/slide.html)が向いています。

`Sublime Text`を使わない場合は、[mCider](http://ogom.github.io/python-mcider/)がコマンドラインに対応しています。

### Export to PDF

そして、Webブラウザの機能で`PDF`に変換します。

* `Safari`のプリントで方向を横向きにしています。

![safari_print](https://dl.dropboxusercontent.com/u/14690051/images/notes/slide/safari_print.png)

### Upload a PDF

最後に、`PDF`を`Speaker Deck`にアップロードします。
パブリックに公開するには`Publish this deck`をチェックしましょう。

![speakerdeck_new](https://dl.dropboxusercontent.com/u/14690051/images/notes/slide/speakerdeck_new.png)

また、PDFは`PowerPoint`に変換できるので、`Keynote`にも変換できます。

**MarkdownがPowerPointになるのは、何かと便利です。**

# Tips

## Jekyll sites on GitHub Pages

[GitHub Pages](https://help.github.com/articles/migrating-your-pages-site-from-maruku)は[kramdown](http://kramdown.gettalong.org/)をサポートしているので紹介した拡張記法を利用することができます。

kramdownの`Fenced code blocks`の記法は`~~~`ですが、Jekyllの`_config.yml`に
[Github Flavored Markdown](http://jekyllrb.com/docs/configuration/#kramdown)を設定すると<code>```</code>が利用できます。

```YAML
markdown: kramdown
kramdown:
  input: GFM
```