AjaxでBBSを作る～GA-BBS開発日記～

2009-09-20

■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;
  }
}

Permalink | コメント(0) | トラックバック(0) | 19:53

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

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

コナミコマンドを仕込む方法 | エンタープライズ | マイナビニュース

Webページ上でコナミコマンドを入力させるのが流行ってきているようなので、ちょっと作ってみました。

サンプルページ

Command 573

使い方

IE

document.attachEvent('on573', function () { /* hoge */ });

IE以外

document.addEventListener('573', function () { /* hoge */ }, false);

Permalink | コメント(0) | トラックバック(0) | 01:46

2009-03-19

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

Googleが、 Google Chrome の高速さをアピールするためのサイトを立ち上げたようです。

http://www.chromeexperiments.com/

これまでのブラウザでは見られなかった高度な演出を実現した例が多数紹介されています。

というわけで、こちらも負けじと iPhone にマリオを表示してみました。

まわる！マリオ

もっとも、作ったのは昨日からなので、今回の Google の件は特に関係ありません。

なお、iPhone / iPod touch 以外で見ると残念な状態で表示されるのでご注意ください。

ちなみに、画像を貼っているのではなく、複数の div 要素で構成されています。まさにドット絵ですね。

タイトルにあるように、まわります。

まわしたい時はSTARTボタンを押してください。

参考資料

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

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

Permalink | コメント(0) | トラックバック(0) | 00:54

2009-03-13

■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要素で読み込む方法

Permalink | コメント(0) | トラックバック(0) | 23:30

2009-03-09

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

久しぶりのエントリになります。

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

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

Flick Typing

あ段のみ、い段のみ、あ段＋い段…といったように、段階を踏んで練習をしていけるようになっているので、フリック入力初心者でも戸惑うことが少なく進めていけると思います。

また、ひらがなでの判定なので、フリック入力に慣れて濁点などの補完機能に頼り切ってる人にもいい刺激になるでしょう。

フリック入力をつかう、あらゆる人におすすめです。

Permalink | コメント(0) | トラックバック(0) | 00:41

AjaxでBBSを作る ～GA-BBS開発日記～