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

2012年は激動の年であって欲しい、そんな想いで新年を迎える!


皆さん、明けましておめでとうございます!
昨年は本当に皆様にお世話になり、無事過ごすことができました。

図1

例年であれば年賀状サービスを使って近しい人には送っていたのですが、今年からそれを止めることにしました。代わりと言ってはなんですが、ブログで今年に向けての想いをお伝えしたいと思います。また、例年は一年の締めくくりでブログ投稿していたのですが、それも止めてみました。なんか違うことをしたかったんです。

*

2011 年は本当に多くの悲しみ、苦しみ、徒労を経験した人が多かったことでしょう。私もブログで何回そういうコメントを書いたかかわからないくらいです。でも Life Goes On あるいは The Show Must Go On なんです。特に IT を仕事にしている人間のすべきことは IT で人が幸せになる、より具体的には仕事や生活を便利にし、次のステージに進むための最高のパートナーとしての IT を広めることに他なりません。この初心に返り、今年は活動していけたらと思います。

☆昨年の自分を振り返ってみる

昨年まで私はマイクロソフトの Web 技術、特にインフラ部分としての Web サーバーを語ることが多かったです。それまでの経験値も進化著しいサーバー技術を支援する活動が多かったわけで、これは必然だったと言えます。まぁ 高添や安納がインフラ方面はなんでも語るので彼らが絶対に手を出さない(出そうよたまにはと言い続けてきましたが)領域としてのWeb サーバー、アプリケーションサーバーを主戦場として色々やってきました。

まぁ この領域は中途半端になりがちなんですよね、しかし。というのは、開発者向けの Deep な話の中で路傍の石のように語られることもあったり、インフラとしては花形は OS そのもの、特に Active Directory や Hyper-V の影で本来日本では非常に多い業務アプリケーションの稼働プラットフォームなのにもかかわらず、しっかり語られない本当に縁の下の力持ち、そこを気にする人も AD、仮想化、開発手法に比べれば圧倒的に少ないわけです。そこを担当されて興味を持っている方は逆に熱い方が多いというのもありますね。

少し脱線すると、、、

語られないことには理由があって、アプリケーション プラットフォームのチューニングというのはインフラで完結する製品とは大きく性格が異なります。それはほとんどがマイクロソフトが書いたコードである後者とは違い、大きく、多大に皆さんが開発するアプリケーションの内容によってパフォーマンス一つとっても影響を受けるからです。プラットフォームの設計指針として自由度が高いことを開発者は望むことが多いのですが、それを実現すると今度はサンドボックスのようにがちがちじゃないと提供しにくい情報を欲する、そんなエリアなんだと思っています。それが今のマイクロソフトの開発プラットフォーム、特にサーバー側の状況だと思います。だからこそ現場の皆さんの経験値が価値あるものになり、プロフェッショナルな皆さんの付加価値になっているともいえます。

*

実はエバンジェリストのチームの中で Web プラットフォームを扱う専門チームがあるのは日本だけの特殊事情なんですが、ようやくクライアント側も一緒に着手できるようになり、Silverlight や IE をがっつりやろうかという矢先に地震。日本語版の IE9 のリリースもズレたのは皆さんもご承知の通りです。でも MIX というイベントに合わせてこれまでに全く無かったオンラインでの情報提供を visitmix.jp で行ったりと春日井との連携プレイなんかも生まれました。で、7月から本格的に IE と HTML5 を担当することになり、そこから私のクライアント技術のリハビリが始まりました。と同時にインフラ系ではなく、開発系の話をする意図で開発者向けの情報提供、デベロッパー エバンジェリストになりました。

以前 MVP の方の集まりがあった時に 「ASP.NET を学ぶために必要なことは?」という話が出たことがあります。ここでの一致した見解は、「ASP.NET というのはプラットフォームの名前であって、言語ではない」「つまりは、初めての人にとってはバックエンドを書く C# や VB と言った言語の勉強をする必要がある」「むしろ重要なのは HTML や CSS などの Web を構成する要素技術の方では?」という話になりました。ある意味、この重要な要素を担当することになったわけです。

*

マイクロソフトが HTML を語る、それが多く行われたのは Windows 95 ~ Windows 98 のころだったのではないか、そんなことを想いながら、どうやってマイクロソフトの立ち位置を皆さんに伝えていくか、悶々とする数か月がそこから始まりました。さらに、Build において “Windows 8” で HTML、CSS も開発言語に加わる発表がされた時、「見えた!」と思いました。しかし、マイクロソフトのマーケティング戦略が変わり、エバンジェリストが広く、早く 伝えていく翼をもがれてしまいました。これは情報開示の大戦略転換なので、「言えない」ことが「言う」ことが仕事の人間にとっては苦痛でしたが、しかし、確かに情報が氾濫している現在においては有効な戦略であり、”Windows 8” について語るのは控えたのは皆さんもご存じのとおりです。

そういう観点では MVP Open Day でセッションを持った時にはそういうことになるとは夢にも思ってなかったので、MVP 各位は内容に不満だったでしょう。今だから明かす真実です。質問に答えれるのに答えれない、こんな経験をするとは思いませんでした。(笑) ただそれだけ MS が ”Windows 8″ にかける想いが強いという捉え方をしていただけるとうれしいなと思います。

*

