タグ: javascript

JavaScriptの理解に役立つドキュメント

恥ずかしいことに、何となくやりたいことは出来るけど、JavaScriptの構造をよく分かっていないという状態だった。次のステップに進むにあたり、Mozilla Developer NetworkのJavaScriptに関するドキュメントがJavaScriptの基礎を理解するのにとても役に立った。

特に、以下のドキュメントを読んでよかったな、と感じた。(読んだ順)

Mongooseでフィールドのデフォルト値を現在時刻にする

公式ドキュメントのdefaultsのページに書いてあった。

以下のように書けばドキュメント作成時のデフォルト値を現在時刻に指定できる。

new Schema({
	date: { type: Date, default: Date.now }
})

次のように書いていて、データベースに追加するたびに同じ時刻が書き込まれるので不思議に思っていた。

new Schema({
	date: { type: Date, default: Date.now() }
})
// あるいは
new Schema({
	date: { type: Date, default: (new Date()).getTime() }
})

上記のように書いてしまうと、スキーマを作成した時刻が毎回書き込まれてしまう。defaultには、値も渡せるし、関数も渡せるということをよく理解していなかったためにミスした。

[jQuery対応] textareaのキャレット座標(XY座標)を取得するjavascriptライブラリを作った

textareaに表示されているキャレット位置(カーソル位置)の画面上のXY座標(ページの一番左上からの位置)を取得したいと思って検索したけれど、キャレットの文字列内の位置(何文字目)を取得するライブラリばかりで、画面上からの位置を取得できるライブラリがなかった。なので、テキストエリアを指定するだけで簡単に現在のキャレット位置の座標が分かるライブラリをつくった。サジェストを表示するWebアプリケーション(EclipseのようなIDEとか？)を作りたい時に便利。jQueryがなくても使えるし、jQueryがあっても使える。

githubにアップロードしているので、そちらも参照。
http://akiroom.github.com/caretposition.js/

以下、使い方の解説。

続きを読む [jQuery対応] textareaのキャレット座標(XY座標)を取得するjavascriptライブラリを作った

CSS3 Animations を適用するとiOSでぼやける

enchant.jsでSpriteやLabelに対してjQueryを使ってエフェクトをかける方法についてはenchant.js + jQuery でエフェクトをつけるに書いた。使い慣れたjavascriptの機能を使ってエフェクトをかけられるのは魅力的だが、Spriteに対してCSS3の機能であるAnimationsを適用すると、iOS(iPhone,iPad等) の Mobile Safariで表示した際に、ピンボケというか過剰なアンチエイリアスというか、ぼやけた感じになってしまった。おかしいな、と思って実験したら、特定の条件下でAnimationsを適用した場合にぼやけてレンダリングされることが分かった。

特定の条件とは、

  • div要素に対してCSSでbackground-imageを適用して画像を表示している(enchant.jsのEntity)
  • 複数の画像にCSS3 Animationsを適用している
  • どれかの要素でCSS3のアニメーションが継続中

といった場合だ。そこで、実験をしてみた。
※結論だけ知りたい人はこちらをクリック

続きを読む CSS3 Animations を適用するとiOSでぼやける

enchant.js + jQuery でエフェクトをつける

javascriptのゲーム用ライブラリenchant.jsがステキすぎてハマりそうな感じではあるのだけれど、フェードイン/フェードアウトとか移動とかそういったエフェクトが見当たらず、フレームごとの処理が必要になりそうなのが面倒だった。

jQueryのEffectsが使えたらフェードインしたりスライドさせたり何かと楽でいいんじゃないかと思ったので、連携方法を模索。コード見ていたらdiv要素を持っているクラスは_elementという変数で保持しているようなので、その変数を返す関数をprototypeで拡張してみた。

続きを読む enchant.js + jQuery でエフェクトをつける

enchant.js リンク集

参考にしたWebページ

github
https://github.com/wise9/enchant.js/wiki

公式サイト
http://enchantjs.com/

公式サイト内のサンプル
http://enchantjs.com/ja/sample.html
これを見ればだいたいどうやれば動くかすぐ分かる

公式ドキュメント
http://wise9.github.com/enchant.js/doc/

開発者によるスライド
http://enchant.heroku.com/
class hierarchyが載ってるのが大変ありがたい

公式が充実しているので大抵のことがまかなえる。ドキュメントをよく見て分からないところは、enchant.js(enchant.min.jsじゃない方)のソースコードを読めば日本語のコメントがついていて大変分かりやすい。

enchant.jsでHTML要素を追加する

Javascriptでゲームをつくるためのライブラリ enchant.js を使っていた。enchant.jsではSpriteやLabelといった表示内容はHTMLのdiv要素で構成される。

このdiv要素に対してHTMLのタグを追加してゲームっぽくない要素を追加したい時どうすればいいんだろうと、enchant.jsのソースを読んでいたら、そもそもenchant.Labelのtext属性はLabelを構成するdivのinnerHTMLを設定するものだった。そのため、以下のように書けば簡単に画面内にHTMLで構成した要素を登場させられる。

var scene = new Scene();
var myhtml = new Label(300,120);
myhtml.text = '<div style="width:100%; height:120px;">これはテストです。</div>';
scene.addChild(myhtml);
game.pushScene(scene);