pocketo.net blog

「骨」展行ってきた

21_21 DESIGN SIGHTで「骨」展を見てきました。

中村勇吾氏の作品はアルゴリズムどうなってるのか分からなかった。。。
と同時に物理演算の世界に入門してみようかな・・・と新しい刺激があったので行ってよかったです。

数学はこれまで避けてきてしまったけど、今後を考えると、ちょっと本気でやらないとダメな気がする。

なんてこと

久しぶりに譜面なんてものを作ったりしていたらこんな時間。

明日は久しぶりの練習なのです。滑りやすくするスプレーをシュッシュするのが懐かしいこの感じ。
最近オールでカラオケ行ったり若さを取り戻しつつあるので、頑張ろう。

終わったら会社行って作業だけど。。。
うあーもうこの忙しさよ早く終われ。

CtagsとVimを使ってJavaScriptのコードリーディング

Macに始めから付属しているctagsは古いので、portでインストール。

$ sudo port install ctags

ナイスなことにExuberant Ctagsも一緒にインストールされたみたい。

で、そのままCtagsにかけると、

function() { ... }

は解析されるけど、

var Klass = function() { ... };
Klass.prototype = {
　init: function() { ... }
}

のような書き方になってると解析されない。

これでは、Jquery等のライブラリが解析できないので、こちらを参考に、~/.ctagsに以下を記述する。

