2013-02-18

Tincrを使って、Chrome Developer Toolsでの変更をソースコードに反映する

JS開発ツールの話。Cmd+Opt+j や Cmd+Opt+i が手癖になってる人向け。タイトルのTincrはChrome Developer Toolsのプラグインで、ファイルシステム上の変更を検知してブラウザをリロードするのと、その逆方向であるDeveloper Tools上で加えた変更をファイルに反映してくれる。前者はyeoman serverも同じ事ができるが、後者の機能は無い。

Tincrのインストール

Chrome Developer Toolsに追加されればOK

プロジェクトの設定

Tincrに用意されているプロジェクトタイプは次の5つ。
  • Ruby on Rails
  • Chrome Extension
  • Http Web Server
  • Atlassian Plugin
  • Configuration File
yeoman server だったり python -m SimpleHTTPServer でサーバー起動して動作確認をする場合はHttp ServerでOK。URL Rewriteしている場合はマッピングが必要なのでConfiguration Fileを選択して設定ファイルを書く必要がある。
試しに次のようなファイル構成の時に、ローカルでWebサーバーを起動してブラウザで開く。

--> tree app
app
├── 404.html
├── favicon.ico
├── index.html
├── robots.txt
├── scripts
│   ├── main.js
│   └── vendor
│       ├── jquery.min.js
│       └── modernizr.min.js
└── styles
    └── main.css
Chrome Developer ToolsのTincrタブでProject Typeを選択、Http Serverの場合はルートディレクトリの設定のみ。
Enable Loggingにチェックを入れておくとConsoleタブにログが出てくる。
Content for url http://localhost:8000/scripts/main.js matches local file /Users/tnishibayashi/dev/test/tinkr/app/scripts/main.js
Content for url http://localhost:8000/scripts/vendor/modernizr.min.js matches local file /Users/tnishibayashi/dev/test/tinkr/app/scripts/vendor/modernizr.min.js
Content for url http://localhost:8000/styles/main.css matches local file /Users/tnishibayashi/dev/test/tinkr/app/styles/main.css
ローカルからロードしているmain.jsとmain.css、modernizr.min.jsが見つかった事が出力される。

ファイルの修正と同期

Sourcesタブでmain.js, main.cssをおもむろに修正して保存(Cmd+s)するとページとローカルファイルの両方に反映される。Sassもそのままいける。JSファイルであればブレークポイントとの組みあわせで見つけたバグをその場で修正できる。
Sourcesタブの他には、Elementsタブでタグを選択してMatched CSS Rulesに出てきたスタイルに加えた変更がファイルに反映される。もちろん同期対象のcssファイル内で定義されている物に限る。


最近のトレンドとか

今のトレンドはビルドパイプラインも使いつつ、開発中は個々のファイルを未加工のままブラウザにロードするスタイルだろう。特にTincrでは結合後のJSファイルやコンパイル後のsassを編集できてもあまり嬉しくない。ファイルが大量になってくるとロードするのも大変だけど、そこはRequire.jsあたりにまかせても良さげ。



このエントリーをはてなブックマークに追加

2013-02-17

Leap Motion SDKのAgreememtに秘密保持条項がある件


Leap Motionが届いたので早速SDK使っていろいろコード書いてます。いろいろここに書きたいネタはあるものの、タイトル通りのあれなのでSDKを直に呼び出してるコードなんかは公開NGっぽいし、ブログには書きづらいですね。例えば今すぐLeap Motion勉強会なんかをやろうと思ったらDeveloper登録済の人だけでやる必要がありそう。といってもSDKが一般公開されるまでの間のみの様です。

このエントリーをはてなブックマークに追加

2013-02-03

makefileを廃絶してgruntを使う

JavaScriptを使った開発で必要となるconcat, minify, lint, test といったタスクを動かすのに使うツール、最近はgruntをよく見かけるのでオレオレmakefileから移行してみた。

既存のmakefileは以下の通り。makefile + makeターゲットから呼び出される各種タスクに対応した処理を行なうプログラムという構成。make minifyと打てば圧縮版のファイルを生成、make testと打てばテストが実行される寸法だ、圧縮にはuglify.js, lintにはjshint、全てnodeモジュールを使っているのでそのまま移行できるはず。concatにはmuというテンプレートエンジンを使っていた。


makefileからの移行

まず、gruntの制御に必要なgrunt.jsファイルは grunt init:gruntfile して生成する。concat, lint, minify がビルトインタスクとして既に存在しているのがわかる。それらの箇所を修正して対象ファイルを指定する。

gruntからシェルコマンドの実行

最初に困ったのが、gruntから npm test を実行したいが、シェルのコマンドを実行する方法がデフォルトでは存在しない事。そこで grunt-exec というgruntプラグインを発見したので利用した。最終的に次のgrunt.jsになった。

grunt testでテストが実行されるし、grunt watchしてコードを編集すれば勝手にlint, concat, testしてくれるので移行はOK。 古参JSerであればRailsにアセットパイプラインが導入される前から、それ相当の機能を持つ秘伝のタレ的なMakefileやRakefileを使ってきたとは思うが、gruntはプラグインという形でタスクを共有できるので新規プロジェクトで使ってみるメリットは十分ある。少なくともCakefileよりはイケている。ライブラリでは無くWebアプリケーションの開発であればgruntを利用したyeomanの方が良さげ。

このエントリーをはてなブックマークに追加

2013-02-02

PRML復々習レーンについて

ここの所会場係をやらせてもらっている勉強会がPRML復々習レーンです。いわずと知れた機械学習のバイブル「パターン認識と機械学習 - ベイズ理論による統計的予測」を各節ごとに担当者を決めて発表、議論する勉強会です。次回は3月10日。

私はこの分野の完全な素人という状態から勉強会に参加してきましたが、ようやくベイズ的に扱えると何が良いのか、あたりが理解できてきました。現在は次回の発表準備に向けてカーネル法の勉強中。ついでに前々回の発表時の資料貼っておく。今気づいたのですが、slideshareにアップした際にいくつかの記号(総乗のラージパイ等)が消し飛んでおり、意味不明な数式になってますね……。


パターン認識と機械学習 上 パターン認識と機械学習 下 (ベイズ理論による統計的予測)

このエントリーをはてなブックマークに追加