ローディングアニメーションを生成する jQuery プラグイン jquery.wakeup.js

ローディングアニメーションを生成する jQuery プラグインを作ってみました。wakeUp() でアニメーション開始、goToSleep() でアニメーション停止を行います。アニメーションの形やスピードなどは、プロパティを与えて設定します。
GitHub: jquery.wakeup.js

☆確認環境
Chrome/Safari/Firefox/Opera（heart 以外）

☆プロパティ一覧

• type：アニメーションの形（circle/dot/line/beat/star/heart）
• color：色（CSSで定義できる値）
• size：サイズ（canvasのサイズ、数値）
• speed：アニメーションのスピード（ミリ秒）
• clockwise：右回りか左回りか（trueが右回り）
• item：表示されるアイテムの量（数値）
• itemSize：表示されるアイテムのサイズ（数値）
• phase：アニメーションの段階（数値）
• fade：fade inもしくはfade out する際の完了までの時間（ミリ秒）
• fadeIn：fade inするかどうか（trueで実施）
• fadeOut：fade outするかどうか（trueで実施）

☆ファイルの読み込み

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='jquery.wakeup.js'></script>

【使い方（dot）】
☆html

<button id='dot'>Play/Stop</button>
<div id='wake_dot'></div>

☆JavaScript

[ 開始 ]
var option = {
  type: 'dot',
  color: 'rgb(255, 0, 0)',
  size: 50,
  speed: 30,
  clockwise: false,
  item: 20,
 itemSize: 1
};
$('#wake_dot').wakeUp(option);

[ 終了 ]
$('#wake_dot').goToBed();

☆結果



【使い方（heart）】
☆html

<button id='heart'>Play/Stop</button>
<div id='wake_heart'></div>

☆JavaScript

[ 開始 ]
var option = {
  type: 'heart',
  color: 'rgb(255, 0, 255)',
  size: 30,
  speed: 50
};
$('#wake_heart').wakeUp(option);

[ 終了 ]

☆結果

I LOVE MACINTOSH を公開しました

お手持ちのアイコン画像をお手持ちの背景画像と一緒に、下記のようなバッヂが付いた画像を生成するサービス「I LoveMacintosh」を公開しました。


トップページにアクセスすると、下記のようなページが表示されるので、アイコン画像と背景画像を選択します。


次は、アイコンとする画像での表示する場所と、背景画像のどこにバッヂを付けるかを、ドラッグして決め、NEXTを押します。バッヂのサイズは3種類から選べます。


色をバーを使って決め、入力する文字とフォントを決め、NEXTを押します。入力すると、結果がプレビューに反映されます。


最後の画面で表示された画像を右クリックし、ダウンロードしてください。

I LOVE MACINTOSH

【動作環境】
Apple Safari 5 以降
Google Chrome 12 以降
Firefox 5 以降（ただし、色変更のバーは表示されず、数値入力のみです）

※ html5 canvas の解釈に拠っているので、上記に限られます。

Safari/Chrome Extension "previewForBlogger" を公開してみた

前に、Blogger の新しい投稿画面がイマイチ というエントリーで書いたけど、Blogger が新しい UI にしてからというもの、プレビューをするのが面倒だった。いちいち新しいウィンドウが開いてしまうので、初めはなにがなんだか判らなくなってしまう。Google Product Ideas に投稿はしたけど、改造されるような感じもないので、機能拡張として作ってみた。

これは入力しているテキストエリアの下にプレビューが表示されるようにしているので、いちいちウィンドウを開かなくてもいい。あと、「ラベル」の入力エリアがなんか新 UI では非常に狭くなったので、広げてみた。

良かったら、下記からどうぞ。

Chrome:
previewForBlogger - Google Chrome 拡張機能ギャラリー
Safari:
previewForBlogger | Prime Design Works | Webサイト制作・開発 | 京都市内・京都府

ウェブページに iframe があって複数挿入されてしまう場合の対処 [Safari Extensions を作ってみる：第十三回]

