tech.kayac.com

最近社内で、「やりましょう。外村君よろしく。」という流れになりつつあります、外村です。こんにちは。

2010年8月21日に鎌倉どんぶりカフェbowlsで交流会イベント「ごはんとFlash with JS」を開催します。

ごはんとFlash with JS

ごはんとFlash 交流会イベントやります('10/8/21) | エントリー | _level0.KAYAC | flash ActionScript blog

JSのほうからは、LTかライブコーディングに @uupaa さんや @os0x さんを招いて開催する予定です。

詳細は以下より。

ごはんとFlash with JS

■日時

2010/8/21(sat) 19:00 - 22:00(open 18:30)

■会場

鎌倉どんぶりカフェbowls : (鎌倉市小町2-14-7 1F

■定員

80人(半立食形式)

■会費

5000円(カード不可/領収書可)

■ゲスト(予定)

  • AR三兄弟 長男さん
  • IAMAS小林さん
  • @uupaaさん
  • @os0xさん

■申し込み方法

件名と本文を下記フォーマットにしたがってEメール をお送りください。 正しくしたがっていないメールは見落としたりする可能性があります。 先着順で締め切らせていただきます。 受付けの可/不可の旨は3日以内に返信いたします。 なお予約制のためキャンセルなどは極力やめてください。 時間等変更になった場合メールおよびブログで告知しますのでご注意ください。 複数名のお申し込みは全員分のご連絡さきを記載いただけると助かります。(あとでご連絡事項がもれると困るので)

件名:
ごはんとFlash with JS 参加申し込み
本文:
名前:(フルネームで)
メールアドレス:(すぐ連絡のとれるもの)
会社名:(省略可)
宛先:
doke@kayac.com

問い合わせなどありましたらdoke@kayac.comまでご連絡ください。みなさまのご参加おまちしております!

羊毛布団を洗濯機にかけられないことを知りました。ago@kyo_ago)です。

意外と知られていない機能が多い!?Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。

1. ショートカット一覧

以下のページでFirebugのショートカット一覧が公開されています。

http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts

取り合えず以下の二つだけでも覚えておくと効率的かもしれません。

  • F12でFirebugの有効、無効の切り替え
  • 広いコマンドラインモード時にCtrl+Enterでコードを実行

また、以下のメニューからショートカットの変更も行えるので、他の拡張等とショートカットがかぶった場合でも別のキーで使用することが出来ます。

ショートカット変更

2. Firefox本体のツールバーに「要素を調査」ボタン

Firefox本体のツールバーに「要素を調査」ボタンが設置できます。

要素を調査

「ちょっと要素を調べたい」と言った場合に、いちいち「Firebug起動」->「調査ボタンクリック」ではなく、一気に要素の調査を開始できるので便利です。

Firefox本体の「ツールバー(T)」->「カスタマイズ(C)」からドラッグ&ドロップで設置できます。

3. console.debug

コンソールタブに引数の内容と、呼び出し元ファイル名、行番号を表示します。

console.debug

引数の内容をコンソールタブに表示するにはconsole.logが使われることが多いですが、呼び出し元ファイル名、行番号が一緒に出力されるので通常のデバッグではこちらの方が便利だと思います。

ただし、console.logと違ってFirebug以外の開発環境では標準でサポートされていないので注意してください。

4. XMLHTTPRequests(Ajax)の通信内容を表示

コンソールタブでXMLHTTPRequests(Ajax)の通信内容を表示します。

XMLHTTPRequests の表示

過去のバージョンでは標準でXHRの通信内容がコンソールタブに表示されていましたが、最近のバージョンでは表示されなくなっていました。

このオプションを有効にすると、過去のバージョンと同様XHRの通信内容がコンソールタブに表示されるようになります。

これに関しては接続タブから確認することも可能ですが、接続タブを有効にすると若干重くなるので簡単に確認するのであればこのオプションの方が手軽だと思います。

5. コンソール内容の継続

画面をリロードしてもコンソール内容がクリアされなくなります。

コンソール内容の継続

表示後即リダイレクトしてしまう場合のエラー確認や、リンククリック時にエラーが発生してイベントが停止できず画面遷移してしまう場合のデバッグなどに役に立つと思います。

6. イベントを記録

HTMLタブ内の要素に対する右クリックメニューから、対象の要素に発生する全てのイベントをコンソールタブに出力することが可能です。

イベントを記録

これに関しては以前もこのブログで紹介しましたが、便利なわりにあまり使われてない気がするので再度紹介いたします。

FirebugのLog Eventsに関して

「本当にイベントが発生しているのか?」、「この動作時にはどんなイベントが発生しているのか?」といった場合に役に立つかもしれません。

7. 要素の変更時にブレーク

HTMLタブ内の要素に対する右クリックメニューから、対象の要素に変更が行われた際にブレークさせることが可能です。

要素の変更時にブレーク

これに関してはスクリプトタブが有効になっており、読み込みが成功していないと動作しないので注意してください。
(スクリプトタブが無効状態だと何も発生しません)

JSが競合して同時に要素を変更している場合などに役に立つかもしれません。

8. XHR でブレーク

「7. 要素の変更時にブレーク」のXHR でブレークする版です。

XHR でブレーク

外部通信を監視したい場合には使えるかもしれませんが、JSONPはキャッチできないので注意してください。
(逆にHTML要素に対して「7. 要素の変更時にブレーク」を有効にするとJSONPをキャッチ出来ます)

9. 通信内容の継続

画面をリロードしてもネットタブの通信内容がクリアされなくなります。

通信内容の継続

「5. コンソール内容の継続」の通信内容版です。

複数画面の表示速度を比較したい場合に使えるかもしれません。

10. ブラウザキャッシュの無効化

有効にすると常にサーバからデータをダウンロードするようになります。

ブラウザキャッシュの無効化

私はWeb Developerの「無効」系メニューをToolbarに設置して使っていますが、ブラウザキャッシュの無効化を行いたいだけであればこのオプションでも良いかもしれません。
(Web Developerの「キャッシュを無効にする」とは連動します)

カヤックではちゃんと公式ドキュメントを見る技術者も募集しています!

最近ロードバイクを買いました。nagata(@handlename)です。

前回、安易にも無防備な.emacsを晒したら、我らがtypester先生に

「.emacsに全部書くのは小学生までだよね〜」(大幅に誇張あり)

と言われてしまったので、早速.emacsを分割してみたいと思います!

(設定ファイル群をgithubにあげました

なんで分割するの?

そもそもなんで分割するんでしょうか? メリットとしては、こんなものがあります。

  • 見通しがよくなる
  • 環境依存の設定を切り分けられる
  • 一部のファイルにエラーがあっても他のファイルの設定は適用される
  • それぞれ個別にbyte compileできる

一部のエラーが全体に影響しないっていうのはいいですね。とっても。

では、実際に分割する方法を見ていきましょう。

分割してみよう

分割した設定ファイルを読み込むために、IMAKADOさん謹製のinit-loader.elを使います。

指定したディレクトリ内のelファイルを読み込んでくれるelispなのですが、 ファイル名を見て環境(meadowやcarbon-emacs、windowシステムかどうかなど)に合わせて読み込んでくれたり、 エラーのあるファイルはスルーしてくれたりして、単純に.emacsから設定ファイルを読み込むより便利です。

(require 'init-loader)
(init-loader-load "~/.emacs.d/inits") ; 設定ファイルがあるディレクトリを指定

~/.emacs.d/inits ないのファイル構成はこんな感じになってます。 モードごとに設定を切り分けている感じです。

  • 00_display.el
  • 00_encoding.el
  • 00_init.el
  • 00_keybinds.el
  • 10_pre_execute.el
  • 20_custom_commands.el
  • 30_align.el
  • 30_anything.el
  • 30_color-moccur.el
  • 30_elscreet.el
  • 30_hilights.el
  • 30_html.el
  • 30_migemo.el
  • 30_others.el
  • 30_revive.el
  • 30_tramp.el
  • 30_yasnippet.el
  • 40_c++.el
  • 40_elisp.el
  • 40_js.el
  • 40_latex.el
  • 40_lisp.el
  • 40_lisp.elc
  • 40_markdown.el
  • 40_objc.el
  • 40_org.el
  • 40_php.el
  • 40_ruby.el
  • 40_text.el
  • 40_yaml.el
  • 50_flymake.el
  • 50_gtags.el
  • 50_hs.el
  • 50_mmm.el
  • 50_outputz.el
  • 50_symfony.el
  • 50_zencoding.el
  • 51_auto-complete.el
  • 90_post_exec.el

・・・ちょっと多い? エラーがあったファイルは読み込まれないので、 こんな感じにモードごとに分けるのが妥当なんじゃないでしょうか。

せっかくなのでbyte compile

設定ファイルを切り分けたのでbyte compileしてしまいましょう。 emacsの起動がすんごく速くなります。 ディレクトリ内の*.elを一括してコンパイルするには、以下のコマンドを実行してみてください。

emacs -batch -f batch-byte-compile *.el

(2010/07/28 10:00 コマンドが間違っていたので修正しました)

しょっちゅう編集するようなファイルはコンパイルせずにおくのがいいかもしれません。

いままで.emacsのbyte compileはやってなかったんですが、 今回分割した機会にコンパイルしてみたら、 起動にかかる時間がコンパイルしなかったときと比べて2倍以上速くなりました。 (コンパイルなし:約14秒、あり:約6秒)

おわり

分割したことによって、設定ファイルをすっきり管理できるようになりました。 ついでにbyte compileしたことによって、emacsの起動速度も倍速になりました。

ファイルを分割するのでバッファ内検索が使えなくなりますが、 grepで代用すれば問題ないでしょう。

おわり2

init-loader.elには、

  • ファイル名がmeadowで始まるファイルはmeadowだけで読み込む
  • ファイル名がcarbon-emacsで始まるファイルはcarbon-emacsだけで読み込む
  • ファイル名がnwで始まるファイルは非ウィンドウシステムでのみ読み込む

という機能もあるので、複数の環境で設定ファイルを共有したい場合は重宝すると思います。

カヤックでは設定ファイルそのものにすらこだわる技術者も募集しています!