読者です 読者をやめる 読者になる 読者になる

やーまんぶろぐ

気が向いた時にだけ書くブログ

Slideckを使ってMarkdownで簡単にスライドを作成する方法

Slideckを使ってMarkdownで簡単にスライドを作成する方法をメモしておきます。

blog.yusuke.be


Markdownでスライドを作れるreveal.jsを調べてたら、Slideckというサービスを発見しました。

自分で環境を構築する必要がないので、公開目的のスライドであればこれで十分ですね。

Slideck用のgistを作成

mdファイルを作成します。
slide.md · GitHub

このとき画像ファイルはUIからはアップロードできないので注意。

gistに画像ファイルをアップロード

下のリンクを参考。
Gistにpngをアップする方法をメモしておく。 – yuta _ 0

一度git cloneしてからpushする必要があります。

git clone git@gist.github.com:4b2532e7c3ba9db08f48b46c5f03308d.git
cd 4b2532e7c3ba9db08f48b46c5f03308d
# ディレクトリにpngファイルを移動
git add yamano.png
git commit -m "add png file"
git push

スライド作成

slideck.io

slideck.ioのトップページから作成したMarkdownファイルを入力して、Show Slidesボタンを押すだけでできあがりです。
f:id:yamano3201:20160506205110p:plain

下のリンクから、今回作成したスライドが確認できます。
Title - Slideck

ブログへの埋め込み

埋め込みはちょっと難しいですね。。

  • pdf化 → slideshare投稿 → 埋め込みコード貼り付け(できなかった。。)
    • 上の流れで埋め込みコードを作成しようとしたけどpdf化ができなかった。(できるけど崩れる)
    • 本家のreveal.jsでは/?print-pdf/# をつけるとうまくpdf化できたのですが、slideckではできないようです。(検証が足りていないかもしれません)
    • reveal.jsで作った資料をChromeでPDF出力する方法 - Qiita

pdf化できたとしても手間なのでしない方向で。リンクとgif貼る感じですかね。

最後に

しばらくこれでスライドは作ってみようと思います。

気が向いたら、また書きます。