jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
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
ウニができるまで 〜 Context Free Art の遊び方 - てっく煮ブログ
前回に引き続き、Context Free Art を取り上げる。今回は、Context Free Art で変なウニ風の生き物を作っていく手順を紹介する。さぁ、準備はいいですか？1. 基本となる図形まずは基本となる図形を描画する。こんなやつ。ソースコードは次のようなもの。 startshape LINE // LINE というルールを描画しろ rule LINE { // ルール LINE の定義 CIRCLE { s 6 1 x 3 sat 1 b .3 hue 30} } １行目の startshepe LINE では、「LINE というルールを描画しろ」と指定してる。じゃあ、LINE ルールはどうなってるかというと３行目で定義している。LINE ルールでは CIRCLE を１つ描画する。CIRCLE は Context Free で定義されている円を描画するルールだ。ルールにいくつか
驚きの表現力のお絵かきプログラミング Context Free Art を試してみた - てっく煮ブログ
文脈自由文法でアートが楽しめる Context Free Art というのを試してみた。Windows, Mac, Linux などで利用できて、簡単なコードを書けくだけで複雑な幾何学アートを生成してくれる。サンプルから１つ起動後、メニューの Example からいくつかのサンプルを試してみた。たとえば、木を生成するサンプル「weighting_demo」のソースはこんなの。 startshape SEED1 rule SEED1 { SQUARE{} SEED1 {y 1.2 size 0.99 rotate 1.5 brightness 0.03} } rule SEED1 0.05 {SEED1 {flip 90}} rule SEED1 0.05 { SQUARE{} SEED1 {y 1.2 s 0.99 r 1.5 b -0.5 flip 90} SEED1 {y 1.2 x
はてブのCSSをカスタマイズしてみた その２ - てっく煮ブログ
はてなブックマークが新しいデザインは気に入っていたのですが、メリハリのきいた色使いに少し飽きてきたので、シンプルなものに変えてみました。こんな感じです。 b:id:nitoyon自分が一番知りたいのは「ページのタイトル」だったので、そこを目立たせる感じで配置してみました。その他のこだわりを4箇所ほど紹介します。1. favicon の位置はてなブックマークがリニューアルしてから favicon が表示されるようになりました。これをどう扱うかが悩ましかったのですが、タイトルの横に付けてみました。デフォルトのデザインのちょっとうるさい印象も緩和できたのではないかと思います。アイコンを左に出すアイディアは tumblr のデフォルトのデザインから拝借しました。全体的に tumblr っぽく仕上げてます。 .2. ブックマーク数は digg 風にブックマーク数と B! のリンクを digg みたい
Alchemy でポインタを扱う - てっく煮ブログ
as3Alchemy は malloc にも対応している。C が malloc で確保したメモリのポインタを AS3 側に伝えるのも簡単だ。C 側の実装例C で malloc した場所を AS3 に渡してみる。 static AS3_Val myAlloc(void* self, AS3_Val args) { // 確保した値の初期値を受け取る int v; AS3_ArrayValue(args, "IntType", &v); // malloc でメモリ確保 int* p = (int*)malloc(sizeof(int)); // 確保したメモリに初期値を代入する *p = v; // ポインタを返す return AS3_Ptr((void*)p); } static AS3_Val myGetPtr(void* self, AS3_Val args) { // ポインタを受
Alchemy で中間ファイルを消さない設定 - てっく煮ブログ
as3alc-on して置き換わる gcc(achacks/gcc) は Perl でできてるんだけど、その最後に次のようなコードがある。 # remove junk TODO failure leaves stuff around! if(!$ENV{ACHACKS_TMPS}) { sys("rm", "-f", $$.achacks.*>) } これが中間ファイルを全部消す処理ですな。ということで、どういう AS が吐かれるのかを見たいときには ACHACKS_TMPS を 1 にしよう。cygwin ではこうする。 $ export ACHACKS_TMPS=1 こんな感じで中間ファイルが消えないよ。 $ ls 3080.achacks.abc 3080.achacks.as 3080.achacks.exe 3080.achacks.exe.bc 3080.achacks.o #
【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(){
Ruby で UTF-8 の文字化け部分を取り除く - てっく煮ブログ
rubyRSS を拾ってきてパースしようとしたら、不正な文字列が入っていて REXML が ParseException を投げてしまった。文字コードが UTF-8 前提だったので、UTF-8 として valid な文字のみが含まれるように置換して対処した。 str = str.scan(/([\x00-\x7f]|[\xC0-\xDF][\x80-\xBF]|[\xE0-\xEF][\x80-\xBF]{2}|[\xF0-\xF7][\x80-\xBF]{3})/).join Ruby じゃなくても同じようなコードで対処できそう。関連：UTF-8 の正規表現は 404 Blog Not Found:UTF-8 vs. ISO-10646 から拝借したPHP なら $xmlStr = mb_convert_encoding($xmlStr, "UTF-8", "UTF-8"); でいけるら
"XRay" - ActionScript3 版の Firebug みたいなデバッグツール - てっく煮ブログ
asActionScript 2 用のデバッグツールとして有名だった XRay が ActionScript 3 に対応したようです。DisplayObject の階層を表示してくれたり、オブジェクトのプロパティを修正したり、ログ用のコンソールになったりと機能豊富です。しかも、Flash CS3 だけでなく、Flex や AIR でも使えるようです。ということで、早速、試してみました。ダウンロードしてソースコードに２行追加するだけXRay のソースコードを拾ってきます。Google Code にあるので、SVN で拾ってきましょう。http://osflash-xray.googlecode.com/svn/trunk/as3/trunk/では、自分の Flash に仕込んでみましょう。ActionScript のソースコードに import 文を追加します。 import com.bli
埋め込みフォントの情報を swfassist で取得する - てっく煮ブログ
as先日の Shibuya.js のあとに、BeInteractive! の yossy さんが「swfassist を使ってくれる人が少なくて悲しい」みたいなことを言ってたので、埋め込みフォントのベクタ情報を swfassist を使って取得してみた。SWF のバイト情報は loaderInfo.bytes に入っている。そこで、フォントを埋め込んだ SWF を swfassist に食わしてやると、フォントのベクタ情報が取れる。このベクタ情報を元に ShapeOutlineDrawer を使って描画してる。(追記) ただし、loaderInfo.bytes は Flash Player 9.0.115 以降にしか含まれていないので、それ以前のバージョンだとエラーになる。ShapeOutlineDrawer には graphics.lineStyle(1,0x000000); という行が
フォント情報を元に歪めて描画：ユメのカタチ - てっく煮ブログ
as埋め込みフォントの情報を swfassist で取得するから先へ進んで、フォントのベクタ情報を加工して遊んでみよう。(追記) 手元の Firefox だと「bytes が読み取れない」と例外が出る。ブラウザや Player のバージョンによっては動かない！？ bytes は Flash Player 9.0.115.0 以降にしかないので、それ以前のバージョンでは動かない…ということだ。swfassist には描画の仕方を定義する FlashGraphics クラスがある。これを拡張して、FuzzyFlashGraphics というクラスを作成してみた。与えられた座標から、ずらして描画するためのクラスだ。さっそく例。ランダムにずらしつつ、ずらす幅を時間ごとに変化させてみた。FlashGraphics オブジェクトのコールバック関数 f で歪め方を定義する。そこそこ汎用的に遊べるんじゃな
京都市バスの路線別 停留所取得API公開 - てっく煮ブログ
pipes今回も Pipes ネタ。例によって Fetch Page モジュール。今まで「Page Fetch」だと勘違いしてたが、どうやら「Fetch Page」だったらしい。あちゃー。で、本題。京都市バスの路線別 停留所 API を Yahoo! Pipes で作ってみた。サンプル作ってみたこの Pipes を使ったサンプルを作ってみた。→ 京都バス案内 (デモ)左の系統一覧を選択したら、右側に詳細が出る。停留所をクリックしたら時刻表が表示される。JavaScript＋jQuery＋JSONP で実装してるよ。そのまんまだけど、API 使ってる気分になってきた。すごくない？絶対に API を公開しそうにない京都市交通局の HTML を使って、外部の人間が勝手に API 化しちゃってるわけですよ。Web 1.0 なページを、無理やり Web 2.0 化ですよ。なんでもかんでもマッシュアッ
Adobe MAX リアルタイムレポート：ニコニコ動画とFlash - てっく煮ブログ
ドワンゴ 戀塚さん。まとめのクオリティよりもリアルタイム性を重視したメモ。たぶん後で資料公開されるので、正確な情報はそちらにて。(追記)公開されたようですdwango research and development dept. ≫ Blog Archive ≫ Adobe Max Japan 2007 講演資料「ニコニコ動画とFlash」ニュースサイトにも記事が出たようです。開発者が明かす「ニコニコ動画」人気の“キモ” - ITmedia Newsドワンゴ開発者が語る「ニコニコ動画」の中身 − ＠ITCodeZine：【Adobe MAX Japan 2007】 ニコニコ動画がActionScript 2を採用したワケ（レポート）ニコニコ動画とは2.1 参加方法動画投稿 意見を問いながら投稿できるコメントをもらえてモチベーションが高まる既存動画を加工する。２次３次加工が容認されているマイ
AS で別ドメインの画像を読み込むときの注意点 - てっく煮ブログ
asActionScript を使って 外部ドメインの画像を読み込むときの注意点を調べてみた。AS3 で調べたけど、AS2 でもセキュリティの機構自体は同じ（だと思う）。読み込み方Loader クラスを使えば外部ドメインの画像をロードできる。 var loader:Loader = new Loader(); var req:URLRequest = new URLRequest("http://www.example.com/sample.gif"); loader.load(req); addChild(loader); 画像形式は PNG、GIF、JPEG のみ。BMP はダメ。アニメーション GIF の場合は１フレーム目しか描画されない。読み込み完了したことを知るためには、contentLoaderInfo プロパティの complete イベントを監視すればよい。ファイルが存在し
ICO の GPL 違反について詳しい友達に聞いてみた - てっく煮ブログ
先日、話題になった プレイステーション2ゲーム『ICO』にGPL違反発覚 - Engadget Japanese という記事に「GPL ライセンスのライブラリを利用しているからソースを公開しなければならない」とあった。この手の GPL 関連のニュースは今まで何度も出てきてたけど、いまいち腑に落ちてなかったので詳しい友人に聞いてみた。組み込みLinuxみたいな仕事をしてる人なので、そこそこ信用できるのではないかと。以下、そのまとめ。（あまり詳しくない人間がまとめているので、間違いがあったらツッコミください）GPL と LGPL例えば、glibc（GNU C Library）はよく使われるライブラリだけど、これをリンクした途端に「はい全部 GPL ね」っていうのは余りに乱暴なので、LGPLっていうライセンスで公開されている。LGPL なライブラリを動的リンクするだけなら、そのソフトウェアを公開
ActionScript 的超絶技巧発表会に参加してきました - てっく煮ブログ
asTwitter 経由で企画された「ActionScript 的超絶技巧発表会」に参加してきました。日帰りで東京まで行ってきましたが、往復交通費以上に得るものは多かったです。参加条件が「発表する」だったため、ほんとにレベルが高かったです。かなりの自信作を持っていったつもりだったのに色あせてしまいました。ひとまず、勉強会まとめエントリとして投下しておきます。半分感想。HTML/JavaScript から SWF をいじる話(FlashBug) by muraken さんJavaScript 経由で MovieClip を作成したり、パラメータをいじったり、中の情報を覗いたりする。AS2。→関連エントリ作りこんでいけば、Flash 版デバッグ環境としても便利なものになりそう。Flash デバッグ環境って、あんまりいいのないですしね。クロスブラウザな Canvas として公開すればかなりヒット
Google Gears の使い道 - てっく煮ブログ
Google Gears (BETA) が発表されました。Google Gears はウェブサービスにオフライン機能を付け加えやすくするためのフレームワークです。フレームワークが提供するのは次の３つの機能です。LocalServerオフラインになったときにも HTML や JavaScript、CSS にアクセスできるようにする。ブラウザのキャッシュ（一時ファイル）を強化したイメージ。Databaseオフライン時に行った動作を記録しておく。SQLite ベース。ブラウザの Cookie を大容量化したイメージ。WorkerPoolCPU を消費する機能をバックグラウンドで実施する機能。setTimeout で無理やり細切れに実行していた部分を任せることができる。スレッド機能とも考えられる。開発者は、これら３つの機能を駆使して、オフライン機能を実装することになります。ありがちな実装パターンは
サイトの最新被ブックマークを livedoor Reader で読むための Pipes - てっく煮ブログ
それPiはてなブックマーク経由でもらうコメントが気になるので、livedoor Reader にhttp://b.hatena.ne.jp/bookmarklist?mode=rss&url=[自分のサイトのURL]を登録してます。この RSS は、サイト全体の新着ブックマークが入っているので大変重宝してるのですが、 にページの要約が入ってるのがうれしくない。自分のサイトなんだから要約はなくても分かるし、むしろ、ないほうが見やすい。そこで、「それ Pipes でできるよ」。どーーーーん。ページの要約を消してスリムになりました。さらに、ブックマークした人のアイコンを付け足して、はてブっぽい雰囲気を演出。ご利用はこちらから：http://pipes.yahoo.com/pipes/pipe.info?_id=0olatt_u2xGUHo7_qGIyXQ仕組み入力された URL に http:/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
