5509

まだまだ間に合うCanvasでアニメーション入門(まとめと実践)

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を利用して実装する

インクリメンタルサーチ

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

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

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

Read more

Safari独自実装のinput type=”search”のような検索窓を実装する

inputSearch

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

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

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

Read more

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

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

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

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

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

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

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

Read more

Author

nori
nori
- UI Engineer
Location
- ,