サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
d.hatena.ne.jp/gyuque
canvas を苛めていたら気づいたことがあったので書きます。（この記事は2011年5月現在の情報です。あなたがこの記事を読んでいる時点で、より新しくて良い方法が無いか確認して下さい） 基本的な話 canvas には、図形を描画する機能だけでなく、描かれている内容を読み取る機能があります。getImageData を使うと、canvas の内容をピクセル単位で読み取って画像処理をかけたりできます。また、toDataURL を使うと canvas の内容を Data URI として出力でき、サーバに送信したりできます。 しかし、この機能にはリスクがあります。例えば、悪意のあるページを開いただけで、社内SNSにしか公開していないあなたの顔写真を canvas 経由で抜き取られるかもしれません。そういう事が起きないように、他のサイトから読み込んだ画像が canvas に描画されている場合（以下、
みたいなことを先週、ぴろたんと話していてですね。実際どうなるのか試してみました。こうなります。 赤い点線の枠が WebGL を有効にした canvas で、中の青い三角形は WebGL で描画されています。後ろの写真と「GL Overlay Test」という文字は通常の HTML です。 一見ちゃんと描画されているように見えますが、左側の半透明の三角形が、加算合成したような描画結果になっており、少し変です。本来であればもう少し暗い色で描画されている筈です。これは Chrome/Firefox あるいは Mac/Windows を問わず同じなので、今のところWebGL の描画結果を半透明で合成すると確実におかしくなるので、やめたほうがいいと言えます。が、逆に言えば、完全に不透明か完全に透明な部分は正しく合成されるので、限定的には使えるとも言えます。（描画結果にアンチエイリアスがかかっている場
最近、Webページをクローリングして画像を引っこ抜いたりしているのですが、そこで困るのが、一見すると一枚だけど複数のファイルに分割されている画像。 ↓こういうやつ (http://www.jewelpet.jp/) 多くの人が遅いアナログ回線で Web を見ていた頃は、体感速度を上げる効果があった、らしい。しかし、機械的に画像を収集するような向きにはえらい迷惑です。 そこで、クローラがブラウザ上でのレンダリング結果を見て、これらの画像は隣接して表示されているぞ、といった判断をできないかなーとぴろたんに尋ねてみたところ piro_or> っ [MozRepl] と、5秒で答えが返ってきました。MozRepl というのを使うといいらしいです。というわけで、MozRepl を使って Ruby のプログラムから Firefox のレンダリング情報を取得してみました。 mala さんによる MozR
今までさんざん canvas やら SVG やらで遊んでおいてなんですが、そういった華やかな部分だけではなく、AJAX の要である通信の技術も忘れてはいけません。 まだ先の話ですが、Cross-Site XMLHttpRequest や、Web Sockets がメジャーなブラウザに実装されれば、JSONP や Comet 等の小手先のハックで無理矢理実現しつつも根本的には Google Suggest の頃から進歩していなかった、という状況が変わりつつあります。 しかしながら、上に挙げた方法は、ネットワークに接続されているマシン同士でしか通信できないという欠点があります。ネットワークに繋がっていない機器と Javascript で通信したい、という需要が年に一度ぐらいはあるかもしれません。 そこで今日は、WiFi や Ethernet が無くても通信を行える方法をご紹介します。 物理層が
前回試さなかった goroutine を使ってポリゴンラスタライザとか書いてみました。 並列化といえばシェーダだよね？ ということでシェーダ対応です（というのはちょっと詐欺。理由は後で） こんな感じで、ポリゴンに法線マッピングを施して出力します。 複数の出力をつなげて動画にしたもの→ http://www.youtube.com/watch?v=XwB16g3vNBk&fmt=22 ベンチマーク まずは、goroutine を使わない場合（計測のため、同じ処理を50回ループしています） $ ./main start 10169 ms done 次に、ポリゴンの描画処理を goroutine として呼び出してみます。ポリゴン単位で分散させてるのが「ちょっと詐欺」の理由です（描画順を指定できないので実用にならない） $ ./main start 9838 ms done あれ、あんまり…… 大
噂の Go をちょっと使ってみました。開発者が興味ないのか、あんまり充実してないグラフィックスまわりにあえて突撃。 こんな感じのpng画像を出力します。ソースは以下の gist に。 main.go canvas.go プログラムの構造は以下のような感じ プログラムの最終的な目標は、標準ライブラリの image.png.Encode 関数を使ってPNGファイルを書き出すこと。 image.png.Encode 関数は io.Writer と image.Image インターフェイスの実装を要求してくるので、必要な関数を実装する（黄色の部分）。 さらに、ファイルを開いたり、画像に描画したりといった独自の動作を実装する（緑色の部分） という流れでプログラムが出来上がっていきます。io.Writer や image.Image はライブラリ集ではなく、インターフェイスだけが定義されている「規約集
The JUI 2009 Returns で Paul が CSS Transforms をプッシュしていたので、それにつられてデモを一つ作ってみました。 http://gyu.que.jp/giftbox/google/ 見てのとおり、普通の検索ボックスです。 普通にクエリ入力できます 普通に検索結果を見られます 箱の中にまた箱があることもあります。 …という感じで、また3Dネタですが、単なる画像ではない「生きている」HTML要素がグリグリ画面上を動き回れるというのは、何か新しいことができるんじゃないかという可能性を感じます。Canvas のほうは環境マッピングとかやって見た目は派手でしたが、いずれ O3D やら 3D Canvas やらが普及するまでの「つなぎ」です（だから、ライブラリ化したりする気がおきなかったんですが） しかし、IFRAME を変形させながらネストしてもしっかりレン
Mozilla Party 10 でcanvasの話をしてきましたので資料を公開します。 http://www.slideshare.net/gyuque/mozilla-party-2009-canvas-programming デモは以下のURLにあります http://gyu.que.jp/jscloth/touch-opera-gecko.html 海外からのゲストのために通訳がついていたのですが、ボランティアの学生さんだったそうです。普通にお金を出して依頼したものだと思っていたので、閉会の挨拶のときに知ってびっくりしました。 会場の質問で Flash と比べてどうなんだと聞かれ、今の時点では、自分が仕事で Web ページを作る立場だったら無難に Flash を使うと答えました（「ねる。」はあくまで趣味なので、IE なんて気にせず canvas を使えたわけです）。 悲しいことに、
今さらですが、Google App Engine に手を出してみました。この前ふつうのHaskellを買ったときもIRCでなんで今さらとか言われましたが、まあ、流行には一周遅れでついていくぐらいが一番いいと思います。 で、こんなもんができました。 「ねる。」 http://twneru.appspot.com/ 使い方は簡単。Twitter で @twneruに「ねる」とか「寝ます」とかReplyしてください。その時間を毎日記録して、グラフに出してくれます。一日に複数回 Reply すると、最後の Reply が記録されます。 追記 リクエストの多かった「おきた」機能とか、ガジェット化機能とかもつきました。
MAX 打ち上げのときに川崎さんに「英語の記事書いたら絶対ウケるから書くべきだよ」と言われていつ書こうかなーと思ってたら、そういえば11日は休日だったので、日本語の下書きだけでも一気に書いてみることにしました。 といっても、欲を出してあれもこれも書こうとして、結局まだ書ききれてませんけど。 タイトル案 Javascript と Canvas によるフルスクラッチ3Dプログラミング Javascript と Canvas 3Dプログラミング入門 ドキッ JSだらけの あと、今日（11日）は私の誕生日でもあります。25になりました。そろそろ鏡を見るのが怖くなってきますね。 以下、書きかけ Introduction Adobe MAX 2009 で Spark Project は、拡張現実（AR）のデモを展示し、来場者の注目を集めていた。Shibuya.JS のメンバーもこのデモに感激し、是非
先週金曜のAdobe MAX 2009でJSplashについて発表してきましたので、そのスライドを公開します。 新しいMacBookの林檎印を輝かせてプレゼン… となる予定だったんですが、プロジェクタにうまく繋がらず、結局川崎さんのPCをお借りすることになりました。 皆様、大変ご迷惑をおかけいたしました… デモをいくつか行いましたが、再生中のムービーをDOM Inspectorで弄ってオブジェクトを消してしまう、というのが多分一番ウケが良かったです。 Sparkのセッションを見た後は、id:amachang, id:yukoba さん, id:moriyoshi さんといろいろJS話。yukobaさんが「MSXとかファミコンとかケチなこと言ってないで Windows PC のエミュレータ作ろうぜ」などと本気か冗談か分からないことを言い出して変な話になっていました。 おまけ Sparkのブー
d.hatena.ne.jp
ポスターがひどいと評判のFOSS4G 2008 TOKYOでLTしてきました。FOSS4Gは、地理情報システムやマッピングが専門の人が集まるイベントなので、Google Mapsを使うためにJSはとりあえず覚えたけどASとかには手を出してない、という人が多いだろうと目論んでASの紹介をしました。 スライドはこれ。 デモの動画は以下に。Google Maps API for Flash の上に3Dのモデルを重ねるというデモは以前公開しましたが、今回はProxy serverを通してGoogle 3Dギャラリーの中に埋め込んでいます。 本来サーバにないファイルを捏造して返すというのはどうやってやるんだろうなーCocProxyあたり改造すればいけんのかなーとid:cho45に聞いたら、「改造せんでもファイル置いときゃそれ返すよ」と言われて10秒で完了しました。cho45++
こんなものを作っています（Alphaぐらい） ↓クライアント http://coderepos.org/share/browser/lang/javascript/userscripts/autocompletize.user.js ↓データベース http://wedata.net/databases/AutoCompletizeIndex/items http://wedata.net/databases/AutoCompletizeDic/items AutoPagerizeと同じように外部にDBを置いて、いろんなサイトに入力補完を後付けしようという話です。が、XPath式をサッと書くだけで対応が完了するAutoPagerizeに比べると、わざわざ辞書データを作ってくれる人がいるのかという問題がありますね。
http://tinyurl.com/62sqq5 りぜるから見てました。中の人の名前を知ったのはシノブ伝あたりかも。 Wikipediaあたりが時間的なメタデータを出してくれれば、こういうのが自動的にできますね。
夜通しでバグを潰した結果大分よくなったので、調子に乗ってバージョン番号を一気に0.2上げてみました。例の「ヅラバグ」を含めて、アニメーション周りのレンダリングがかなり改善されています。また、使用していないシェイプを破棄する処理を入れたことで「魔理沙」のような大きめのムービーも完走できるようになりました。以下に、JSplash 0.4.2で実行した「魔理沙」および「２ちゃんねる大王」のスクリーンショットをいくつか掲載します。 どうでしょうか。ちょっと遅い Flash Player だと言っても通用するぐらいになったと思います。テキストを実装していないため、肝心のあのセリフが出ていないのは少々寂しいですが。 あとマスクとカラートランスフォームを実装すればほぼ本物と同じになりますが、これらは Google Chrome（あるいはSafari）のSVG実装状況だと少し厳しいところです。 まあ、最初
A Brief Introduction in English JSplash is a conversion tool, that converts SWF movies to javascript. Converted script renders shapes with SVG and rewrites ActionScript dynamically to run on browser's JS Engine. You can see a demonstration at http://www.libspark.org/svn/ruby/jsplash/trunk/client2/demo_20081001.xml Left one is a screenshot of the movie running on JSplash. And right one is running o
この内容は obsolete です。最新版のGreasemetalには、Greasemonkey互換APIが実装されています Greasemetal というのはこれです → http://greasemetal.31tools.com/ 本家Greasemonkeyとの相違点 GM_* 系APIがない unsafeWindow がない（大丈夫？） unsafeWindow が無いというのはなんか不安なんですが…… まあでもGM_*系の危険なAPIが無いからいいのかな？ うん、気にしないでおこう。 というわけで、思いっきり対症療法ですが、GM_addStyle と unsafeWindowを自分で作ってやります。 if (/Chrome\//.test(navigator.userAgent)) { window.unsafeWindow = window; unsafeWindow.Key
誰にとは言いませんが、私からの警告です。 要件 「Web上で日記を書いて、コメントをつけるシステムを作りたい」 普通の技術者の設計 えーと、日付ごとに分けてテキストを保存しておけばいいんだな。一日に複数の話題を書くこともあるだろうから、先頭に * がある行は見出しとして扱おう。コメントはシンプルなテキストで、各日付に関連させておけばいいな。 以上。 天才（自称）の設計 ふむ、コメントつきの日記システムか。凡人にはコメントと本文は別物のように見えるかもしれないけど、俺に言わせると実は同じものなんだ。だって、どちらも何かの話題に対して何らかの意見を述べているものだろ？ 違いは、ある話題のツリーのトップにあるのが本文、そこにぶら下がってるのがコメント。ツリーといえばファイルシステムだ。そう、つまり我々が作ろうとしているものはファイルシステムの一種なんだよ。日記を書けるファイルシステムというものを
エアコン関連 賃貸の部屋にエアコンがついてるんだけど、ずっと電源の入れ方がわからなくて飾りになってた。 先週末に暑さに耐えかねて、製造元のNORITZのサイト漁ってなんとかマニュアル見つけて、吸気口のカバーの中に主電源があることを確認。エアコンの起動に成功。 そしたら数時間後に前線が通過して秋が来てしまって今週はこのとおりやたら涼しいので、エアコンの活躍は数時間で終了したという話。 「NORITZ」って名前だけみると欧州の企業みたいで格好いい。生まれも育ちも神戸の企業なんだけど。 その他 絶チルのEDは変更早すぎだろ。あの30分のうち、絶対なんですーの重みづけは少なくとも0.5ぐらいはあったので、絶対なんですーが無くなっただけで魅力半減。 Twitter あるいは tumblr でフォローしてる 1q1z という人がおもろい。cho45が化けてるんでなけりゃ、俺が実は夢遊病で夜中に行動して
「家庭教師のトライ」のCMで、お偉いさんが堅い話をしている映像がリアルタイムで落書きされるというのがあります。 これを再現するサービス「TryPaint」を作ってみました TryPaint: http://try.dzfl.jp/ 遊び方 Webカメラを接続して上記のURLへ行ってください カメラを選択するボタンが現れるので、いずれかを押して選択してください（アナログテレビのチューナがある場合は、それも表示される場合があります） カメラに顔を映してください 画面下の丸いエリアに絵を描いてください 顔の認識に成功すると、描いた絵が顔の上に表示されます ボタンの説明 描いた絵をサーバ上に公開します カメラからの取り込み映像を一時停止します アンドゥです。1回だけです（´・ω・） 記念撮影をします 絵を消去します 補足 顔全体だけでなく目も認識に使っているので、カメラに目を見せるようにすると動き
いつも通りスライドをslideshareにアップロードしました …が、たぶんこれだけ見ても訳がわからないと思いますので、デモの補足説明をします。 今回のLTで行ったデモは、ASCSSというWebKitのCSS処理系をAS3に移植したもののデモです。以下のURLで実際に動かすことができます: http://svn.coderepos.org/share/lang/actionscript/ascss/src/KyotoDemo.swf 左に適当なXML（整形式であればHTMLでなくてもOK）を入れて、右にCSSを書くと、どのセレクタがどの要素にマッチしたか青い線で表示します。一つの要素に複数のセレクタがマッチした場合、詳細度が低い方から順に青い線が光ります（この順番でルールを適用すると、詳細度の高いルールが後から上書きされるため、詳細度の低いルールより「強い」ことになります） おまけ機能とし
19:20 追記 朝に書いたバージョンだと、ゆのっちの部分は、文字列をConstant Poolに突っ込むだけの役割で、実行中は全く評価されていなくてゆのっちかわいそうです(´；ω；`)ﾌﾞﾜｯ なので、ゆのっちの部分を評価するようにしてみました。 var _ = { valueOf: function() { this["ひだまりスケッチ365 "] = this["ひだまりスケッチ365 "] || 0; __bytecode__("960D0008030808080308070803080602"); for (var i = 0;i < this["ひだまりスケッチ365 "];i++) __bytecode__("17"); __bytecode__("4726"); this["ひだまりスケッチ365 "]++; } }; X / _ / X < "来週も見てくださいね!" X
KMZ Viewer をテクスチャに対応させました。ただし、自動ではロードしないようになっていますので、テクスチャ付きのモデルを見たい方は、左下のボタンをクリックしてください。 あと細かい点ですが、デフォルトで表示される場所が、東京タワーからランドマークタワーになりました（こっちのほうが見栄えがいいので……）
http://gyu.que.jp/test/gmapkmz/ とりあえず帰って寝なあかん。詳細は後で。じゃあの。 ということで、詳細です。コミットの作業が終わったので、ソースを見たい方は以下のURLからどうぞ。あと、kmzをいくつか追加しておきました。 http://coderepos.org/share/browser/lang/actionscript/gmapkmz/ 地図の上に3Dモデルを置く処理は、トップレベルのGMapKMZ.asに書いてあります。おおまかに図にすると、次のような感じです。 Google Maps特有の座標の計算は、かなり前に書いたgmapcalcというのがベースになっています。KMLの読み込み部分は、papervision3D 2.0a(Great White)の物をベースに、いらない部分（アニメーション等）を削って、足りない部分（位置情報等）を足したものに
見た。
マイコミの記事の通り、長らくWebKitが使ってきたJavaScript Coreに大工事を施して、バイトコードを導入するようです。（私はSurfin' Safariのフィードで知りました） ↑ちなむと、これが Squirrel Fish（イットウダイ） Wikipediaより。 ↑Appleの人たちにはこう見えるらしい バイトコードなんてのは、ブラウザの裏方であるJS処理系のさらに裏側にあるもので、本来表に出る類のものじゃありませんが、どうしてもバイトコードを見たいという変態さん達のために、WebKitチームがいいものを作ってくれました。 WebKitのソースツリー一式を落として、 WebKitTools/Scripts/build-testkjs というスクリプトを実行すると testkjs.exe（あるいはtestkjs_debug.exe）という実行ファイルが出てきます。これ自体は
次のページ
このページを最初にブックマークしてみませんか？
『d.hatena.ne.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
