canvasをメソッドチェーンで使うための簡単なラッパー

意外と簡単にかけたのでメモしておきます。
ちなみにループなどでjQueryを使用しています。

function CanvasRapper(elm) {
  if (elm.tagName != 'CANVAS') { return null; }
  
  this.elm  = elm;
  this.ctx  = elm.getContext('2d');

  var callee = arguments.callee;
  if (!callee.isInited) {
    var ctx = this.ctx;
    $.each(ctx, function (name, obj) {
      if (typeof obj == 'function') {
        callee.prototype[name] = function () {
          obj.apply(this.ctx, $.makeArray(arguments));
          return this;
        }
      } else {
        callee.prototype[name] = function (val) {
          if (val == null) { return this.ctx[name]; }
          this.ctx[name] = val;
          return this;
        }
      }
    });
    callee.isInited = true;
  }
}

Webページ上でコナミコマンドを入力させるもの

http://journal.mycom.co.jp/news/2009/05/12/055/index.html
Webページ上でコナミコマンドを入力させるのが流行ってきているようなので、ちょっと作ってみました。

サンプルページ

Command 573

使い方

IE
document.attachEvent('on573', function () { /* hoge */ });
IE以外
document.addEventListener('573', function () { /* hoge */ }, false);
続きを読む

iPhoneにマリオを表示してみた

Googleが、 Google Chrome の高速さをアピールするためのサイトを立ち上げたようです。
http://www.chromeexperiments.com/
これまでのブラウザでは見られなかった高度な演出を実現した例が多数紹介されています。
というわけで、こちらも負けじと iPhone にマリオを表示してみました。
まわる！マリオ

もっとも、作ったのは昨日からなので、今回の Google の件は特に関係ありません。
なお、iPhone / iPod touch 以外で見ると残念な状態で表示されるのでご注意ください。
ちなみに、画像を貼っているのではなく、複数の div 要素で構成されています。まさにドット絵ですね。
タイトルにあるように、まわります。
まわしたい時はSTARTボタンを押してください。

参考資料

WebKitの３D回転をざっくりまとめてみた＊iPhone向けサイトを考える

TEST‐ニコニコ動画(ββ)

13日の金曜日なのでJSON…と似つかぬものについて

今日は13日の金曜日。決戦は金曜日。
13日の金曜日ということで、ジェイソン（JSON）のお勉強をしましょう。

13日の金曜日はJSONの勉強をしよう！

便乗してみます。

以前、

これで、XMLHTTPRequest+evalでの2通りの取得可能、script要素を使った別ドメインからの利用も読み込み完了コールバックつきで可能、データの追加は追加書き込みで可能という豪華なJSONができました。

JSONの書き方について考えてみた・２ - AjaxでBBSを作る 〜GA-BBS開発日記〜

なんてことを考えたけど、それをさらに進めて、グローバル空間の汚染を抑えたものが思いついたので、この機会に公開します。

(function(){
  var o = [];
  var f = function(b) {
      this.push(b);
      return this;
  };
  o.a = f;
  setTimeout(function(){
    if (o.a == f) { delete o.a; }
    if (typeof callback == 'function') { callback(o); }
  }, 0);
  return o;
})()
.a({title:"aaaa", text:"bbbb"})
.a({title:"cccc", text:"dddd"}) // データ追加時は .a({ ... }) を増やしていく

これで、

var o = eval(responseText);

でも、

eval('var o = ' + responseText);

でも、

<script>
function callback(o) { /* ... */ }
</script>
<script src="hoge.json"></script>

でも読み込めるし、サーバー側ではテキストファイルへの追記でデータを追加できる、JSONに似た何かができました。

この記事を読んだ人にはこの記事もおすすめです

2006-01-13 JSONをsrcipt要素で読み込む方法

紹介 : iPhoneのフリック入力のためのタイピング練習ゲーム Flick Typing

久しぶりのエントリになります。
前のエントリで公開した Typing game for iPhone のスクリプトを使って、さらに実用的なタイピング練習ゲームを作ってくれた人がいるので紹介します。…といっても、先方の公開からずいぶん日にちがたってしまいましたが。
iPhoneのフリック入力のためのタイピング練習ゲーム Flick Typing - ultravisitor
Flick Typing

あ段のみ、い段のみ、あ段＋い段…といったように、段階を踏んで練習をしていけるようになっているので、フリック入力初心者でも戸惑うことが少なく進めていけると思います。
また、ひらがなでの判定なので、フリック入力に慣れて濁点などの補完機能に頼り切ってる人にもいい刺激になるでしょう。
フリック入力をつかう、あらゆる人におすすめです。

iPhone向けタイピングゲーム

iPhoneでの日本語入力が、フリック方式とqwerty方式のどちらが早いのか気になったので、簡単なタイピングゲームを作ってみました。
Typing game for iPhone

日本語入力で、すべてひらがなのままで入力してください。

入力するテキストは 短文3つで iPhone の入力を練習しよう - コトリコ からお借りしました。

for iPhone となっていますが、iPod touch は当然のこと、WindowsやMacのFirefoxやSafariでもプレイ可能です。

ちなみに、私の場合はテストプレイでフリック方式で何度も入力したにもかかわらず、qwerty方式のほうが早かったです。

iPhone/iPod touch のマルチタッチをシミュレートするスクリプト/ブックマークレット iTouchSimulate.js

iPhoneやiPod touchのsafariがマルチタッチに対応になったと聞き、面白そうなので何か作ろうと思ったのですが、テストが面倒そうだったので、まずシミュレーターを作ってみました。
まだgesture関連の動作が不完全だったりソースが汚かったりしますが、その辺はいずれ直すつもりです。
win版のFirefox3およびsafariで動作確認しています。
http://nufuaue.sakura.ne.jp/iphone/iTouchSimulate.js
デモ
このスクリプトを読み込ませると、クリックでタッチ開始・終了、ドラッグでタッチ位置を動かすことができるようになります。また、通常のマウスボタン押しながらのドラッグもタッチとして認識します。同時タッチ数は本家の仕様に合わせて5つまでです。
モバイルsafariでは動かないようにしているので、そのまま iPhone/iPod touch でも動作します。

また、既存のマルチタッチ対応サイトでシミュレートを行うためにスクリプトを読み込むブックマークレットを用意しました。

iPhone/iPod Touch がなくてモヤモヤしていた人も、これを使えばパソコン上で拡大したり回転したり開いたりとマルチタッチを楽しめます。
なお、回転させるものはsafariの独自拡張を使用している例が多く、その場合Firefoxでは動かないので注意が必要です。

参考ページ

90秒で理解するiPhone JavaScript（マルチタッチ編） | ke-tai.org - インフィニットループ
90秒で理解するiPhone JavaScript（ジェスチャー編） | ke-tai.org - インフィニットループ
iPhone対応サイトの作り方 - iPhone 3G Wiki*