Google I/O 2012 slide template

HTML5 slide template for Google I/O 2012はWebブラウザでプレゼンテーションができます。
（hgroup, article, asideなどのHTML5のタグが使われています。）

シンプルな構成で覚えることが少なく、見栄えのよいスライドを作ることができます。
スマートフォンやタブレットにも対応していてスワイプでスライドするのは素敵です。

Installation

$ git clone https://code.google.com/p/io-2012-slides/

Usage

template.htmlを編集してプレゼンテーションのスライドを作成します。

Tags

スライドはタイトルとコンテンツで構成されています。
（PowerPointやKeynoteでよく使われる標準のレイアウトですね。）

Tag	説明
slide	スライドの区切り
hgroup	タイトル
article	コンテンツ
aside	プレゼンターのノート

<slide>
  <hgroup>
    タイトル
  </hgroup>

  <article>
    コンテンツ
  </article>

  <aside class="note">
    ノート
  </aside>
</slide>

Keys

よく使うキーの割当を紹介します。

Key	説明
f	フルスクリーン
w	ワイドサイズ
o	スライド一覧

Presenter Mode

クエリーに?presentme=trueを付けて起動するとWebブラウザーのウインドウが２つ表示されます。
（モニターが２つある場合に有効です。）

Customize

Title slide

タイトルスライドに表示される項目はコンフィグファイル(slide_config.js)を編集します。
汎用的に使うならtitleをイントロダクションとして、subtitleには自己紹介など利用するとよいです。

タイトルスライドに表示される４つの項目は

slide_config.js

var SLIDE_CONFIG = {
  // Slide settings
  settings: {
    title: 'Introduction',
    subtitle: '自己紹介...'
  },

  // Author information
  presenters: [{
    name: '氏名',
    company: '社名'
  }]
};

Logo and Icon

Google I/Oのロゴやアイコンがスライドにあると発表の場所によって使いにくいこともあるので
ログやアイコンを差し替えたり、非表示にします。

Example

最初のスライドのロゴとタイトルスライドのバーをコメントアウトします。

template.html

<!--
<slide class="logoslide nobackground">
  <article class="flexbox vcenter">
    <span><img src="images/google_developers_logo.png"></span>
  </article>
</slide>
-->

<slide class="title-slide segue nobackground">
  <!-- <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> -->
  <!-- The content of this hgroup is replaced programmatically through the slide_config.json. -->
  <hgroup class="auto-fadein">
    <h1 data-config-title><!-- populated from slide_config.json --></h1>
    <h2 data-config-subtitle><!-- populated from slide_config.json --></h2>
    <p data-config-presenter><!-- populated from slide_config.json --></p>
  </hgroup>
</slide>

スタイルシートからロゴとアイコンと#io12をコメントアウトします。

default.css

slides > slide:not(.nobackground):before {
  font-size: 12pt;
  /* content: "#io12"; */
  position: absolute;
  bottom: 20px;
  left: 60px;
  /* background: url(../../images/google_developers_icon_128.png) no-repeat 0 50%; */
  -webkit-background-size: 30px 30px;


slides > slide.title-slide:after {
  content: '';
  /* background: url(../../images/io2012_logo.png) no-repeat 100% 50%; */
  -webkit-background-size: contain;

こんな感じになりました。すっきりとして使い勝手がよいです。

Tips

mCider

HTMLを編集してスライドを作るのは簡単ですが、MarkdownからGoogle I/O 2012のスライドにコンバートするmCiderを作りました。
（Google I/O 2011のテンプレートにも対応しています。）