Canvasを使ってスタイリッシュなテキストが描画できる「CanvasText」

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の全てのグラフには対応してないようなので、
一部グラフが表示できない場合もあるようですね。

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

最近知ったHTML5で作られたWordPressテーマをを備忘録的にまとめておきます。

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

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

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

いいものを作るには、いいものをたくさん見ているべきだ。

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

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

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

CSS3を使ってフォームを作成したい。
そんな時におすすめなのが「Top 10 CSS 3 forms tutorials」。

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

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

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

コードは以下にご紹介。

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

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