Code

2014年6月29日日曜日

いいエディター紹介しよう

 先週新しい2名 Front End Dev がチームに加入しました。エディターは何か好みがあるかと聞いたら、あまりないと答えた。今まで、ずっと Eclipse、VS を使って JS コードを書いてたと。うちのプロジェクトはニュース関係なので、よくテキストを扱うため、なんかライトなエディターを使ったほうがいいとアドバイスしました。Sublime Text は一番あってるかもと。
 下記のところからダウンロードできます。
     http://www.sublimetext.com/3

 いっぱいプラグインも使えます。まず、最重要なのは package control.
     https://sublime.wbond.net/installation
    Sublime Text 3 を書いてあるタブ中のコマンドをコピーして、 Sublime Text 3 に Ctrl+` を押して、コマンドコンソールに貼付ければ、エンターキーを押して、自動的にインストールされます。
 その後、Ctrl + Shift + p (マックの場合 Cmd + Shift + p)を押して、"install package" を入力すれば、package control がリストされます。それを選択して、エンターキーを押すと、エディター左下に小さい "=" が動きます。それはすべての package 情報をダウンロードしているサインです。少し待つと、別のインプットボックスが出て来て、その中に emmet を入力すれば、emmet plugin が表示されます。結構便利なツールなので、インストールすることはおすすめです。具体的に、下記のドキュメントがあります。
   http://docs.emmet.io/

例えば、! を入力して、Ctrl+e を押すと、自動的に HTML5 のベース HTML Header, Body が展開されます。また ul.hi>li*5 を入力して、Ctrl + e で自動的に ul と五つの li タグが出てきます。しかも ul に hi という CSS Class がついています。結構便利です。
 他に、コマンドを実行したり、Live Style という Chrome の workspace と似てる機能があったりして、使いこなすのも速いです。 フォルタも開けます。Ctrl + p を押して、ファイルを名前をインプットすると、自動的に探してくれます。
 自分は通常の開発はほとんどこのエディターを使います。grunt コマンドも実行できます。まぁ、grunt の file watcher を使ったほうがもっと速いです。
 
 それでは。ここまで。

2014年6月15日日曜日

AngularJS: なぜ {{name}} を使うか

 最近、同僚に AngularJS で何で {{}} を使うところと使わないところがあるかと聞かれました。まぁ、簡単に答えました:ng-model などの Directives では Angular Framework はそれをわかっているので、{{}} で示す必要がないです;ただ、HTML String の中で、どれが Static 、どれが AngularJS の $watch 対象か、区別をつくために、{{}} を使う。

 それは基本的な Angular Framework の作りで決まっています。Angular では ng-app や、 ng-click などすでに提供した Directives がありますし、それ以外 {{}} で変数を $watch するところ、$apply で処理する String があります。Scope にその値を探したりする必要がありますので、{{}} を使うようになりました。
 これは基本的な Handlebars などのテンプレート Lib も似たようなものです。

 今日簡単に書いて、時間があったらまた詳細をまとめよう。

2014年6月10日火曜日

関数の Call Stack in JavaScript

 最近 Back end の仕事にはまってて、Java はちょっと使いにくいなと思いました。やはり、JavaScript がいいですねと。:)
 今日、Safari の Web Inspector が iOS でのデッバグができなくなったことを発見しました。。。なんでだろうね。
 どうしても、関数のコールスタックを見たくて、ちょっと調べてみました。一般的に arguments.callee.caller から親関数が見つかります。
 または new Error().stack をコンソールで出力すれば、一連のコールが見えます。試してみたら、この Error が mobile webkit では定義していないようです。arguments.callee.caller を使うしかないです。

 実際の問題点は、うちのアプリは一回三つの画面をレンダリングするので、その一つは HTML フォーマットの動画CM です。それで、実際その画面が表示されたら、 CM を起動したいです。ただ、JS では自分は表示されているかどうかわからないので、iOS と Android の native コードで検知しています。画面が表示されたら、CM の Start 関数を native コードで呼び出して、動画を始めさせます。このタイミングと実際何所で呼び出されたかを知っている方は知っているが、他のあたらしい開発者はわからなくて、何かいい方法がないかを考えています。。。

 まず、ここまで。