Titanium Mobileでconsole.logを使う
Titanium Mobileにはconsole.logが無いらしい。ぐぐってみたらTi.API.info()を使えばいいみたい。
var console = {
log: function(str) { return Ti.API.info(str); }
};
Ti.API.info()を直で使うべきなのかもなぁ。
Titanium Mobileにはconsole.logが無いらしい。ぐぐってみたらTi.API.info()を使えばいいみたい。
var console = {
log: function(str) { return Ti.API.info(str); }
};
Ti.API.info()を直で使うべきなのかもなぁ。
MDNのCanvasチュートリアルを参考にやってみた。
基本となるHTML：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas1" width="100" height="100"></canvas>
<script type="text/javascript" src="draw_figures.js"></script>
</body>
</html>
以降、draw_figures.jsを変更していったと仮定する。
原点は矩形の左上で、右方向がxの正方向、下方向がyの正方向になる。コンピュータの座標系としては一般的だと思われる（余談だけど、Mac OS XのCocoaは左下が原点なので上下が逆転していたりするので、若干面倒くさい）
0------ +x | | +y
var canvas = document.getElementById("canvas1");
if (canvas.getContext) {
// 2D画像のコンテキストを取得
var ctx = canvas.getContext("2d")
// 塗りつぶしの色のRGB値を(100,100,100)（灰色）に指定
ctx.fillStyle = "rgb(100,100,100)";
// 原点(0,0)を基準として、そこから+x方向に10px、+y方向に20pxをとった矩形領域を塗りつぶす
ctx.fillRect(0,0,10,20);
}
色の指定方法にはCSS3の色の指定方法がそのまま使える。
ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)"; // アルファ値を1にセット（透過しない）
var canvas = document.getElementById("canvas1");
if (canvas.getContext) {
// 2D画像のコンテキストを取得
var ctx = canvas.getContext("2d")
// 直線を描画する際の色を指定
ctx.strokeStyle = "rgb(100,0,0)";
// パスの指定を開始
ctx.beginPath();
// (10,20) から(10,30)までパスを追加
ctx.moveTo(10,20);
ctx.lineTo(10,30);
// (10,30)から(20,30)までパスを追加
ctx.lineTo(20,30)
// パスを直線で描画
ctx.stroke();
}
moveToではパスの追加をせずに基準の点を移動するだけで、lineToでは直前の基準の点から指定された点までの間のパスを追加しつつ、基準の点を移動する。
WEB+DB Press No.60のjQueryに関する記事がとても面白かった。で、jQueryで提供されているextendの使い方を今になって理解してきたのでメモっておく。
jQuery.extendはRubyでいうところのHash#merge!だった。
var foo = { a: 1 }
jQuery.extend(foo, { b: 2 })
//=> { a: 1, b: 2 }
foo
//=>{ a: 1, b: 2 }
なので、次のようにするとハッシュ引数のデフォルト値の設定とかができて便利（Hash#reverse_merge的なこと）。
function foo(args) {
args = jQuery.extend({ a: 1, b:2 }, args);
:
}
ついでに、jQuery.extendはオブジェクトのコピーにも使える。ちゃんと見てないけどたぶん浅い。
var foo = { a: 1 }
var bar = jQuery.extend({}, foo)
//=> { a: 1 }
ただしfooはFooのインスタンスだけど、barはObject直下のインスタンス（？）なのでFooをプロトタイプに持たないので要注意（用語がわからないけどこれで合ってるのかな）。
最近jQuery Mobileを触ることが多く、ちょこちょこハマりどころがあったのでメモしておく。
jQuery Mobileはリンクを遷移したときにハッシュ（URLの#以降の文字列）ごとにdata-role="page"な要素をAjaxで取得して既存のDOMツリーに追加する。
このため検索結果のページを行き来した場合などに、ハッシュが異なるにも関わらず元になるHTMLのテンプレートが同一なためにid属性値が重複してDOMツリー上に出現することがある。 こうなるとid属性値ではユニークな要素を指定することができず、それを前提としたDOM操作がまともに動作しなくなる。 そういうわけで、jQuery Mobileではid属性を使うことが結構鬼門だったりする。
代替手段としては、現在アクティブになっているpageのclass属性にui-page-activeが設定されることを利用して、これとユニークで指定したい要素に付与したclass属性値とのペアで指定する方法がある。
HTML：
<div data-role="page">
<div data-role="content">
<p class="hello">I'm unique in this page!</p>
</div>
</div>
jQuery：
var p = $(".ui-page-active .hello:first"); // 上述のp要素のjQueryオブジェクトを取得
console.log(p.html); // => I'm unique in this page!
p[0]; // => HTMLParagraphElement（p要素のDOMオブジェクトを取得）
こんなような、ユニークの要素を指定して処理をすることがよくあるんだけど、毎回毎回ui-page-activeとか書くのは面倒くさい。結構大きなハマりポイントだと思うけど、なにか簡単なAPIとかないのかな？
Javascriptを触る機会があったのでちょっと試してみた。郷に入っては郷に従えというけれどJavascriptの流儀やAPIがわからなかったので、とりあえずArrayにeachとmap、eachWithObjectをくっつけてみた。
// [1,2,3].eachWithIndex(function(n,i) { console.log("#" + i + " = " + n)})
Array.prototype.eachWithIndex = function(func) {
var length = this.length;
for (var i = 0; i < length; i++) {
func.apply(this, [this[i], i]);
}
return this;
}
// [1,2,3].each(function(n) { console.log(n) })
Array.prototype.each = function(func) {
return this.eachWithIndex(function(x,i) {
func.apply(this, [x]);
})
}
// [1,2,3].map(function(n) { return n * 2; });
Array.prototype.map = function(func) {
var result = new Array();
this.eachWithIndex(function(x,i) {
result.push(func.apply(this, [x]));
});
return result;
}
// [1,2,3].eachWithObject({}, function(s, n) { s[n.toString] = n * 100 });
Array.prototype.eachWithObject = function(obj, func) {
this.eachWithIndex(function(x,i) {
func.apply(this, [obj, x]);
});
return obj;
}
func.applyは関数オブジェクトfuncの処理を走らせるもので、Proc#callみたいなもの。第1引数にはfunc内でthisが参照するオブジェクトを、第2引数にはfuncの引数を配列で与えてやる。
引数は参照渡しされる。
JavascriptのリファレンスはMozillaのとこが詳しい。ただしJavascriptの実行エンジンの種類やバージョンで差異があるので要注意。ここらへんの一覧ってないのかな？
Javascriptはオブジェクト指向言語のなかでもプロトタイプベース（もしくはインスタンスベース）と呼ばれるものに区分されるらしい。間違ってるだろうけど、インスタンスにメソッドを生やして行くような感覚がある。
2ch Starは、2ちゃんねるのレスにはてなスターを付けるためのGreasemonkeyスクリプトです。version 0.2を書きましたので公開してみます：2ch Star v0.2
version 0.1とは以下の点が異なります。
インストールする際は上記リンクからjsファイルをダウンロードし、’2chStar.user.js’という風にリネームしてからGreasemonkeyをインストール済みのFirefoxにD&Dしてください。
注意点としては、
等があります（原因はよくわかりません。posが未定義ってなんだ？）。自己責任で使用してください。