カテゴリー別アーカイブ: CSS3

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


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 で公開されているんです。http://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) で表示してるんですね。あれま。

物江が下記のブログで解説していますのでご紹介しておきましょう。
http://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=”
http://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=http://beautyoftheweb.jp;icon-uri=./application/images/favicon2.ico” />
< meta name=”msapplication-task”content=”name=ピン留めでリピーターを増やそう;action-uri=
http://buildmypinnedsite.com;icon-uri=./application/images/favicon2.ico” />
<meta name=”msapplication-task”content=”name=IE Testing Center;action-uri=
http://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=
http://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=
http://ie.microsoft.com/testdrive/;icon-uri=./application/images/favicon2.ico” />

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

広告

【IE10】 Web Camp 2、ご参加ありがとうございました!


師走で皆さんお忙しい中だったのでどれだけの方に来ていただけるかとても心配だったのですが、多くのお客様にご来場いただき、本当にありがとうございました。楽しい時間を過ごせたでしょうか?hero3

さて早速資料公開に関して事務局に問合せが入っているようですが、前回の Web Camp 同様の方法で公開すると思います。

前回のページ(セッション枠の横にPDF公開)
HTML5+IE9 Web Camp with Adobe ~HTML5、作ろうぜ~

今回の Web Camp 2 のページ
HTML5+IE9 Web Camp 2 with html5j.org


私はむかーしから Final Fantasy と Dragon Quest のファンです。オンラインはどうも苦手でしたが、ゲーム コンソールでやるものは最高だと思います。まさに日本人として誇れる素晴らしいコンテンツ、しかもユーザーとしてとても面白いものがこれだけ作り出せるそのクリエイティブ魂を尊敬するばかりです。

今回のモーグリのツイートキャッチは色々な人の想いと汗でできたアプリケーションです。ぜひまだお試しになられていない方はお試しください!

モーグリのツイートキャッチ
http://www.ff13-2-ie9.com/

ツイートキャッチも IE9 のピン留めに対応しているのでタスクバーにピン留めしてどんどんアイテムを GET してくださいね!

今回の Web Camp 2 では開発の裏側、つまり今誰もが結構悩んでいる HTML5 の仕様をどう生かすのかという観点で結構語られました。しかし、スマホやクラウドを利用することも実は取り組んでいるのでそういう話もとても参考になると思います。そこで MSDN オンラインで下記のページを作っているのでぜひ見てほしいなと。

Start Something! のページからモーグリのバナーをクリック!
http://msdn.microsoft.com/ja-jp/hh315652


さて、Microsoft セッションでは IE10 を取り上げました。構成内容はスライドとデモだったのですが、実は今回は PowerPoint を初めて使わないプレゼンをしましたのでもう一つこの JavaScript スライドショーの解説をする投稿をこの後に書いておきますね。便利でしたし、手軽なものです。

デモに関しては IE TestDrive のサイトにあるものが多いのですが、それらと独自デモを含めて物江の方でブログを書いています。ぜひ物江のブログも随時チェックいただきたく存じます。

 

【HTML5】 HTML5 は今? ちょっとイベント参加してみませんか?


私と言えばマイクロソフトの Web サーバー = IIS な話、PHP を IIS で動かす話、あるいは WebMatrix な話をする人っていうイメージがあるかもしれません。あるいは Tech・Ed なんかに参加いただいている人であればほかの話をする光景も見ていただいていますね。

実は自分自身、IIS の次の大きな研究テーマを何にするかずっと模索し続けて Hyper-V  の話したり、まあ色々とやってきました。今回の MIX をきっかけとして HTML5 にも携わるようになったのですが、結構これが自分としてはインパクトが大きいなぁという感触に今 あふれています。

HTML そのものはもちろんインターネットの始まりから存在する重要な存在であり続けたのですが、巷で言われている HTML5 の領域というのはマークアップの定義では無く、もっとはるかに大きなものだという話が私の心を揺さぶっています。CSS3 の影響も大きいです。

マイクロソフトもここへ来てブラウザー開発にターボエンジンを搭載したみたいで、IE9 から IE10 も見据えて、加速度的に HTML5/CSS 3 の対応の度合いを高めてきていますし、GPU を生かした猛烈なスピードアップも果たしてきています。

こんな状況の中、なかなか素晴らしい講師陣が勢ぞろいしたイベントをマイクロソフト主催で開催させていただけるようです。私も結構内容見てぶっ飛んでますが、いや 真面目にこれは心の底からオススメです。


6月9日 品川で開催、無償イベント

HTML5、作ろうぜ!
HTML5+IE9 Web Camp with Adobe
http://www.microsoft.com/japan/web/webcamp/


これは結構やっている 100名 クラスのセミナーではなくてイベントです。
定員も 300名 を予定しています。

