Archive for the ‘ 開発ツール・技術 ’ Category

普通のalertはちょっとなぁ・・・という人のための『smoke.js』


普通のAlertのダイアログはちょっとね、という人のためのフレームワークがありましたよ。シンプルなダイアログボックスを表示してくれます。

↑ こんな奴。

ちゃんと「OK」「キャンセル」が出来る奴も実装できますね。もしくは「5秒後に消滅」なんてのも可能です。普通じゃないAlertを出したいときにいかがでしょ。

詳細&ダウンロードは以下からどうぞ。

» smoke.js

PHPの関数をインクリメンタルサーチできる『PFIS』


よくあるツールですが、たくさん知っておいて損はないのでご紹介。PFISはPHPの関数をインクリメンタルサーチできるツールですな。

↑ 一文字入力するごとにダイナミックに検索結果が変化します。

簡単な説明があったり、引数もわかりやすいので使いやすいのではないでしょうかね。PHP使いの方は是非どうぞ。

» PHP関数のインクリメンタルサーチ | PFIS

Facebookアプリを作るときに便利そうな『Graph API Explorer』


Facebookのソーシャルグラフをインタラクティブにテストできるツールが公開されたようですね。いつか使いそうなのでメモしておきますよ。

↑ こんな感じで。

すんごく細かいことを知りたいだけなのに、そのためにコード書くの面倒ですものね。

より詳しい説明は公式Developer Blogからどうぞ。

» Introducing the Graph API explorer – Facebook Developers

サイトのガイドツアーを作るためのJavaScriptライブラリ『Guider.js』


これ、メモ的にエントリーしておきます。サイトのガイドツアーを作ることができるライブラリですよ。Githubで公開されています。

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

↑ こういう要素ごとの説明を付与できます。

ちらっと見てみましたが書き方もシンプルで使いやすそうですね。ソースの詳細&ダウンロードは以下からどうぞ。

» jeff-optimizely/Guiders-JS – GitHub

JavaScriptのコードサイズを圧縮するための変態テクニック集がすごい


「強火で進め」で紹介されていた「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の方はいかがでしょ。

» Byte-saving Techniques

「Photoshopのここがちょっとね・・・」を連投していた@yhassyのつぶやきが興味深い件


さすがデザイナー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: プルダウンメニューかと思ったらスライダーが出てくる …

インターフェースの研究や設計をされている方は参考にしてみるといいですね。

JavaScriptでx86コンピュータをエミュレート?


うーん、詳しいことがまったくわからないのですが、なんだかすごそう・・・というだけでエントリーしてみますよ。x86コンピュータをJavaScriptでエミュレートしているみたいですね。

↑ ずんどこ起動します。Linuxのカーネルかな。

実際に見てみたい方はこちら。

» Javascript PC Emulator

作者による説明はこちら。

» Javascript PC Emulator – Technical Notes

ちょいとマニアックですが、興味のある人もいるんじゃないかな、という投げっぱなしスープレックス的なエントリーにて失礼いたします・・・。

たった12行のJavaScriptでリアルタイムチャットを実装できる『NowJS』


これ、ちょっと気になるのでメモ的にエントリーしておきます。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

Rubyっぽく書くとPHPに変換してくれる『Fructose』・・・


む、誰得w。

Fructoseを使えば、Rubyっぽい文法で書いたプログラムをPHPに直してくれるらしいです・・・。

↑ こんな感じらしい。

Rubyしか書きたくないけど、事情によりPHPのプログラムに統合しなくちゃ、というときに使えるのかな・・・?たしかにPHPからRubyに行った人は「もうPHPは・・・」と言っている人も多いようなw。

まだテスト中とのことですが、Githubなんかにソースが上がっているようです。ご興味のある方はどうぞ。

» Fructose

シンプルすぎるけどかなり使えそうなソースコード共有サイト『Codr.cc』


これ、以前どこかで紹介したっけな・・・?ま、いいですか。というわけでシンプルすぎるインターフェースが魅力のコード共有サイトですよ。

↑ 日本語もOK。

アクセスするたびに新しいURLが振られるので、それをブックマークしたり、メールやツイッターで共有するといいですね。

ちなみにいくつかの特徴があって、シンプルながらもかなり使えるのでは、と個人的に思っています。

  • 最大の特徴はライブ共有が可能な点。あちらのブラウザで更新されたらその内容が瞬時に他の人が見ているブラウザにも反映されます。複数人でのライブコーディングなんかもできますね。
  • もちろんシンタックスハイライトにも対応しています。ただその場合はURLの最後に「/js」とか「/php」とかつける必要があります。地味に便利ですよね。
  • デスクトップからのドラッグ&ドロップが可能です(ChromeはOKでした)。

というわけでご興味のある方は以下からどうぞ。イベント中のライブコーディングなんかにいいですね。Ustしながらこちらで文章まとめる、といったこともできるかと思います。

» codr.cc – share code, live.