読み込んだページに独自の要素を表示させる のエントリーで書いたような形では、読み込んだウェブページに iframe があった場合に、iframe 内の html 以下にも挿入されてしまい、実に困ってしまう。そんな筈じゃないのに、って思うが仕方ない。これはかなり悩んだ。むしろ、悶絶した。

ということで、「グローバルページ」で指定した html（もしくは、その html 内で指定している Javascript）で、そのタブの url を取得し、「スクリプトを終了」で指定した Javascript に送り、その Javascript で自身の url を取得し、比較して処理するかどうかを判断すれば、iframe 内の html 以下に挿入されることはなくなる。

★「スクリプトを終了」で指定した Javascript

function cmpURL(evt) {
  if (location.href == evt.message) 次の処理;
}
// 「グローバルページ」で指定した html へ送信
safari.self.tab.dispatchMessage("getURLofTab", "");
// 「グローバルページ」で指定した html からの答えを受信
safari.self.addEventListener("message", cmpURL, false);

★「グローバルページ」で指定した html 内の Javascript

function getInfo(evt) {
  var URLofTab = safari.application.activeBrowserWindow.activeTab.url;
  safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("answer", URLofTab);
}
safari.application.addEventListener("message", getInfo, false);

設定内容の保存先には localStorage がいいと思う [Safari Extensions を作ってみる：第十二回]

「機能拡張ビルダー」の一番下にある「機能拡張の設定」では「非表示（input の type="hidden"）」として、ユーザーに変更させたくない項目を保存したりできるけど、例えばバグ改修などでアップデートした場合、ユーザーがインストールするとこの「機能拡張の設定」の情報に上書きされてしまう。

そこで、localStorage の出番が来る。「機能拡張ビルダー」の「スクリプトを終了」で指定した Javascript 内で localStorage を使ってしまうと、その表示しているウェブページの storage になってしまうので、「グローバルページ」で指定した html（もしくは、その html 内で指定している Javascript）内で localStorage を使う。すると、Extension の storage としてコンピュータに保存される。

ということで、「機能拡張ビルダー」内の設定情報は、localStorage がなかった場合にのみ（初めてのインストール、もしくは未使用状態、など）取得すれば良く、その他は localStorage の情報で処理すれば良いと思う。

例えば、「sample」という情報を「key」をいう storage に保存する場合は、こんな感じ。

★保存する場合（「グローバルページ」で指定した html 内の Javascript）

localStorage.setItem("key", "sample");

逆に、localStorage に情報がないときには「機能拡張ビルダー」の「機能拡張の設定」から、情報があるときは localStorage から、thisKey という変数に突っ込む場合はこんな感じ。

★取得する場合（「グローバルページ」で指定した html 内の Javascript）

if (localStorage.setItem.key) {
  var thisKey = localStorage.getItem("key");
} else {
  var thisKey = safari.extension.settings.getItem("key");
}

独自のコンテクストメニューを生成する [Safari Extensions を作ってみる：第十回]

Safari Extensions では、右クリック時に表示されるコンテクストメニューに独自のメニューを追加できる。

新規のコンテクストメニュー名が「ページタイトルを表示」とし、クリックされた場合に、そのページのタイトルをアラート表示する、という場合はこんな感じ。メニューの生成は「機能拡張ビルダー」で、メニューがクリックされた場合の処理は「グローバルページ」に記述する。

★機能拡張ビルダーでの指定

1. 「機能拡張ビルダー」の「機能拡張クローム」内「コンテクストメニュー項目」右のボタンをクリックする
2. 「タイトル」にメニューに「ページタイトルを表示」と入力する
3. 「識別子」と「コマンド」に「showTitle」と入力する（「コマンド」を省略した場合、「識別子」と同じとして扱われるので、「識別子」と同じ名称でも問題はない）

★「グローバルページ」で指定した html 内の Javascript

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
  function fromContext(evt) {
    if (evt.command === "showTitle") {
// タイトルをアラート表示
      alert(safari.application.activeBrowserWindow.activeTab.title);
    }
  }
// コンテクストメニューがクリックされた場合
  safari.application.addEventListener("command", fromContext, false);
</script>
</head>
<body></body>
</html>

