HTML5のCanvasはFlashの変わりのダイナミックな処理のイメージがありますが、
テキストをリッチに表示したりするなどの細かな使い方もできたりします。

CanvasTextというJavaScriptライブラリを使うと、
HTMLとCSSを使った構文でインパクトのある文字を魅せる事が出来るようになります。

使い方

//インスタンスを作成
var CanvasText = new CanvasText;

//共通の処理を記述
CanvasText.config({
    canvasId: "canvas",
    fontFamily: "Verdana",
    fontSize: "14px",
    fontWeight: "normal",
    fontColor: "#000",
    lineHeight: "12"
});

//blueクラスを作成して、属性を指定
CanvasText.defineClass("blue",{
    fontSize: "24px",
    fontColor: "#29a1f1",
    fontFamily: "Impact",
    fontWeight: "normal"
});

//pinkクラスを作成して、属性を指定
CanvasText.defineClass("pink",{
    fontSize: "24px",
    fontColor: "#ff5e99",
    fontFamily: "Times new roman",
    fontWeight: "bold"
});

//Canvasに描画するテキストを指定。ここでblueクラスとpinkクラスを使用します。
var text = 'I like <class="blue">blue</class> color but I also like <class="pink">pink</class> color!';
text += '<br />Nevermind, I prefer <class="blue">blue</class> to <class="pink">pink</class>... !'; 

//ここで描画します。
CanvasText.drawText({
    text:text,
    x: 20,
    y: 30
});

スマフォでの動画再生の際に、キューポイント（再生開始位置）を指定できるライブラリが良さそうなのでメモ的にエントリー。もちもんPCもOKですよ。

「Cuepoint.js」はHTML5のビデオに、
字幕とキューポイントを追加するためのオープンソースのJavaScriptです。

デモサイトを訪れると動画が埋めこまれているのですが、
画面の下にあるサムネイルをクリックすると、
それぞれに対応した箇所から再生が開始されるようになっています。

長い動画を見せたい時に、見て欲しいポイントを分かりやすくできて良いですよね。

とても単純な処理なのですが、何回かお仕事でこういうものを探していたので
そのうち使いそうです。

興味のある方は下のリンクからどうぞ。

HTML5でAudioを便利に使うライブラリ「Buzz」

HTML5に対応しているブラウザであれば、再生、一時停止、停止、ボリュームコントロールのようなアクションを制御する事ができるようになります。

それ以外にも、オーディオのループや再生時間の取得、イベントの取得などなど、
色々なAPIが用意されています。

対応しているファイル形式

ファイル形式はOgg、Mp3、Wav、Aacの４種類に対応しているようです。

音声の再生には以前はFlashが必須でしたが、こういったライブラリで手軽に設置できるようになって来たのが嬉しいですね。

ブラウザによっては動作しないものもあるようですが、
フェードイン/フェードアウトも実装されていました。

デモも非常に面白いサイトに出来上がっていました。
こういった便利なライブラリは覚えておくといつか使えそうです。

詳細&ダウンロードは下のリンクからどうぞ。

Google Chartsを拡張してグラフ作成できるJavaScript「Yokul」

Google ChartsはURLにパラメータを指定するだけでグラフを描いてくれるAPIなのですが
グラフのy座標、x座標の値を細かく指定できなかったりするなど微妙に不便な所があります。

その微妙に不便な所を解消できるかも、なライブラリですよ。

Googleができる事よりも多くのグラフを描画できるのと、10,000 × 10000 pxなどの大きなグラフ生成できるのが特徴です。

↑Y座標のラベルを細かくした様子です。

現在の所はGoogle Chartsの全てのグラフには対応してないようなので、
一部グラフが表示できない場合もあるようですね。

詳細&ダウンロードは下のリンクからどうぞ。

デザイン済みテーマ、カスタマイズ用のシンプルテーマ、IE6でもデザインが崩れないテーマなど色々ありました。

Constellation Theme

iPhoneやiPad用に表示が最適化されているHTML5製のWordPressテーマ

HTML5Press

おすすめ投稿をスライダで表示する事が出来ます。
画面を下にスクロールさせると、ページTOPへ戻るがフェードインしながら表示されるテーマです。

Free Dream HTML5 WordPress Theme

IE６でも表示可能なテーマ。
960 pxのワイドレイアウトです。

TwentyTen Five

WordPress3のデフォルトテーマである「Twenty Ten」をHTML5に対応させたテーマです。
デザインやスタイルは「Twenty Ten」と同じでマークアップのみが変更になっています。

