2012-04-24
WEB+DB PRESS Vol.68からJavaScriptの連載を始めました
表題の通りですが、WEB+DB PRESS Vol.68 からJavaScriptの連載を書かせていただくことになりました。
連載タイトルは「JavaScript活用最前線 ── 大規模開発の現場から」です。
第一回目はBackbone.jsを使ってクライアントサイドMVCを実現するという内容です。
大規模なJavaScriptを書く際に使える内容や、最新のホットな話題など、現場の方に参考になるような記事を書いていきたいと思います。
id:teppeis と交互に執筆する予定なので、次回にもぜひご期待ください。
よろしくお願いします!
2011-11-03
作業効率が10倍アップする Chrome Developer Tools の使い方
というタイトルで社内勉強会を開きました。
その時の資料を公開します。
「作業効率が10倍アップする」かどうかは個人差があるのでご注意ください。
最近のChrome Developer Toolsは本当に高機能ですごいですね!僕も資料を作っていて新しい発見が沢山ありました。
追記: 説明不足ですいません。スライドは←→キーで移動します。表紙にも記載しておきました。
2010-11-14
MacBook Air を買ったので感想とかやったことを書くよー
Macbook Air の新しいやつ買っちゃいました!わーーーい
まだ触って数日ですが、触ってみた感想やらやった設定などを書いておきます。
後半のソフトの紹介は
MacBookAir 11インチを買って導入したソフト ~サーバエンジニア編~
こちらの内容と結構かぶっているので、設定など細かい話だけ書いておきます。
買ったもの
- MacBook Air 13インチ
- 1.86GHz Intel Core 2 Duo
- 4GB 1066MHz DDR3 SDRAM
- 128GB SSD
- US Keyboard
メモリだけ 2GB → 4GB に増設しました。
触った感想
全般
- 起動はえー!だいたい15秒もあれば操作可能な状態になる!
- 動作はえー!
お役御免になった瀕死のMacBookちゃんとのベンチマーク比較はこちら。
全然スコアちがうw
キーボード
トラックパッド
- トラックパッド自体を押し込むとカチッとクリックできる!知らなかった!
- なのでD&Dも全然普通にできる
- 3本指/4本指スワイプべんり!
つぎは設定やインストールしたソフトなど!
システム環境設定
Dock
- 自動的に隠す
Dockには起動アプリしか表示しない派なので、ついでに最初からDockに登録されているアプリケーションを全部削除。
Spaces
- 3×3 の9面で!
Spotlight
セキュリティ
ちなみに Ctrl+Shift+Eject でディスプレイを即時スリープできます
キーボード
右下にある「修飾キー」ボタンを押して出るウインドウで、
- Caps Lock キーを Ctrl キーに変更
US 配列だと a の左が CapsLock なので。。
元々のCtrlキーはCapsLockにしても邪魔なので、今のところ割り当てなしの状態。
キーボードショートカット
はずしておかないと、たまにキャッシュクリアのつもりで Command+F5 押したときにいきなり喋り出します。色々怖いので、はずしましょう。
トラックパッド
トラックパッドは後述する BetterTouchTool で更に機能を割り当てます。
Finder環境設定
- すべてのファイル名拡張子を表示
導入したソフト(無料)
開発系のツールとごっちゃになっちゃったけど、全部書いときます。
メインブラウザに。
Firebug 用。
Facebook ビューアとして起動してます。
インストーラに同梱されているコマンドラインツール growlnotify も忘れずにね!
.emacs やら elisp は前の Mac で Dropbox に同期しておいたものを引っ張ります。
普段は Emacs だけど、こちらもあると安心します。
ただのメモ書き程度にしか使っていませんが、やっぱりクライアントツールがあった方が便利です。
Beta版を入れてみました。結構変わってますね!カッコイー
大抵の圧縮ファイルは解凍できるようになります。
アプリを綺麗に消せる!
自動でスリープさせたくないときに。
メモリやCPU温度やファンの回転数など、Macの色んな情報が見られるようになるウィジェット。
カレンダーウィジェット。祝祭日に対応していて、複数月表示できるのが気に入っています。
キーバインド・キーマップ編集ソフト。
Mac はデフォルトで Emacs 風のキーバインドがある程度有効になっていますが、その他にも自分がよく使う Emacs キーバインドをこれで有効にします。
あと US 配列の人は
・Command_L to Command_L (+ When you type Command_L only, send EISUU)
・Command_R to Command_R (+ When you type Command_R only, send KANA)
この2つを有効にすると、左右の Command キーを単体で押したときに JIS 配列でいう「英数/かな」と同じ挙動になります。Command+Space だとどちらの入力モードなのかよく分からないんですよね。
Terminal.app がかっこよく出現するようになります。
トラックパッドに色んなアクションを割り当てられるようになります。
・Four Finger Swipe Left
・Four Finger Swipe Right
の2つに Spaces を追加しました。4本指の上下スワイプには Expose が割り当てられているので、上下で Expose, 左右で Spaces という感じですね。僕は作業スペースを分けて頻繁に切り替えるので、このようにしました。
・Three Finger Swipe Up
・Three Finger Swipe Down
には Dashboard を割り当て。
あと、BetterTouchTool が起動時にWindowsと同じようなウインドウ操作をするかどうか聞いてくるんですが、これををONにする(自分で設定する場合は Action Setting -> Window Snapping から)と、Win7 のように画面上部にウインドウをドラッグすると最大化したりできるようになります。 Mac はウインドウを最大化しようとして左上の緑色のボタンを押すと、縦だけ大きくなったり最大化したりとよく分からない動きをするので、きちんと最大化できるのはありがたいです。
に ~/Applications/BetterTouchTool.app を追加しておきます。
入れようか迷ったんですが、MacPorts のインストールに必要だと怒られたので入れました。
確か 8GB 以上容量が必要です。でかいなー。
ダウンロードには無料のデベロッパー登録が必要です。
とりあえず zsh を入れて一通り設定。 screen はまだいいかな。
起動時のジャーンを消すやつです。
導入したソフト(有料)
推測変換モードをONにして話し言葉で使うのが基本です。
何でもできるコマンドラインランチャ?です。
Quicksilverみたいなやつといった方が分かりやすいかも知れません。
あ、これが Command+Space のキーバインドを使うので、入力モード切替の方は切りました。
おわりに
Mac はまだ2台目であまり理解していないことも多いのですが、僕なりに今の使い方をまとめてみました。
少しでも参考になれば嬉しいです。
2010-09-23
IEでoffsetHeightがとれないときの対処方法
ご無沙汰しています。
最近はもっぱら JavaScript ばかり書いているため、偽物臭がかつてないほど強くなっているあまちゃんです。実に1年半ぶりのエントリーです!
最近 IE8 で要素の offsetHeight が取得できなくて困ったので、その対処方法を書いておきます。
まず背景や問題の詳細。
やりたかったことは、
- height に auto が指定されている div が沢山あり、現在の offsetHeight が最も大きいものにすべて揃える
ということです。
FF や Chrome では DOM 操作をするのと同じタイミングで描画もされ、描画後の任意のタイミングで element.offsetHeight の値を参照することができました。しかし IE では DOM を操作するコードの実行時に画面が描画されないようで、(コード上では)描画済みの要素の offsetHeight を参照しても、前者のブラウザとは違う値になってしまいました。
computedStyle や runtimeStyle でも取得できず。ムムム...
そこで id:teppeis 先生に教えてもらったのが setTimeout を使う方法。
var height = 0; window.setTimeout(function() { height = element.offsetHeight; }, 0);
なんでこれで取れるかっていうのはamachangのエントリーが分かりやすいです。
JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 - IT戦記
このままだと引数が渡せないのでこんな感じに。
var height = 0; window.setTimeout(function(self) { height = element.offsetHeight; }, 0, this);
しかし IE では setTimeout の3番目以降の引数はサポートされていなかった...
Internet Explorer では、最初の構文で関数に渡す追加のパラメータは動作しないことに注意してください。
window.setTimeout - MDC
var height = 0; (function(self) { window.setTimeout(function(self) { // ここでselfが使える height = element.offsetHeight; }, 0); })(this);
というわけで無事に IE でも offsetHeight がとれました(^o^)/
2010/10/2 追記
IE で offsetHeight がとれないのはこういう訳だったらしい。。。
IEはDOMツリーを構築する際に改行テキストノードを含まないで構築するのか。それでwhite-space:pre-wrapを指定した改行コード含むSPAN要素のoffsetHeightがDOM構築時と構築後で違うわけだ。。。
@yo_waka先生ありがとうございました。
2009-03-17
MacのDropboxクライアントがたまにCPUを消費しまくるっていう
バージョンアップのおかげか、メモリ使用量が問題になることはほとんどなくなったDropboxちゃん。いいぞいいぞ、でもたまにCPUをどか食いするのは何故なの><
ぐぐってみたら、結構同じような症状はあるみたい。mac dropbox cpu - Google 検索
CPU使用率が高いとファンがうるさいし動作全般がもっさりしてしまうので、Dropboxのメモリ消費量があまりにも鬼畜だったので監視して適宜殺すことにしたで書いたシェルスクリプトをちょこっと書き換えてCPU使用率も監視することに。
#!/opt/local/bin/zsh set -A array $(ps aux -m | grep Dropbox.app | grep -v grep | grep ama-ch) if [ $(echo $array |wc -w) -eq 0 ] then # Dropboxが起動してなかったら通知・起動 /usr/local/bin/growlnotify -t 'Warning' -m 'DropBox is dead!!' -I /Applications/Dropbox.app osascript ~/applescripts/runDropbox.scpt else # メモリ消費量が512MBを超えてる or CPU使用率が80%以上ならkill if [ $array[6] -gt 512000 -o $(echo "$array[3]>80" | bc) -eq 1 ] then kill $array[2] && /usr/local/bin/growlnotify -t 'Report' -m 'DropBox was killed.' -I /Applications/Dropbox.app osascript ~/applescripts/runDropbox.scpt fi fi
3行目最後のgrep ama-chは、ログインユーザー名に適宜変更します。
7行目のrunDropbox.scptの中身は前回参照。
psコマンドで出力されるCPU使用率は82.6のような小数点以下1桁の小数だから、素直に条件式で
test 82.6 -gt 80 && echo ok
こんな風に比較するとエラーになっちゃう。*1
そこでbcコマンドの比較演算子を使って、
test $(echo "82.6>80" | bc) -eq 1 && echo ok
このように対処した。bcの比較は成立すると1を、しなければ0を返すから、これなら判定できる。
でももっとスマートな方法ありそうな気がする><
そんな訳で、このスクリプトをcronに突っ込んでおけば自動でCPU使用率・メモリ使用量を監視,必要な時に再起動してくれます!





