html5slidesを使ってみた

2011/08/02 | 開発記録 | admin

google謹製のhtml,css,javascriptだけで作るプレゼンツール。
基本的にいじるのはhtmlとcssだけなので、
パワポとかキーノートとかあまりいじったことない。
テキストエディターの方が簡単。
とか思ってる人には丁度良いかもしれない。

ただまあ、パワポとかキーノートとかに比べると、あまり凝ったことはできないでしょうね、スキル次第ですが。
あと利点として、そのままサーバーに上げて公開できるのがいいですよね。
慣れてる人なら、さくっと作ってさくっと公開できる。
ipadでも動きましたよ。

ちなみに僕は英語が読めないので、書いてあることは基本適当です。

では、さっそくと言いたいところですが、
どこからダウンロードするのか分からなかったので、デモページをそのまま保存して使う。

html5slides 本来はこの辺からダウンロードするんだろうけど、
なかったのでデモを、ブラウザのファイルから保存。
DEMO

index.htmlが保存されました。
ソースを見てみます。
googlecode.comからjsファイルを一つだけ読み込んでます。
ふーむ、オフラインだと使えない？
コレ　http://html5slides.googlecode.com/svn/trunk/slides.js
詳しく読んでないけど、そのjsファイルをローカルに保存しただけではダメそうな雰囲気なので、オフラインのことは忘れる。

http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|Droid+Sans+Mono
http://html5slides.googlecode.com/svn/trunk/prettify.js
http://html5slides.googlecode.com/svn/trunk/styles.css
試しにfirebugで見てみたら、三つファイルを読み込んでる。
その中がどうなっているのかは見てない。

head内に、styleで囲われたスペースが空いている。
ここに独自のcssを書けってことらしい。
じゃあ元のcssはどうなってるの？ってことで見る場合は、
http://html5slides.googlecode.com/svn/trunk/styles.css
を落としてみてみる。

次。
body内には、sectionってタグとarticleってタグがある。
これが編集のメインらしい。
articleを増やすとページが増える。
順番を変える場合は、articleの順番を変える。
1番上にあるarticleが1ページ目ってこと。

sectionタグ内に3つのclassが書いてある。
この内、template-default が全ページ共通のテンプレートになる部分。
と言っても、基本画像1枚を指定してるだけだったり、

.slides.template-default > article:not(.nobackground):not(.biglogo) {
  background: url(images/google-logo-small.png) 710px 625px no-repeat;  
  
  background-color: white;  
}

こんな感じ。
とっても簡単。

.slides.template-io2011 > article:not(.nobackground):not(.biglogo) {
  background: url(images/colorbar.png) 0 600px repeat-x,
              url(images/googleio-logo.png) 640px 625px no-repeat;

  background-size: 100%, 225px;  

  background-color: white;  
}

cssの中にこんなんもあった。
せっかくなので、ちょっと変えてみる。

変更前
<section class='slides layout-regular template-default'>
変更後
<section class='slides layout-regular template-io2011'>

デザインが変わりましたね。
テンプレートを作る際の参考になりそうです。

あとはガシガシ書く。
cssはファイル分けるのも面倒だから、head内に書く。

ちなみに、メインのindex.htmlはそのままのファイル名にして、
ディレクトリ名で内容を分けた方が良い気がします。
ディレクトリの中にオリジナルテンプレートの画像をドカドカ置いて、
できたらそのままzipで固める or サーバーに上げるのも簡単。

ちなみにオリジナルテンプレートは、元ファイルからコピーしてきた、
以下のソースをhead内のstyleに貼り付けて使いました。

.slides.template-default > article:not(.nobackground):not(.biglogo) {
  background: url(オリジナル.png) 710px 625px no-repeat;  
  background-color: white;  
}

WEBサイトってこれだけでも良さそう。