Development Environment Conference Agile Web Development with 萌ディタ Reloaded ---- プロフィール 株式会社ライブドア メディア事業部 開発部 システム開発グループ ---- プロフィール 最速インターフェース研究会 主任研究員 ---- プロフィール :: 最近のお仕事 livedoor Readerとか livedoor クリップとか つくってます ---- プロフィール :: 最近のお仕事 まるごとPerlに [img:marugoto.jpg] JavaScriptの記事を 書いた ---- プロフィール :: 最近の出来事 ライブドア社員なのに livedoor カードの 審査に落ちた ---- 今回のテーマ 第一回 Shibuya.jsで 話したネタと かぶってるので ---- 今回のテーマ 掘り下げて しゃべります ---- 生活編 生活編 ---- 生活スタイル 働く日 月曜から金曜 ---- 生活スタイル 開発効率化のための ツール開発 ---- 生活スタイル 土曜と日曜 ---- 生活スタイル 28%ルール ---- 生活スタイル 人生の28%は 開発の 効率化の ために使おう ---- ハードウェア編 こんなハードを使ってます ---- モニタ - DELLの20インチワイド液晶 - 縦置きデュアル - [img:desk.jpg] ---- モニタ - del.icio.usのパクり http://blog.del.icio.us/blog/2005/05/some_noises_we_.html - [img:office_1.jpg] ---- キーボード - HHKL2 - [img:hhkl2jp.jpg] ---- キーボード 安いやつ 軟弱なので カーソルキー付き 日本語配列 ---- マウス - 5ボタンマウス - 左右ボタンにCtrl + Tab / Ctrl + Shift + Tabを割り当て - 中央第二ボタンにCtrl + Wを割り当て - MDIなソフトウェアの操作が楽 ---- マウス だったけど やめた ---- 机が狭いので - トラックボールにスイッチ ---- 机が狭いので - マーブルマウス - [img:trackball1.gif] - http://www.amazon.co.jp/dp/B00008B6P8/ ---- 机が狭いので - ケジンストン - [img:trackball2.gif] - http://www.amazon.co.jp/dp/B0006J09LU/ ---- トラックボール 慣れると 楽 ---- お気に入りキーボード - [img:okiniiri.jpg] ---- お気に入りキーボード - ショートカットキー専用のキーボード - 30個のキーがついている。 ---- お気に入りキーボード :: 良いところ - 安い - サイズが小さい - 汎用のソフトでキー割り当てが可能 ---- お気に入りキーボード :: 良いところ ライブドア デパートで 売ってる ---- お気に入りキーボードのダメなところ - 付属のユーティリティがしょぼい - 配布ページが無断リンク禁止 ---- お気に入りキーボード :: Tips - 左上から Ctrl + Shift + [A-Z] なんかが送られてる。 - 付属のソフトよりも「窓使いの憂鬱」を使った方が楽 ---- 似たようなもの - LED付きキーボード -- http://japanese.engadget.com/2006/08/28/optimus-mini-three-hands-on/ - [img:03.jpg] - 価格: $160 - 高い - ボタン三つしかない ---- 似たようなもの - 自由配置可能なキーボード ergodex DX1 -- http://www.users-side.co.jp/guide/press/ergodex_dx1.php - [img:ergodex.jpg] - 価格：22800円 - 高い - でかい ---- お気に入りキーボード - [img:okiniiri.jpg] - 5500円 - おすすめ ---- お気に入りキーボード - ボタンがそんなにいらないなら - ジョイスティック + AutoHotkey(後述) - でもいいかも ---- ソフトウェア編 どんなソフトウェアを 使っているのか ---- エディタ - エディタを選ぶ基準 - ブラウザと連動できること ---- エディタ - 以前使ってたエディタ - Alpha http://alpha.sourceforge.jp/ - 設定がJavaScript - JSでなくてもWSHで解釈できれば良い - VBS,Perl,Ruby,Python可能 ---- エディタ - 今使ってるエディタ - 萌ディタ -- http://www.geocities.co.jp/SiliconValley-Oakland/3617/ ---- Alpha → 萌ディタ - イベントフックの記述が楽 - 混在環境でのsyntax highlight / 入力補完 - 名前がイカす ---- Alphaと萌ディタ - Alpha : 開発が停滞 - 萌ディタ : 開発がもっと停滞 ---- Alphaと萌ディタ - Alpha : オープンソース - 萌ディタ : 作者生死不明 ---- 萌ディタはオススメですか？ おすすめ できない ---- Windows環境のこと Windows環境のこと ---- Bluewind - キーボードランチャ - スタートメニュー使わない ---- AutoHotkey - 独自のスクリプトでウィンドウ操作とかできる - 単体起動可能なexeファイルにコンパイルが可能 - 常駐もできるし、すぐに終了するスクリプトも書ける ---- AutoHotkey :: 言語 - VBScriptライク？ - なんか変にはまることあり。 - サンプルが多いので真似すればOK ---- AutoHotkey :: Alt + Drag - AutoHotkeyのサンプル集からリンクされている -- http://www.autohotkey.com/docs/scripts/EasyWindowDrag_(KDE).htm - Altを押しながらウィンドウをドラッグで移動 -- どこでもつかめるようになる。 - 右クリックでドラッグするとリサイズ ---- AutoHotkey :: マウスホイール - ホイール回転をマウスカーソルの下のウィンドウに送る。 -- http://lukewarm.s101.xrea.com/myscripts/index.html - アクティブでないウィンドウもスクロールできる。 ---- 窓使いの憂鬱(mayu) 窓使いの憂鬱 Ctrl と Capsを 入れ替えたりする ソフト ---- 窓使いの憂鬱(mayu) - お気に入りキーボードの割り当てに使用 - 簡単なウィンドウ制御なら - AHKなしでもmayuだけでOK ---- 半透明トグル - アクティブなウィンドウを半透明にする。 - key C-A-A = &WindowSetAlpha(50) ---- 半透明ウィンドウの有用な使い方 - 1. エディタを黒背景にする。 - 2. 不透明度を82%ぐらいにする。 - 3. 背景にIRCを表示させておく。 - 4. ウィンドウを切り替えずに発言を読める - (どうでもいい発言はスルー) ---- こんなソフトも使ってます - ERAM : Windows上でRAMディスクを作るドライバ。 - eClip : クリップボードの履歴を検索 ---- Mac環境のこと - putty → VMWare → 開発サーバー ↓ - putty → MacBook → 開発サーバー ---- Mac環境のこと - メインPCの負担が減った - あんまり使ってない - Safariでの確認用 ---- ちょっとしたツール開発 - JavaScript -- (WSH or HTA) - Ruby -- (WEBrick) - AutoHotkey ---- ちょっとしたツール開発 - ブログに - ちょこちょこ - 書いてるので - 見てください ---- Ruby Rubyって WEBrick動かすのに 必要なやつだよね ---- Ruby :: WEBrick Railsとかおおげさ ていうかそれWEBrickでよくね それWEBrickでできるよ ---- JavaScriptでツールを作る - HTAからならXMLHttpRequestで世界中にアクセスし放題 - ブラウザ制御して色々やるには楽(インタラクティブ動作) ---- AutoHotkeyでツールを作る - AHKスクリプト書きづらい - コンパイルしたら200KBになるのは魅力 ---- AutoHotkey :: 作ったもの - "Win + D" を押すだけのexe - デスクトップを表示/ウィンドウを復元 - HHKだと三つ押さないといけないので面倒。 - 作ったexeをお気に入りキーボードに割り当て ---- AutoHotkey :: 作ったもの - "Win + L" を押すだけのexe - ユーザーの切り替え(画面のロック) - なんかキーが押しっぱなしになってはまる。 - rundll32.exe user32.dll,LockWorkStation　でいける -- bluewindにlockで登録 ---- AutoHotkey :: 作ったもの - カラーピッカー - 現在のマウス位置のカラーを#ffffffみたいな形式で取得 - 作ったexeをお気に入りキーボードに登録。 ---- AutoHotkey :: 作ったもの - 常に手前に表示 - アクティブなウィンドウを常に手前に表示をトグル。 - 一見便利そうだがそうでもない ---- AutoHotkey 良くVBとか .NETとかで作られた 小物ツール があるけど ---- AutoHotkey それAutoHotkeyで できるよ ---- 萌ディタの話 萌ディタの話 ---- リアルタイムCSS編集 - WEBrickプロキシと組み合わせて人のサイトのCSS編集 - エントリ http://la.ma.la/blog/diary_200607172004.htm - デモ http://la.ma.la/misc/demo/realtime_cssedit.htm ---- CSSのオートリロードの改善 - 画面全体をリロードするので - 相手サーバーに負担がかかる - 表示完了まで待たされる ---- CSSのオートリロードの改善 - CSSをリロードするブックマークレット -- http://mastodon.dojotoolkit.org/~david/recss.html ---- CSSのオートリロードの改善 - CSSファイルのキャッシュを無効にして強制リロードする - 全体をリロードするよりも早い ---- CSSのオートリロードの改善 CSSだけなら プロキシとか 使わなくても できるはず ---- 萌ディタでCSS編集 実演 ---- 萌ディタでCSS編集 - 萌ディタで編集してるCSSを今見てるページに適用 - 萌ディタ → Sleipnir.API ---- 萌ディタでCSS編集 - ブックマークレットでローカルのCSSファイルを追加 - カレントタブのドキュメントに適用される - プロキシ等の設定いらず、どこでもuser cssを気軽に書ける ---- TODO : 社内教育の徹底 社内で やってるひと ---- TODO : 社内教育の徹底 皆無 ---- TODO : 社内教育の徹底 萌ディタを 使っている人 ---- TODO : 社内教育の徹底 皆無 ---- お前ら移植しる 別に 萌ディタとか Sleipnirじゃなくても できるよ ---- お前ら移植しる ホッテントリ間違いなし see also まとめ http://del.icio.us/ma.la/autoreload ---- TODO : jsのリロード - JavaScriptだけリロードとかできる？ - スクリプトタグ追加すればJSだけリロードも可能では？ - まあ二回実行されてしまうのでクラス再定義とかなら。 ---- JavaScriptの開発テクニック - alert debug マニアックス ---- IEのエラー - エラーの起こった行が正確に出ない - メッセージが意味不明 - Firefoxでは動くのにIEでは動かない ---- どうすればいいの？ - alert debug ---- ブレークポイントとして使う - 追加したコードの近辺にalertを挟み込む - どこでエラーが起きるのか明確になる ---- alertデバッグの問題 - while文の中で使うと止められなくなる - alert_onceとか作れ ---- alert_once <pre>function alert_once(v){ if(!alert_once.alerted) alert(v); alert_once.alerted = 1; }</pre> ---- alert debug 以外の手段 - window.statusデバッグ - document.titleデバッグ ---- 負担を軽減するツール - DebugScreen http://la.ma.la/misc/js/debugscreen/ -- あんま使ってない - IEreBug http://tech.nitoyon.com/javascript/application/ieerbug/ -- 試してない ---- 最終的には IEの気持ちを 理解する ことが 重要 ---- IEと向き合う 心が通じ合えば alertで 十分 ---- バグの基本的な潰し方 - エラーが出なくなるまで - ひたすら修正 - ブラウザ自動リロード ---- オートリロード = Try and Error - コードを書き換えて、変更を確認できるまでの時間 - 1秒以下が望ましい - 1秒以下 → 平気でエラーを出すコードを書ける ---- オートリロード = Try and Error - 試行錯誤すること - エラーを出しながら短くシンプルな書き方を見つける - エラーを出しながら高速な方法を見つける ---- オートリロード = Try and Error - 「変更/確認」を繰り返しただけコードは洗練される - まずはTry and Errorできる環境を整える ---- 発表は以上です 以上 ---- 求人 技術者 募集 ---- 終わり ご静聴 ありがとう ございました。 ---- Question? Question?