Grey: A New Free HTML5/CSS3 WordPress Theme

TwitterやFlickrの表示が標準で可能なWordPressのテーマファイル。

HTML5 Template

jQueryで滑らかに動く画像スライダ付きテーマ。

Temple Gate: An Accessible HTML5 WordPress Theme

多言語対応しているWordPressテーマ。

Spectacular

GPLライセンスで公開されているテーマ。
HTML5版とHTML4.01版の２パターン用意されています。

Toolbox

カスタマイズを前提としたWordPressテーマ。
デザインが一切されていない、シンプルなHTML5のテーマになっています。

Roots

HTML5 Boilerplate、Blueprint CSSというHTMLフレームワークを使用したテーマファイル。

Free HTML5 WordPress Theme

最小限のマークアップで構築されており、簡単にカスタマイズ可能なように出来ているテーマフレームワークになっています。

Boilerplate

デザイン無しのミニマムなテーマ。

Starkers

シンプルな構造で作られたテーマフレームワーク。
カスタマイズする際に便利です。

以上、最近知ったHTML5で作られたWordPressテーマでした。

Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。

HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。

ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。

↑デモの様子。破れた穴の画像にドラッグするとアップされます。
ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。

使い方

使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。

■ JSの読み込み

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.html5uploader.min.js"></script>

■ JavaScript

$(function() {
	$("#dropbox, #multiple").html5Uploader({
		name: "foo",
		postUrl: "bar.aspx"	
	});
});

■ HTML

現状はFirefoxとChromeでしか動作確認されていないようですね。
興味のある方は下のリンクからダウンロードして見てください。

「25 Amazing HTML5 Portfolio Web Designs For Inspiration」では、HTML5を使ったアイデアが盛りだくさんのサイトが紹介されている。

video、Canvas、ドラッグ＆ドロップなどを使用しているサイト集です。

参考になると思うので一度見てみてください。

スライダや日付処理などのHTML5のフォーム要素を取り入れつつ
デザインされたフォームを作る方法が紹介されています。

以下のようなフォームを作る方法がまとめられています。

IE9が出てくる事でこういった実装も普通になってきそうですね。
興味のある方は下のリンクからどうぞ。

これはちょっと使いたいかも。Canvasを手軽に扱えるライブラリです。

iPhone,iPad,Androidで動くように最適化されているので、スマートフォン用のHTMLアプリを作る際に便利ですね。

コードは以下にご紹介。

var interval_1=0;
function startShow()
{
    var r = Math.floor(Math.random() * (254));
    var g = Math.floor(Math.random() * (254));
    var b = Math.floor(Math.random() * (254));
    var x = Math.floor(Math.random() * (439));
    var y = Math.floor(Math.random() * (554));
    fillStyle = "rgba("+r+", "+g+", "+b+", 0.5)";
    jc.circle(x,y,1,fillStyle,1)
        .animate({radius:100,alpha:0},1500,function(){
            this.del();
        });
}

function onload_1()
{
    jc.start(idCanvas,25);
    interval_1=setInterval("startShow()",200);
}

function start_1(idCanvas)
{
    if(interval_1)return;
    onload_1();
}

function stop_1(idCanvas)
{
    clearInterval(interval_1);
    interval_1=0;
    jc.clear(idCanvas);
}

オブジェクト指向が使えるようにもなっているのも嬉しいです。
お手軽でなかなか便利そうですね。詳細＆ダウンロード＆デモは以下からどうぞ。

「Draggables」はドラッグ&ドロップでフォームに情報を入力する事が出来るJavaScriptライブラリです。

氏名や電話番号をあらかじめマイクロフォーマット形式で保存しておくと、
フォームにドラッグするだけで内容が反映されるようになります。
ファイルだけでなくWEBページからもドラッグできるのが特徴です。

実際に動作デモを触ってほしいのですが、これはすごいですね。。
フォームの入力がめちゃくちゃ楽になりそうです。

使ってみた様子

以下に使ってみた様子を載せてみます。

↑まずは、マイクロフォーマットが表示されているデモページを開きます。
http://draggables.com/event-drag.htm

↑次にお問い合わせフォームを開きます。これは別ウインドウで開いてください。
http://draggables.com/event-dropform.htm

↑２つのウインドウを並べて、マイクロフォーマットが記述してあるアイコンをフォームにドラッグします。

↑すると、フォームに情報が入力された状態になりました。

すごいですね。

情報を保存したファイルを一個デスクトップに置いておけば非常に楽になりそうです。
動作にはHTML5をサポートしているブラウザが必要なようですが、一部IE6も対応しているようです。