impress.js プレゼンテーション層フレームワーク (デモツール) - 初めての体験

半年もブログを書いていなかったので、少し恥ずかしいです... 正月休みは、Dota をプレイしたり (残念ながら、勝ちよりも負けが多かったです)、スキーに行ったり、食事をしたり、買い物に行ったりと、とても楽しかったです。あっという間に今日は仕事に行かなくては。5時に早起きしました（最近は早寝早起きにこだわっています）。フロントエンドエンジニアが以前見つけたツールをシェアせずにはいられず、新年最初のブログ記事が誕生しました:)
あなたのプレゼンテーションを見た人が「すごい」と言ってくれることを望みますか?派手な効果で観客に衝撃を与えたいですか? それでは下を見てみましょう
------------------テキスト区切り線-----------------
概要<br />PowerPoint を使用して PPT を作成するのに飽きてしまった場合、impress.js は非常に良い選択です。impress.js を使用して作成された PPT はより直感的で、効果も非常に優れています。見せびらかすには代償が伴いますが、フロントエンドの愛好家であれば、すべてはうまくいきます。もちろん、HTML と CSS がほとんど理解できなくても問題ありません。この記事を読んで、少し練習するだけです（公式サイトの例を修正します）。
impress.js は、Prezi にヒントを得て海外の開発者が CSS3 と JavaScript を使用して作成した開発者向けのプレゼンテーション層フレームワーク (プレゼンテーションツール) です。現在、一般の開発者は、impress.js を使用して、FLASH ベースの Prezi と同様の効果を持ちながら、より優れたパフォーマンスを備えたプレゼンテーションツールを開発できます。その機能には、キャンバスの無制限の回転と拡大縮小、任意の角度での任意のサイズのテキストの配置、CSS3 3D 効果のサポートなどが含まれます。同時に、従来の PowerPoint スライドプレゼンテーションもサポートします。
現在、impress.js は WebKit ブラウザ (Chrome、Safari) をベースに開発されていますが、CSS3 3D をサポートする非 WebKit エンジンベースの他のブラウザでも正常に動作します。
impreess のソースコードは GitHub で公開されています。アドレス: https://github.com/bartaz/impress.js
公式デモアドレス: http://bartaz.github.com/impress.js
プロジェクトの Web サイトにはドキュメントや使用方法のドキュメントがないため、この記事では、より基本的なプレゼンテーションを段階的に作成します。次に進みましょう。
最新のブラウザ（Google Chrome（最適）、Safari、FF）をご用意ください。
※私のIE10は非対応です。多くの資料でIE10も対応と記載されているのはなぜかわかりません。申し訳ありません。

構成
html5 ページ構造の準備ができました。id="impress" のラッパー (キャリア) を作成します。div だけです。他のタグでも、impress.js ファイルを導入し、body タグの終了前に呼び出すことができます。
class="impress-not-supported" は、ブラウザがサポートしていない場合にユーザーに表示されるプロンプト情報です。ダウングレードの手順はご存じかと思いますので、ここでは詳しく説明しません。

コードをコピー

コードは次のとおりです。

ラッパー内にスライドショーを作成するには、class="step" を持つ <div> を作成します。 <div>のidはオプションです。idがある場合、URLのハッシュはidに応じて変わります。そうでない場合は、step-[num]になります。

コードをコピー

コードは次のとおりです。

<div class="step">
最初のスライド
</div>

データ属性: スライドのサイズ、トランジション、その他の効果を記述するために使用されます。
data-x = スライドのx座標
data-y = スライドのy座標
data-scale = 値を指定して拡大縮小します。data-scale が 5 の場合、スライドは元のサイズの 5 倍に拡大されます。
data-rotate = スライドを指定した角度で回転します
data-rotate-x = 3D で使用する場合、この数値は x 軸を中心に回転する度数です。（前傾/後傾）
data-rotate-y = 3D で使用する場合、この数値は y 軸を中心に回転する度数です。（左スイング/右スイング）
data-rotate-z = 3D で使用する場合、この数値は Z 軸を中心に回転する度数です。

次に重点を置く必要があるのは、データ属性の作成です。その後、プレゼンテーションの作成を段階的に開始します。
ページの中央に表示されるように、data-x 属性と data-y 属性を 0 に設定した最初のスライドから始めます。

コードをコピー

コードは次のとおりです。

<div class="step" データx="0" データy="0">
これはスライド1です - 【タイトル】
</div>

2 番目のスライドの data-x 値は 500、data-y 値は 0 です。アクティブになると、500 ピクセル左に移動 (スライド) します。

コードをコピー

コードは次のとおりです。

<div class="step" data-x="500" data-y="-400">
これはスライド2です
</div>

3 番目のスライドは、同じ data-x 値と -400 のデータ y 位置を持ちます。つまり、スライドは画面の上から 400 ピクセルの位置でスライドします。

コードをコピー

コードは次のとおりです。

<div class="step" data-x="500" data-y="-400">
これはスライド3です
</div>

