JavaScript Advent Calendar 2010も22日目！あと3日ですよ。僕はちょうど学んだばかりのCanvasをアウトプットもかねて、まとめと実践を書いてみます。知ることと行うことは同一である、最近行ったセミナーでも言ってました。

jsdo.itにはほんまにこれCanvasなん？なサンプルいっぱいありますね。あーいうの書けるようになりたいなぁとか思いつつ、jQueryばっかりさわってた僕は.animate()メソッドの便利さに取り憑かれていたので、Canvasの絵もまだ上下左右で動かすくらいしかできません。慣れが必要です。。

どうでもいい情報としてCanvasの読み方なんですけど、「キャンバス」じゃなくて「カンバス」が正しいようです。キャンバス・カンバスどっちでもよさげ。僕はキャンバスって読んでました。けどカンバスにします。

前置きはこれくらいにして、今回は次のようなカラフルな箱が延々と落ちていくっていうのを書いてみます。今回のサンプルはすべてCanvasなのでIE8以下だと見れないと思います。あとjsdo.itのサンプルをいくつか貼っているのでRSSだと表示されません。

先に参考サイト紹介してますが、いらない人は飛ばしてください。レッツカンバス！

Read more

どんだけ話題に乗り遅れてるねんっていう話なんですけど、いまさらを使ってみました。

つぶやけるだけのTwitterクライアント – Only tweet

きっかけは、つぶやけるだけの俺俺クライアントがほしくて、でなんとなく出来ることは読んでいた@Anywhereで十分やんじゃあつくれるな、という理由です。

はっきり言ってChrome(Windowsだけ)のアプリケーション登録がないとまったく使えないしょうもないやつです。でもアプリケーション登録すればキャプチャみたいに使えます。結構便利。

JavaScriptだけで作れるので、JavaScriptしかわからないけどちょっとやってみたい人にはちょうどいい感じかもです。

返ってくる結果が膨大になりがちな検索結果(特に管理画面など)などでは、そこからさらにデータを絞り込みを行いたい場合もあるかと思います。毎回ページの遷移があったのではユーザーの負担になりがちです。

そこでjQueryを利用してインクリメンタルサーチを実装する方法をメモもかねて紹介します。

サンプル
サンプルファイルのダウンロード

Read more

先日、iPhone風のテキストボックスの文字を消去するボタンを実装するチュートリアルを書いたのですが、どうやらSafariの独自実装でinput type=”search”というのがあるんですね。全然知らなかった…じゃあいっそのことplaceholderも付けてinput type=”search”っぽくしてみようということで、delval.jsをちょちょっと変えてinput type=”search”ぽい検索窓を実装してみます。これもかなり簡単にできるので、じゃあチュートリアル…？？

左が今回作ったサンプルで、右がSafari独自実装のinput type=”search”。そっくり！

サンプル – サンプルの下にあるINPUTをSafariで見ると…！
サンプルファイルのダウンロード

Read more

前編でニュースティッカーができたので 後編ではjQueryプラグインにしてみましょう。

jQueryを使ってNews Tickerプラグインを作ってみよう[前編]

• jQueryを使ってNews Tickerプラグインを作ってみよう[前編][1]
• jQueryを使ってNews Tickerプラグインを作ってみよう[前編][2]

jQueryプラグインのメリットは

• 要素をjQueryのメソッドチェーンで繋いで実行できる
• オプション項目の指定が簡単にできる

といったところでしょうか。

Read more