herokuでなんか作る、7日目

19:00-

きょうやること

• スライドの基本動作つくる

前回規定したスライドの挙動を実装する。

作成するページ

• 表題ページ (タイトル＆著者名...)
• タイトルページ (テキストのみ)
• タイトル & リストページ
• 画像ページ
• コードページ
• ビデオページ

方針としては、できるだけシンプルなDOM構造にする (markdown.jsが利用できる形).

表題ページ

markdown

# Slide Title

author: FirstName LastName
date: 2014-03-30

html

<slide>
  <h2>Slide Title</h2>
  <p>author: First Name <br/>
  date: 2014-03-30 Sun.</p>
</slide>

タイトルページ

markdown

# Title

html

<slide>
  <h2>Title</h2>
</slide>

センタリングができない... 調べると、vertical-align: middle; するとよいってかいてあるけど、これはheightが固定の場合(height: 100%とかするとX)しか機能しなかった。 以下のように親要素に修正することで機能した。

html

<slide style="display: table; height: 100%">
  <h2 style="display: table-cell; vertical-align: middle;">Title</h2>
</slide>

livereload

参考： http://yuzuemon.hatenablog.com/entry/2013/10/15/230642

開発していて、livereloadが予想以上に気持ちいい。。 presentationでこのライブリロード開発ができたら、きもちいいだろうな... websocketつかえば実現できそうなので、次回にやってみる。。

compile形式

htmlのタグはsimple&固定にしようとおもったんだけど、 予想以上にhtmlのDOM構造がデザインやレイアウトにひもづいていて簡素なままだときつい。。

スライドデータとDOM構造・スタイルの依存をきってカスタムできるように構造をかえようとおもう。 イメージとしては以下のような感じ.

markdown -> cson - (任意のパーサー) -> html / css

csonは以下の感じで表現。

---
theme: "slim"
title: "title"
description: "description"
---
style: "top"
title: "title"
description: "first last name"
---
style: "image"
title: "sample photo"
image: "http://localhost:8080/logo.png"
---
style: "list"
title: "list title"
list: [
    "item1",
    "item2": [
        "item2.1"
        "item2.2"
    ]
]
---

...

今日は、とりあえず、各ページのベースつくれた。