独自の要素からページ遷移を行う [Safari Extensions を作ってみる：第九回]

読み込んだページに独自の要素を表示させ、これが form 要素でかつ、action や onsubmit で Javascript からページ遷移をしたい場合、この独自の要素を挿入している「スクリプトを終了」で指定した Javascript だけでは遷移できない。これは「グローバルページ」を使うことにより、同じタブでのページ遷移や新規タブでのページ遷移を行うことができる。

独自の form 要素の onsubmit で sendUrl() を指定し、その結果、入力ボックスで指定された URL にページ遷移を行う場合はこんな感じ。もちろん、チェック等の処理は必要不可欠ではあるけど、今回は省略したいと思う。

★「スクリプトを終了」で指定した Javascript

// form 要素を挿入する
var testForm = document.createElement("form");
testForm.onsubmit = "test";
testForm.method = "post";
document.body.insertBefore(testForm, document.body.firstChild);
testForm.addEventListener("submit", sendUrl); // addEventListener で処理先を指定
// 入力ボックスを上記の testForm に生成する
var testInput = document.createElement("input");
testInput.type = "text";
testInput.id = "testInput";
testInput.name = "testInput";
testForm.appendChild(testInput);
// ボタンを上記の testForm に生成する
var testSubmit = document.createElement("input");
testSubmit.type = "submit";
testSubmit.value = "send";
testForm.appendChild(testSubmit);

// submit で送られてきた処理
function sendUrl() {
  safari.self.tab.dispatchMessage("open", testInput.value);
}

★「グローバルページ」で指定した html 内の Javascript

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
  function GoTo(evt) {
// 新規タブで開く場合
    safari.application.activeBrowserWindow.openTab().url = evt.message;
// 同じタブで開く場合
    safari.application.activeBrowserWindow.activeTab.url = evt.message;
  }
// content_scripts からの受信
  safari.application.addEventListener("message", GoTo, false);
</script>
</head>
<body></body>
</html>

ちなみに、url に日本語が含まれる場合、このままでは遷移できないので、上記の sendUrl() 内の testInput.value をエンコードしてやる必要がある。

function sendUrl() {
    safari.self.tab.dispatchMessage("open", encodeURI(testInput.value));
}

Safari/Chrome Extension "noticeAboutMe" を公開してみた

Safari/Chrome Extensions を初めて作ってみた。Twitter で誰かが自分に対するツイート（@ユーザー ID でツイートしてるもの）があったりしても、いちいち見に行かないといけない。リツイートだって、見に行かないとされてるのかどうか判らない。ということで、そいつをチェックしに行く機能拡張を作ってみた。なかなかいい勉強になった。

Safari Extensions でも同じものを作ったけど、こちらは現在 Apple にて評価中。載るかどうか判らない。

良ければ使ってやってください。

Chrome:
noticeAboutMe - Google Chrome 拡張機能ギャラリー
Safari:
noticeAboutMe | Prime Design Works | Webサイト制作・開発 | 京都市内・京都府

Javascript ファイルから設定画面の情報を読み込む [Safari Extensions を作ってみる：第七回]

Safari Extensions ではメニューの「Safari -> 環境設定...」画面の「機能拡張」タブをクリックすることで現れる画面に、「機能拡張ビルダー」内の「機能拡張の設定」で指定した各種設定を表示させることができる。これの設定をどうやったら読み込めるのかを、これまたひとしきり悩んだ。公式のドキュメントである Safari Extensions Development Guide: Settings and Local Storage を見てもやり方が判らない。色々と検索した挙げ句、Safari Extension Questions - Stack Overflow でなんとか解決した。以下にやり方を書いてみたいと思う。

まず、設定を読み込むには、safari.extension.settings.getItem("xxx") で取り込めばいいんだけど、これは「機能拡張ビルダー」内の「取り込んだ機能拡張の内容」の「スクリプトを開始 or 終了」のところに入れた Javascript ファイルに記述しても機能しない。その少し上の「機能拡張グローバルページ」で指定した html ファイル内で記述しないと能力を発揮しない。先程の「スクリプトを開始 or 終了」とグローバルページとの応答でようやく取得することができる。