4 番目のスライドには、データスケールの値を使用してスケーリングを制御するという新しい工夫が加えられています。 data-scale="0.5" はサイズが半分になることを意味します。アクティブなプレゼンテーションになると、すべてのスライドのスケールが必要な倍数に調整され、素晴らしいスタートを切ることができます。

コードをコピー

コードは次のとおりです。

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
これはスライド4です
</div>

5 番目のスライド回転プロパティを使用すると、スライドを現在のビューに回転できます。スライド 5 は 90 度回転するように設定されており、少しクールな視覚効果があります。

コードをコピー

コードは次のとおりです。

<div class="step" data-x="0" data-y="-800" data-rotate="90">
これはスライド5です
</div>

6 番目のスライドは 3D スタイルから始まり、各次元 (x、y、z) の各軸の回転プロパティを指定できます。 x 軸は水平軸なので、物を上 (正の値) または下 (負の値) に傾けることができます。y 軸は垂直軸なので、物を左 (負の値) または右 (正の値) に振ることができます。z 軸は縦軸なので、物を上 (負の値) または下 (正の値) に回転します。

コードをコピー

コードは次のとおりです。

<div class="step" data-x="-1200" data-y="0"
データ回転x="30" データ回転y="-30" データ回転z="90" データスケール="4">
これはスライド6です
</div>

上記の 6 つのスライドでは、データ属性の値について説明し、少し高度なプレゼンテーションが提示されています。想像力を駆使して、これらの効果を驚くほど素晴らしい方法で組み合わせ、独自のスライドショースタイルを作成できます。
個人的には、グローバルプレビューが気に入っています。すべてのスライドを並列で表示します。適切に配置すれば、非常に見栄えがよくなります。これを使用するには、スライド 6 の後に HTML セクションを挿入します。

コードをコピー

コードは次のとおりです。

スライドの位置によって、グローバルプレビューの値が異なります。最後にあるデモを少しずつ調整して、感覚をつかんでください。気に入っていただければ幸いです。
一度覚えておけば、これを使ってできることはまだまだたくさんあります。唯一の制限はあなたの創造力です!

個人的な経験<br />フロントエンド開発者だからといって、フロントエンド技術でいろいろ試してみるのは悪いことではありません。Impress はプレゼンテーションをより革新的にしてくれるので、簡単に理解しておく価値は間違いなくあります。学習は最高の投資です。
アドバンテージ：
私は HTML+CSS を自分で完成させ、位置と効果を自分で処理しなければならないので、概要機能がとても気に入っています。視覚効果を自分でコントロールできます。視覚効果は、私が使用した類似製品の中で最も華やかで、CSS3+3D 効果により、視聴者を直接めまいさせます :)
欠点:
Impress は確かに視覚的な表現力が非常に優れています。プレゼンテーションにも使われる HTML5Slides や Deck.js に比べると、Impress.js ははるかに複雑で、プレゼンテーションのレイアウトを美しく仕上げるのにかなりの時間がかかるかもしれません。
※Impress で困った場合は、html5slides と deck.js の情報を参考にしてください。見た目の効果は少し落ちますが、始めるのがずっと簡単になります。
3D や回転を派手すぎたり、明るすぎたりすると、人がめまいを感じてしまうので、適切に使用してください。

以下はデモコードです。初心者の方は自分で改造して感覚をつかんでください。

コードをコピー

コードは次のとおりです。

<!doctypehtml>
<html>
<ヘッド>
<title>darren - Impress デモ</title>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="スタイルシート" />
</head>
<本文>
<div class="impress-not-supported">
<div class="フォールバックメッセージ">
<p>お使いのブラウザは impress.js を <b>サポートしていない</b> ため、現在は簡易バージョンが表示されています。 </p>
<p>より良い体験のために、最新の <b>Chrome</b>、<b>Safari</b>、または <b>Firefox</b> ブラウザを使用してください。 </p>
</div>
</div>
<div id="impress">
<div class="step" データx="0" データy="0">
ダレンコード - [タイトル]
</div>
<div class="step" data-x="500" data-y="0">
これはスライド2です
</div>
<div class="step" data-x="500" data-y="-400">
これはスライド3です
</div>
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
これはスライド4です
</div>
<div class="step" data-x="0" data-y="-800" data-rotate="90">
これはスライド5です
</div>
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
これはスライド6です
</div>

<div id="概要" class="ステップ" data-x="-200" data-y="-500" data-scale="3"></div>
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</本文>
</html>

突然、この記事を要約する一文を思い出しました。「ハンマーを持っていると、すべてが釘のように見える。」
この記事がよく書かれていると思ったら、右下にある推薦ボタンをクリックしてください。
今日は2013.1.4、素晴らしい日です。今日は何人登録に行くのでしょうか。うらやましいです。頑張ってください。私も頑張ります。ほほ
皆様にとって2013年が幸せで実り多い年になりますようお祈り申し上げます。

<<: JavaScriptスコープについての簡単な説明

>>: MySQL の文字セットの不一致によって発生する異常な接続テーブルの解決方法