これは以下のような人を対象にしたポストです

• スライドをmarkdownでつくりたい
• ブログはmarkdownでかいている
• ずぼらするためには努力を惜しまない

デモ

とりあえず以下のスライドをみてください。

• /slide/2013/10/18/revealjs/

reveal.jsとは

HTMLでかけるプレゼンツールです。詳細は以下等を参照してください。

• http://lab.hakim.se/reveal-js/

static CMS

説明は省略します。このブログはblogofileでできていますが、jekyllやhakyllのようなものでもほぼ同等なことができます。

• http://jekyllrb.com/
• http://www.blogofile.com/
• http://jaspervdj.be/hakyll/

やり方

reveal.jsのmarkdown埋め込み機能をつかうだけです。reveal.jsのREADMEを読むとめんどうなように見えますが、 revealjs.mako のようにテンプレートを書くだけ。とはいえ多少のコーディングが必要です。

詳細は以下のソースをみてください。

• revealjs.mako
• slide.py

code highlight

コードハイライトつかえます。

#include <stdio.h>

// highlight test

int main(int argc, char *argv[]) {
    printf("hello, world!\n");
    return 0;
}

fragment

fragmentもつかえます。

... to step through ...

1. any type
2. of view
3. fragments

長所

• ブログ書くついてでにスライドもできる
• スライドの共有が簡単
• パワポ不要
• さりげなくギークっぽさがアピールできる

短所

• ブログとスライドのそれぞれの完成度を両立した記事にまとめるのは難しい
• 多少はhtmlを書く必要があるときもある

まとめ

• blogofileにreveal.jsを組み込んだ話を紹介しました
• reveal.jsかっこいいです

こんな風にイメージ画像がある記事の場合は、一覧ページでもこの画像をサムネイルで表示させたい。

例えば、 http://mojavy.com のトップページ右カラムにある最近の記事一覧みたいに画像を表示できるようにする。

これをするには、postオブジェクトにそういう属性をもたせればよいので、controllers/blog/post.pyに以下のように一行追加する。

+++ b/_blogofile/_controllers/blog/post.py
@@ -93,6 +93,7 @@ class Post(object):
         self.slug = None
         self.draft = False
         self.filters = None
+        self.image = None
         self.__parse()
         self.__post_process()

そうしておくと、各記事のヘッダにあるyamlから勝手に読み込んでくれるので、

categories:
date: 2011/11/06 20:32:51
title:
image: /images/rena.jpg

のようにすれば${post.image}のようにして参照できる。

• https://github.com/taksatou/taksatou.github.com

いままでblogger使ってましたが、github pagesに引越しました。

http://tanarky.com/blog/2011/10/29/002_github_blogofile_original_domain/ を参考にしてblogofileで構築しました。

デザインは http://www.webdesignlondon-tristar.co.uk/website-templates から拝借しました。

blogofileのテンプレートは https://github.com/mpirnat/blogofile.com あたりを参考にするとよいと思います。

よくあるブログサービスをそのまま使う場合と比べると構築までのハードルが若干高いですが、今後ちょっとしたウェブページをつくりたくなったときもソースをそのまま流用できるし、bloggerで色々不満だったことが解消できてよい感じです。