MS の講師も 2人 私の所属チームから話をさせていただきますが、私は上で書いた心の動きもあって、実は 「Web 開発において HTML5 はまだ」と思っている方は、 白石さんのセッションをとにかくご覧いただくことをお奨めします。

このイベント、実は 3/4 – 3/5 に開催されていたオープンソースカンファレンス(早稲田で開催)でチラシをマイクロソフトブースで配布していたんですよね。多くの方が興味を持っていただいて、チラシをお持ちいただいたんですが、まさかその 1 週間後にあのような出来事があるとはもちろん想定しておらず、いったんこのイベントは中止になりました。

しかし、反響も大きくてやはり開催するべきとの判断がくだり、6/9 に若干元々予定していた内容とはその後の MIX の発表などもあり変更になっていますが、開催します。

このコラボはずっーとやり続けるタイプのセミナーではなくて今回とりいそぎ実現という形なので、これを見逃すとなかなかまた見れないかもしれないのでぜひ参加申込みしましょう。

早稲田でも質問されたので書いておくと、もちろん最初から最後まで見どころいっぱいなので私個人としては時間があったら全部見ておいて損は全く無いと思いますが、途中参加も可能ですし、予定がある方は途中退席も可能です。

いかがでしょうか。こーれは面白いと思いますよ。スマイル


実は MIX11 に HTML5 関連セッションに注目して見てきた関係で、下記のビデオで公開している話を 4/25 にやったイベント報告会で同僚の鈴木とともにしました。この中でもこのイベントの予告をしています。

http://channel9.msdn.com/posts/MIX11-Report-Japan-IE-HTML5

この辺の Web 関係の情報として http://www.visitmix.jp  も立ち上げてあるのでそちらもご覧いただいて、最新情報を追っていただきたいですが、何はともあれ今回ご紹介しているこのイベントをぜひ。

【Web】 米国ラスベガスで MIX が開催され、引き続き情報発信をしていきますよ


毎年 MIX という Web制作や開発者向けのイベントがここ数年開催されてきた。今年も同じように 4/12 ~ 4/14 に開催されていた。

通常は日本のどこかしらのイベントで、あるいは REMIX という名前のイベントで持ち帰った内容を日本語でエバンジェリストや外部の講師の方が解説するイベントをやってきている。

今年は少し趣向を変えたことをやってみた。

本家: http://live.visitmix.com

日本: http://live.visitmix.com/jp

という日本独自サイトを立ち上げ、そこで日本のエバンジェリストをはじめ、社外の方でも MIX に参加されている人やメディア関係の方もここで様々な情報発信をできるようにした。

また、Facebook ページも開設した。

http://www.facebook.com/mixjapan

少しマイクロソフトが関与しているサイトの割りにコンテンツが”柔らかい”のですが、これがまた MIX というイベントの雰囲気でもあるのです。

ぜひ楽しんでいただけたら「いいね!」してくださいね。

http://live.visitmix.jp の方も内容の更新を予定しております。

特に容易にここから基調講演ビデオを見れるようにしたいほか、日本で作成される関連コンテンツにすぐにたどり着けるようにうまく組み上げていきたいところ。

こちらのページもお楽しみに!

【HTML5】 すごいコラボ。こういうのが実現されるようになったのね。


HTML5 というキーワードをきっかけに色々なことが動き始めていますね。マイクロソフトと言えば IE9 の製品候補版が金魚とともに話題になることも多くなってきたわけですが、これからこの話題はどんどん加速していきます。

今度下記のセミナーを アドビ システムズ様、そしてビジネス・アーキテクツ様と一緒に開催することになりました。

image

3/23(水)13:00-18:00 開催
HTML5+IE9 Web Camp with Adobe
~ HTML5、作ろうぜ! ~

参加費用:無料

会場:ザ・グランドホール 品川

概要、お申込みはこちら
http://www.microsoft.com/japan/web/webcamp/

HTML5 を使った Web サイト制作にフォーカスしたセミナーで、HTML5, CSS3, SVG を活用した最新 Web 開発事例として「書道 – The Shodo」を構築されたビジネス・アーキテクツ様のセッションもあり、豪華講師陣で見どころ満載、みんな有償のイベントでトークしているような人たちです。なかなか無いチャンスなのでお見逃しなく!


先日リリースされた Internet Explorer 9 (IE9) の RC (製品候補版) を含め、各社 Web ブラウザでは HTML5 / CSS3 への対応が進んでいます。

IE9 RC ダウンロードはこちら:
http://ie.microsoft.com/testdrive/info/downloads/Default.html

上で書きました The Shodo をはじめ、これからの Web 技術、しかも汎用的に使われていく技術の発展が目覚ましい状況です。皆さんもぜひこの辺の情報収集はしておくことをお奨めします!