esa.io で、 Markdown を使ってスライドショーを作成し、外部公開する #esa_io

# :baby_chick: esa.io で、 Markdown を使って :movie_camera: スライドショーを作成し、外部公開する #esa_io
## :musical_score: 概要
:baby_chick: esa.io で、 Markdown を使って :movie_camera: スライドショーを作成し、外部公開します
## :musical_note: esa.io のスライドショーについて
基本的な話はこちらのエントリにまとめてあります。

<i class="fa fa-external-link" style="font-size:1em;"></i> [esa.io で、 Markdown を使ってスライドショーを作成し、内部公開する](http://qiita.com/tbpgr/items/33f6992368bf7163a6f3)

## :musical_note: 2015/01/13 外部公開機能の追加
2015/01/13 に、新機能として 記事およびスライドの外部公開設定が追加されました。

<i class="fa fa-external-link" style="font-size:1em;"></i> [記事(スライド)の外部公開](https://docs.esa.io/posts/46)

## :musical_note: 外部公開機能追加の経緯
esa.io 運営得意のツイートからの「やりましょう（暗黙）」駆動です。

<blockquote class="twitter-tweet" lang="ja"><p><a href="https://twitter.com/yasainet">@yasainet</a> 現在のところできませんが、いずれ何らかの形で実装したいと考えています。実装の際に参考にいたしますので、よろしければどのようなシチュエーションで外部公開したいか教えていただけないでしょうか？</p>&mdash; esa_io (@esa_io) <a href="https://twitter.com/esa_io/status/552790777336582144">2015, 1月 7</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" lang="ja"><p><a href="https://twitter.com/yasainet">@yasainet</a> なるほど、理解しました。ありがとうございます！</p>&mdash; esa_io (@esa_io) <a href="https://twitter.com/esa_io/status/552792512595632128">2015, 1月 7</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" lang="ja"><p><a href="https://twitter.com/yasainet">@yasainet</a> ﾃﾞｷﾀｰ (\( ⁰⊖⁰)/) <a href="https://t.co/QzsmOgsqOB">https://t.co/QzsmOgsqOB</a></p>&mdash; esa_io (@esa_io) <a href="https://twitter.com/esa_io/status/554678999809409024">2015, 1月 12</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

## <i class="fa fa-flask" style="font-size:1em;"></i> 早速外部公開機能を使ってみる
### <i class="fa fa-tint" style="font-size:1em;"></i> 元ネタ
私が CodeIQ で出題している デスマコロシアム問題 の告知用スライドを esa.io に移転してみます。  

現在, このスライドは reveal.js + GitHub Pages の構成で作成しています。

* <i class="fa fa-external-link" style="font-size:1em;"></i><i class="fa fa-github-square" style="font-size:1em;"></i> [GitHub デスマコロシアムスライド ソースコード](https://github.com/tbpgr/deathma_slide)
* <i class="fa fa-external-link" style="font-size:1em;"></i>:movie_camera:[GitHub Pages デスマコロシアムスライド](http://tbpgr.github.io/deathma_slide)

### <i class="fa fa-tint" style="font-size:1em;"></i> Markdown の移行
まずは、Markdown の記事を作成します。
前述の GitHub に公開していた、 Markdown は 1ページ 1 ファイルになっていましたが、
1つの Markdown へとマージします。
（少し情報をそぎ落として移行します）

結果、以下の様な記事になりました。

<i class="fa fa-external-link" style="font-size:1em;"></i> [デスマコロシアム ](http://esa-pages.io/p/sharing/912/posts/14/187db727700ee5616a42.html)

### <i class="fa fa-tint" style="font-size:1em;"></i> public 公開の設定
* Share Port ボタンを選択

![slide_public1.png](https://qiita-image-store.s3.amazonaws.com/0/43480/68feeab5-bb7d-409b-09d4-5d9e5a452e71.png)

* ダイアログが表示されるので Create Share URL を選択します

![slide_public2.png](https://qiita-image-store.s3.amazonaws.com/0/43480/06543525-70c7-69af-6fe4-1cc6bc8a4ccb.png)

![slide_public3.png](https://qiita-image-store.s3.amazonaws.com/0/43480/204b6453-bd98-dd67-f5f8-f96dc844af6e.png)

### :baby_chick: esa.io で :movie_camera: スライドを再生
<i class="fa fa-external-link" style="font-size:1em;"></i> [デスマコロシアム スライド in esa.io](https://esa-pages.io/p/sharing/912/posts/14/0e91efa19fb33dba6ab3-slides.html#/)

無事移行できました。

Reveal.js で保守していた頃は、

* yo でプロジェクトのひな形生成
* yo でページのひな形を生成
* 各 Markdown のページを編集
* grunt でプロジェクトのビルドを実行
* GitHub にリポジトリを作成
* GitHub にプロジェクトを push

という手順が必要だったのが、

* esa.io で Markdown の記事を1つ作成して保存
* Share Port ボタンで外部公開する

だけになりました。