-regex-javascript=/^[ \t]*(['"]?)([A-Za-z0-9_.]+)\1[ \t]*[:=][ \t]*function[ \t]*\(/\2/I,inner/i
--langmap=javascript:.js
--regex-javascript=/^(.*).prototype *= *(.*)/\1/p,prototype/
--regex-javascript=/^[ \t]*(.*) *: *function/\1/m,method/
--regex-javascript=/^[ \t]*(var | *)(.*) *= *{/\2/o,object/

普通にtagファイルを作る。

$ ctags *.js

taglist.vimで表示するために、.vimrcに以下を追記。

let g:tlist_javascript_settings = 'javascript;v:var;c:class;p:prototype;m:method;f:function;o:object'

これでVimでJSファイルを開いて「:Tlist」を打てば、左側に「クラス、メソッド、関数、オブジェクト」の一覧が表示されます。
1000行超えてくるようなソースを追う場合、超便利です。
ま、Eclipseだとプラグイン入れるだけでリスト出してくれますけど。

JavaScriptの継承メモ

いつも忘れちゃうのでメモ。

function extend( self, other ) {
　for( var property in other ) {
　　self[property] = other[property];
　}
　return self;
}

var Klass = function() {
　return function() {
　　return this;
　}
};
Klass.create = function() {
　var f = function() {
　　this.initialize.apply( this, arguments );
　};
　f.prototype.initialize = function() {};
　f.isClass = true;
　f.extend = function( other ) {
　　extend( f.prototype, other );
　　return f;
　};
　return f;
};
Klass.extend = function( base_class ) {
　if( base_class.isClass ) {
　　var child = Klass.create();
　　child.prototype = new base_class;
　　return child;
　} else {
　　var base = Klass();
　　base.prototype = base_class;
　　var child = Klass.create();
　　child.prototype = new base;
　　return child;
　}
};

使い方。

var Foo = Klass.create();
Foo.prototype = {
　initialize: function( name ) {
　　this.name = name;
　},
　getName: function() {
　　alert( this.name );
　}
};
var Bar = Klass.extend( Foo ).extend( {
　setName: function( name ) {
　　this.name = name;
　}
} );

var f = new Foo( "bob" );
var b = new Bar( "john" );
b.setName( "michel" );

f.getName(); // bob
b.getName(); // michel

Lightboxの設計

Lightboxを作るにあたって

・1枚レイヤを被せるかどうか（後ろを触らせない）で話が変わる
　　被せるならウィンドウの位置は固定でおk。
　　被せないなら、後ろを触らせる設計なので、ウィンドウをドラッグ等
　　移動できるようにしないとダメ。

・汎用性を持たせるなら、ウィンドウの中身は生のHTMLで受け取った方がいいかも
　　JSONで受け取ると、個別にDOM組み立てることに。
　　HTMLで受け取ってDOMに追加後、イベント設定する方がいい。
　　（テンプレート作ってもいいけど、それだと遅くなるので）

・よくあるロード中のアニメーションGIFを画面中央に配置する場合
　　jQueryを使っているなら、

var loading = $( "<div><img src="./loading.gif" /></div>" ).css( {
  position: "absolute",
  top: 0,
  left: 0
} );
$("body").append( loading );

var _win = $(window);
loading.css( {
  top: ( _win - loading.height() ) / 2,
  left: ( _win - loading.width() ) / 2
} );

これだと、画像の読み込み前に位置が設定され、ローディング要素のwidthが0になることがある。
なので、こうする。

loading.load( function() {
  loading.css( {
    top: ( _win - loading.height() ) / 2,
    left: ( _win - loading.width() ) / 2
  } );
} );

これで、要素が読み込まれた後に位置を設定できる。

0609

・昼に行った、ティーヌンのトムヤムラーメンの酸っぱいこと。
　だが、酸っぱさで目が覚めたのか、午後の仕事は超はかどり
・Safari4レンダリング速度、超はえええええええ
　ウィンドウの面積も広くなって快適。
・衝動で逆転検事買ってしまった。
　やる時間ないのに。。。
・jQueryUIのカレンダーピッカーは国際化もできて何気に超高機能

jQueryでツリービュー作るなら「dynatree」

久々にキャパを超えそうな仕事量にボーッとしかけている今週でございますが、ここを乗り越えればリリースも近づくし、給料にもつながるのではグへヘ。

と真っ黒なやる気で頑張るしかないっ！
とにかくやることが大事なんだやることが大事。

そうそう、jQueryのツリービューでいいのないかなーと思ってプラグインを調査してたんですけど、すごい掘り出し物がありましたよ！
jquery.dynatree.js

新しいし全然知名度も無いっぽいんですが、超高機能で使いやすい。

• JSONからツリー構築
• 子階層をAjaxで読み込んで追加できる
• Cookieで開いた状態を保存
• 開閉アイコンとノード部のイベント設定が自由自在
• ツリーにチェックボックスを付けられる
• しかも、子階層まとめてチェックとかもできる
• 全てのオプションをJSONにして一括で指定可能
• スキンが用意されていて、実装とデザインが分離

もはやYUIのツリーに迫る充実ぶり。
JSONで全てのオプションを指定できるのが使いやすいです。
ライセンスもMITライセンスと言うこと無しですね。

単純なツリーならjsTreeなんかで十分かと思いましたが、大規模Webアプリで何か高機能さを求められた場合は、今のところjQueryのプラグインを使うならdynatree一択では・・！
jQueryUIに取り込んでくれたらいいなー。

5/30,31

3年前にライブをやったことがありまして。
ファーストライブでラストライブ、しかもワンマンという。。

で、またやろうかってことになって3年ぶりに集まった。
曲決めってことだったのに、しょうもない話ばっかりして最後の1時間だけ曲聞いて終わったw
そんなゆるさがちょうどいいよね。
オレは別に上手いわけではないんですけど、やっぱりホーンありの曲をやるってだけで何かオラワクワクしてくるぞ。
やるからにはビシッ！と練習しないとなー。

ということでおすすめされた、けいおん！をYoutubeで聞いてスラップの練習とかして、漫喫行ってちょっと仕事して。

最近週末が来るのがホント早く感じるので、ヤバい。
今週はもうちょっと余裕を持って仕事をできるよう頑張る。

天使と悪魔観てきた

ダヴィンチコードの続編であります、天使と悪魔を観に行ってきましたー。

ダヴィンチコードと違って謎解きはそこまで深くなく、その分アクションや映像で盛り上がるという感じでした。
どっちが好き嫌いかは人それぞれなんでしょうが、自分はダヴィンチコードよりも見やすくてよかったです。だって、3時間も上映時間あるんだもの。

それにしても新宿ピカデリーは休日混み過ぎ。。。
人気ありそげな作品は、前日にチケットをオンラインで取っとかないと、チケット待ちの大行列に巻き込まれるので注意。

入れてるVimScriptとか便利設定のメモ

クリーンインストール時に自分用のまとめとして。

・plugin/fuzzyfinder.vim
　　バッファエクスプローラー。
　　minibufexpl.vim より個人的に好き。

・plugin/opsplorer.vim
　　ファイルエクスプローラー。
　　ファイルの各種操作がデフォルト1文字入力で出来たり、
　　「↑」で親ディレクトリへ移動出来るのが超便利。

・plugin/autocomplpop.vim
　　補完候補を自動で絞り込んで表示

・plugin/sudo.vim
　　root権限のファイルをうっかり一般ユーザで開いてしまった時用

・plugin/allml.vim
　　HTML編集中「Ctrl+x /」で閉じタグを補完

・css_color.vim
　　CSS内の色指定にその色を付けてくれる。
　　ftplugin/css.vim に追記するだけでおk。

・indent/javascript.vim
　　クラスベースのJavaScriptでもインデントを付けてくれる

・plugin/scratch.vim
　　スクラッチバッファを作成。
　　こちらの神記事を参考に、「,s」でJSLintによるJavaScriptの構文チェック結果の
　　表示用に主に使う。
　　※SpiderMonkeyのインストールも必要

・syntax/actionscript.vim
　　ActionScript3のシンタックスハイライト用

・autoload/actionscriptcomplete.vim
　　ActionScript3のOmnicomplete用