<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>CIOを目指しつつの8makiのアレ &#187; HTML5</title>
	<atom:link href="http://blog.8maki.jp/tag/html5/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.8maki.jp</link>
	<description>俺と周りの変態リタラシーを埋める</description>
	<lastBuildDate>Sun, 05 Sep 2010 14:56:22 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/tag/html5/feed" />
		<item>
		<title>MicrosoftのChromeOSとは別のベクトルのウェブブラウズ体験「Pivot」</title>
		<link>http://blog.8maki.jp/2009/11/microsoft-pivot.html</link>
		<comments>http://blog.8maki.jp/2009/11/microsoft-pivot.html#comments</comments>
		<pubDate>Fri, 20 Nov 2009 02:16:32 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[survey]]></category>
		<category><![CDATA[テクノロジー]]></category>
		<category><![CDATA[Faceted Search]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[pivot]]></category>
		<category><![CDATA[ブラウザ]]></category>
		<category><![CDATA[検索]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=545</guid>
		<description><![CDATA[
			
				
			
		
先程、こんなニュース記事を見つけました。巷ではChromeOSのリリースで賑わっていますが、Microsoftも隠れてこんなものをリリースしていたようです。
» マイクロソフトによるウェブ閲覧の新しい実験「Pivot」
&#160;
「ウェブをばらばらのページの集まりとしてではなく、“くもの巣ようなウェブ”として閲覧する方法だ」というコンセプトのようですが、下記のムービーを見る限り、この3つ↓の部分が特徴的な、半ブラウザ・半検索エンジンみたいなアプリケーションという印象です。

検索itemをグループ化（Collections）して、属性で絞り込んだり、ソートできたりするファセット検索
ローカル・Webの境なく、透過的に検索itemを扱える（File、Webページ、画像、、、）
リッチなVisualization


» Learn More about Pivot &#124; Microsoft Pivot
個人的に2:30くらいの部分で出てくる&#8221;Wikipdeia Collections&#8221;がツボりました。便利かどうかは使ってみないとわからないですが、こうやってWebを整理して閲覧する方向性は面白いと思います。
そこでグループ化が肝となってくるようですが、Pivotではそれを”Collections”と評していて、3つのタイプに分けてitemグループを扱っているようです。数学の集合に近いイメージ。

Simple Collections
Linked Collections
Dynamic Collections


まあ、Windows Vista以上、.NET Framework 3.5、IE8がないと動かない点は、なんというか”Microsoft”っぽいですが。。。
ただ、HTML5も本格的に流行り出していますし、今後もブラウザとWebアプリケーションの境が曖昧なコンセプトが出てきそうで、中々おもしろい領域だと思います。ちなみに、近々2つのHTML5関連のイベントに参加予定です。
» HTML5 Tech Talk on November 2009
» HTML5 のご紹介@Opera
]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F11%2Fmicrosoft-pivot.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F11%2Fmicrosoft-pivot.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><img class="alignleft size-full wp-image-546" title="logo-pivot" src="http://blog.8maki.jp/wp-content/uploads/2009/11/logo-pivot.png" alt="logo-pivot" width="191" height="80" />先程、こんなニュース記事を見つけました。巷では<a href="http://googleblog.blogspot.com/2009/11/releasing-chromium-os-open-source.html" target="_blank">ChromeOS</a>のリリースで賑わっていますが、Microsoftも隠れてこんなものをリリースしていたようです。</p>
<p>» <a href="http://japan.zdnet.com/sp/feature/07microsoft/story/0,3800083079,20403889,00.htm" target="_blank">マイクロソフトによるウェブ閲覧の新しい実験「Pivot」</a></p>
<p>&nbsp;</p>
<p>「ウェブをばらばらのページの集まりとしてではなく、“くもの巣ようなウェブ”として閲覧する方法だ」というコンセプトのようですが、下記のムービーを見る限り、この3つ↓の部分が特徴的な、半ブラウザ・半検索エンジンみたいなアプリケーションという印象です。</p>
<ul>
<li><span style="background-color: #ffffff; ">検索itemをグループ化（Collections）して、属性で絞り込んだり、ソートできたりするファセット検索</span></li>
<li><span style="background-color: #ffffff; ">ローカル・Webの境なく、透過的に検索itemを扱える（File、Webページ、画像、、、）</span></li>
<li><span style="background-color: #ffffff; ">リッチなVisualization</span></li>
</ul>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/BZuFUZpEZ-A&#038;hl=ja_JP&#038;fs=1&#038;"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/BZuFUZpEZ-A&#038;hl=ja_JP&#038;fs=1&#038;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></p>
<p>» <a href="http://www.getpivot.com/" target="_blank">Learn More about Pivot | Microsoft Pivot</a></p>
<p>個人的に2:30くらいの部分で出てくる&#8221;Wikipdeia Collections&#8221;がツボりました。便利かどうかは使ってみないとわからないですが、こうやってWebを整理して閲覧する方向性は面白いと思います。</p>
<p>そこでグループ化が肝となってくるようですが、Pivotではそれを”Collections”と評していて、3つのタイプに分けてitemグループを扱っているようです。数学の集合に近いイメージ。</p>
<ul>
<li>Simple Collections</li>
<li>Linked Collections</li>
<li>Dynamic Collections</li>
</ul>
<p style="text-align: center; "><img class="size-full wp-image-547 aligncenter" title="pivot-collections" src="http://blog.8maki.jp/wp-content/uploads/2009/11/pivot-collections.png" alt="pivot-collections" width="500" height="229" /></p>
<p style="text-align: left;">まあ、Windows Vista以上、.NET Framework 3.5、IE8がないと動かない点は、なんというか”Microsoft”っぽいですが。。。</p>
<p style="text-align: left;"><span style="background-color: #ffffff;">ただ、HTML5も本格的に流行り出していますし、今後もブラウザとWebアプリケーションの境が曖昧なコンセプトが出てきそうで、中々おもしろい領域だと思います。ちなみに、近々2つのHTML5関連のイベントに参加予定です。</span></p>
<p style="text-align: left;"><span style="background-color: #ffffff;">» <a href="http://docs.google.com/View?id=dfwmsc7v_15cc6s2vdh" target="_blank">HTML5 Tech Talk on November 2009</a></span></p>
<p style="text-align: left;"><span style="background-color: #ffffff;">» <a href="http://my.opera.com/MezamashiTech/blog/2009/11/12/html5" target="_blank">HTML5 のご紹介@Opera</a></span></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2009/11/microsoft-pivot.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2009/11/microsoft-pivot.html" />
	</item>
		<item>
		<title>AjaxフレームワークのYUI2.8.0がHTML5ライクなクライアントストレージに対応</title>
		<link>http://blog.8maki.jp/2009/09/yui2-8-0_html5_like_localstorage.html</link>
		<comments>http://blog.8maki.jp/2009/09/yui2-8-0_html5_like_localstorage.html#comments</comments>
		<pubDate>Thu, 24 Sep 2009 00:21:51 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[survey]]></category>
		<category><![CDATA[テクノロジー]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web Storage]]></category>
		<category><![CDATA[YUI]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=487</guid>
		<description><![CDATA[
			
				
			
		
Ajax JavaScriptフレームワークのYUI (Yahoo! User Interface Library) が、最新版の2.8.0でHTML5ライクなクライアントストレージに対応していました。
YUI 2.8.0における注目の新機能は次のとおり。

HTML5スタイルのローカルセッションストレージを提供するクライアントストレージメタコンポーネントStorage Utility (Matt Sinder氏提供)の導入。HTML5ストレージ、Google Gears、Flash共有オブジェクトをサポート
さまざまな用途に適用できるプログレスバーコンポーネント ProgressBar (Daniel Barreiro氏提供)の導入
接続マネージャにおけるクロスドメインサポートの実現
イベントデリゲーションサポートの実現
カルーセルウィジェットにギャラリーモードを追加
チャートにおける複数軸表示のサポート

» Yahoo! UI最新版登場、クライアントストレージ &#124; エンタープライズ &#124; マイコミジャーナル
細かく見ると色々と便利な機能がついていますが、個人的にクライアントストレージが時代に沿っているというか、HTML5が注目されだしている昨今、非常にタイムリーで目を引きました。
とその前に、ざっとHTML5のおさらい（といっても理解が不十分だったのでこれを機に調べたのですがf^^;）。
HTML5 まとめ
HTML5の注目点は、新しいマークアップ（タグの整理）と新しいAPIの対応です。
■ 新しいマークアップ

 検索インデックスされやすいように構造化
より構造的な文を生成できるように&#60;nav&#62;や、&#60;section&#62;といったタグが追加されました。

マルチメディア対応
&#60;audio&#62;や&#60;movie&#62;といったマルチメディアタグにより、javascriptやFlashを使わなくても音声・動画の再生ができるようになりました。

Flashのような自由な2D表現
&#60;canvas&#62;タグで簡単にJava Appletのような豊かな2D表現ができるようになりました。


■ 新しいAPI

ドラッグ＆ドロップ
戻るボタン
O3D
ブラウザのプラグインとして提供されているO3Dをjavascriptから制御できるようになります。例えばGoogle Earthがこれを使ってブラウザ上で3D表現を可能にしていまいす。

Geolocation
1，2カ月程前に話題になりましたが、Firefox3.5でGoogle Mapを開くと現在地を表示できます。これはGeolocation APIを使っていて、javascriptから位置情報にアクセスできるからこそできる機能です。モバイルのブラウザのエンジンとして標準化しだしているWebkitでも実装が進んでいて、モバイル分野でかなり使われそうなAPIです。

Web Storage
javascriptでクライアントにデータを保存することができるAPIです。このときデータベースのようにSQLを用いてデータを保存することもできるようです。こちらにサンプルコードが記載されています。

Web Workers
バックグラウンドでjavascriptを動かせるようになります。いわばjavascriptスレッドです。繊細なUI処理に影響させることなく、重い処理を裏で行うことができるようになります。

Web Sockets
サーバサイドプロセスと双方向に通信することを可能にするAPIです。


HTML5のより詳しい記述はこちらへ↓
»  グーグルが賭けるHTML 5の未来 － ＠IT
» HTML 5 ― HTML 4 からの変更点 W3C 草案 (Working Draft)
YUI2.8.0 Storage Utility
さて、今回のYUI2.8.0のStorage Utilityですが、HTML5のWeb Storage (FireFox 3, Safari 4, IE [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F09%2Fyui2-8-0_html5_like_localstorage.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F09%2Fyui2-8-0_html5_like_localstorage.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Ajax JavaScriptフレームワークの<a href="http://developer.yahoo.com/yui/" target="_blank">YUI (Yahoo! User Interface Library) </a>が、最新版の2.8.0でHTML5ライクなクライアントストレージに対応していました。</p>
<blockquote><p>YUI 2.8.0における注目の新機能は次のとおり。</p>
<ul>
<li>HTML5スタイルのローカルセッションストレージを提供するクライアントストレージメタコンポーネントStorage Utility (Matt Sinder氏提供)の導入。HTML5ストレージ、Google Gears、Flash共有オブジェクトをサポート</li>
<li>さまざまな用途に適用できるプログレスバーコンポーネント ProgressBar (Daniel Barreiro氏提供)の導入</li>
<li>接続マネージャにおけるクロスドメインサポートの実現</li>
<li>イベントデリゲーションサポートの実現</li>
<li>カルーセルウィジェットにギャラリーモードを追加</li>
<li>チャートにおける複数軸表示のサポート</li>
</ul>
<p>» <a href="http://journal.mycom.co.jp/news/2009/09/18/037/index.html" target="_blank">Yahoo! UI最新版登場、クライアントストレージ | エンタープライズ | マイコミジャーナル</a></p></blockquote>
<p>細かく見ると色々と便利な機能がついていますが、個人的にクライアントストレージが時代に沿っているというか、HTML5が注目されだしている昨今、非常にタイムリーで目を引きました。</p>
<p>とその前に、ざっとHTML5のおさらい（といっても理解が不十分だったのでこれを機に調べたのですがf^^;）。</p>
<h4>HTML5 まとめ</h4>
<p>HTML5の注目点は、新しいマークアップ（タグの整理）と新しいAPIの対応です。</p>
<p style="margin-bottom:0;">■ 新しいマークアップ</p>
<ul>
<li> 検索インデックスされやすいように構造化
<p style="margin-left: 15px; margin-bottom: 2px;">より構造的な文を生成できるように&lt;nav&gt;や、&lt;section&gt;といったタグが追加されました。</p>
</li>
<li>マルチメディア対応
<p style="margin-left: 15px; margin-bottom: 2px;">&lt;audio&gt;や&lt;movie&gt;といったマルチメディアタグにより、javascriptやFlashを使わなくても音声・動画の再生ができるようになりました。</p>
</li>
<li>Flashのような自由な2D表現
<p style="margin-left: 15px; margin-bottom: 2px;">&lt;canvas&gt;タグで簡単にJava Appletのような豊かな2D表現ができるようになりました。</p>
</li>
</ul>
<p style="margin-bottom:0;">■ 新しいAPI</p>
<ul>
<li>ドラッグ＆ドロップ</li>
<li>戻るボタン</li>
<li>O3D
<p style="margin-left: 15px; margin-bottom: 2px;">ブラウザのプラグインとして提供されているO3Dをjavascriptから制御できるようになります。例えばGoogle Earthがこれを使ってブラウザ上で3D表現を可能にしていまいす。</p>
</li>
<li>Geolocation
<p style="margin-left: 15px; margin-bottom: 2px;">1，2カ月程前に話題になりましたが、Firefox3.5でGoogle Mapを開くと現在地を表示できます。これはGeolocation APIを使っていて、javascriptから位置情報にアクセスできるからこそできる機能です。モバイルのブラウザのエンジンとして標準化しだしているWebkitでも実装が進んでいて、モバイル分野でかなり使われそうなAPIです。</p>
</li>
<li>Web Storage
<p style="margin-left: 15px; margin-bottom: 2px;">javascriptでクライアントにデータを保存することができるAPIです。このときデータベースのようにSQLを用いてデータを保存することもできるようです。<a href="http://journal.mycom.co.jp/articles/2009/06/15/gdd1/001.html" target="_blank">こちら</a>にサンプルコードが記載されています。</p>
</li>
<li>Web Workers
<p style="margin-left: 15px; margin-bottom: 2px;">バックグラウンドでjavascriptを動かせるようになります。いわばjavascriptスレッドです。繊細なUI処理に影響させることなく、重い処理を裏で行うことができるようになります。</p>
</li>
<li>Web Sockets
<p style="margin-left: 15px; margin-bottom: 2px;">サーバサイドプロセスと双方向に通信することを可能にするAPIです。</p>
</li>
</ul>
<p>HTML5のより詳しい記述はこちらへ↓<br />
» <a href="http://www.atmarkit.co.jp/news/200905/28/html5.html" target="_blank"> グーグルが賭けるHTML 5の未来 － ＠IT</a><br />
» <a href="http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/" target="_blank">HTML 5 ― HTML 4 からの変更点 W3C 草案 (Working Draft)</a></p>
<h4>YUI2.8.0 Storage Utility</h4>
<p>さて、今回のYUI2.8.0の<a href="http://developer.yahoo.com/yui/storage/">Storage Utility</a>ですが、HTML5のWeb Storage (FireFox 3, Safari 4, IE 8以上必要) に対応しているだけでなく、HTML5未対応のブラウザのためにGoogle GearsやSWFファイル(Flash Player 9.0.115以上必要)を使って本機能を実装しています。もちろんセッションでの保存にも対応しています。</p>
<p>YUIのサンプルで動いているのを確認しました。ウィンドウを閉じても文章が保存されていて感動。<br />
» <a href="http://developer.yahoo.com/yui/examples/storage/storage-simple_clean.html" target="_blank"> Simple Storage Example — Saving In-Progress Text Entry</a></p>
<p>コードもstorageEngineオブジェクトを用意してゲッター/セッターで入れるだけというシンプルさ。色々な場面で使う機会が出てきそうです。</p>
<pre class="brush: jscript;">
var storageEngine = YAHOO.util.StorageManager.get(
  YAHOO.util.StorageEngineGears.ENGINE_NAME,
  YAHOO.util.StorageManager.LOCATION_LOCAL,
  {
    order: [
      YAHOO.util.StorageEngineGears,
      YAHOO.util.StorageEngineSWF,
      YAHOO.util.StorageEngineHTML5
    ],
  force: false
}
);
～中略～
storageEngine.getItem(&quot;simple-storage-textentry&quot;);
storageEngine.setItem(&quot;simple-storage-textentry&quot;, YAHOO.util.Dom.get(&quot;textentry&quot;).value);
</pre>
<p>なお、容量としてHTML5は5～10MB、Google GearsはSQLiteを使用していて最大2GB、SWFは100KBまで利用できるようです。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2009/09/yui2-8-0_html5_like_localstorage.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2009/09/yui2-8-0_html5_like_localstorage.html" />
	</item>
	</channel>
</rss>
