JavaScriptコミュのJavaScriptでこんなの作った

みんな質問系ばかりなのでこういうのもたまには。

とりあえずCanvasタグの制御のテストでこんな物をだいぶ前に作ったので公開。

http://ymo.kohri.net/NPK/works/canvas_test.html
http://ymo.kohri.net/NPK/works/canvas_test2.html

コメント(41)

最初
全て
最新の40件

前

[2] mixiユーザー 03月05日 15:42

canvasを使っているようですので、Opera、Firefox以外のブラウザではまず動作しないかと思います。

[4] mixiユーザー 03月05日 16:02

＞0:爺さん

あれ？たしかに、前に見た覚えがある…。
これを発展させれば、打ち上げ花火をstringデータだけで作成できたりすると思うけど、
誰か試してくれないかなぁ…、なんて思ったりしてます。
（いかにも重そうなんで、なかなか試す気になれないんですよｗ）

OperaでもCanvasがサポートされてたんですね。
SafariでSVGをサポートしてくれれば、
単純なVectorGraphicとCanvasの使い分けがし易くなるのになぁ…。

[5] mixiユーザー 03月05日 21:01

Safariだとcanvasタグ内の文字Not support canvas.が表示されちゃいますね...。Safari 2のcanvasは閉じタグなしでもOKという仕様がまずそう...

[6] mixiユーザー 03月05日 22:03

>>5: 古籏一浩さん

もしかして↓これの著者の方ですか？
http://www.cbook24.com/bm_detail.asp?sku=9784861004315

[7] mixiユーザー 03月05日 22:21

6>
　はい、そうです。

[8] mixiユーザー 03月06日 07:53

4>

無いなら作るこれが基本です(笑)

見たことがあるならもじら組関連かもしれません。

6>

Ajax系の本て読んだこと無いんですよね。
でも前々から思ってるんですけど基本、タダのJavascriptじゃないですか?
一応試しでそれっぽいの何個か書いてみましたけど。

[10] mixiユーザー 03月06日 23:01

>>7: 古籏一浩さん

著書にはかなりお世話になっております。
調べやすく、いい感じですね。

現在、そのAjaxライブラリリファレンスと
http://www.amazon.co.jp/gp/product/images/4839920354/ref=dp_image_0/249-2264734-8628314?ie=UTF8&n=465392&s=books
↑こちらのリファレンスを参考にいろいろ作ってます。

やりたい内容によって変わってくるかもしれませんが
古籏さん的にはAjaxライブラリってどれがお勧めですか？

[11] mixiユーザー 03月06日 23:23

>8: 爺様
　まあ、JavaScriptで非同期通信を行えばAjaxといった具合で基本はDynamic HTMLなので。古い技術が見直された、といった感じです。ただ、実務でやると結構シビアな面もあります。

>9:雉寅（とら）様
　ブラウザに対応したもの、というのはどんな感じなものでしょう？（できれば直接メールしてもらった方がよいかな、と）

>10:decoy
　おすすめのAjaxライブラリですが、どれが生き残るかといった選択肢になってしまうでしょう。残る確率が高いのはprototype.js, Yahoo UI Library, Adobe Spryです。jQueryは微妙なところです。
　ただ、実務だとライセンスなどの関係でprototype.jsになってしまったりすることもあり縛られることがあります。高機能で何でもかんでもというのであればYahoo UI Libraryですね。

[12] mixiユーザー 03月07日 10:03

>>11: 古籏一浩さん

大変参考になりました。
ご教授頂き有難う御座います。

[13] mixiユーザー 03月15日 17:16

>>11 古籏一浩さん
(私HNにさん付けするの嫌いなんですよ。流れ的につけておいてますが。まぁ本名かもしれないし、ってことで。)

確かに実務レベルでやると結構シビアですね。
出来れば回避したいところです。

とはいえ、デザイナーが出来ないとか抜かしやがるので結局自分で似たようなコードを書いた事を過去から顧みるにやっぱりGoogleMapの注目のせいで急激にもてはやされた技術、って感が否めないんですよね私。

[14] mixiユーザー 03月16日 21:45

