impress.js > 最初の一歩

更新日 2012-05-19
広告
impress.jsについて、簡単に紹介します。

impress.jsとは

impress.jsは、Webブラウザによるプレゼンを可能にするオープンソースソフトウェアです。
impress.jsは、「一枚の大きな絵を書いて、注目する点を移動/拡大/縮小しながら、一部一部を説明していく」というプレゼンのスタイルに適しています。ホワイトボードや黒板に書いた大きな図と文章でプレゼンするようなイメージです。preziのようなプレゼンになります。
これに対して、MicrosoftのPowerPointや、OpenOfficeのImpress(名前が似てるw)によるプレゼンは、紙をペラペラとめくっていくプレゼンのスタイルだと言えます。impress.jsでプレゼン資料を作成する場合は、「大きな一枚絵でプレゼンする!」ということを意識すると、impress.jsならではなプレゼンになると思います。

ダウンロード

impress.jsはgithubのサイトからダウンロードします。「Zip」というボタンをクリックするとよいです。この記事を書いているときは、bartaz-impress.js-0.5.3-3-g9ccb39d.zip をダウンロードできました。

サンプルを試してみる

ダウンロードしたzipファイルを解凍します。
 $ unzip bartaz-impress.js-0.5.3-3-g9ccb39d.zip
解凍されたindex.htmlをブラウザで表示してみてください。impress.jsのプレゼンテーション機能を体感できます。

プレゼン資料の作成

単純なプレゼン資料を作成してみます。適当なディレクトリを作成し、以下のファイルを用意します。
 index.html
 ./css/impress-demo.css # 解凍されたファイルをコピー
 ./js/impress.js        # 解凍されたファイルをコピー
index.htmlに、プレゼンの内容を書きます。2ステップの資料を作成してみます。
<!doctype html>

<html>
<head>
  <meta charset="utf-8" />
  <title>simple slide by impress.js</title>
  <link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body class="impress-not-supported">

<div id="impress">
  <!-- step1 -->
  <div id="slide1" class="step slide" data-x="-1000" data-y="-1500">
    <q>スライド1です。
      ポジションは-1000、-1500です。</q>
  </div>
  
  <!-- step2 -->
  <div class="step slide" data-x="0" data-y="-1500">
    <q>スライド2です。</q>
  </div>
  
  <!-- impress.jsを使うための魔法 -->
  <script src="js/impress.js"></script>
  <script>impress().init();</script>
  
</div>
</body>
</html>
ポイントをまとめます。
  • まず、id属性の値が impress であるdiv要素を用意します。プレゼンの内容は、このdiv要素の中に記述します(div以外の要素でもよいです。id属性の値がimpressであることが重要)。
  • クラス属性の値に step を指定すると、ステップ(PowerPointの「ページ」に相当)としてimpress.jsに処理されます。ブラウザでは、クラス属性にstepを指定した要素の内容が、順番に表示されます。
  • PowerPointのようなスライドとして表示したい場合は、クラス属性に slide を指定します。
  • 各ステップの配置場所は、data-x属性とdata-y属性の値で指定します。
  • 最期に、script要素で impress.js ファイルを読み込み、impress().init() を実行します。プレゼンを行う際の魔法だと思ってください。
上記のindex.htmlをブラウザで開き、矢印やスペースを押すと、ステップが移動することがわかると思います。個人的には、ブラウザのウィンドウを小さくすると、自動的に文字が小さくなる点が素晴らしいと思いました。
広告
お問い合わせは sweng.tips@gmail.com まで。
inserted by FC2 system