HTML5 に関しての活動が表だって大きくできなかった反面、昨年のラスト 3 か月は一生懸命に動きまわっていたものがあります。それは IE のピン留めです。今までも鈴木(章)あたりが色々な場所で話をしてきていたのですが、本格的に IE のマーケティング チームとがっつり組んで色々と仕掛けていく、そんなステージが来ました。

IE のピン留めは単なる Meta/Link タグおよびJavaScript 実装なので別に第 5 世代の HTML を活かしているわけではありませんが、Windows 7 の伸びが引き続き予想される中、IE9 が増加するのは間違いない状況で、それらのお客様と Web サイト運営者の架け橋となる面白いプラットフォームです。これは各所のブログで書いていたりするのと同じです。

私はこれをじっくり眺めた時、「PointCast だ!」と思いました。発信者が Push で情報を届ける、それができるなというのが第一印象。何故なら Web のイベントモデルを活用しつつ、リンクを動的に切り替える、しかも Web 製作者側が制御できるからです。これを使わない手は無いし、その効果を伝えなければいけないとマジで思いました。

ということで多くの場面でピン留めを宣伝もしてきたし、引き続き皆さんの方でも採用をご検討いただければと思います。タダですし。実はこれまでユーザーの操作性を上げるために社内の業務アプリケーションでデスクトップにショートカットを設ける設計を何度となく見てきましたが、もっとスマートにこの機能を使うと実装できると思うし、アプリケーション オーナーが伝えたい情報をジャンプリストで届けるというのも悪くないんじゃないかなと思うんです。

ということでインターネットでサービスをされている Web サイト様には引き続き提案を続けます。

☆今年の自分を占う

さぁ 2012 年の話を書きましょう。

どう考えても「言えない」が終わるので、明らかに次期 Windows の活動が増えるのは間違いないでしょう。サーバーも同時リリースなので IIS8 の情報提供もありますし、ASP.NET だってバージョンは上がるわ、IE/HTMLに至っては相当カバー領域があります。無論 IE10 そのものの情報提供ももっとしっかり始めると思うので目にする機会も増えることでしょう。

重心ということで言うと Windows 8/ IE10 、特に HTML 領域かな、やっぱり。まぁ よく人に器用だと言われるのですが、(悪く言うと中途半端ということ?といつも思うのですが)担当すべきところをしっかりやる、そんな一年になりそうな気がします。

“Windows 8” は情報発信の仕方もさることながら、その秘めたパワーは

・ネットワークというものをユーザーに意識させた「Windows 95」
・安定感、安心感を届けた「Windows 2000」
・セキュリティを意識することとなった「Windows XP」
・新しい挑戦をした「Windows Vista」
・挑戦が現実となった「Windows 7」

と並べてみた時に、Windows 95 が登場した時のインパクトに近いかもしれません。タッチが本流に入ってくるとともに、今までよりもさらに色々な形状のデバイスが登場する土壌になることでしょう。しかも Build の配布された PC では AT&T さんのチップで通信もできるものだったので通信インフラとの融合という意味でもこれまでとだいぶ異なる様相になることは間違いないでしょう。

Build でも Steve Ballmer がサプライズで登場して発言したように、今もってなお世界で一番多いデバイス数を持つ Windows の規模感、これをうまく活かして新しいビジネスも登場してくるでしょうね。

私の今年のお薦めは間違いなく、次期 Windows。サーバーも Hyper-V が進化して高添もやるき満々ですし、私もクライアント、サーバーを含めて今後の Windows の行方を皆さんと見守りたいと思います。

ということで、皆様 2012 年もよろしくお願いいたします!
そろそろ写真も違うものを使おうかと思いますが、とりあえずはこれで。(笑)

無題 

奥主 洋
Hiroshi Okunushi

【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 のサイトにあるものが多いのですが、それらと独自デモを含めて物江の方でブログを書いています。ぜひ物江のブログも随時チェックいただきたく存じます。

 

2012年を迎える前に。こんなIE/HTML5イベントはいかが?


師走を迎えて皆様さぞお忙しいと思いますが、元気に過ごされていますか。
今年は色々とあって大変だったけど、来年はいい年に違いない! そう思っている皆さんに近未来を一緒に共有したい私たちのチームが12/16にお届けするイベントがあります。


今週からネット界隈で色々と話題になっている以下のサイト。

image

http://www.ff13-2-ie9.com/

皆さんはもう遊ばれましたか?

Web制作されている方であればこれがどうやってできているのか気になりますよね。右クリックしても何もアドオン動いてないのも確認できると思います。ブラウザーがネイティブで対応している範囲でHTML5周りを活かして実装しているわけですね。

HTML5+IE9 Web Camp 2 with html5j.org
http://www.microsoft.com/japan/web/webcamp2/default.aspx

お作りになられた皆さんにご登場いただいて解説しちゃいますよ~

日本マイクロソフトからは IE10 の最新情報をお届けします。僭越ながら同僚の物江と私が担当させていただきます。

W3C さんからのゲスト登壇、html5.org からコミュニティの有志の皆さんのご登壇もあるので HTML5 を考え始めるには最適の内容となっていると思います。


年末で超がつくほどお忙しいとは思うのですが、なんとか時間を作ってお越しいただけると楽しい時間が過ごせると思います!

このイベント、Adobe さんと一緒にやらせていただいた前回は数日で売り切れてしまったのでご登録はお早めに。参加費はもちろん無償。

【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 技術、しかも汎用的に使われていく技術の発展が目覚ましい状況です。皆さんもぜひこの辺の情報収集はしておくことをお奨めします!