textileをhtml5slidesなスライドショーにする
動機
- googleのhtml5slidesを使って発表している人をよく見る
- 議事録等に利用するredmineではtextileフォーマットをよく使う
- textileをスライドにできれば議事録も楽になるのではないか
- 作ってみよう
始めはflaskで実装しましたがサーバ立てるのは面倒だと思い、javascriptになおしました。textileフォーマットのテキストをどこかにアップロードして、ブックマークレットを呼び出せばスライドショーできます。
使い方
- textile to slidesのリンク先のブックマークレットをブックマークします
- textileのテキストを開きます(例: example.textile.txt )
- ブックマークレットを実行します
実装方針
html5slidesの構造は、html/body/section/articleのようになっています。sectionの中にarticle要素(スライド)を並べることでスライドを作成できます。
textileフォーマットにはページ区切りの要素がないため、H1やH2などのヘッダ要素を区切りにしてarticle要素内に包含するようにしました。textileフォーマットでは、h1. XXXXのように書くとヘッダ要素を作成できます。
すなわち
h1. aaa ppp h1. bbb h2. ccc
↑これを、↓こうします。
<article> <h1>aaa</h1> <p>ppp</p> </article> <article> <h1>bbb</h1> </article> <article> <h2>ccc</h2> </article>
実装
(python) flask+lxml+PyTextile+html5slidesで実装
https://bitbucket.org/joma/textiletoslides.flask/
- POSTデータやURL先のテキストからデータソースを読み込み
- PyTextileでHTMLに変換
- H1,2,3要素から次のH1,2,3までarticleに追加
- テンプレートで出力
flaskだとサーバ動かす必要があり、それじゃちょっと...ということでjavascriptに路線変更しました。
(javascript) textile javascript+html5slidesで実装
http://let.hatelabo.jp/joma/let/gYC-yfWK8PDZaQ
chromeなどでは、テキストファイルをhtml/body/pre要素として表示するので、それをデータソースとしました。
- html/body/pre[0]をデータソースとして読み込み
- Javascript TextileでHTMLに変換
- H1,2,3要素から次のH1,2,3までarticleに追加
- html5slidesのhandleDomLoaded関数を呼び出し