ついでに設定画面で変更された時にも値を Javascript に渡すようにする。ユーザーが変更した際は change event が発行される。

★「グローバルページ」で指定した html 内の Javascript

<!doctype html>
<html lang="en">
<head>
  <script type="text/javascript">
// 問い合わせ or 設定変更時に呼び出される
    function respondSetting(evt) {
// 設定の「キー」項目である「xxx」という値を変数 zzz に代入
      var zzz = safari.extension.settings.getItem("xxx");
// Javascript への返答
      safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("answer", zzz);
    }

// Javascript からの問い合わせを受信
    safari.application.addEventListener("message", respondSetting, false);
// 設定が変えられた時に発行
    safari.extension.settings.addEventListener("change", respondSetting, false);
  </script>
</head>
<body></body>
</html>

★「スクリプトを終了」で指定した Javascript

// グローバルページからの返答時に呼び出される
function getMessage(evt) {
// 返答された設定画面の値を変数 sValue に代入
  var sValue = evt.message;
}
// グローバルページに設定画面の値を問い合わせを送信
safari.self.tab.dispatchMessage("settingValue", "xxx");
// グローバルページからの返答を受信
safari.self.addEventListener("message", getMessage, false);

とりあえず Hello World [Safari Extensions を作ってみる：第二回]

まずは新しくプログラムを行う基本である、Hello World の文字を Safari のメニューバーに表示するようにしてみる。

とりあえず、Hello World と表示する html ファイルを用意する。html5 で記述し、名前は「index.html」とする。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>タイトル</title>
</head>
<body>
Hello World
</body>
</html>

1. Safari Extensions の新規開発画面を表示する
2. Safari Extensions の新規開発画面を表示する際に保存したフォルダに、上記で作った html ファイルを保存する
3. 「機能拡張の情報」「機能拡張の詳細」「機能拡張のバージョン」の各項目に適宜な内容を入力する
4. 「機能拡張クローム」の「バー」の「新規バー」をクリックする
5. 入力箇所が表示されるので、「ラベル」には適宜な文字を入力し、「ファイル」をクリックすると 2. で保存した index.html が表示されるので、それを選択する
6. 機能拡張ビルダー右上の「インストール」をクリックすると、メニューバーに「Hello World」と表示される

とっても簡単。

Safari Extensions を作ってみる

Safari 5 から Extensions（拡張機能）を使えるようになったので、作ってみようと思う。

1. Safari Extension（機能拡張）を作る前に証明書をゲットし、Safari Developer となる
2. とりあえず Hello World
3. 読み込んだウェブページの内容を使って処理を行う
4. 読み込んだウェブページに CSS を適用させる
5. 自動的にアップデートをさせるようにする
6. Extension のアイコンを設定する
7. Javascript ファイルから設定画面の情報を読み込む
8. 読み込んだページに独自の要素を表示させる
9. 独自の要素からページ遷移を行う
10. 独自のコンテクストメニューを生成する
11. 開いている全てのタブに処理を走らせる
12. 設定内容の保存先には localStorage がいいと思う
13. ウェブページに iframe があって複数読み込まれてしまう場合の対処

Canvas でローディングイメージ（読み込み中の画像）のアニメーションを作成する [html5 の Canvas を使ってみる：第卌五回]

Flash ではなく Ajax 等でのローディングイメージは画像を用いていたが、Canvas でもできるので、作ってみた。30° で 12 回転させ、その際に 12 で割っていった透明度を加えて行くと、くるくる回って見える。今回、よくあるこんな形がくるくる回るようにしてみた。


また、大きさ・色・回転の速さを自由に変えられるようにしてあるので、場面に応じて使えると思う。背景はもちろん透明にした。

★html 側

<canvas id="loading"></canvas>

★Javascript 側

