第19回HTML5とか勉強会発表資料 (Kanasansoft Web Lab.)
5つのツールを紹介し、weinreを一押ししていますが、他のツールが劣っていると言っているのではないのでお間違えなく...。 (口頭では説明したのですが、スライドには書いていないので念のため...。) リモートデバッグの前準備を理解してしまえば、使い方はFirebugやブラウザの開発ツールとほぼ一緒なので、是非試してみてください。 Operaのリモートデバッグ環境のDragonflyもありますし、Webkitでもリモートデバッグができるようになるらしいですが、ブラウザ側がXMLHttpRequestに対応していれば、同じ環境で作業ができるのがweinreの利点ではないでしょうか。 (ブラウザのネイティブなリモートデバッグが、共通のAPIを持つのが理想かもしれませんね。)
iOS等のブラウザにJavaScriptを送信して実行できるXiangpian(基本編) (Kanasansoft Web Lab.)
iOS上のJavaScriptのデバッグする仕組みが欲しかったので作りました。同じようなのが既にあるのですが、自分の要求を満たせなかったので車輪の再発明です。 iOS上のSafariを操作することを意識して作成されていますが、WebSocketに対応したブラウザであれば操作可能です。デバッグ環境と言っても、ステップ実装等の機能はありません。パソコン等から入力したJavaScriptのコードをWebSocketで送信し、iOSのSafari上で実行する仕組みになっています。JavaScriptの実行結果がパソコン側に戻ってきます。また、consoleオブジェクトをメタプログラミング的に拡張しているため、「console.log」等に渡された値もパソコン側に送信されます。 使い始めるには以下の手順が必要です。 ・Xiangpianのインストール ・Xiangpianの起動 ・ブックマークレット
XMLHttpRequestでファイルをDataSchemeで取得する実験 その3 (Kanasansoft Web Lab.)
// ==UserScript== // @name getFileByDataScheme // @namespace http://www.kanasansoft.com/ // @include * // ==/UserScript== ( function(){ var parseHTTPHeader=function(responseHeader){ var headers=responseHeader.split("\n"); var len=headers.length; var parsing=[]; for(var i=0;i<len;i++){ if(/^$/.test(headers[i])){ }else if(/^[\x09\x20]/.test(headers[i])){ if(parsing.length==0){ throw "SyntaxError:HTT
超強引に画像データを同期して読み込む方法 (Kanasansoft Web Lab.)
Firefox前提でIEは無視。他のブラウザでは可能かもしれない。ここまで強引にやる必要があるかどうかは置いておいて、画像データを同期で読み込む方法を見つけたので書いておく。画像を送信先に指定しているのでデータスキームでは「Access to restricted URI denied」(NS_ERROR_DOM_BAD_URI)というエラーになる。動作はFirebugで確認している。 ( function(){ var parseHTTPHeader=function(responseHeader){ var headers=responseHeader.split("\n"); var len=headers.length; var parsing=[]; for(var i=0;i<len;i++){ if(/^$/.test(headers[i])){ }else if(/^[\x
Canvasを利用して画像データをBase64で取得する時の制限 (Kanasansoft Web Lab.)
前のエントリーで書いたCanvas要素を使って画像データを取得する方法を試すために次のコードを書いた。 ( function(){ //Canvas要素を準備 var canvas=document.createElement("canvas"); if(!canvas.getContext){return false;} //画像オブジェクトの準備 var url=prompt("image url",""); if(url==null||url==""){ return; } var img=new Image(); img.src=url; //Canvasサイズの指定 // canvas.width="100"; // canvas.height="100"; //画像の描画 var cx=canvas.getContext("2d"); cx.drawImage(img,0,0)
「FIREFOX 3 HACKS」を読みました (Kanasansoft Web Lab.)
JavaScript人口やGreasemonkeyの開発者数を考えると、日本発のFirefoxのaddonの数は非常に少ないのではないでしょうか。この原因は、日本語で読めるaddonの開発方法が少ないかと思います。「FIREFOX 3 HACKS」はFirefox全般について書かれていますが、この書籍の3章はaddonの開発方法が日本語で書かれた数少ない文章のひとつではないかと思います。1章から5章までで358ページあるのですが、3章にはなんと140ページ、約4割も割り当てられています。Firefoxユーザだけでなく、Firefoxのaddonを開発したいと考えている人にお勧めします。 このエントリーでは「FIREFOX 3 HACKS」を読んで、後で読み返したい部分や気になった点等を列挙します。 まず、はじめに何点か注意点。 本の内容を書き過ぎて購入者が減ってしまい、著作陣に迷惑をかけて
JavaScriptでconcatはもう使うべきではないのかもしれない (Kanasansoft Web Lab.)
当エントリーは多くの誤りを含んでいます。参考にされる場合は最後の追記部分まで含めて読まれるようにお願いします。 それなりに慣れているはずのプロのプログラマでも、このような勘違いや大失態をすることがあるという教訓として残すために、エントリーの削除や修正はせずに追記のみに留めておきます。 JavaScriptで、配列に要素を追加するメソッドに、push、unshift、splice、concatがある。このうち、配列の後方に要素を追加するのは、(要素を好きな場所に追加可能なspliceを除くと)pushとconcatの二つである。この二つのメソッドは破壊的/非破壊的の違いがあれ、似たような挙動を示す。
profilerという処理速度計測用ライブラリ (Kanasansoft Web Lab.)
IEでもFirebugについてくる処理時間計測用のProfileという機能が欲しくて作ってみた。 IE8からはFirebug相当のデバッグツールがついてくるのでいいけど、IE6,IE7あたりでは結構使えるかも。 他のBrowserでも使えるはず。 FirebugのProfileのように勝手に計測してくれるのではなく、計測部分にコードを埋め込まないといけないのはしかたがないと思って欲しい。 以下、ソースとその後に使い方。 /* ================================================================================ Name : profiler In : [none] Out : [none] Note : 処理時間を計測する ----------------------------------------------
利用しているFirefoxのアドオン一覧 (Kanasansoft Web Lab.)
普段利用しているFirefoxのアドオンを紹介します。せっかくなので無効にしているアドオンも紹介し、何故使っていないかも説明してみました。全てのアドオンを同時に使おうとするとFirefoxが信じられないぐらい遅くなります。「Firebug」と「NoScript」等そもそも同時利用に向いていないアドオンもあります。Firefoxにはプロファイルをわけて利用する機能がありますので、普段用・開発用等、用途別にプロファイルをわけてアドオンをインストールしています。 All-in-One Gestures マウスジェスチャという機能を追加します。マウスの右ボタンをプレスした状態でマウスを動かしコマンドを入力するだけで、Firefoxを操作する事が可能になります。マウスでFirefoxを使う時には欠かせません。「戻る」を使うためだけでも入れる価値があります。 Bookmark Previews (無効
GreasemonkeyのGM_setValueで保存できるデータの種類 (Kanasansoft Web Lab.)
GreasemonkeyのAPIであるGM_setValueで保存できるデータの種類に制限があるのをご存知ですか? それを調べるために、次のようなUserScriptを実行してみます。 但し、unsafeWindowを使っているので信用のおけるsiteで実行してください。 // ==UserScript== // @name GM_xxxValueTest // @namespace http://www.kanasansoft.com/ // @include * // ==/UserScript== ( function(){ var data=[ ["Boolean",true], ["Number",12345], ["Number",12345.67890], ["String","12345"], ["Array",[1,2,3,4,5,"a","b","c"]], ["Dat
選択範囲を保存するBookmarklet (Kanasansoft Web Lab.)
dataスキームって文字列ならbase64しなくても使えるんですね。知らなかった。よくよく考えてみればなるほどです。ただ、encodeURIComponentは必要。で、こんなBookmarkletを作ってみた。 /* ================================================================================ Name : 選択範囲を保存するBookmarklet Ver1.0.0 In : [none] Out : [none] Note : 選択範囲の文字列を保存します。 -------------------------------------------------------------------------------- Version : Ver1.0.0 | 2009/01/10 | 新規作成 ----
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iOSのSafariがWebSocketに対応したので、WebSocketRemote for iOSを作りました (Kanasansoft Web Lab.)
JSDeferredを読む (Kanasansoft Web Lab.)