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() を実行します。プレゼンを行う際の魔法だと思ってください。
広告
お問い合わせは sweng.tips@gmail.com まで。