JavaScriptのファイル結合をSublimeTextから簡単に実行する方法

最近のJavaScriptのつくりとして、jQuery等のプラグインを使ったりしてると複数のJavaScriptを読み込まないといけなくなります。

これに対応するために import.js というスクリプトを作って<script>タグをdocument.writeしたりもしますが、数が多くなるとレスポンスが悪かったり、いろいろジレンマが発生してきます。

参考：　http://www.ezgate-mt.sakura.ne.jp/javascript/83.html

これらをSublimeTextでショートカット一発で解決する方法を考えてみました。

と、いっても、ものすごいレガシー感いっぱいの内容ですが・・

1. JS圧縮ライブラリ (UglifyJS等) をインストールする
2. それを使うためのバッチファイルやシェルスクリプトを書く
3. SublimeTextでショートカットキー一発で呼び出す設定を書き、設定

1 はインストールなのでここでは特に説明しませんが、UglifyJSの場合、node.jsインストールしてnpmコマンドでインストールするのがが2ステップで入れれるので一番楽だと思います。例はUglifyJSになっています。

2 は単に3で書く部分を簡略化するためです。ファイルを追加したりする場合にSublimeTextで編集しやすかったり、テストも楽なので、この方法が便利です。

いざとなればこのファイルをたたけば結合してくれるのも便利。

例：

以下は該当のjs群がある同一ディレクトリに __build.bat というファイル名で作った場合のサンプル。
PC用import.jsとスマホ用import-sp.jsの2ファイルを作成しつつ、各ファイルはそれごとに指定の複数のJSファイルを１つのファイルに結合したい。

__build.bat

call uglifyjs -o import.js hoge1.js jquery.js jquery.hoge2.js jquery.hoge3.js hoge4.js
call uglifyjs -o import-sp.js jquery.js jquery.hoge2.js jquery.hoge3.js hoge5.js

3 はSublimeTextで [Tool] > [Build System] > [New Build System...] を選ぶと、Build(Ctr+B)で実行できる設定ファイルのテンプレが開きます。それに 2 で作ったファイル名を書くだけ。
保存先は上記で作った場合は保存時のデフォルトでOKです。
例：

CallBuildbat.sublime-build

{
"cmd":["__build.bat"]
}

 他のBuildSystemを使ってる場合は3は結構作りこむ必要がありますが、使ってない場合は上記だけでOKです。

で、この準備ができたら [Tool] > [Build System] >[CallBuildbat] (3 で保存した名前)を選びましょう。
そして、該当のJSファイルを開いて Ctr+B を押すと、さくっと複数ファイルが結合した import.js と import-sp.js が出来上がってるはずです。

なんて簡単！

ほかにも、いろいろ設定がかけますが、自分で使いやすいようにカスタマイズしてみてください。

IPv6とInternetExplorer

World IPv6 Launchを過ぎてもみなさんのがんばりで問題なく接続できている今日この頃、いかがお過ごしでしょうか？
ちょっと気になることがあって、ISPさんではなくブラウザ絡みの視点からちょっと調べてみました。

ブラウザでHappy Eyeballsが実装されている(ChromeとFireFoxは実装済み ※追記)とIPv6で接続を失敗して次はIPv4でというフォールバックをせず、IPv6+IPv4を一気に送って早く帰ってきた方を採用！となる事で回避（ただのトラフィック増やしてる方法とも言えなくはないが・・）したりと意外とブラウザレベルでもがんばってるようです。
※今まで知らなかった・・・（汗）

でも、よくよく見てるとやっぱりここでInternetExplorerさんの文字が・・

• Microsoft Internet Explorer (IE7, IE8)ではフォールバックの回数の上限が5回となっているため、これを超える数の IPv6 アドレスが名前解決の際に得られた場合、IPv4へフォールバックせずに通信が終了してしまう。回数はレジストリで制御可能となっており、デフォルト値が 5 回となっている

※参考 http://www.v6pc.jp/jp/upload/pdf/v6fix20110609.pdf

な、なんですと・・・。

これの影響でHTMLは読み込むけど、画像読もうとした時には上限数超えてて読み込まないとかあるようです。

※参考 http://www.attn.jp/worldipv6day/meeting/20111125/111121_BIGLOBE.pdf

とりあえず、IPv4時代が青春だったIEさんには相当IPv6は重荷のようです。そりゃそうですが。

http://support.microsoft.com/gp/ipv6info/ja

とかにもまとまってますね。