function draw() {
// id: loading を変数 e に代入
  e = document.getElementById("loading");
// e で 2 次元描画を行うことの定義を変数 c に代入
  c = e.getContext('2d');
// 透明度を入れる配列を変数 alphas に定義
  alphas = new Array();
// 大きさ（Canvas のサイズ）を指定
  len = 30;
// 色を rgb 形式で指定
  color = "rgb(0, 102, 255)";
// Canvas のサイズを変更
  setCanvasSize();
// 速さをミリ秒で指定
  loadingTimer = setInterval(drawLoadingImage, 50);
}
// サイズを変えないとデフォルトの Canvas サイズが残り、たまに厄介なことになるので変更
function setCanvasSize() {
  e.width = len;
  e.height = len;
// サイズの半分を変数 r に代入
  r = len / 2;
// 1 つの形の大きさを定義
  w = Math.round(len * 0.1);
  h = Math.round(len * 0.25);
// rgb 形式で入力された色を、透明度の手前でぶった切り、変数 colorRGB へ代入
  var n = color.indexOf(")");
  colorRGB = "rgba(" + color.substr(4, (n - 4));
// rotate(); の性質上、x:0、y:0 で回転させた方が良いので、
// x:0、y:0 で描画させるものを Canvas の中央へ setTransform(); で移動
  c.setTransform(1, 0, 0, 1, r, r);
}
function drawLoadingImage() {
// 描画されているものを clearRect(); で消去
  c.clearRect(-r, -r, (r * 2), (r * 2));

  for (var i = 0; i < 12; i++) {
// alphas の値が揃っていなければ（最初の描画時）、alphas に透明度を追加
    if (alphas.length < 12) alphas.push(i / 12);
// colorRGB の後ろに透明度を付けて透明度付きの色を定義
    thisColor = colorRGB + "," + alphas[i] + ")";
// fillStyle で色を指定
    c.fillStyle = thisColor;
// strokeStyle で枠線に transparent を指定し無効化
    c.strokeStyle = "transparent";
// 描画開始
    c.beginPath();
// 上記の形を lineTo(); と quadraticCurveTo(); と closePath(); で描画
    c.moveTo((0 - w / 4), (r - h));
    c.quadraticCurveTo(0, (r - h - w / 2), (0 + w / 4), (r - h));
    c.lineTo((0 + w / 2), (r - w / 3));
    c.quadraticCurveTo(0, (r + w / 3), (0 - w / 2), (r - w / 3));
    c.closePath();
// fill(); と stroke(); で色付け
    c.fill();
    c.stroke();
// 次のために rotate(); で 30° 回転させておく
    c.rotate(30 * Math.PI / 180);
  }
// alphas の最後の要素を取得し、削除し、先頭へ追加
  alphas.splice(0, 0, alphas[11]).pop();
}
// 描画を止める処理
function stopLoading() {
  clearInterval(loadingTimer);
}

すると、こうなる。


次に大きさを 100 にしてみる。

len = 100;

次は色をグレー rgb(150, 150, 150) にしてみる。

color = "rgb(150, 150, 150)";

今度は回転の速さを 100 ミリ秒にしてみる。

loadingTimer = setInterval(drawLoadingImage, 100);

最後に、背景を黒くした上で、色を白 rgb(255, 255, 255) にしてみる。下地の黒の影響を受けないことが判る。

color = "rgb(255, 255, 255)";

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

Canvas 下地の描画範囲を設定する(width・height) [html5 の Canvas を使ってみる：第卌四回]

Canvas で描いた形をウェブページの中でポイント的に使いたい場合は、下地のサイズを調整する必要が出てくると思う。そんな場合、CSS で定義してしまうと、デフォルトの下地のサイズに対して縮小もしくは拡大されてしまうので、<canvas> 要素の中で定義してやる必要がある。

★html 側

<canvas id="size" width="120" height="50"></canvas>

まずは上記の定義を行わない場合はこうなる。判りやすいように下地に青で色を付けてある。


次に、上記の定義を行った場合。描画範囲が小さくなっていることが判る。


ちなみに、CSS で #size に対して width と height を設定すると、こんな感じになってしまう。


しかし、レイアウト等に関しては CSS で定義を、というスタンスを考えると、CSS で設定できる方がいいのではないだろうか。

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

Safari 5 の html5 対応はどうなのか

