ブログズミ: reveal.js + Markdown のちょっとしたメモ

2015年2月25日水曜日

reveal.js + Markdown のちょっとしたメモ - その２

「ブログズミ: reveal.js + Markdown のちょっとしたメモ」
の２回目です。

前回は、

表題が大文字表記にならないようにする
空行を入れる
タグを直接記述する
公開する

の４つを紹介しました。

また少し備忘録がたまったので紹介していきます。

HTML 変換後の表示

Markdown でスライド記述していると、最終的に出力される HTML がどのように記述されているか知りたくなる場合があります。その場合は、ブックマークレットを使うと便利です。
ブックマークレットが何かはこのへん参考にしてください - ブックマークレット - Wikipedia

Chrome で説明します。
ブックマークマネージャーを開き、ページを追加します。
適当な名前をつけて、URL に下記を入力してくさい。

javascript:document.write('<xmp>'+document.documentElement.innerHTML+'<\/xmp>');

以上で設定終わりです。

スライドを Chrome で開き、先ほどのブックマークを開きます。
すると、最終的な HTML テキストが表示されます。

F5 で更新するともとのビューに戻ります。

PDF に出力

URL の後ろに ?print-pdf を付け足してブラウザ(Chrome)で開きます。
PDF保存用のレイアウトで表示される（ここでは崩れて見える）ので、印刷から「PDFに保存」を選択（ここで正しく表示される）し出力します。

テーマの作成

<link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme">

テーマは上記のように reveal.js/css/theme にあるものを選択するか、URL の末尾に ?theme=black (3.0 からできなくなった？)などのように指定する方法があります。
こちらのテーマですが、自分好みのものを作ることもできます。

作り方は簡単です。ベースとなるテーマの css をコピペして、あとは好きな様に書き換えるだけです。
色変えとかフォント変えたりとかくらいなら簡単にできます。

Boost.勉強会の LT で発表したときに、テーマを書いたので紹介しておきます。
ブログズミ: Boost.勉強会#16 大阪に行ってきました
https://github.com/srz-zumix/slide/blob/gh-pages/reveal.js/css/theme/zumix.css

※ reveal.js 3.0.0 にバージョンアップしたので当時から変更がかかってます。

背景付きテーマ

スライドの背景にちょっと絵が出ている。そんなテーマを作ってみたいと思います。

これが正攻法なのかわかりませんが、div.slide-background が各スライドに挿入されるのでそこで下記のように背景画像を設定します。

.reveal div.slide-background {
  background-image: url("../../../images/icon_reasonably_small.png");
  background-repeat: no-repeat !important;
  background-size: 5%;
  background-position: right 20px top 20px;
}

位置や大きさ、アルファなど自由に設定することができます。

アイコンを右上に出すサンプル↓
http://srz-zumix.github.io/slide/iuwandbox-bg/#/

Notes を使う

Notes をローカル環境で見るためにはローカルサーバーを立てる必要があります。
ローカルサーバーを立てる手順はこちらに記載されています。
https://github.com/hakimel/reveal.js/#full-setup

Node.js のインストール
Grunt のインストール
cd reveal.js
npm install
grunt serve

でローカルサーバーが起動します。
ルートディレクトリを変更したい場合は、reveal.js/Gruntfile.js の以下の base 部分を変更してください。

connect: {
   server: {
    options: {
     port: port,
     base: '.'
    }
   }
  },

ローカルサーバーを起動したら、ブラウザで localhost:8000 にアクセスしてください。（デフォルトポートは 8000）
スライドが表示されたら、's' キーを押します。
すると、以下のようにノートが表示されます。

※ 3.0.0 からローカルサーバーを立てなくても Notes が使えるよになりました

App::revealup

もっと簡単にスライド書きたい！という人は、「App::revealup」を使ってみてはどうでしょう。
App::revealup は、面倒なサーバー立てやオリジナルテーマの作成などが簡単にできるようです。

一瞬でクールなスライドがつくれる「App::revealup」をリリースしました - ゆーすけべー日記

今回は以上です。また、ネタがたまったらブログに書きたいと思います。
それでは～

ブログズミ

ページ