たぶん今の時点で特に話題にも出てこないので大丈夫だとは思いますが、XPでIE8等を利用してるクライアントから突然　「画像がちょっとしか出なくなった！」　とかあった時に、クライアントさんの社内ネットワークがIPv4からIPv6対応に変わってたりした場合には、この手のIPv6がらみも疑ってみるというのが必要かもしれません。
※上記は間違った話かも。僕そんな知識ないんす・・・。
とりあえずChromeで見てみてください。と。。。。。

ま、たぶんもう大丈夫でしょうけどね。

CoffeeScriptでダブルコーテーションが入れ子になった文字連結

CoffeeScriptで文字列連結を行なって文字列を作るときに"の入れ子をしたときにエスケープしないというのに気づいたのでメモ

通常文字列連携するときには

-CoffeeScript-

abc='title'
console.log "こんにちは#{abc}"

をいう形で作ります。
※色は強調用に意図的に塗ってます。
これを用いてjQueryなどでエレメント名を変数化してる時など妙な入れ子になります。
"で括られてるため、気分的に\"とエスケープして書くとコンパイルするとエラーします。
どうやら文法的には入れ子になろうとエスケープしないで書くのが正解です。


-HTML部-

<h1 class="title">たいとるです</h1>

-CoffeeScript-

abc='title'
# console.log "こんにちは#{$(\".#{abc}\").html()}"
console.log "こんにちは#{$(".#{abc}").html()}"

個人的には違和感ありまくるのですが、こういうものらしいです。

たった3ステップでCoffeeScriptをWindows7にインストール

Windows7にCoffeeScriptをインストールをするのが3ステップで可能になってました。

→

→

1. node.js のサイトにアクセスし、[ Download ]ボタンから[ Windows Installer ]をダウンロード
2. ダウンロードした [ node-v0.6.18.msi ]※ をダブルクリックしてインストール
3. コマンドプロンプト立ちあげて、[ npm install coffee-script --global ] と打つ

※2012/5/17現在

上記は検証用のいれたばかりのWindows7 SP1で行なってみました。
すばらしく簡単になってますね。

Sublime Text 2でCoffeeScriptのコンパイルをするバッドノウハウ

はやりのSublime Text 2を使ってます。
会社ではWindows、自宅ではMacと環境がもろ違うんですが、同じエディタが使えるのは非常に良いです。
で、最近コード書こうと思ったらCoffeeScriptで書いてしまうという中毒症状が出始めてるので、そのあたりの環境作った時のメモを。
※個人的にはCoffeeScriptはおすすめしません。理由はいくつかあるんですが、最大の問題点はネットに落ちてるJSのコードをそのままコピペで動かせないから、ちょいと変換とかするのがなんとも。

とりあえずSublime Text 2でCoffeeScriptを書くのに便利なツールを入れるんですが、今回のゴールは、
複数のCoffeeScriptファイルを保存するだけで勝手にコンパイルしてくれて、サクサクっとコードを書いていきたい
という所です。

とりあえず、前段として、CoffeeScriptのインストールとSublimeText2にCoffeeScriptの言語拡張を入れるというのがあるのですが、ググれば適度に日本語の情報がヒットするのでそちらで・・。
http://d.hatena.ne.jp/mizchi/20111021/1319167480
http://memo.devjam.net/tag/coffeescript
※僕の場合、Windows環境はさっくりいったのにMac環境で手こずりました。MacPortsのバカヤロウ・・。 
※時代は進化してるので、たぶんインストーラーでさっくり言ってたりしてブログにないくらい簡単になってます。

で、もろもろ入れて準備万端。さてさてコード書いてjsにコンパイルしましょう。
という所なんですが、Windows、Macでは入れたばかりだとSublime Text 2のビルドコマンドがうまく動きません。
どうもコマンド部分でパスがうまく通ってないようです。コマンドプロンプトではうまく通ってるみたいだが、 Sublime Text 2は上手くいってないようです。
しょうがないので、設定を変更します。
ただ問題は、インストールはコマンドでやってるので、どこに何が入ったのかわからないという。と、そんな困ったときはOSのファイル検索です。
CoffeeScript.sublime-build
これを検索してみてください。
ちなみに、私の環境のMacだと
~/Library/Application Support/Sublime Text 2/Packages/CoffeeScript/Commands
あたりにあります。

で、開いてみると

{
    "path": "$HOME/bin:/usr/local/bin:$PATH",
    "cmd": ["coffee","-c","$file"],
    "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
    "selector": "source.coffee"
}

