ブラウザでJavaScriptが動く時代がやってきた！ - 葉っぱ日記
というわけで、昨日から話題沸騰の Javascript PC Emulator すごいですね。JavaScript で書かれた x86 PC エミュレータ上で Linux 動かして、入ってる tcc 使えばそこそこのソースもコンパイルして動いたり。 もとのディスク容量が少ないので、適当な母艦を用意して、こんな感じ で新しいディスクイメージ作って、CocProxy や Fiddler の AutoResponder を使って root.bin へのリクエストをローカルのファイルに差し替えてやれば、好きなファイルも入れられますね。 というわけで、SpiderMonkey を入れて動かしてみました。ブラウザ内でJavaScriptが動くなんてムネアツですね！ 手順としては、コンパイルの簡単な SpiderMonkey 1.7 を x86 の32ビットマシンで -static 付きでビルドして、r
Function.prototype.bindは何がいいのか - 枕を欹てて聴く
ES5からFunction.prototype.bindが入りました. これに準ずるものは数々のFrameworkで提供され続けてきたので, あまり馴染みの無さはないのではないでしょうか. このFunction.ptototype.bindは実はとても面白いので. 結論から言えば, Function.prototype.bindはtarget functionのConstructに完全に移譲するのでConstructorの引数束縛が行えます. またConstructor callに対して配列を渡すapply形式のものといったapplyConstructorやcallConstructorをbindを使って実装することができます. 基本 Function.prototype.bindは基本的にはthisとargumentsに特定の値を束縛する関数です. bindは第一引数にthis, 次から
JavaScriptでフォント名一覧を取得する3つの方法 | TAKESAKO @ Yet another Cybozu Labs
先月・今月と新しいメンバーが加わったサイボウズ・ラボですが、いま社内でfont-familyが密かなブームです。 ということで、ブラウザで使用できるフォント名一覧をJavaScriptで取得する方法について調べてみました。 ■ 1. IE の Dialog Helper Object を利用してフォント名一覧を取得する IE の Dialog Helper Object を利用して フォント名の一覧を取得する方法がよく知られています。 まず、HTMLの中に以下のOBJECTタグを定義して、 <OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"> </OBJECT> JavaScriptから以下のコードを実行すると、現在の環境で利用できるフォント
"難読化スクリプトを読み解く？" by yamagata21
これは何？ ガンブラー（Gumblar）などによって書き込まれた難読化スクリプトを サンドボックスで実行して、どのようなDOM操作が行われているかを表示する プログラムです。 ★ラジオボタンで「安全・低機能」を選択した場合： Microsoft JScriptを使ったサンドボックスで実行します。 document/windowオブジェクトなどは全てニセモノなので比較的安全です。 うまく動かないスクリプトが多いです。 動いた場合は細やかにDOM操作を表示することが出来ます。 ★ラジオボタンで「危険・高機能」を選択した場合： WebBrowserコントロールを使ってスクリプトを実行します。 document.writeやappendChildなど、いくつかのDOM操作をニセモノに置換 しています。多くのスクリプトが動くと思われますが、危険なスクリプトが そのまま動いてしまう恐れもあります。 な
livedoor Techブログ : 裏jQuery - 特殊なTriggerを作ってみよう
こんにちは。開発部でインターフェースエンジニアをやっております油井(あぶい)です。ライブドアでは主にjavascriptを中心としたクライアントサイド側の開発をやっております。 今回は裏jQueryと題しまして、普段から単にユーザーとして使っているだけでは決して知ることができないjQueryの裏技を紹介したいと思います。 注意 この記事で扱うjQueryは最新版の1.4で動かすことを前提としています(一つ前のバージョンである1.3.2でも動くことは検証済みです)。サンプルで使うjQueryセレクタの書き方は「jQuery」で統一しています。「$」に置き換えて読んでもらってもかまいません。 はじめに - jQueryで扱うイベントやトリガー javascriptがふんだんに使われた画面遷移の発生しないウェブアプリケーションではブラウザ上で発生するイベントやトリガーをうまく扱いこなすということ
mozIJSSubScriptLoader で読み込まれたスクリプト (KeySnail, Vimperator プラグイン等) を Venkman でデバッグ - リタマス
Venkman という便利なデバッガがある. 詳細については no title を参照していただくとして, 早速本題に便器. KeySnail や Vimperator のプラグインは, mozIJSSubScriptLoader の loadSubScript というメソッドを使ってロードされている. このメソッドを用いて file:///hoge/huga.js といったローカルファイルをロードすると, その URI が 読み込み元スクリプト -> file:///hoge/huga.js に書き換えられてしまう. Venkman はこの "xxx -> yyy" 形式の URI に対応していないため, loadSubScript を使ってロードしたスクリプトをデバッグしようとすると, もれなくエラーを吐く. ファイルが読み込めないのではデバッグが出来ないに等しいので, これはかなり面
livedoor Techブログ : やれば出来るJavaScript
こんにちは、情報環境技術研究室のsyuuと申します。 GoogleがMapsなどのサービスでFlashを使わずにHTMLとJavaScriptだけでここまで出来るのだ、という事を実証してみせ、Ajaxという言葉が流行ったのも一昔前、今ではすっかり定着した感がありますが、実際の所、ブラウザ上のJavaScriptでどこまでのプログラミングが可能なのでしょうか。 この記事では、私はまだまだJavaScriptを甘く見ていた、シバキ倒せばもっと色々出来るんだ！と感じさせてくれた幾つかのJavaScriptプログラムをご紹介したいと思います。 ■Concurrent.Thread - 標準的なJavaScriptだけで書かれたスレッドライブラリ まずは、「Concurrent.Thread（http://jsthread.sourceforge.net/cgi-bin/wiki/wiki.cgi?
Canvasで背景(星屑)テスト
Star☆Dust background Canvasで背景を作ってみるテスト ↓のチェックボックスをいじってrestartを押して見てください。 ちょっとした違いで様子がガラリと変わって面白いですよ。 Firefox3.5でしか確認していないので注意!? : stroke : fill : every time clearRect restart
WebSocketを使ってリモートデスクっぽいVNCっぽいWebSocketRemoteというものを作ってみました (Kanasansoft Web Lab.)
(2010/04/09 追記:タイトル内のVNCをSVNと間違えていたのを修正しました。) 次世代のWebの規格としてWebSocketというものがあります。WebSocketは、AjaxでもCometでもないサーバ-クライアント間の新しい通信方法です。通常のWebアクセスや、Ajax・CometはHTTPを使用していますが、WebSocketはHTTPではありません。接続のたびに接続のリクエストが発生するHTTPと違い、WebSocketはとても高速で、同時に複数の接続も可能となっています。遅延も小さく比較的容量の大きいデータも高速に転送できるため、リモートデスクトップのようなものが作成できないかと思い、WebSocketRemoteというものを作ってみました。ブラウザには、プラグインやFlash、Javaアプレット等は一切不要となっています。 一応動作するのですが、XMLHttpReq
安全な HTMLDocument の生成方法について - nothing but trouble
何が危ないのか img.onerror や img.onload は src 属性の内容が評価された段階で実行されるので、外部ソースに対して HTMLDocument を構築する際などで、意図していないタイミングでスクリプトが実行されるケースがある。 具体的には、以下のような場合。 var source = '<img src="not_found.jpg" onerror="alert(1)">'; var range = document.createRange(); range.createContextualFragment(source); // onerror が実行される var img = document.createElement('img'); img.setAttribute('onerror', 'alert(1)'); img.src = 'not_found.
Javascript で通信を行う方法 - 最速チュパカブラ研究会
今までさんざん canvas やら SVG やらで遊んでおいてなんですが、そういった華やかな部分だけではなく、AJAX の要である通信の技術も忘れてはいけません。 まだ先の話ですが、Cross-Site XMLHttpRequest や、Web Sockets がメジャーなブラウザに実装されれば、JSONP や Comet 等の小手先のハックで無理矢理実現しつつも根本的には Google Suggest の頃から進歩していなかった、という状況が変わりつつあります。 しかしながら、上に挙げた方法は、ネットワークに接続されているマシン同士でしか通信できないという欠点があります。ネットワークに繋がっていない機器と Javascript で通信したい、という需要が年に一度ぐらいはあるかもしれません。 そこで今日は、WiFi や Ethernet が無くても通信を行える方法をご紹介します。 物理層が
SVG on canvas on Flash (FlashCanvas Pro) - yukobaのブログ
canvg という変なプロジェクトが登場しました！ というわけで、これを、 変更内容のパッチは、Patch for IE with FlashCanvas · Issue #20 · canvg/canvg · GitHub をご覧ください。http://yukoba.jp/SvgCanvasFlash/SvgCanvasFlash.patch もし読んでいらっしゃったら、FlashCanvas Pro の作者さんへ。パッチをご覧になるとわかりますが、var fc = FlashCanvas; で、一度、window.FlashCanvas を待避させた後、もう一度、イベントハンドラから呼び出された、関数 r() の中で、FlashCanvas = fc; として、元に戻しています。これしないと動かなかったのですが、なぜ必要なのでしょう？なんかの、バグではないかと思われます。バージョンは
WebブラウザとGoogle Waveで動くシーケンサ、Anzutoneリリース！ - Yanagi Entertainment
http://anzutone.appspot.com/ 読み方は「あんずとーん」です。 これはなに？ SafariとFirefoxで動くミュージックシーケンサです*1。 非常にシンプルな機能しか備えていませんが、「みんなで作曲できます」。 みんなで作曲できる 上記サイトのAnzutoneは通常版ですが、Google Waveで動くバージョンもあります。 テンプレートは以下に。 Anzutone Gadgetのテンプレート このガジェットはAnzutoneをGoogle Waveでも動くようにしたものです。 通常版との違いは「みんなで作曲できる」ことです。ぜひお試しください。 ただ、非常に横幅の広いガジェットなので取り扱いには注意してください。 ソースとか オープンソースです。MITライセンス。 Githubにホスティングしてます。 今後の展望 ノープランです。 いくつか追加したい機能はあ
スマートフォンのcanvasタグのバグのまとめ - yukobaのブログ
ほとんどのスマートフォンのウェブブラウザはcanvasタグに対応していますが、バグだらけです。以下、色々な環境で試したバグのまとめです。 iPhone OS 3.1 このバグは iOS 4 では、直っています。 iPhone OS 3.1 では、fillText() などの文字列描画系がバグっています。画面が上下反転して、フォントなども反映しません。お持ちの方は 実際のサンプル - fillText() メソッド - Canvasリファレンス - HTML5.JP でお試しください。おかしな位置に文字が表示されます。このバグは、iPod touch、iPhone 全てで発生します。 まもなく、iPhone OS 3.2 が出ますが、直っていることを強く祈ります！ Android 2.1 このバグはAndroid 2.2では、直っています。 Android 2.0, 2.1が、一番ひどいです
canvasタグを8倍高速化する方法＆FlashCanvasが4倍速くなった - yukobaのブログ
最近、ブログを書いて、毎回、読んだくださった方から、貴重な情報を教えてもらっています。大変ありがとうございます。 ベンチマーク for canvasタグとcanvas on Flash 2010 - yukobaのブログですが、コメント欄＆http://www.revulo.com/blog/20100311.html#p01によると、drawImage()で渡す座標は、仕様上 "float" となっているのですが、ここに "int" を渡すと高速化するそうです。具体的には、Math.random() * 750 を Math.random() * 750 | 0 にします。"| 0"で、float → int です。 また、FlashCanvas Pro は今、1.2 α3 ですが、1.2になって、高速化したので（上のブログ参照）、それを含めてテストしてみました。 ブラウザ 時間 高速化
変態記法 Sharp Variables - 地獄のネコブログ
A sharp variable is a syntax in object initializers that allows serialization of objects that have cyclic references or multiple references to the same object. #数字に代入することで、他のプロパティをリテラル内で参照できるらすぃ。 let hoge = ({obj: #1={neko: 'cat'}, meow: #1#.neko}); alert(hoge.meow); // 'cat' alert(hoge.obj.neko); // 'cat' // ({obj: {neko: 'cat'}, meow: 'cat'}) 使えるパターン let いらずですね！ (#1=alert, #1#('hoge')); 終わらない旅 l
10 Small Things You May Not Know About Javascript | samuli.hakoniemi.net
10 Small Things You May Not Know About Javascript18th of Feb 2010 - Samuli Hakoniemi It doesn’t matter how many years I’ve been dealing with Javascript – it contains many little things that surprises me almost every week. For me, Javascript means a constant learning process. In this article, I’ll provide ten small Javascript tips, mainly aimed for beginner and intermediate Javascript developers. H
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
如何にしてヒューマンフレンドリーなJavaScriptを書くか。または1行AAでプログラミング - 葉っぱ日記
javascript:(ﾟΘﾟ)=ﾟωﾟﾉ=3, (/｀ｍ´）ﾉ ~┻━┻ //*´∇｀*/)javascript:(ﾟДﾟ) =_=3; /^_^/ [-_-1] - /;*_*/ とりあえずエラーなく動くというだけで、実行結果にも絵にもまったく意味はないです。任意のコードをAAだけで実行させるのは、まだまだ遠い道のりです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5で何が変わる？ InfoTalk#17 フォトレポート － ＠IT自分戦略研究所