今、html5 の Canvas を使ってみる・CSS3 を使ってみる・MySpace のデザインを変更するのそれぞれのコンテンツについて Safari 5 で表示して、Safari 4 から変わったところがあったか見直してみたけど、全くなかった。Safari 4 時代にできなかったことができているとか、その逆とかがなかった。

ちょっと期待していただけに、残念。

Safari 5 リリース！

Apple - Safari - See the new features in Safari for Mac and PC.

Safari 5 がリリースされた。今回は HTML5 への対応がメインとなっているみたい。スピードアップのこともこのご時世、当然書いてあるけど、体感的にはそんなに変わらない。あと、何故か Bing 検索も選べるようになっているが、本当に何故なんだろ。

あと、Chrome のように URL バーでも検索というかサジェストをしてくれるみたい。今このエントリーを早速インストールした Safari 5 で書いているが、ちょっとこのサジェストがまだイマイチっぽい。Chrome の方が精度はいいし、語数も多い感じがする。例えば上記のウェブページ下部に絵が付いているが、この「imac」という語で比較してみると、Safari 5 では Apple Store のウェブページしか出てこないのに対し、Chrome では Apple Store の他にも Apple 内の iMac 紹介ページ、「imac 価格」「imac メモリ増設」と言った検索候補まで出てくる。今度は違う語を入れてみようと思い、「panasonic」を入れてみたが、音沙汰なし。Chrome はさすがにパナソニックウェブサイト他いくつか出てくる。どうやら、Chrome は Google 内にある膨大なデータから割り出すことをしているのに対し、Safari 5 は履歴からサジェストを表示する仕組みのようだ。試しに、一度パナソニックのウェブサイトを表示し、それを消してから今一度 URL バーに「panasonic」と打ち込むと、サジェストに表示された。

しかし Safari 5 でも検索候補のサジェストは URL バー右の検索ボックスで可能なので、将来的には URL バーと一体となり、Chrome が提起した一体型 URL バーに相乗りするのかもしれない。

矩形に新規変換マトリクスを加える(setTransform) [html5 の Canvas を使ってみる：第卌三回]

transform(); では変換マトリクスの値によって効果を加えたが、重ねて transform(); を記述すると効果が重ねられてしまうので、新しい定義を行う場合には setTransform(); を使うみたい。

まず、transform(); を重ねた場合。下は赤い矩形の位置から x:50、y:30 をずらすマトリクスが重ねられるので、青い矩形が 2 つ見えることになる。


★html 側

<canvas id="setTransform"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: setTransform で 2 次元描画を行うことの定義
  var c = document.getElementById("setTransform").getContext('2d');

// fillRect(); で赤の透明度 50% の矩形を描画
  c.fillStyle = "rgba(255, 0, 0, .5)";
  c.fillRect(10, 10, 30, 30);
// x 軸へ 50、y 軸へ 30 移動させる
  c.transform(1, 0, 0, 1, 50, 30);
// fillRect(); で青の透明度 50% の矩形を描画
  c.fillStyle = "rgba(0, 0, 255, .5)";
  c.fillRect(10, 10, 30, 30);
// 新規に x 軸へ 50、y 軸へ 30 移動させる
  c.setTransform(1, 0, 0, 1, 50, 30);
// fillRect(); で青の透明度 50% の矩形を描画
  c.fillStyle = "rgba(0, 0, 255, .5)";
  c.fillRect(10, 10, 30, 30);
}

すると、こうなる。transform(); で定義した内容と同じ内容を setTransform(); で定義しているので、青い矩形は 2 つ見えずに重なった姿として見えているので、青い矩形は濃く見える。


確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5

矩形に変換マトリクスを加える(transform) [html5 の Canvas を使ってみる：第卌ニ回]

transform(); では変換マトリクスの値によって場所を移動したり(translate)、回転したり(rotate)と効果を与えられるらしいのでやってみる。

★html 側

<canvas id="transform"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: transform で 2 次元描画を行うことの定義
  var c = document.getElementById("transform").getContext('2d');

// fillRect(); で赤の透明度 50% の矩形を描画
  c.fillStyle = "rgba(255, 0, 0, .5)";
  c.fillRect(10, 10, 30, 30);
