2012
CoffeeScriptをサーバ上で実装する
以前(CoffeeScriptを使ってみた)で使ってみて、早くなりそうだったので実際に使ってみることに。
サーバ上で実装する場合、Node.jsをインストールする必要があるかと思っていたがライブラリでコンパイルできるらしい。試してみた。
以下のトップから最新版をダウンロード。extrasフォルダの中のcoffee-script.jsを使う。
以下のように書けばMenu.coffeeをjsに変換してくれた。もちろんロードに時間がかかるので、開発のみこの方法で行い、本番は事前に変換してやればいい。
<script type="text/coffeescript" src="Menu.coffee"></script> <script type="text/javascript" src="coffee-script.js"></script>
■参考記事
JavaScriptをシンプルに書けるCoffeeScript使ってみた
もし、ライブラリが競合したりして使えない場合は、サーバにNodeを入れてもいいし、ローカルでバッチで変換してアップしてもいいが、以下のページ上で書きながらコピペしてもいいと思う。
js2coffee.js
js⇒coffeeの逆変換もしてくれる。最初は一気にcoffeeで書いて、細かい修正はjsでやりながらつくっていくのがいいかもしれない。
■参考記事
既存のコードをCoffeeScriptで書いたらどうなるか「Js2coffee」
coffeescript – を淹れるための最低限文化的な環境
ちなみに、本筋とはそれるが、coffee関連でこんなのを見つけたのでメモ。
圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場
2012
javascriptで動く物理エンジンbox2dweb・Box2D
最近は、canvasでデモなどをつくることが多く、よりリッチなモノをつくりたい欲求が高まりつつある。
そこでより現実世界を表現するのに役立つ物理エンジンを調べてみた。
調べてみると、以下の二つのライブラリが見つかった。
どちらもAS3のBox2Dが元になっているということだ。
まず、box2dwebは以下で紹介されていた。あまり国内の記事はなさそう。
ゲームでも使えそうなJavaScriptで作られた物理エンジン「box2dweb」
Box2Dは以下の記事が参考になった。
一つ目の記事はソースの解説もあり参考になった。二つ目の記事のgoogleの例は見たことがあった。
googleやMSでも使われているということで有名みたい。また、以下のような参考書も出ている。
とりあえず、どちらもデモをつくるくらいはしてみようかな。
その他参考記事
2012
iOS5.1で実機デバッグするにはXcode4.3が必要
Xcode4.2ではiOS5.1でデバッグができない
最近は、めっきりスマホWebアプリが開発の中心になり、ネイティブアプリのデバッグを行っていなかった。
久しぶりにXcodeで実機デバッグしようとしたら、デバイスが検知されない。
よく見ると、iOS5.1はXcode4.3以上以上が必要らしい。
ということで、iOS Dev CenterのDownloadへいき、DownloadをクリックしてApp storeでXcode4.3をインストール。
しばらくすると、インストール済みになり完了。
しかし、このままだと4.2のままなので、一度Xcodeを閉じて「アプリケーション」フォルダからXcodeを選択して起動。
するとダイアログが出てきて、それに従っていくと4.3にアップグレードしてくれる。
Xcodeのアップデートが通知されない
「ソフトウェアアップデート」やApp storeの「アップデート」に出てくれないのでわかりにくく、注意が必要。
以下が参考になった。
2012
CoffeeScriptを使ってみた
javascriptがRubyライクにかけて効率がよくなるらしいのでやってみた。
今回はドットインストールの以下のレッスンを参考にやってみた。
さっと体感するには公式サイトのTRY COFFEESCRIPTが非常に便利だった。
CoffeeScriptを書くと、即時的にjavascriptに変換してくれて気持ちいい。
ほんの1,2時間で基本的なことを学ぶことが出来た。
以下記事も参考になる。
行ったことを以下にメモしておく。
▽基本
・varは不要
・行末のセミコロンは不要
・波括弧はインデントで表現
・丸括弧は曖昧性がない場合は省略可能
・配列 [1..5]⇒[1,2,3,4,5]
▽if文
・比較演算子：A<x<B
・is (===)
・isnt (!==)
・not (!)
・and (&&)
・or (||)
後置のifも利用できる
▽存在チェックの演算子
alert “ok!” if name?
↓
if (typeof name !== “undefined” && name !== null) { alert(“ok!”); }
▽for文
for 変数 in 範囲：for i in [0..3] alert i
▽関数
・functionを->で代用
・returnは要らずに返り値が与えられる。⇒最後の式がreturされる。
hello =(s = “初期値”) -> alert “hello,#{s}” hello(“tom”)
↓
var hello;
hello = function(s) { if (s == null) { s = “初期値”; } return alert(“hello,” + s); };
hello(“tom”);
▽インストール
・Node.jsのインストール
・ターミナルで以下を実行(参照：CoffeeScript/installation)
sudo npm install -g coffee-script
▽コンパイル ターミナルで以下を実行。
coffee -c helloworld.coffee
helloworld.jsが生成される。
2012
SassよりもCSSコーディングを効率化できるStylus
StylusはCSSフレームワークの一つでSassと同じレイヤーらしい。Sassよりも省略してかけるみたいだ。ただ、その分エディタが対応していないと見にくい。 どうやらVimはプラグインで対応するみたいなのでVimを使ったほうが良さそうだ。
また、StykusはNode.jsとの相性が良いらしい。
Stylusの概要については以下が参考になった。
Node.jsアプリでCSSテンプレートにStylusを使う
チュートリアルは以下を参考に。
@import機能について詳しく書かれていた。
Stylus で複数ファイルを一つの CSS にまとめて出力する
より実践的なチュートリアル
2012
CSSを効率化させるフレームワークSass
CSSの記述って果てしなく面倒に感じていた。それを効率化してくれるフレームワークがある。
いくつか存在しているが、スタンダードなSassを紹介する。
Sassを使うことによってネスト構造でかけたり、変数や演算を使えるようになる。
また、Sassを使って書いても最終的には普通のCSSとして書き出されるので、分業のプロジェクトでも使うことが出来る。
以下のチュートリアルが一番すっきりしていて見やすかった。
もう少し詳しく勉強したいという方は以下がおすすめ。
その他、チュートリアル的な参考リンクを載せておく。
2012
要素ガタガタふるわせることができるjQueryプラグインRumble
よくサイトで画像などが、ガタガタ震えているのを見ますね。これどうやっているんだろうと、調べるとjQueryプラグインがありました。
こちらのサイトでも実装されています。
（左上のロゴがhoverで震え出します）
そのjQuerryプラグインこちら、
あらゆるガタガタに対応出来るみたい。近いうちにどれかのサイトで実装しようと思います。
以下で詳しく紹介していました。
[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble
2012
Adobe AIRでiPhone撮影動画を再生
Adobe AIRで、iPhoneで撮影した動画を再生したら出来なかった件。
Androidアプリにpublishしたときは再生出来たのに、iPhoneアプリにpublishしたら再生されなかった。
どうやらm4a(quick timeの形式らしい)はそのままでは再生できず、mp3にする必要があるみたい。
変換はiTunesで出来た。
・「詳細」メニュー⇒「MP3バージョンを作成」でMP3ファイル
・ファイルの場所は新しくできたファイルを選択した上で「ファイル」メニュー⇒「Finderで表示」
ただし、mac版だと、
環境設定⇒読み込み設定（インポート設定）を変更する必要がある
■参考リンク
2012
iPhoneアプリjsライブラリWINKTOOLKIT
iPhoneアプリやスマホWebアプリをつくる際に便利そうなjsライブラリがあった。
ページ遷移などはよくあるが、これには3Dのアニメーションやカバーフローなんかも用意されている。
ほとんどjs中心に書いてあった。
■公式サイト
WINKTOOLKIT
■デモ
http://www.winktoolkit.org/documentation/wink/
■参考サイト
http://kachibito.net/software/wink-toolkit-13.html
2012
FlashBuilderのショートカット
最近MacでAS3を書くとき、FlashBuilderを使い始めたのでショートカットを探してみた。
以下がよくまとまっていたので、こちらではまとめないことにする。