MarkdownでSlide作成して自分のGitHub Pagesで公開する

MarkdownでSlide作成して自分のGitHub Pagesで公開する奴を作りました。 資料がアチラコチラに散らばることがなく、テキストでGitなので差分が見れたりと結構便利です。 動きがあるスライドなどは辛いですが、さくっと作る時には良いかと思いますので良かったら使ってみてください。

忙しい人用まとめ

• SlideをMarkdownで書いて自分のGitHubで管理して、自分のGitHub Pagesで表示できるようにした。
  • reveal.js version 3.5.0を使用
• 毎回HTMLとか書きたくないので、Markdownのパスを指定すればスライドが表示されるようにした。
• 真似したい人は、リポジトリをForkやCloneして、GitHub Pagesで公開すればすぐ使えます。（↓に使い方書いてます）
  • https://github.com/yamap55/SlideWithGitHubPages
• スライドサンプル
  • http://yamap55.github.io/SlideWithGitHubPages/index.html?slide=example/slide1.md
  • http://yamap55.github.io/SlideWithGitHubPages/index.html?slide=example/slide2.md

経緯とか

私はスライド資料をPowerPointやKeynoteで作るのが嫌なのでMarkdownで作成しGitHubで管理しています。*1今までは、そのスライドをSlideck(https://slideck.io/)というサービス*2でスライド表示していたのですが、たまに繋がらない事があったり、HTTPSで警告が出るようになったりとしていて、最近サイト自体が消えてドメインが別の方のものになってました。😂

代替サービスも色々探してはいたのですが中々しっくりくるものに巡り会えず。（一応下の方にまとめておきます。）自分でなんとかしようとなった次第です。

Markdownをスライド表示するreveal.jsは以前少しだけ触ったことがあったので、外部ファイルからファイルを読み込める事ができることは知っていました。なので、GitHubにあるMarkdownファイルを直接読ませたら表示できるのでは？っと読ませたら普通にスライドが表示されました。*3

という事で、最終的にはGitHub Pagesとして作成してみました。

使い方

初回

• git clone or forkして自分のGitHubにリポジトリ作成
• プロジェクトのsettings
• GitHub Pagesとして公開
• 以下にアクセス
  • http://${userId}.github.io/${repositoryName}/index.html?slide=example/slide1.md

スライド追加

• Markdownでスライドを書く
  • 書き方は検索するか、サンプル見てください。
• GitHubにpush
• 以下にアクセス
  • http://${userId}.github.io/${repositoryName}/index.html?slide=${markdownPath}

PDF出力をする場合

• 公式にも記載がありますが、一応記載しておきます。
• URL末尾に「&print-pdf」を付与して表示。
  • 例 : http://yamap55.github.io/SlideWithGitHubPages/index.html?slide=example/slide1.md&print-pdf
• ブラウザの印刷設定
• PDFに保存、横向き、背景のグラフィックにチェック
• 保存

注意点

• GitHub Pagesなので更新が遅い場合があります
  • ブラウザにキャッシュされている場合もある（キャッシュクリアや別ブラウザ、シークレットモードなどで確認）
• 古いブラウザは考慮していません
• オフラインでは見れません（↓のPDF化参照）

調査した代替サービス（覚えているものだけ）

• GitPitch
  • ○ GitHubで管理
  • × リポジトリ1つが1スライド
  • × ヘッダやフッタに色々ついてくるっぽい
• Qiita
  • ○ Qiitaの記事をスライドで表示可能
  • × GitHub管理ではない（資料が分散してしまう、芝が生えない）
  • ○ たくさんの人に見てもらえる
• Marp
  • × クライアントアプリケーション
    • 好きなアプリケーションを入れられない場合があるかも？そもそも自分のPCが使えない場合もあるかも？
  • ○ 結構盛り上がってるっぽい : 参考
  • ○ GitHubに☆がいっぱい！ : 参考
• WikiNote
  • △ 匿名
  • × 誰でも変更可能
  • × GitHub管理ではない（資料が分散してしまう、芝が生えない）
  • × スライドモードでスライドが2枚づつ作成されている？
• Generate Google Slides from markdown
  • 最近発見したのであまり調べてないが、最終的にこれでGoogleSlideに変換してSlideShareなどで公開するのもありかな？
  • 参考 : MarkdownファイルをGoogleスライドに変換

*1:どこでもアクセス可能、履歴、差分見れる、芝生えるとメリットいっぱい

*2:ボケてなどを作ってる、ゆーすけべーさんが作成。 http://blog.yusuke.be/entry/2016/03/18/150640

*3:raw表示を行うURLを渡しましょう。 https://raw.githubusercontent.com/…