fullvirtueの世界10月
10
2010
MicrosoftがHTML5のサンプルを公開しています。
http://ie.microsoft.com/testdrive/
この「TestDrive」というサイトでは、 HTML5のさまざまなサンプルを体験することができるので、 是非チェックしてみてください。
10月
10
2010
放課後Devタイムで発表した資料「SilverlightアプリをHTML5で表示してみたよ！」を 公開しました。
放課後Devタイムとは、以下の内容で開催された開発ミニ合宿のようなものです。
●今回のお題！ Windows Presentation Foundation & Silverlight ●内容 WisdomSoft 勉強会は、みんなで楽しくプログラムを書くことが目的です。プロフェッショナルもアマチュアもありません。プログラムが好きな人が集まって、その場でプログラムを書いて議論したり、見せ合ったり、教えたり、教えてもらったりする勉強会です。 コードを書くための勉強会なので、開発環境がインストールされたPCを持参してください。今回は、言語や開発環境の縛りはありません。使い慣れた環境でプログラミングしていただけます。 開発環境には Visual Studio 2010 （Exrpess可）を推奨します。 ●参加資格 コンピュータとかテクノロジーとかプログラミングが好きな人。 何らかのプログラミング言語を習得していると、より勉強会を楽しんでいただけます。プログラミング未経験の方や自信のない方は、コードを書ける人とチームを組んでいただきます。 ●アジェンダ 12:30～13:00 開場 13:00～13:30 ご挨拶 13:30～14:00 チーム分け・開発準備 14:00～17:00 コーディング 17:00～18:00 発表
Silverlightアプリをhtml5で表示してみたよ！
View more presentations from full virtue.
なお、このスライドには、肝心なHTML5のソースコードが含まれていませんので、 サンプルのHTML5ソースコードを以下で紹介します。
※RSSReaderでは表示が化けるので、記事に直接アクセスしてご覧下さい。
<!DOCTYPE html>
<html>
<head>
<meta content="ja" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML5サンプル</title>
</head>
<body>
<div style="width: 640px; height: 480px; float: left;">
<object width="640" height="480"
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" >
<param name="source" value="silverlight.xap">
</object>
</div>
</body>
</html>
HTML5のDocumentTypeは、1行目の表記にある
だけという仕様になっています。今までと比べて随分シンプルですよね。
<!DOCTYPE html>
HTML5内にSilverlightを表示する場合、13行目の「silverlight.xap」という箇所に、 表示したいsilverlightのxapファイルへのpathを指定すればOKです。
10月
10
2010
マイコミジャーナルで「『MSDN』の歩き方」という記事が更新されています。（2010/10/08）
http://journal.mycom.co.jp/column/msdn/001/index.html
以下、2010/10/08時点での目次をご紹介します。
- MSDNって?
- MSDN オンラインの概要
- Code Recipeとは?
- Code Recipeでできること
- 実例で学ぶアプリケーション開発 Ver.2
- 個別のテクノロジーについて知りたいときは
- 開発者のための連載いろいろ
- 「今週のHow To」は毎週更新
- ちょっと上のレベルでは「MSDNマガジン」も
- 困ったときは互助の精神
- 開発者向け資格制度の概要
- 資格取得に向けて何をすればいい?
- Tech・Edとは?
- Tech・Edの人気セッションをWebcastで
- MSBCとは
- 学習用のリソースいろいろ
- 学習に関する情報を一元管理
- ステップ・バイ・ステップ方式のデザイン
- 情報を見やすくするための工夫いろいろ
10月
10
2010
「Chrome Experiments」でHTML5を体験するという記事が公開されています。
http://journal.mycom.co.jp/articles/2010/10/07/chromeexperiments/
以下、上記URLから本文を引用して紹介します。
Chrome Experimentsは、2009年3月に開設されたGoogleによるデモンストレーションサイトである(図1)。当初は、JavaScriptで記述されたツールやビジュアライゼーションなどが公開されていた。当時のGoogle Chromeで、これらを実行することでいかに高速に動作するかを確かめることが目的であったが、それから1年半、Google Chromeもバージョン6がリリースされ、HTML5の実装も行われた。Chrome以外のWebブラウザも、HTML5の実装を進めており、近いうちにはごく普通の環境となることが予想される。
本稿では、Chrome Experimentsで公開されるエクスペリメンツを動作させ、HTML5の世界を体験してみたいと思う。Google Chromeは以下からダウンロードできる。
図2 Google Chromeのダウンロード
The Wilderness Downtown
まずは、The Wilderness Downtownを試してみたい(図3)。
図3 The Wilderness Downtown
3D Canvas、video、audioなどのHTML5の技術が使われ、さらにGoogleマップやストリートビューなどと連携して、非常に高度なWebページを実現している。[Launch Expriment]をクリックすると、The Wilderness Downtownが起動する。まずは起動画面である(図4)。
図4 The Wilderness Downtownの起動画面
ブラウザ内に鳥を模した影が現れたり、消えたりする。しかも、マウスの位置に反応し、逃げるように動きが変化する。次いで、画面中央にある入力ボックスに住所を入力する。本稿の例では、東京都庁前を入力した。自宅や勤務先の住所を入力してもおもしろい。音楽とビデオの再生が開始される。ここのでも鳥の影が現れ、音楽に合わせ動く。
図5 音楽に合わせ動く鳥
Googleマップやストリートビューの映像も同時に再生される(図6、7)。
図6 ランナーの動きに同期するかのようにGoogleマップも移動、ここでも鳥の影が合成されている
図7 ランナーの回転に合わせ、Googleマップやストリートビューも回転する
これらの再生もそのままではなく、エフェクトなどが加えられている。これらの再生が終わると、何も表示されていないウィンドウと小さな3つの映像ウィンドウが表示される。何も書かれていないウィンドウに、マウスで描画を行うことができる。そして、その動きにあわせ、下の3つの映像ウィンドウの動画が再生される(図8)。
図8 マウスの動きに合わせて動画が再生
Googleの各種機能と連携し、HTML5を使ったエクスペリメンツである。
Refrections
このエクスペリメンツは、3Dオブジェクトをマウスを使って回転させることができる。
図9 Refrections
先ほど同様に、[Launch Expriment]をクリックする。回転する3Dオブジェクトが現れるので、マウスを使って操作する。オブジェクトやテクスチャーを選択できる(図10)。
図10 3Dオブジェクトをマウスで操作
他のブラウザでは?
現在、著名なWebブラウザがHTML5の実装を完了、もしくは進めている。Google Chrome以外のWebブラウザで実行可能かを試してみた。ここでは、Firefox 4.0β6で試してみた。
図11 Firefox 4.0β6でNoise Fieldを実行テスト、正しく動作している
結論からいえば、動作するものもあるが、しないものもあった。ちなみに冒頭のThe Wilderness Downtownはうまく動作しなかった。これは筆者の推察であるが、HTML5の実装というよりもGoogle APIなどの問題に思えた。
さて、Chrome Experimentsを駆け足で紹介したが、いずれも「動き」のあるものがほとんどである。ここに集められたエクスペリメンツはいずれも秀作ぞろいである。できれば実際にGoogel Chromeで実行してみると、よりそのすばらしさが体験できると思う。このように、実際にHTML5で作られたWebページを見ると、その表現力に本当に驚かされる。Webアプリケーションなどもどのようなものが登場するのか、実に楽しみである。
10月
10
2010
IE6-8をCSS3に対応にさせる「IE-CSS3」が公開されています。
以下、上記URLから本文を引用して紹介します。
CSS3 support in Internet Explorer 6, 7, and 8
Internet Explorer 6-8をCSS3に対応にさせる「IE-CSS3」が公開されています。(英語)
サポートするプロパティはborder-radius、box-shadow、text-shadowの３つです。
10月
9
2010
Windows Azure Companionなどの相互運用性ツールが公開・アップデートしました。（2010/10/07）
http://blogs.msdn.com/b/bluesky/archive/2010/10/08/windows-azure-companion.aspx
以下、上記URLから本文を引用して紹介します。
Windows Azure 上にオープンソース言語によるアプリケーションを構築する際、プラットフォーム要素やアプリケーションのインストールと配置をサポートする Windows Azure Companion が Septembet 2010 CTP(Community Technology Preview) として公開されました。現在ではPHPに対応しています。また、Windows Azure SDK for PHP(Ver 2.0) のアップデートに加えて、Windows Azure Tools for Eclipse for PHP (Septembet 2010 CTP) と Windows Azure Command-line Tools for PHP (September 2010 Release) が公開されています。
MSDN Code Gallery : Windows Azure Companion
CodePlex : Windows Azure SDK for PHP
Windows Azure Tools for Eclipse
CodePlex : Windows Azure Command-line Tools for PHPWindows Azure Team Blog : New Cloud Tools Ease PHP Development to Windows Azure
Windows Azure Platform は相互運用性を念頭に置いて設計・構築されており、SOAP、REST、XML、PHP などの一般的な標準やプロトコルをサポートしています。.NET の他にも PHP、Ruby、Python、そして Java をサポートしており、開発ツールも Visual Studio の他、Eclipse を使用してアプリケーションを開発できます。
Windows Azure Platform Webサイト : Windows Azure Platform と相互運用性
PHP on Windows Azure ガイドライン
10月
8
2010
NuPack, ASP.NET MVC 3 Beta, WebMatrix Beta 2 がそれぞれ公開されました。（2010/10/07）
「Announcing NuPack, ASP.NET MVC 3 Beta, and WebMatrix Beta 2」という記事が 公開されています。
また、Webmatrix Beta 2の公開は、Razor (Web Pages) エンジンの同期をとるために ASP.NET MVC 3 Beta と同時にリリースされたのだそうです。
http://blogs.msdn.com/b/webplatform/archive/2010/10/06/microsoft-announces-webmatrix-beta-2.aspx
NuPackについてはこちらもどうぞ。
http://www.hanselman.com/blog/IntroducingNuPackPackageManagementForNETAnotherPieceOfTheWebStack.aspx
情報はすべて@chack411さんから頂きました。 @chack411さん、ありがとうございます。
追記（2010/10/07） @hatsune_さんが 「ASP.NET MVC 3 Preview 1 と ASP.NET MVC 3 Beta の違い」を紹介しています。 http://blogs.wankuma.com/hatsune/archive/2010/10/07/193591.aspx
また、@shibayanさんも 「ASP.NET MVC3 ベータ版」について紹介しています。 http://d.hatena.ne.jp/shiba-yan/20101007/1286380637
追記（2010/10/08） @chack411さんが 「待望の ASP.NET MVC 3 Beta リリースで Web 開発がさらに楽しく♪」という記事で 紹介しています。 http://blogs.msdn.com/b/chack/archive/2010/10/07/web-stack-asp-net-mvc-3-beta-released.aspx
10月
8
2010
Expression Web 4 にて HTML5 がサポートされました。 アドオンを追加すればインテリセンスがきくようになります。
以下、上記URLから本文を引用して紹介します。
※ 最終段落に、既知の問題について書かれています。
HTML5 Schema Configuration Add-In for Expression Webとは
皆様、こんにちは！
今日は、下記のURLで登場したExpression Web 4のHTML5 support 追加について、取り急ぎご紹介します。
これはExpression Web 4のアドインですので、インストールすると、HTML5でオーサリングができます。HTML5でインテリセンスが聞くようになりますので、非常に便利です。もちろん日本語版でも動くことを確認しました。
インストール
それでは早速インストールしてみましょう。
まずは、Expression Web 4を起動中の方は、終了してください。同時に、このURLより、HTML 5 Schema Configuration Add-In をダウンロードし、ローカルに保存しておきます。
そして、Expression Web 4を起動して、[ツール]メニューの[アドイン] を選択し、”アドインの管理”ダイアログボックスを表示します。
その中のインストールボタンから、インストールを選ぶと、下記のダイアログが開きますので、このアドインを選んで、開きます。
すると、下記のダイアログボックスが出てきますので、Yesを押します。
もし、このアドインが正しくインストールされていれば、 アドインの管理ダイアログボックス内に表示され、また、標準ツールバーに、新しい “HTML5” ボタンが表示されるはずです。
ここまで確認したら、いったんExpression Web 4を終了します。
HTML5 Schema Configuration Add-Inを使ってみる
- まずExpression Web 4 を、管理者権限で起動します。
- 表運ツールバーにあるHTML5ボタンをクリックします。Configure HTML 5 Schemas ダイアログボックスが出ますので、この中のボタンで、有効無効を設定できます。
![image_thumb[33]](http://blogs.msdn.com/cfs-file.ashx/__key/CommunityServer-Blogs-Components-WeblogFiles/00-00-00-71-20-metablogapi/1346.image_5F00_thumb33_5F00_thumb_5F00_6DCEC237.png "image_thumb[33]")
- Enable HTML 5 ボタンをっクリックして、Expression Web HTML 5 schemasを更新します。右上のX をクリックしてこのダイアログボックスをクローズします。
- ここで、デフォルトの新規作成ページのDOCTYPE を全てHTML5にしたい場合には、[ツール]> [ページ編集オプション]を選択し、”作成”タブを開いて、””ドキュメントの型宣言と”セカンダリスキーマ”のいずれも HTML5にします。
これで、Expression Web 4で新しいWebページを作成するときは、常に新ページはHTML5のdoctypeを含むことになります。
<!DOCTYPE html>
デフォルトのDocTypeをHTML5 にしない場合には、新しくHTML5 ページを作るには、コードビュー上で、手動でやる必要があります。または既存のHTML5 ドキュメントを開いて、Expression Web 4で編集することもできます。
いずれにしても、HTML5 ドキュメントをコードビューで編集する際には、Expression Web 4 が現在提供しているIntelliSenseの機能が、HTML 5 のelements、attributes、そしてvalues等で有効になります。
いかがでしょうか？Expression Web 4が、HTML 5 対応Webアプリケーション用の偉大なエディターに変身した瞬間です。ぜひ使ってみてください!
今後の弊社のテクニカルセッション等でもどんどんご紹介したいと思います。
現時点での既知の問題
- このアドインをアンインストールした場合、ファイルが残っていますので、再インストールがうまくいかない場合があります。対処法は次の通りです。
- %APPDATA%\Microsoft\Expression\Web 4\Addins ディレクトリにある、HTML5Schema フォルダを削除してから、当アドインをインストールしてください。
- 現在のSVG schema は、当アドインにより提供されています。しかし、SVGマークアップは、Expression Web 4により、時に不正と評価されてしまう場合があります。その場合の対処法は次の通りです。
- Online code validatorを使いましょう。W3Cで提供されています。
- Expression Web 4 で、時々クロージングHTML 5 タグが(マークアップが正しいにも関わらず)ミスマッチと評価されてしまう場合があります。 対処法は次の通りです。
- Online code validatorを使いましょう。W3Cで提供されています。
- 当HTML 5 Schemaアドインを有効にする/無効にするには、Expression Web 4を、管理者権限で起動しなおす必要があります。
鈴木 章太郎
10月
8
2010
「ASP.NET MVC 2による非同期コントローラーとjQuery Template連携」という記事が 公開されています。
http://codezine.jp/article/detail/5452
以下、上記URL内の目次のみご紹介します。
- はじめに
- 必要な環境
- 今回触れる内容
- 非同期コントローラー（AsyncController）
- 新たなヘルパーメソッド
- ASP.NET MVC 2とjQuery Template
- まとめ
- 参考文献
10月
7
2010
Windows Phone デベロッパーセンターが公開されました。（2010/10/07）
http://blogs.msdn.com/b/shintak/archive/2010/10/07/10072604.aspx
以下、上記URLから本文を引用して紹介します。
これまで Windows Mobile 用のデベロッパー向けのポータルの一つとして Windows Mobile デベロッパーセンターがありましたが、Windows Phone 7 の開発情報をまとめるに当たり、Windows Phone デベロッパーセンターを新たに公開しました。
Marketplace のデベロッパー向けのサイトに似ているので間違えそうですが、開発者向けの情報は随時こちらにまとめていきたいと思っています。今後、Windows Phone 7 の開発に関する国内でのポータルサイトは3か所になりますので、必要なところをチェックしてください。
- Windows Phone デベロッパーホーム：Marketplace 登録者向け
- MSDN Windows Phone デベロッパーセンター：アプリケーション開発
- Creator’s Club Online（今後変更予定）：XNAゲーム開発
さて、開発コンテンツを作らないといけませんね。