// x 軸へ 50、y 軸へ 30 移動させる
  c.transform(1, 0, 0, 1, 50, 30);
// fillRect(); で青の透明度 50% の矩形を描画
  c.fillStyle = "rgba(0, 0, 255, .5)";
  c.fillRect(10, 10, 30, 30);
}

すると、こうなる。x:10、y:10 の矩形に transform で x 軸に 50、y 軸へ 30 移動させているので、x:60、y:40 の位置に青い矩形が描画される。translate(50, 30); と同じ効果。また、今回使った fillRect(); のような描画命令の前に transform(); を記述しないと効果は反映されない。
translate(); の効果の場合はこのように記述する。

c.transform(1, 0, 0, 1, 50, 30);

次に、青い矩形の 1 つに transform(); をかけた後、同じ transform(); を 2 つめの青い矩形に記述してみる。すると、1 回目の transform(); と 2 回目の transform(); の効果を併せたものが反映される。

c.fillStyle = "rgba(255, 0, 0, .5)";
c.fillRect(10, 10, 30, 30);
// 1 回目の矩形に transform(); を記述
c.transform(1, 0, 0, 1, 50, 30);
c.fillStyle = "rgba(0, 0, 255, .5)";
c.fillRect(10, 10, 30, 30);
// 2 回目の矩形にも同じ transform(); を記述
c.transform(1, 0, 0, 1, 50, 30);
c.fillRect(10, 10, 30, 30);

すると、2 つめの青い矩形は、2 回の transform(); の効果を重ねたものとして描画される。


次に、拡大・縮小する scale(); の効果で幅を 2 倍、縦に 1.5 倍にしてみる。
scale(); の効果の場合はこのように記述する。下記の例で赤い矩形と青い矩形の描画開始位置がずれているが、これは scale(); を参照。

c.transform(2, 0, 0, 1.5, 0, 0);

最後に、回転する rotate(); の効果で 30°回転させてみる。ただ矩形の描画開始位置がこのままだと青い矩形の変化具合が判らないので、x:50、y:50 で描画した。
rotate(); の効果の場合はこのような記述形式になる。

// 先に角度を設定
var r = 30 * Math.PI / 180;
// transform(); を定義
c.transform(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0);

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5

html5 の audio / video の音量を設定したり再生時間を求めたりする

mp3 プレイヤを作る上で欠かせないものの一つになる、音量の設定や再生時間の取得。これも html5 の video / audio 要素の機能に javascript 側で操作できる。

例えば、html 側で次のような audio ソースが定義されているとする。

<audio id="mp3" src="xxx.mp3" autobuffer></audio>

id:mp3 の音源を変数 audio として定義しておく。

// id:mp3 を変数 audio として定義
var audio = document.getElementById("mp3");

さて、この xxx.mp3 の音量を設定したいときは、こんな感じで。

// volume を 0.5（0〜1 の数値）に設定
audio.volume = 0.5;

次に、現時点での再生時間を取得したい場合は、次のように記述する。ここでは変数 playTime に代入することとするとこんな感じ。

// 現在の再生時間を変数 playTime に代入
playTime = audio.currentTime;

最後に、この音源全体の時間を取得したいときはこんな感じ。変数 audioLength に代入してみる。

// 音源全体の時間を変数 audioLength に代入
audioLength = audio.duration;

jai - javascript audio interface

html5 の audio / video で最初から再生する

html5 では Flash を使わなくても audio やら video やらを再生できるけど、どうも javascript 側で play() や pause() はあるけど、stop() がない。再生は play() でできるし、一時停止も pause() でできる。で、実際のオーディオ機器やソフトでの表示でよくある「■」に相当する命令がないのかなと探した。stop() とかあればすぐに判るけど、ないのかなと。

あった。load() を使えば再生を停止して、次回の play() 時には先頭から再生してくれる。

重ねた画像の表示の仕方を指定する(globalCompositeOperation) [html5 の Canvas を使ってみる：第卌一回]

globalCompositeOperation では、この記述前に描画した矩形の上に、記述後に描画した矩形を載せた際に発生する重なり具合についてあれこれと指定できるみたいだ。

