ゆーすけべー日記

tl;dr

Slideckっていうエンジニア向けっぽいWebサービスをつくりました。できたてホヤホヤです。

slideck.io

GitHubのレポジトリに、とある簡単なフォーマットに従ったMarkdownのテキストファイルを置いとくと、 Slideckの機能を使ってオンラインでクールなスライドショーが表示出来ます。 ルールに従ったURLでアクセス出来るのでブラウザで開くことはもちろん、シェアすることも可能です。 皆さん使って下さいね。

追記

要望を早速もらったのでGistにも対応しました！

↓のGistファイルを...

• https://gist.github.com/yusukebe/22814222320025cba5de#file-slide-md

/gist.github.com/{owner}/{id}/{filename} というパスでアクセスすれば...

• https://slideck.io/gist.github.com/yusukebe/22814222320025cba5de/slide.md

スライドになりま〜す！これで気軽に試せるね！

モチベーション

reveal.jsのMarkdown編集機能を使ったスライド作成が、場合によりKeynoteやパワポより効率的で、 見栄えもカッコよくて好きです。好きがこうじてreveal.jsのラッパーツールであるApp::revealupやrevealgoと言ったプロダクトを自分でつくってきました。

• https://metacpan.org/pod/App::revealup
• https://github.com/yusukebe/revealgo

これらは基本的に自分のPC上にプレビュー用のサーバーを立てる「ローカルホスト」のためのツール群です。 reveal.jsとMarkdownテキストを使ったスライドの表示がより手っ取り早くなるので自分でも重宝しています。

ところが、いざつくったMarkdownテキストをオンラインでシェアする場合に、わざわざサーバーを用意してHTMLでラップさせるという作業が面倒です。 後述するルールに則ったMarkdownテキストであれば自動的にreveal.jsを使ったスライドへコンバートして表示してくれるものを求めていたのです。

Slideck

そこで思いついたのがSlideckです。 godoc.orgに若干インスパイアされる形で考えました。 みんな大好きGitHubのレポジトリ上にスライドのMarkdownファイルを置いて、 そのパスを指定するとサーバーアプリがフェッチしてくれてスライドショーを描画する仕掛けです。 以下の様な特徴があります。

• revealjs / revealgo との互換性
• GitHubに置いた画像の埋め込みなどにも対応
• privateレポのスライドを見たければGitHubログインすればOK、当人しか見れない
• revealgoとは違いMarkdownを一度HTMLへ変換しXSS的にも安全

ちなみにGolangで実装、ホスティングはHerokuで行いました。 思いついてモックアップが出来るのに一晩、デプロイまで含めると2日間というスピード開発です。

使い方

例えば、サンプルで用意しているドキュメントがあるので、それを元に紹介しましょう。

僕は先ほど、GitHubのpublicレポジトリgithub.com/yusukebe/slidesをつくってここにスライドのMarkdownファイルと画像などを置いてくことにしました。

• https://github.com/yusukebe/slides

この場合、ownerが「yusukebe」repoが「slides」となります。そして「sample.md」というpathに以下を書いたMarkdownがあります。 ---がスライドのページ区切り文字ですね。

 # Title

Hi, my name is yusukebe.

---

## Lists

* List1
* List2
* List3

---

## Hello World


    package main

    import "fmt"

    func main() {
        fmt.Println("Hello World")
    }

---

## Image

![Slideck](images/slideck_ss.png)

---

Check out Slideck now!

<https://slideck.io/> 

レポジトリ上のMarkdownをスライドとして描画するには、こちらのルールに従ったURLでSlideckにアクセスします。

 https://slideck.io/github.com/{owner}/{repo}/{path} 

今回の場合は下記URLです！

• https://slideck.io/github.com/yusukebe/slides/sample.md

するとどうでしょう！GitHub上のリソースを勝手に取ってきてくれてreveal.jsを適応したスライドになるじゃありませんか！

Slideckのトップページでは、フォームにリソースの場所を記載すれば勝手に飛んでくれるような機能があるので活用出来ますね。

まとめ

ということで、Markdownベースのスライド作成は捗るし、シェアしやすい仕組みをGitHubを利用しつつつくってみたので、使ってみてください！

slideck.io

今日これから行われるYokohama.(pm6?|go)ではデモを交えてSlideckの話をします〜

• Yokohama\.(pm6?|go) #14 - connpass

宣伝

Podcastやってます！ゆるい感じらしいです。聴いて下さい！

www.wada.fm