私はHNと言うのが、CPUユニットとかMMCカードみたいで嫌いなんですけどね(^^;

[15] mixiユーザー 03月23日 13:49

そういえば、canvas使ってRayTracer作ってるとこがありましたよ。

http://labs.flog.co.nz/raytracer/ （非IEonly）

高画質にしたときのレンダリングは遅いけど、
Vueとかの3Dソフトのレンダリング速度も同じぐらい時間掛かるから、
それ以上の速度を求めちゃいけないのかも知れないですね。

SVGのBatikみたいにサーバ側で画像ファイルに変換できれば
オンラインのpaintソフト（!= draw）も作れるんですけどねぇ。
（それ以前に、IEにのる見込みのない技術が生き延びるかどうか微妙だけど。）

[16] mixiユーザー 05月02日 14:57

javascript 1.7のジェネレータを使って
ちょっとおもしろげなことしてみました。

ひとつの関数のなかに
sleepや条件を満たすまでのwaitなどを
実現しました。

ジェネレータの使い方のサンプルとして
どうぞ。

http://hiroki-daichi.info/coroutine.html
(firefox2.0のみ)

[17] mixiユーザー 05月02日 18:39

> 16: ひろきのだいちさん

yieldですね。
これがJavaScriptに乗っかったのは大きいですよね。
タイマー使って値を監視すると、どうしてもソースが汚くなりますからねぇ。

ただ、ジェネレータが必要なケースはこういったsleepとかぐらいで、
それ以外は「あれば便利かな？」って程度だと思うから、
JavaScript1.7では、Threadを組み込んでくれた方がありがたかったんですけどねｗ

＃ JavaScriptは言語的な寿命が近づいてきてるなぁ…って思うのは私だけ？

[18] mixiユーザー 08月22日 00:11

http://tate.undef.jp/qi2j/qi2.html

IRCクライアントです。
通信と文字コード変換だけFlashを使いました。

まだまだ枯れてないので不具合などあればお知らせください。

[21] mixiユーザー 03月06日 09:19

試験的に、Yahoo!ショッピングのiGoogleガジェットを作りました。
人気商品などをリストして表示するものです。iGoogleに登録すると、▼ボタン＞設定を編集で検索条件を絞れます。

http://uncorrelated.no-ip.com/igoogle/yshopping.html

なお、GoogleガジェットはHTML、JavaScript、XML/DOMの知識で作れます。
Ajaxなどのラッパー関数を使ったりすると、通常Ajaxでは見られない他のサイトの情報を、Google経由で参照できるので応用範囲は広いかも知れません。

同様の手法で、GIGAZINEのRSSを表示するガジェットも作成しました。

http://uncorrelated.no-ip.com/igoogle/gigazine.html

[28] mixiユーザー 06月13日 00:58

Google Reader に触発されて、コナミコマンド.js なるものを作ってしまいました。

完全にネタですね、これは。

http://www.otchy.com/lab/konamicommand.html

[29] mixiユーザー 06月13日 12:51

pixiv(http://www.pixiv.net/)の画像をzipでダウンロードするサービスを作ってみた

http://pixiv.schaf.jp/

[30] mixiユーザー 06月22日 20:05

外部リンクを消すブックマークレットです。
アダルトサイトの広告消しなどや、正しいリンク先を探すときなどに？お使いください（笑）

http://blog.24th.jp/?eid=903168

[31] mixiユーザー 06月24日 01:27

くだらないスクリプトで恐縮ですが、羞恥心ブログパーツを作ってみました。
正解が選べない、という、クイズゲームとして成立しないブログパーツです

http://yaplog.jp/nakano-neko/archive/14

[33] mixiユーザー 06月24日 17:32

Firefox3でirvineの拡張が使えなくなったので作りました。

ブックマークレットですが、ページ内の画像とリンク先の画像を表示させて、大きさでフィルタリングしたり不要必要を切り替えたり（右クリック)して、ダウンロード用のURLのリストを作成します。

http://pons.cc/tech/javascript/article/%E7%94%BB%E5%83%8F%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E6%94%AF%E6%8F%B4%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88

[35] mixiユーザー 08月08日 13:31

http://link.hobby-site.com

『連想検索 3D』というサイトを作ってみました。

Amazonの情報を使って、関連する商品を次々と3D空間内に表現していく仕組みになっています（今後、ボチボチとバージョンアップしていきます）。

描画が重いので、なるべくパワーのあるPCで見てやってください。

[38] mixiユーザー 01月26日 21:41

http://imgsearch.selfip.com

『画像検索 3D』というサイトを作ってみました。

各種WebAPIを使って、関連する画像を次々と3D空間内に表現していく仕組みになっています。
以前公開した『連想検索 3D（ http://link.hobby-site.com ）』の仲間です。

コイツも描画が重いので、なるべくパワーのあるPCで見てやってください。

[39] mixiユーザー 07月08日 07:45

延々とジャグリングし続けるアニメーションを作ってみました。
http://murashi1124.hp.infoseek.co.jp/juggle.html?mode=r&n=5&m=10

小さくして画面の端にでも置いておくと、いい感じに集中力がそがれると思います。
「サイトスワップ」という、技を英数字で表す考え方を使っています。
サイトスワップの知識があれば、自分で考えた技をアニメーションさせることもできます。

ログインすると、残り17件のコメントが見れるよ