経路探索アルゴリズムの「ダイクストラ法」と「A*」をビジュアライズしてみた - てっく煮ブログ
as詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック を読んでいて、経路探索のアルゴリズムで A* が取り上げられていました。A* については、いろいろ検索して調べたりもしたのですが、やっぱり本に書いてあると理解しやすいですね。せっかくなので自分流に実装してビジュアライズしてみました。ダイクストラ法まずは A* の特別なケースでもあるダイクストラ法から見ていきます。クリックすると探索のシミュレーションが開始します。スタート地点(S)からゴール(G)への探索が始まります。色がついたところが「最短経路が決定した場所」です。スタート地点から少しずつ探索が完了していきます。半分ぐらい完了しました。まだまだ進みます。最後まで終わりました。最短経路を黒色矢印で表示しています。ダイクストラ法は、スタート地点から近いノード(=マス
神の書 Making Things Move! の続編、詳解ActionScript3.0アニメーション - てっく煮ブログ
書籍, as兼ねてから Flash 界隈で名著と言われ続けていた Making Things Move! の続編の日本語訳が O'REILLY から出版されています。献本いただきました。ありがとうございます。詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック作者: Keith Peters, 相川愛三出版社/メーカー: オライリージャパン発売日: 2010/01/25メディア: 大型本献本してもらっておいて宣伝するのもわざとらしい感じですが、お世辞抜きにすばらしい内容です。衝突判定、キャラクタの動作（追いかけたり、逃げたり、群れたり）、等角投影(2.5D)、経路探索といった高度な内容を ActionScript でどのように実現するかが書いてあります。後半では、Flash 10 の 3D 機能や新しい API、Pix
Skype Extension for Firefox と Security error" code: "1000 - てっく煮ブログ
JavaScriptいままで動いていた自作の JavaScript が Firefox でいつの間にか動かなくなる現象が発生したので調べてみた。エラーを見ると Security error" code: "1000 とある。ぐぐってみると、どうやら CSS の insertRule に失敗したときに発生するエラーのようだ。(参考： (solved) Javascriptのエラー: Security error” code: ”1000 | anobota)HTML の構造を見てみるとFirebug で HTML の構造を見てみると、見覚えのない JavaScript と CSS が追加されている。名前から判断するに、Skype と一緒にインストールされる Skype Extension for Firefox が動的に挿入するもののようだ。どこが悪かったのかで、改めて自分が書いたスクリプト
Google Maps API for Flash に追加された perspective map 機能と日本人テスターの存在 - てっく煮ブログ
GoogleMapsAPIFlash 用の Google Maps API に「perspective map」機能が追加されました。Google Earth のように地図を傾けたり、回転させたりできるようになりました。試してみるにはドキュメントの Google Maps API for Flash - 3D Maps に掲載されているサンプル Map3DSimple.html を見るのが分かりやすいでしょう。左上のアイコンを使って回転させたり、傾けたりできます。わたしも Google Maps API for Flash が出た当初に Google Maps をぐーるぐる - てっく煮ブログ というものを作ったりしましたが、これを公式に実現できるようになったわけです。公式ブログで発表されたサンプルアプリの半分が日本人のもの！今回の新機能、Google 公式ブログで発表された記事 Goog
はてブ受けしそうな記事を書いて、１ヶ月で約３万円を稼いだ顛末 - てっく煮ブログ
このブログでは今年の２月ぐらいから Google AdSense の広告を貼っていました。どれぐらい儲かるんだろうとワクワクしていたのですが、普通に記事を書いていても期待はずれな収入でした。そこで、はてなブックマークでウケそうな記事を集中的に公開して、ページビューを稼いでどれだけ広告収入が増えるか試してみることにしました。調査期間2009日5月10日〜5月末方針海外のデザイン系ブログを少し翻訳して転載しただけの記事を書くことはプライドが許しません。かといって即時性では有名ブログには勝てないので、「個人的には面白いのに世間ではあまり知られていないものを分かりやすく紹介する」という方向で売れ線を狙って書いてみることにしました。記事を書くに当たっては、次のようなことに気をつけてみました。注目を集めるためにタイトルは少し煽り気味にする一番伝えたいことがちゃんと伝わるよう、何度も見直す本題に関係ない
中国の町並みをドット絵で再現したE都市がすさまじい - てっく煮ブログ
中国の地図サイト「E都市」は一昔前の RPG のようにドット絵で中国の町並みを再現しています。描き込みの量もすごいし、再現されている範囲も広くて驚きました。たとえば 上海 はこんなの。もちろんドラッグで移動できます。少し拡大してみます。さらに拡大してみます。右下のビルの看板の文字が読めちゃってます。自分が見た範囲では全ての場所で地図がここまで拡大できました。すべてのズームレベルでしっかりと描き込んであるのが驚きです。Google Maps の衛星地図とも比較できます。衛星写真を45度ぐらい時計回りに回転すると、上のドット絵に近くなりますね。道の形や屋根の色まで忠実に再現されています。北京を旅する北京 の天安門広場〜紫禁城。天安門にズームイン。もちろん毛沢東の肖像画まで再現。オリンピックで話題になった鳥の巣スタジアムも再現されています。すぐ近くはビル街だったんですね。香港を旅する香港 の大量
履歴消去じゃ消えないエロサイトの隠れた痕跡に要注意 - てっく煮ブログ
色んなホームページを見ていると閲覧履歴が自動で保存されます。恥ずかしいページを見たあとには、他の人にばれてしまわないように、こっそり履歴を消している人もいることでしょう。通常、ブラウザには「履歴を削除する機能」が備わっていて、ブラウザの履歴を削除すればあなたの悪行の数々は消え去ってくれるように思えます。しかし、ブラウザからは消せない履歴が残っているのです…ブラウザからは消せない履歴それが Flash の Local Shared Object です。Local Shared Object は Flash 版の Cookie みたいなもので、Flash で一時的なデータを保存するときにはよく用いられるものです。Local Shared Object は次の場所に保存されています。OS場所Windows XPC:\Documents and Settings\ユーザ名\Application
フォント同士を交配させて新しいフォントを作る「genoTyp」が面白い - てっく煮ブログ
「この発想はなかった！」と驚いた。genoTyp はフォント同士を交配させて新しいフォントを生み出す実験サイトだ。早速、試しにやってみた。1. 第一世代の親を決めるgenoTyp を開いて左上の [Breed] タブをクリックすると「交配ページ」が表示される。[add original font] ボタンをクリックして、祖先となるフォントを２つ追加してみた。交配させるために２つのフォントをドラッグしてくっつけた。くっついた状態になれば交配の準備は完了だ。2. 交配させてみる中央の [cross] ボタンを押すと第一世代が誕生する。４人の子供が誕生した。父親似だったり、母親似だったり、子供によって雰囲気が異なっている。3. 第一世代でも交配別の [original font] を追加させて、第一世代の中から気に入ったものと交配させてみた。３人の子供が第二世代に誕生した。4. さらに交配！今度
全自動ブックマーク棚卸しが想像以上に有意義な件 - てっく煮ブログ
みんな、自分が過去にブックマークした記事って気になるよね。はてなブックマークを使ってると、勢いでブックマークしてしまうけど、なかなか振り返る機会はないもの…。少し前に「ブックマーク棚卸しがイイヨ」という記事があったんだけどブックマークの棚卸し(?)をしてます。今年一年かけてブックマークしたものを順番に見て行ってます。見るといっても、全部の記事を開いて見るわけではなく、流し読みで、「ああ、これはもう一回読んでおきたい」と思ったものを開いてはインプットしているという感じです。 はてなブックマーク棚卸し - naoyaのはてなダイアリー１年分の棚卸しとなると楽しくないし…。わたしもみんなと同じ、その一員でした。でも、もう平気。「全自動ブックマーク棚卸し」があれば！全自動ブックマーク棚卸し があればもう大丈夫。全自動で １年前のブックマークを RSS 配信 してくれちゃいます。試しにやってみましょ
北海道を落とすとどう跳ねるのか？の裏側 - てっく煮ブログ
asおかげさまで大好評の 北海道を落とすとどう跳ねるのか？ ですが、どのように作ったか、製作過程を紹介することにします。1. 地図の素材を取ってくるまずは地図の素材が必要です。以下のサイトから拝借しました。白地図、世界地図、日本地図が無料pdf や eps 形式の地図データを無料で配布してくれているありがたいサイトです。2. 都道府県ごとに分割する上記の素材は県境もベクター形式で提供されていて大変ありがたかったのですが、島がどの都道府県に属しているかの情報がありませんでした。そこで、Google Maps と見比べながら、島を都道府県ごとに分類していきました。無事、全ての島を分類し終わって、こんな感じになりました。とても地味な作業でした…。3. 都道府県ごとに SVG で出力する次に、Illustrator 内で分類したデータをプログラムで扱える形式にしなければなりません。ここでは XML
濃いはてなーが大好きな濃いブログBEST50 - てっく煮ブログ
はてなーが大好きなブログBEST100 を見ると、ホットエントリ常連ばかりで新鮮さがなかったので、ブックマーク コメントが多い順を調べてみたくなりました。幸い、手元には はてブ年鑑 を作るときに収集したデータがあるので、ちょっと頑張ればブログごとのコメント数を割り出すことができました。データ量が多かったので、2008年の日ごとホットエントリに１度でも入ったことのあるエントリからの集計です。コメントが多いブログ BEST10コメントつきのブックマーク数順に並べてみました。順位サイト名コメント数ブックマーク数コメント率1位はてな匿名ダイアリー472499440250.1%2位痛いニュース(ノ∀`)399496747059.2%3位GIGAZINE（ギガジン）159756497924.6%4位404 Blog Not Found96862968532.6%5位池田信夫 blog607414409
郵便番号マップを作ってみた - てっく煮ブログ
ビジュアライジング・データ ―Processingによる情報視覚化手法 を読んでたら「アメリカの郵便番号を地図上に図示する」という例が出てきたので、これの日本版を作ってみました。 郵便番号マップ内陸地がぽっかりあいてるのが不思議だったり、色でどのへんの地域が近い番号なのかが分かったり、いろいろ興味深いです。絞り込み機能先頭の数字で絞り込む機能もつけてみました。これが東京（1XX）。これが中国四国地方（7XX）。うっすら四国の海岸線が見えます。今週は、これを作っていく過程を紹介していきたいと思います。乞うご期待。ビジュアライジング・データ ―Processingによる情報視覚化手法作者: Ben Fry, 増井俊之(監訳), 加藤慶彦出版社/メーカー: オライリージャパン発売日: 2008/12/01メディア: 大型本 連載目次（予定）郵便番号データをデータベースに入れるgeocoding
ActionScript3 ブロックスコープの ABC - てっく煮ブログ
as3, tamarin※ AS3 にはブロックスコープがないよ、という内容です一時変数の効率化｜_level0.KAYAC という記事に怪しいことが書いてあったので突っ込んでおきます。この記事によると、for の中で変数を宣言するよりも // 中バージョン function foo1():void{ for(var i:int = 0; i { var a:Object = new Object(); } } 外で宣言をしたほうが // 外バージョン function foo2():void{ var a:Object; for(var i:int = 0; i { a = new Object(); } } a が宣言される回数が少ないので効率的だとしています。けれども、これは間違いです。for の中で宣言しても、ブロックのあとでも生き残ります。もっと言ってしまえば、var 宣言する前
JavaScriptでかんたんHTAアプリに挑戦 - てっく煮ブログ
JavaScriptこんにちは！ みなさんガジェットつくってますか！ なんだか最近、色々な種類があるみたいですね！ Yahooナントカとか、Googleガジェットとか、Adobe AIRとか、シルバーナントカとか、あとWindowsサイドバーだとか、Operaナントカとか…。こういうガジェット的な、ちょっとしたデスクトップ用のツールって、 どうやってつくるのかなーなんて思って、ちょっと調べてみました！そしたら意外と簡単だった…！ これならぼくにも作れそう！！ってことで、ちょっとメモしておきますね！ どれにしようかな…！つくるのが簡単なことWinで動いたらいいや使う人がインストールしやすそうなのがいいこんな感じで考えていくと… Googleガジェット か AIR なのかなー、って思ったんだけど、プラグインとかインストールはめんどくさいから、なにもせずに使えるものがいいよね！だから HTA（H
【YQL 速攻レビュー】米 Yahoo! が SQL っぽく色んなデータを取ってこれるAPIを出した - てっく煮ブログ
米 Yahoo! が Yahoo! Pipes みたいに自由度が高くて、またちょっと毛色が違うサービスが出てきた。題して、Yahoo! Query Language。YQL と呼ぶようだ。SQL 風の言語を REST で投げて、結果を XML や JSON で受け取ることができる。具体的にやってみないと分かりにくいので、とりあえず試してみた。RSS からデータ取得YQL を使って RSS から最新のタイトル10個を取ってきてみる。こんな YQL になるらしい。 select title from rss where url='http://d.hatena.ne.jp/nitoyon/rss' rss テーブルに対して select を発行している。実際にこの YQL を試すには YQL 用の console を利用するとよい。（※要ログイン）console の左上に YQL を入力して
はてなブックマークの細かすぎて伝わりにくい新機能を勝手に紹介 - てっく煮ブログ
はてなブックマークがリニューアルして毎日楽しく使っているわけですが、そんな中で気付きにくいけど知ってると便利な機能を勝手にまとめてみました。人気エントリの要約を非表示にみんな大好き人気エントリーに、リニューアル後から要約が表示されるようになりました。クリックする前に概要が分かって便利なのですが、古いインターフェースのほうがよかった…という人もいることでしょう。でも大丈夫。そんな人は「人気エントリー」の右端にある▲のボタンを押してみましょう！要約が消えます。すっきり読みたい人にお勧め。あ、もう一回クリックすると要約は復活します。タグとお気に入りを旧バージョンで右側のボタンつながりで、タグとお気に入りを戻す方法を紹介します。タグが一覧になってしまって悲しい人は、右側のボタンを押しましょう。おー、一昔前のタグクラウドと切り替えられるわけですね。お気に入りも見た目が変わりましたが、これも右側のボタ
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード） - てっく煮ブログ
as, box2dワリオランドシェイクと YouTube のコラボプロモーション が面白かったので、似たようなものを作ってみました。次の文字列をコピーしてアドレスバーに突っ込むと、HTML が崩壊します。javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://tech.nitoyon.com/meltdown/meltdown.js?"+(new Date()).getTime(); d.body.appendChild(s)})();崩壊するのは画像だけなので、画像があるページで試してみてください。このブログだとこんな具合。画像はドラッグすることも可能です。あまり画像が多いと重くなりすぎるのでご注意を。仕組みFlash と JavaSc
てっく煮ブログ - 秀丸でJavaScriptのアウトライン解析する定義ファイル
私はエディタとして秀丸を愛用しています。秀丸 Version 6.0 からはアウトラインのツリー表示機能がついていて、かなり便利です。prototype.js を利用した JavaScript がきれいに解析される定義ファイルを作ったので公開します。Class.create とか Object.extend を使ったクラス定義を正しく解析してくれます。ためしに prototype.js 自身を解析するとこんな具合。左側にツリーでアウトラインが出てますね。私はキー割り当てで [アウトライン解析の枠切り替え] に Alt-X キーを割り当てています。Alt-X を押してアウトラインにフォーカスして、カーソルキーや PageUp/Down で関数を選んで、Enter を押す、という手順によって比較的大きなソースでも移動が楽々です。定義ファイル： / /0000,0002,0000,0000000
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
北海道を落とすとどう跳ねるのか？ - てっく煮ブログ