普通のalertはちょっとなぁ・・・という人のための『smoke.js』
- July 11th, 2011
普通のAlertのダイアログはちょっとね、という人のためのフレームワークがありましたよ。シンプルなダイアログボックスを表示してくれます。

↑ こんな奴。
ちゃんと「OK」「キャンセル」が出来る奴も実装できますね。もしくは「5秒後に消滅」なんてのも可能です。普通じゃないAlertを出したいときにいかがでしょ。
詳細&ダウンロードは以下からどうぞ。
» smoke.js
Archive for the ‘ 開発ツール・技術 ’ Category
普通のAlertのダイアログはちょっとね、という人のためのフレームワークがありましたよ。シンプルなダイアログボックスを表示してくれます。

↑ こんな奴。
ちゃんと「OK」「キャンセル」が出来る奴も実装できますね。もしくは「5秒後に消滅」なんてのも可能です。普通じゃないAlertを出したいときにいかがでしょ。
詳細&ダウンロードは以下からどうぞ。
» smoke.js
よくあるツールですが、たくさん知っておいて損はないのでご紹介。PFISはPHPの関数をインクリメンタルサーチできるツールですな。

↑ 一文字入力するごとにダイナミックに検索結果が変化します。
簡単な説明があったり、引数もわかりやすいので使いやすいのではないでしょうかね。PHP使いの方は是非どうぞ。
Facebookのソーシャルグラフをインタラクティブにテストできるツールが公開されたようですね。いつか使いそうなのでメモしておきますよ。

↑ こんな感じで。
すんごく細かいことを知りたいだけなのに、そのためにコード書くの面倒ですものね。
より詳しい説明は公式Developer Blogからどうぞ。
これ、メモ的にエントリーしておきます。サイトのガイドツアーを作ることができるライブラリですよ。Githubで公開されています。

↑ よく見るこういうツアーを作ることができます。

↑ こういう要素ごとの説明を付与できます。
ちらっと見てみましたが書き方もシンプルで使いやすそうですね。ソースの詳細&ダウンロードは以下からどうぞ。
「強火で進め」で紹介されていた「Byte-saving Techniques」がすごいっす。可読性を犠牲にしてでも、とにかくサイズを圧縮したい!という人のための変態テクニック集ですw。
いろいろ参考になったのですが「へぇ」というものを中心に紹介してみます。
function(t,d,v,i,f){...} // before
function(a,b,c,d,e){...} // after
↑ 変数名は1文字&アルファベット順がいいそうです。読みにくいですけどね・・・。
function(a){var b=1;...} // before
function(a,b){b=1;...} // after
↑ ほぉ。
var a=1,b=2,c;c=a;a=b;b=c // before var a=1,b=2;a=[b,b=a][0] // after
↑ これは知らなかった。
while(i--){...} // before
for(;i--;){...} // after
↑ まじか!
hasAnF="This sentence has an f.".indexOf("f")>=0 // before
hasAnF=~"This sentence has an f.".indexOf("f") // after
↑ これも全然しらなかった・・・。
rand10=Math.floor(Math.random()*10) // before rand10=0|Math.random()*10 // after
↑ なんたること・・・。
html="<a href='"+url+"'>"+text+"</a>" // before html=text.link(url) // after
↑ そうなんだ・・・。
ぶっちゃけ僕の知識ではまったくわからないものも多々ありましたよ(汗)・・・。というわけで元記事にはもっとたくさんありますね。JavaScripterの方はいかがでしょ。
さすがデザイナーw。個人的にはあまり気にしていませんでしたが、そう言われると気になり始めちゃいますね・・・。たくさんありますが、だだだっと。

» Twitter / @Yasuhisa Hasegawa: Photoshop CS 5.1 の Web 用に保 …

» Twitter / @Yasuhisa Hasegawa: Photoshop CS 5.1 の Web 用に保 …

» Twitter / @Yasuhisa Hasegawa: Photoshop CS 5.1 の Web 用に保 …

» Twitter / @Yasuhisa Hasegawa: すべて Web サイトで見れるのに(しかも導線 UR …

» Twitter / @Yasuhisa Hasegawa: 2種類あるプルダウンUI。ひとつは OSX っぽい見 …

» Twitter / @Yasuhisa Hasegawa: 独創的なプルダウンの ▼(三角)部分。変形して長細い …

» Twitter / @Yasuhisa Hasegawa: 日本独自の問題。Adobe は昔から GUI の配置 …

» Twitter / @Yasuhisa Hasegawa: Photoshop にあるコピーソースパネルの UI …

» Twitter / @Yasuhisa Hasegawa: ブラシプリセットのUI。配置が妙なのはさておき、「ブ …

» Twitter / @Yasuhisa Hasegawa: プルダウンメニューかと思ったらスライダーが出てくる …
インターフェースの研究や設計をされている方は参考にしてみるといいですね。
うーん、詳しいことがまったくわからないのですが、なんだかすごそう・・・というだけでエントリーしてみますよ。x86コンピュータをJavaScriptでエミュレートしているみたいですね。

↑ ずんどこ起動します。Linuxのカーネルかな。
実際に見てみたい方はこちら。
作者による説明はこちら。
» Javascript PC Emulator – Technical Notes
ちょいとマニアックですが、興味のある人もいるんじゃないかな、という投げっぱなしスープレックス的なエントリーにて失礼いたします・・・。
これ、ちょっと気になるのでメモ的にエントリーしておきます。Node.jsをベースにした、リアルタイムのWebサービスを簡単に作れるライブラリらしいです。
たしかにデモ映像をみると便利そうですよ。この映像では12行(まぁ、本体だけですが)のJavaScriptでチャットサービスを実現しちゃっています。
NowJS Introduction: Simple Chat Server in 12 Lines of Code from NowJS on Vimeo.
↑ 2分半ほどの映像です。
Node.jsもそろそろ試してみようかなぁ・・・。
というわけでNowJSの公式サイトは以下からどうぞ。
» nowjs for Node – Directly call remote functions in Javascript
む、誰得w。
Fructoseを使えば、Rubyっぽい文法で書いたプログラムをPHPに直してくれるらしいです・・・。

↑ こんな感じらしい。
Rubyしか書きたくないけど、事情によりPHPのプログラムに統合しなくちゃ、というときに使えるのかな・・・?たしかにPHPからRubyに行った人は「もうPHPは・・・」と言っている人も多いようなw。
まだテスト中とのことですが、Githubなんかにソースが上がっているようです。ご興味のある方はどうぞ。
» Fructose
これ、以前どこかで紹介したっけな・・・?ま、いいですか。というわけでシンプルすぎるインターフェースが魅力のコード共有サイトですよ。

↑ 日本語もOK。
アクセスするたびに新しいURLが振られるので、それをブックマークしたり、メールやツイッターで共有するといいですね。
ちなみにいくつかの特徴があって、シンプルながらもかなり使えるのでは、と個人的に思っています。
というわけでご興味のある方は以下からどうぞ。イベント中のライブコーディングなんかにいいですね。Ustしながらこちらで文章まとめる、といったこともできるかと思います。