となっていると思います。
２行目のpathがWindows、Macでは違うのでcoffeeコマンドがあるパスを指定しましょう。
Mac環境だと

    "path": "/opt/local/bin",

になります。
で、このパスを書き換えて

{
    "path": "/opt/local/bin",
    "cmd": ["coffee","-c","$file"],
    "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
    "selector": "source.coffee"
}

保存して、Command+bとすると、おおお！！コンパイルされて同階層にjsがはき出された！
と、まぁここまで、ググるとよくあるんですが、なぜかSublime Text 2の設定でSave All on Buildにチェックいれても、保存しても完全に無視されます。なぜだ。悲しい・・。
※僕の設定が何かおかしいだけだとは思うんですが。解決法知ってる方は教えてください。

なのでここからはバッドノウハウです。
ですが、怪我の功名で
普通にSublimeText2やるとエラーしてても何でも[Finished]としか出ないという衝撃のメッセージでエラーしたの気づかないという悲しいオチですが、きっちりエラーメッセージが拾えるようになります。結構これ重要だったりします。エラーしてる＝JSはき出さない＝ブラウザで見て反映されてないというのに気づくのが遅れるのです。


とりあえず、自動でコンパイルができないということは、
保存(Ctr+S)したらコンパイル(Command+b)してブラウザリロード
という作業は結構めんどくさいし、コンパイル忘れして動かないなーと悩むことまちがいなし。
仕方が無いので、CoffeeScriptのコマンドにある watch を使って監視してもらおう。
http://sites.google.com/site/sappariwiki/coffeescript/coffee-command
強いて言うなら、このwatchを使うんだったら別にSublimeText2上でやらなくてもいいんじゃないかと言われそうですが、毎回起動時にコマンドプロンプト立ち上げてコマンド叩くのが面倒だったりするので、エディタからショートカットで呼び出したいのです。
なので、とりあえず以下のようにwを追加して-wcとコマンドを変更してみました。

    "cmd": ["coffee","-wc","$file"],

こうすると、一度Command+bを呼び出せば、ずっと常駐して監視してくれるようになりました。
ですが、ここで問題。
１つのCoffeeScriptファイルなら問題ないのですが、２つ以上の複数になると、１ファイルしかコンパイルできないので前に常駐してたものがキャンセルされます。別のファイルを変更するたびにCommand+bを押す事になるのは無しです。
で、コマンドでファイル名部分をディレクトリ指定するとそこにあるCoffeeScriptファイル全部監視してくれるという便利な機能があるので

{
    "path": "/opt/local/bin",
    "cmd": ["coffee","-wc","./"],
    "selector": "source.coffee"
}

としてみました。こうすると同階層にあるCoffeeScriptファイルをすべて監視してくれるようになって、複数あっても大丈夫です。
これで、何か記述ミスがあっても他のファイルでエラーが出ててもエディタ上で確認できます。

素人による勉強会動画配信日記(接続機材編)

勉強会動画配信ボランティアをせっせとやってると、このご時世では技術的に難しいことじゃないのに結構いろんな人に質問されるから、とりあえずまとめてみようかなと。

一番みなさんが悩むところは機材選定のようなので、そこを中心として。

と、えらそうに言ってますが、素人なんで調子のんなよ！って内容になりますが。

あと、家庭用ビデオカメラとか持ってる前提の話が主です。自分の子供が生まれたりすれば親ばかになり持ってる可能性が高いので、そういう用途と共有するという前提となります。

とりあえず大きくわけると個人予算のボランティアベースだと

• WebCam等PC用品で撮影
• 家庭用ビデオカメラ等で撮影

に別れると思われます。

※例外もありますが。

こちらどちらがいいとは難しいのですが、WebCamの場合

• ズームなどができないので、設置場所が限られる
• 机などに置いてだと見上げる感じになりプロジェクターの絵が台形になって見難い
• プロジェクターの明かりと周りの暗さの影響でスライドが真っ白気味になる

など見てる方としては見にくい事が多いです。ドライバの設定で回避できるものもあったりもしますが。

そのあたりを考えると、家庭用ビデオカメラなどの

• ズームが効くので最後尾とかから正面を撮影できる
• ホワイトバランスや露出が良い感じになる
• マイクが (PCの内蔵等と比べて) 良いので声が聴きやすい

になるものが欲しくなってくるところです。

ですが、家庭用ビデオカメラの映像をネット配信に使おうとしても、簡単につなぐということができません。

