Bacon.js でcanvasにお絵かき (マルチタッチ対応)

sample

今朝、TechCrunchの記事 を読んだ。

JavaScriptは今, 豚から豹に変身中: 最先端の言語改良努力をMLOC.jsカンファレンスに見る

> さて、メンテナンス性の良いコードを書く最良の方法は、なるべく少なく書くことだ。bacon.jsのようなライブラリやElm言語は、複雑なデータ依存性を簡潔に表現し、デベロッパがデータの形をライブラリに合わせる努力をなくす。その結果、コードの量が少なくなり、メンテナンス性の良い高品質なアプリケーションになる。

bacon.js ってなんぞやと思ってgithubみてみたら、これは良い物臭がぷんぷんしたので調べてみた。 Functional reactive programming(FRP)という概念をjsでやろうとしてる流れらしい。

FRPの概念的な部分はまだちゃんと理解してないんだけど、要は、時系列に発生するデータを、関数型っぽく扱おうということっぽい?。
underscoreとかは、データを関数型っぽく扱えるようにしているけど、それのイベントへの拡張、みたいな感じなのかな。

以下の記事は、.NETの話なんだけど、イメージ的には参考になった。

Reactive Extensionsの概要と利用方法

イベントドリブンなプログラムの状態管理は、気をつけて書かないとえらいことになるので、そこらへんをうまく書けそうだと思って、F1観戦しつつ、canvasのお絵かきサンプルを作ってみた。

マルチタッチお絵かき ( ソース on github )

ポイントは、canvas上で、マウスを動かした時の座標の一連の動きを、ストリームとして表現しているところ。
何がいいかというと、追加でタッチでも描画できるようにしたいと思った時に、タッチから一連の座標のストリームを生成するコードを書けば、描画のコードと切り離して書ける(サンプルでは両方対応してる)

オプションの状態の扱い方は、これでいいのかちょっとわからなかったけど、すごく可能性を感じて楽しかった。

もっと色々いじってみたい。何かきっとトレードオフもあると思うので、そこらへん把握してから実戦投入したい。

ていうか、人生で始めてドローツールみたいなの作った。。

“私はすぐにアプリケーション アーキテクチャグループがマクロについて私よりも知らないということがわかった。少なくとも私は、人々がExcelマクロで実際何をやっているのか—毎日スプレッドシートを再計算するとか、データを何かのパターンに従って整理するとかいったようなこと—を把握するために、何人かのマクロ開発者や古参のExcelユーザたちと話をしていた。しかしアプリケーション アーキテクチャ グループはマクロを単なる学術的な課題と思っており、人々が書きたいと思っているようなマクロの例を実際に挙げることができなかった。答えに窮したあげく、一人が、Excelには下線と二重下線があるんだから、誰か三重下線を引くためのマクロを書きたいと思うかもしれない、と言った。ああ確かに。それ以降私は可能な限り外交的に、彼らを無視することにした。”

Windows8 アプリ ListView は150万pxまでしか表示できない

HTML/JS でWindows8アプリを作る場合、 一覧画面などでよくあるグリッド状の表示を使う場合、ListView というコントロールを使うとになるが、これは、内容を横幅150万pxまでしか表示できない。

要素に500pxの幅を使い、縦3列のグリッドにすると、9000件ぐらいしか表示できないので注意が必要

【ついたちの語源・由来】

ついたちは、「ふつか(二日)」「みっか(三日)」などとは異なり、「か(日)」を用いない特殊な語である。
平安や奈良時代には、「一日」は「ひとひ」と呼ばれ、「ひとひ、ふつか、みか…」と数えられた。
しかし、「一日」は「ある日」「二四時間」などの意味も含み、混同しやすいことから、「ついたち」に呼び方を変えたようである。
ついたちの語源は、「つきたち(月立ち)」の音変化と考えられる。
「月立ち」の「立ち」は、「出現する」「現れる」といった意味で、陰暦では月の満ち欠けによって月日を数え、新月が現れる日がその月の最初の日にあたることに由来する。
ついたちの語源は「月立ち」の意味でほぼ間違いないが、動詞や形容詞では「キ」や「ギ」がイ音便化された例があるのに対し、名詞「つき(月)」の「き」がイ音便化された例はなく、「つきたち」という語の実例もみとめられていないため疑問が残る。
また、干支の十二支に関する逸話で、13番目にたどり着いたイタチを神様がかわいそうに思い、毎月の最初の日を「ついたち」と呼ぶようにしたといったものがあるが、逸話であって語源とは関係ない。
そもそも、十二支に動物が割り振られた由来も、このような逸話からではなく、十二支に合わせて作られたものが逸話である。

新月は、本来は朔の後に初めて見えるのことである。陰暦二日までは月はほとんど見えないので、陰暦三日ごろの月(三日月)が新月となる。初月(しょげつ)もこの新月と同じ意味である。「みかづき」の訓もある(ひ)も同様である。精密な天体観測がなされる前は、この新月の日を月初としていた。「ついたち」も本来は、この新しく見える月を意味した。この伝統的な意味での新月と区別するために、朔のことを暗月(あんげつ)と呼ぶことがある。”

Creating shortcuts

bind() is also helpful in cases where you want to create a shortcut to a function which requires a specific this value.

Take Array.prototype.slice, for example, which you want to use for converting an array-like object to a real array. You could create a shortcut like this:

1
2
3
4
5
var slice = Array.prototype.slice;
 
// ...
 
slice.call(arguments);

With bind(), this can be simplified. In the following piece of code, slice is a bound function to the call() function of Function.prototype, with the this value set to the slice() function of Array.prototype. This means that additional call() calls can be eliminated:

1
2
3
4
5
6
var unboundSlice = Array.prototype.slice; // same as "slice" in the previous example
var slice = Function.prototype.call.bind(unboundSlice);
 
// ...
 
slice(arguments);
wacul:

Snapjoy
洗練されたUIと機能設計で、ストレスなく使える写真の一括管理ツール。
PCからのアップロードはもちろんのこと、InstagramやFlickrといった他サービスからの画像取り込みにも対応している。

wacul:

Snapjoy

洗練されたUIと機能設計で、
ストレスなく使える写真の一括管理ツール。

PCからのアップロードはもちろんのこと、InstagramやFlickrといった他サービスからの画像取り込みにも対応している。