【IE10】 PowerPoint を使わなかった？！そうです。解説します。

  • Article

HTML5 に大きく関わる IE の話をするのにやはり PowerPoint で従来のプレゼンをするのは一回離れてみようかなと思って、今回はブラウザーで動作するスライドショーを 9 月に米国であった BUILD というイベントから持ってきました。

BUILD では Web サイトのパフォーマンスに関係するセッションを担当していた Jason Weber（IE Program Manager）が実は PowerPoint を使っていないんですね。それをなんとか日本でやりたいなと取り組んだのが今回のものです。

結構そういう JS って探すとあるんですが、簡単に使えるという点で非常に Jason の実装はよかったです。なので、ここで内容も含め、公開したいと思います。でもその前に少しだけ脱線します。

最近 エバンジェリストという仕事柄、やはりプレゼン手法の本というのは新しいのを見つけると読み漁っています。なんか PowerPoint が悪の権化みたいに、よくみられる Bullet が複数書いてあるスライドが悪いという論調を見かけます。

でも「プレゼンをすること」、というアクティビティを実践する上で、多くの人はそれを仕事にしているというよりは、時々そういう局面が訪れるケースの方が多いんじゃないかと思います。PowerPoint はそういうケースでとても強力な味方であり、どんどん便利になっているのでプレゼンという難しい仕事の敷居を下げてくれる素晴らしいツールです。

ただ、そういう論調の中でとても同感な点はいきなり PowerPoint で作り始めることの危険性です。面白いことに同僚のエバンジェリストも人気セッションを実施する人ほど、紙のメモが机の上で洗練される時間が長いということです。ホワイトボードでもいいです、もちろん。骨格とメッセージがしっかりしていないプレゼンは聞いていて疲れますし、メッセージが伝わってこないからこれは皆そうすべきかなととても思います。私もできるだけそれを実践するように最近はしています。

実は昨年、菅原美千子先生にプレゼンを教わるとても幸運な機会があり、この辺のテクや考え方という観点では随分勉強できました。

「悪いのは道具ではない、それを使いこなす人間の実践方法である」

ということを一応書いておきたいです。マイクロソフトのエバンジェリストで素晴らしいプレゼンをする人はとても開発コード満載のデモをするケース以外ではスライドをうまーく使います。そういう前提にたって、今回のプレゼンの仕掛けを解説したいと思います。

Jason にも公開することを了解してもらいましたので下にそのままパッケージを張り付けることにしますので「色々といじって自分のものとしてどんどん使ってください。」（Jason 談）

BUILD の Jason の仕掛けは実は IE TestDrive で公開されているんです。https://ie.microsoft.com/testdrive/Performance/BUILDPerformanceTricks/Default.html

PowerPoint でも作り方によってはそういうのもやりますが、241ページのセッションってそれだけで強烈ですよね。びっくり

もちろんコードを読みながらそれぞれパーツをダウンロードをしてもできるんですが、Jason の好意もあり、ここから Zip したパッケージのダウンロード方法とその解説をします。

○ パッケージをダウンロードしてください。
SkyDrive においておきました。 リンク

○動作原理
基本的に Contents フォルダにある画像をシナリオに応じて JavaScript で動かす仕組みになっています。なのでスライドを作るのは今回私は PowerPoint でやり、PNG 形式ですべてのスライドを保存。「スライド」という名前がつくのですが、全部念のため「Slide」に名前変更し、Contents フォルダにコピーしました。

○ 使い方
/Contents/Slides.js 内を画像遷移に合わせて書き換えます。
あとは Root にある default.html を実行するだけです。Web サーバーにおいてももちろんOK。

image

それだけです。簡単でしょ？スマイル

よーく中身を眺めて面白いなぁと思ったのは、もちろん画面の遷移の実装ではあるんですが、実はあれ？と思ったのは Default.html 内の下記の箇所です。

<div id="NextSlide" onclick="presentation.NextSlide();" onmouseover="this.style.cursor = 'default';" title="Next Slide (N) or Right Arrow">S</div>

で、時々 ← が S と表示されるんですね。どうやってるんだろうと思ったら、Presentation.css を見たらなんと BasicShapes という Web フォント（woff） で表示してるんですね。あれま。

物江が下記のブログで解説していますのでご紹介しておきましょう。
https://blogs.msdn.com/b/osamum/archive/2011/06/06/web.aspx

この仕組みを使うのはこれくらいでできてしまうので、楽しんでいただければと思います。それでは、それでは。

そうそう。このサンプルはデモしやすいようにピン留めの実装コードも入っているのでそこもうまく使ってくれるとうれしいかな。

高精細アイコンや←→の色彩

<link rel="shortcut icon" type="image/ico" href="./application/images/favicon.ico" />
<meta name="application-name" content="IE10 セッション" />
<meta name="msapplication-starturl" content="https://localhost/?pinned=1" />
<meta name="msapplication-navbutton-color" content="#000000" />
<meta name="msapplication-window" content="width=1280;height=800" />
<meta name="msapplication-tooltip" content="ピン留めしよう！" />

静的ジャンプリスト

<meta name="msapplication-task"content="name=Beauty Of The Web;action-uri=https://beautyoftheweb.jp;icon-uri=./application/images/favicon2.ico" />
<meta name="msapplication-task"content="name=ピン留めでリピーターを増やそう;action-uri=https://buildmypinnedsite.com;icon-uri=./application/images/favicon2.ico" />
<meta name="msapplication-task"content="name=IE Testing Center;action-uri=https://samples.msdn.microsoft.com/ietestcenter/default-JA.htm;icon-uri=./application/images/favicon2.ico" />
<meta name="msapplication-task"content="name=IE10 Developer Guide;action-uri=https://msdn.microsoft.com/ja-jp/library/hh673549(d=lightweight,v=VS.85).aspx;icon-uri=./application/images/favicon2.ico" />
<meta name="msapplication-task"content="name=IE10 Test Drive;action-uri=https://ie.microsoft.com/testdrive/;icon-uri=./application/images/favicon2.ico" />

当然、これの詳細を知りたい人は https://buildmypinnedsite.com へ。