• よくある普通のPCにはRCAケーブルやHDMI入力が可能なものがない
• 昨今の家庭用ビデオカメラはFireWire出力はできない

USB端子はついてるものの、あくまであれは”録画したものを取り込む”ためのもので、今見てる映像をそこに出力することはできません。

となると、それをなんとかPCに取り込んだりする機器が必要となります。

現状お手頃(携帯を買うより安いというレベルとしておこう)？な機材として

• 単体で配信できる機材 @ Cerevo LiveShell (2.6万)
• Firewireに変換 @ ADVC-55,ADVC-100,ADVC-110 (中古6千〜 新品1.7万くらい)
• USB2.0に変換 @ MonsterX Live (1.6万くらい)
• Firewireが出力できるビデオカメラ @ DVテープタイプのビデオカメラ（中古1万〜）

あたりになるかなと思います。
どれも一長一短があって、これというおすすめできないのですが、FirewireのタイプだとほぼMac限定（Windowsだと内蔵してるのが少ない）になりますし、USB2.0に変換のタイプだと現状Windowsしかドライバ（Mac対応は絶賛開発中のようですが）がありません。
あと、専用にDVのビデオカメラ買ってもいいんですが、リスク軽減で録画しておいて、配信失敗してたらあとでアップするという観点からはあまりおすすめできません。 miniDVのテープでは60分程度となるため、勉強会では確実にテープチェンジが必要になるからです。
で、もろもろ考えると個人的にはLiveShellをおすすめします。金額的に高くついてるように見えるのですが、設定さえしてしまえばつなげてほいと単体で配信できるというのが非常に楽ですし、せっかくの勉強会参加して自分のPCが配信してるので使えない状態なのも悲しいです。わからないことを検索したりツィッター見たりしたいし。
ただ、LiveShellは結構曲者で、ネットワーク接続するのに音声カプラーな感じで設定したりするのと繋がらない場合なんで？？となりやすく、慣れるまで面倒です。
このあたりのノウハウは実際にやってみないと説明がつかない所が多いですが、機材選定はこんな感じですね。
あとは音声がらみとか色々あることはあるんですが、それはまた別の機会に。
なんだかんだで上記に書いた４パターン全部なぜか持ってたりするので、機会があればお貸しすることもできるかもです。
とりあえず、自分にあった勉強会参加しつつ、配信をするというスタイル模索するしかないです。

Perfumeのモーションデータを地図上に置いてみた

http://www.perfume-global.com/ で配布されてるBVHとSOUNDデータで何かできないかとやってみた。

できたもの

Perfume Maps
http://wakasa.org/project/perfumemaps/

※いきなり音が出るよ。
※Chrome推奨。限定はしないけどChromeで見て欲しい。音量に応じて動画のサイズが変わるのはChromeだけ。IEは動かないのは仕様。
※CPUすごく使うよ。ファン回るよ。
※地図のズームアウトはマウスホイールで残してあるよ。点線を引きでみたりするとき用に。
※読み込むたびに動画や場所が変わるよ。場所Perfumeがコンサートで使ったことある会場にしてるよ。

何がしたいの？って聞かれたら、そこに地図などのAPIがあるからさ。としか言えません。

使ったAPI

• Web Audio API (Chrome) or Audio (FireFox)
• Google Maps API
  + maps.stamen.com Data By OpenStreetMaps
• Google Geocoding API
• Youtube Player API

あとはjQuery使ったりjsで簡易BVHデータ解析とかもろもろ組み込んでます。
iPhone対応は最初考えたけど疲れてやめたよ。すいません。

開発を CoffeeScript でやってみました。

触ったこともありません。いきなり作つくるものがコレなのか？初めてなのに。
そもそもWebAudioAPIなんていうハイテクなAPIも触れたこともありませんがね。
厳しい戦いだった・・。

とりあえず、CoffeeScriptをそれなりに触ってみましたが、インデントもコードなので、

・人のソースをコピペで組み込む手抜きはダメ。インデントきっちりやってね。

・エディタでコメントアウトして戻したらスペース入ってエラーってひどいよ・・。

とか悲しい事が多すぎました。

便利なんだけどね。

紆余曲折があって最初に考えてたものとはまったく別のコンテンツになったので、基本コードはスパゲティ状態です。

そしてAPIが多すぎてロードタイミングとかきっちり設計してないのでたまに動きません。

そのときはキャッシュに貯めてリロードです（恥

内容に関しては気分が乗ったら解説することにします。ハイ。