★html 側

<canvas id="globalCompositeOperation"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: globalCompositeOperation で 2 次元描画を行うことの定義
  var c = document.getElementById("globalCompositeOperation").getContext('2d');

// fillStyle で緑の塗りを指定
  c.fillStyle = "rgb(0, 255, 0)";
// fillRect で塗りつぶした矩形を描画
  c.fillRect(40, 0, 20, 150);
// globalCompositeOperation の値を source-over に指定
  c.globalCompositeOperation = "source-over";
// fillStyle で青の透明度 50% の塗りを指定
  c.fillStyle = "rgba(0, 0, 255, .5)";
// fillRect で塗りつぶした矩形を描画
  c.fillRect(0, 50, 100, 20);
}

すると、こうなる。source-over では両方が描画されるので、緑と薄い青でできた十字架が描画される。重なっている部分は重ねた青の矩形（the source image）が順位として上に表示される。重ねている青い矩形は透明度を与えてあるので、重なり具合がよく判る。

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に source-atop にしてみる。これは重ねられた緑の矩形（the destination image）の領域のみ表示され、重なった部分は重ねた青の矩形（the source image）が順位として上に表示される。

c.globalCompositeOperation = "source-atop";

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に source-in にしてみる。これは重ねた青の矩形（the source image）の領域の内、重なった部分のみが表示され、表示される矩形は重ねた青の矩形（the source image）となる。青い矩形を透明にしてあるので、重ねられた側の緑色が透けて見えていないことが判る。

c.globalCompositeOperation = "source-in";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっている）


次に source-out にしてみる。これは重ねた青の矩形（the source image）の領域の内、重なっていない部分のみが表示される。

c.globalCompositeOperation = "source-out";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっている）


次からは source の部分を destination に変えた値を入れていく。まずは destination-over をやってみる。これも両方が描画されるが、重なった部分は重ねられた緑の矩形（the destination image）が順位として上に表示される。緑に透明度が影響していないことが判る。

c.globalCompositeOperation = "destination-over";

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に destination-atop にしてみる。これは重ねた青の矩形（the source image）の領域のみ表示され、重なった部分は重ねられた緑の矩形（the destination image）が順位として上に表示される。

c.globalCompositeOperation = "destination-atop";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっている）


次に destination-in にしてみる。これは重ねられた緑の矩形（the destination image）の領域の内、重なった部分のみが表示され、表示される矩形は重ねられた緑の矩形（the destination image）となる。

c.globalCompositeOperation = "destination-in";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっており、さらに緑の矩形に透明度が影響している）


次に destination-out にしてみる。これは重ねられた緑の矩形（the destination image）の領域の内、重なっていない部分のみが表示される。

c.globalCompositeOperation = "destination-out";

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53（重なった部分も表示されている。透明度の影響か？）


今度は lighter にしてみる。これは両方の矩形が表示されるが、重なった部分はそれぞれの色を加算したものとなる。今回は透明度があると判りづらかったため、青の矩形の透明度をなしに、rgb(0, 0, 255) としている。さらに十字架の交差点右下に、色を加算した rgb(0, 255, 255) の矩形も一緒に描画してみた。

c.globalCompositeOperation = "lighter";

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に copy にしてみる。これは重ねた青の矩形（the source image）のみがそのまま表示される。

c.globalCompositeOperation = "copy";

確認環境：
Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3（全て重ねられた緑の矩形も表示されてしまっている）


最後に xor にしてみる。これは両方の矩形の領域の内、重なった部分以外が表示される。

c.globalCompositeOperation = "xor";

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53（矩形から透明度を除くと全て正常動作を行うが、今回のように透明度を与えたると、重なった部分まで表示してしまう）


どうも、矩形に透明度を与えることで、透明度を与えられていない矩形にも影響を及ぼすのではないかという気がする。xor だけでなく、destination-atop や destination-in、destination-out においても透明度の影響を受けている。W3C の説明文中にある「opaque」は透明度についての記述ではないと思うけど。。。どうなんだろ。

W3C；
4.8.11 The canvas element — HTML 5