Firefox 3移行、メモ - 戦争
以下でパスワードの類をコピー。 Mozilla Re-Mix: 別プロファイルでFirefox 3 Beta版を使う場合にデフォルトプロファイルからパスワードを移植する方法。[ブックマークの管理]から、ブックマークをインポート/エクスポート。キーワードなども全て移行された。各Greasemonkeyスクリプトは、手動で追加。{ProfD}/mimeTypes.rdfに以下を追加し、rarやzipやmp3をダウンロードするときに毎回聞かないように。たぶんセキュリティのため、知らないうちにウィルスをダウンロードしてしまったりしないように、この設定ができないようになってると思うので注意。NC:fileExtensions="rar"みたいに、拡張子を絞るといいのかもしれない。 の下に、以下も追加しておくとFirefoxのオプションで切り替えられるようにもなるみたい。 {ProfD}/styl
ページ遷移前に確認をする、onbeforeunload - 実用
JavaScriptwindowのonbeforeunloadハンドラで、Event#returnValueに値を入れると、ページ遷移直前にユーザーに確認ダイアログを表示することができる(んだって)。 以下コードの正常動作を、Firefox 2.0とIE 7で確認した。Operaでは実行されなかった。 window.onbeforeunload = function(event){ event = event || window.event; event.returnValue = '?'; } 以下は、IEとFirefoxの確認ダイアログのキャプチャ。 MochiKitでは、Event#confirmUnloadで確認ダイアログを出せる。 connect(window, 'onbeforeunload', function(event){ event.confirmUnload('?'
JavaScriptソースを整形して表示するGreaseMonkeyスクリプト、外部スクリプトのキャッシュ - 実用
JavaScriptsubtechグループ - マングローブ - VoxのTemplateクラス できちゃったGreaseMonkeyスクリプト!!そのページで利用されているJavaScriptをフォーマットと色付けを行い表示します。 ShowColorizedSource.user.js Web Developer拡張の[JavaScriptを表示する]機能をより見やすくしたものです。色の抽出と同じく、Web Developerのinformation.jsから多くをコピーして作りました。 以下はGoogleの検索結果で実行したイメージです。 調査したいページを表示し[ツール]-[User Script Commands]-[Show Colorized Source]をクリックすると、ページ内容が消えて、スクリプト一覧が表示されます。各スクリプトのタイトルをクリックすると、整形されたソ
メモ、Signal、音、リアクション - FAX
音無しのスーパーマリオブラザーズ、音無しのフィードリーダー。音が無いと、ゲームはおもしろくない。ジャンプした感じ、既読にした感じ、剣で切った感じが減る。 何かを書くと、必死にオススメしてるバカな感じになるのはなんでだろう。ただ、今日よぎったことだ。明日は、違うことを言いたい。 ShereOnTumblrは、ポストしたときに、画面では何も起きないところを失敗した。写真がグレーになるなり、なんらかのリアクション、手応えを表すべきだった。音は、リアクションの一つだ。だとすると、音はユーザーインターフェースだ。 視覚だけでなく、聴覚も使って情報を伝える。リアクションを確かなものにすることで、利用者を世界に招き、より集中へ近づける。 YHCでは、アニメーションで進捗と速さを視覚化した。これを音で代替できるかもしれない。視覚情報を聴覚情報へ移し、画面の要素を減らし簡単にできる。作業のリズムを作り没頭へ
内容に合わせて伸縮するテキストエリア - FAX
JavaScript追記 miya2000の日記 - 「内容に合わせて伸縮するテキストエリア」を Opera にも id:miya2000さんが、クロスブラウザに書き換えられています。GJ!こっちで!! デモビデオは以下(12秒)。 ユーザーが自分でリサイズできるテキストエリアをよく見かける(はてなも)。それを補助するGreasemonkeyスクリプトもある。 テキストエリアを横にリサイズしたいことはあまりない。バーを掴んで最適な高さにするのはめんどくさい。使う人は、ただ全部の内容が見えるぴったりの高さになってほしいだけなんだと思った。 サンプルコードは以下。fitting?、fittable?、expand?(逆に小さくもなる) キーダウンのイベントでも実装してみたけど、日本語入力を検知できないし、方向キーとか無視するコードもいるし、イベントハンドラ内では内容がまだ更新されてなかったり
スライドショーのようにテキストを読むGreasemonkeyスクリプト、YHC - FAX
JavaScript YHC – Userscripts.org 長文をスライドショー形式で読むテキストリーダーです。デモビデオ(1分半)は以下。kotorikoさんの『捨松定吉』を、ランダムフィルタをかけて読んでいます。 機能説明ウィンドウ右下のGreasemonkeyメニューから[YHC]を選びスタートさせます。先に文章の一部を選択している場合はその部分を、そうでない場合は対象となる部分をマウスで指定します。 操作は主にキーで行います。 キー機能Esc終了↓ or S再生開始/停止→ or J or Space次のスライド 再生中はスピードアップ← or K前のスライド 再生中はスピードダウンGジャンプHome先頭のスライドEnd最後のスライド ↓キーで再生を開始して、→キーで再生速度を少し速くして、速すぎたら←で遅くして。気になるところに戻りたい場合は、↓で止めて、←→で移動して手動
実用 - ウィンドウの外で発生するmouseupイベントを取得する、Firefox
JavaScript save the assistants 上記のスライダー、ドラッグを開始して、ウィンドウ外でボタンを離し、再度ウィンドウに戻るとずっと押しっぱなしのおかしな状態になる。これは、たぶんマウスが離されたことを検知できていないため。 WebFXのスライダーは、ちゃんと動く。実装を読んでみた。 Slidebar (WebFX) Firefoxは、文字を選択するようにドラッグを開始すれば、ウィンドウ外でマウスのボタンを外した時にもmouseupが起こせるようだ。これを利用し、見えない文字を選択し、選択状態も見えなくして、スライダーが正常に動作するようにしていた。 簡単なサンプルは以下。スライダに限らず、ドラッグ全般に使えると思う。mouseup以外に、mousemoveなども取れた。 IEの場合は、onlosecaptureイベントを使っていた。WebFX++
Podcastle Night。、ありがとうございました、SAGOOLをフーフーする - FAX
Podcastle Night。、ありがとうございました、SAGOOLをフーフーする Wiki小話/Vol.7 - Podcastle Night。 まず、会場を提供してくださった沖電気さん、平沼雄一郎さん、どうもありがとうございました。 最高の環境のおかげで、たくさんの人が楽しい時間を過ごせました。 権限のある立場の方が技術に理解があり、今回のようにサポートしてくれることは、とても、すばらしいことだと思います。 本当に。 結局、パパ、パトロンなんとちゃうんかなぁ。 あと、塚本牧生さん(ほかスタッフの皆さま)、諸雑務おつかれさまでございました。 立食パーティー、すごくよかったです。 いろいろな人と喋れました。 あと、id:nagayama総一郎の、幹事。 何も考えないで、ダラダラ連いていけば、そこは居心地のよい空間という、ハーメルンの笛吹き的ナイスさ。 交渉で安くなってたり、すごい!!
Deferred、結果値の保存、非同期にインターフェースを合わせる - FAX
JavaScript はじめてMochiKit.Async.DeferredのJSON取得のサンプルコードを見たとき、「いつ取得の処理が開始されるのか」、「なぜ、はじめにコールバックを渡さなくてよいのか」という疑問が起きました。ベルトコンベアで流れ作業を行うときに、作業者が並ぶ前に、材料を投入してラインを始動してしまっているような感覚です。そのサンプルコードは、以下のようなものです。 var deferred = loadJSONDoc('http://sample.com/data.json'); deferred.addCallback(function(data){ alert(data); // JSONデータが渡される }); MochiKit.Async.Deferredの最初のテストコードでは、ハンドラをセットして、コールバックして、その後に再度ハンドラをセットするテストが
Collection & Copy - Deferred、遅延リソースのインターフェース、パターン
JavaScript setTimeoutで実行される関数の中で発生するエラーは、セットした部分のtry/catchで補足することはできません。 function throwError(){ throw new Error('ERROR'); } try{ setTimeout(throwError, 3000); } catch(e){ // ここには到達しない alert(e); } MochiKit.Async.Deferredを使うと、エラーバックでエラーを補足できます。 callLater(3, throwError).addErrback(function(e){ alert(e); }); エラーの補足以外にも、Deferredのインターフェースから以下が行えます。 キャンセル(cancel)状態(fired)コールバックの追加(addCallback)エラーバックの追加
Deferredチェーン、非同期処理の逐次実行 - 実用
JavaScript MochiKit.Async.Deferredは、「現時点ではまた利用できない値」を扱うためのクラスです。 以下のように、コールバックを並べ、イベントを発火させると、各々の返り値が次のコールバックへ渡され実行されていきます。 function increment(value){ alert(value); return value+1; } var d = new Deferred(); d.addCallback(increment); // alert(1) d.addCallback(increment); // alert(2) d.addCallback(increment); // alert(3) d.callback(1); この時、コールバックは以下のようにチェーンを形成しています。(本当はエラーバックも合わせて一つのチェーンを形成しているのですが、
Collection & Copy - ドキュメントのロード完了に合わせて関数を実行する
JavaScriptページロード時にプログラムを実行するためにwindow.onloadやbody.onloadがしばしば使われる。しかし、ページ内に大きな画像が存在する場合などは、画像のロードを待つため、実行が遅れてしまう。「ドキュメントのロードが終わっていて、かつ、イメージのロードが完了する前」に関数を実行する方法のリンク2つの要点をコピー。 script要素defer、DOMContentLoadedイベントを利用する方法The window.onload Problem - Solved! Firefoxの場合非公式のイベントハンドラ、DOMContentLoadedを利用する。 // for Mozilla browsersif (document.addEventListener) { document.addEventListener("DOMContentLoaded",
Collection & Copy - テキストエリアのカーソル座標を取得する
JavaScriptテストコードのため書きっぱなしです。以下は、テキストエリアのカーソルの下に、候補窓がついてくるサンプルです。これをちゃんと書き直して、補完と組み合わせてみよう。 サンプル pre要素にborderやwidth/height、font-familyやword-spacingなど全ての属性をコピーしてテキストエリアのクローンを作り、その中のカーソルを真似たspan要素の座標を取得しています。もしかして、eventなどから簡単に位置を割り出せるのかなぁ。 カーソルの位置(文字数)はid:kosekiさんのCross Browser selectionStart/selectionEndをコピーして真似ました。 EditArea(コードが大変な感じ)も、テキストエリア(編集領域)とDIV要素(表示領域)を重ね合わせて色々なことをやってる。大量のspan要素で色づけ。 infog
改行コード、pre、textarea - FAX
JavaScriptpre要素内の文字を変更する際、改行コードの扱いが各ブラウザで異なるようなので以下コードで調べました。 var pre = document.getElementsByTagName('pre')[0]; pre.innerHTML='[R]\r[N]\n[NR]\n\r[RN]\r\n[END]'; pre.appendChild(document.createTextNode('[R]\r[N]\n[NR]\n\r[RN]\r\n[END]')); innerHTMLで追加した結果は以下です。IEOperaFirefox\r空白のみ○○\n空白のみ○○\n\r空白のみ改行×2改行×2\r\n空白のみ○○ createTextNodeで追加した結果は以下です。IEOperaFirefox\r○○×\n空白のみ○○\n\r○改行×2○\r\n改行+空白○○ この結果を見
Collection & Copy - 上下左右中央の件、改善、補足
Collection & Copy - 上下左右の中央にボックスを配置する id:inception9さんから、より簡単な方法をコメントで教えて頂きました！ありがとうございます。 これだ！これが正解だから、前回のが「バッドノウハウ(?)」なんですね。余分な空間用divもなくなり、ほんますっきりやわぁ。 ただ、どうも前回の元記事は「画面をコンテンツのボックスより小さくしても、ボックスの左上が欠けない」というところがポイントだったようです。たしかにウィンドウサイズを小さくすると、左上隅にボックスがきっちり収まります。ここにこだわらない場合は、短縮版がよさそうですね。 HTML、CSS、共に勉強不足ですので、直接指摘頂けるのは大変助かります。コメントを書く時間を頂けたことを、感謝しております。ではでは。 雑記軽い気持ちでHTML/CSSのことを書くと、なぜか反響が大きく、戸惑う。なんとなくプロ
Collection & Copy - JavaScriptにおける高階プログラミング
翻訳 原文：Higher Order Programming In Javascript著者：Sjoerd Visscherライセンス：クリエイティブ・コモンズ・ライセンス(帰属) 前提知識JavaScriptを使ったオブジェクト指向プログラミングの知識が必要となります。以下のWebreferenceの記事を読み、よく理解しておいてください。OOP in Javascript, part IOOP in Javascript, part IIDouglas Crockford最終更新2004/3/28はじめに高階プログラミングでは、値として関数を使うことができます。つまり引数として関数を別の関数へ渡すことも、関数を別の関数の返り値にすることもできるのです。この形式のプログラミングは、しばしば関数型プログラミングで使用されますが、「通常」のオブジェクト指向のプログラミングでも非常に有用です。
Collection & Copy - Rubyについて全てのJavaプログラマが知るべき10の事柄
翻訳原文:10 Things Every Java Programmer Should Know About RubyJim Weirichコンサルタント / Compuwarejim@weirichhouse.org Copyright 2005 by Jim Weirich (All Rights Reserved)自己紹介ジム・ワイリック (Jim Weirich)Compuware社コンサルタントJavaのプログラマRubyの熱狂的支持者大事なことを、まず先に私は以前、大規模製造会社の従業員に就業後のC言語コースを教えていました。提出されたCのコードのスタイルをちょっと見ただけで、生徒が以前にどんな言語を利用していたかを簡単に当てられました。全くもって本当のことです。「どの言語でも、君はFORTRANを書けるね」 Rubyを調査中のJavaプログラマなら、Rubyが色々な点でJav
JavaScript: 世界で最も誤解されたプログラミング言語 - 実用
翻訳 原文:JavaScript: The World’s Most Misunderstood Programming LanguageCopyright 2001 Douglas Crockford. All Rights Reserved Wrrrldwide. JavaScript(別名：Mocha、LiveScript、JScript、ECMAScript)は、世界で最も人気のあるプログラミング言語の一つです。世界中のほとんどのパソコンには、少なくとも1つはJavaScriptインタープリタがインストールされ動いていることでしょう。JavaScriptは、WWWのスクリプト言語としての確かな地位により広く利用されるようになったのです。 しかしその高い普及率にもかかわらず、JavaScriptが汎用的でダイナミックな優れたオブジェクト指向プログラミング言語であることはあまり知られて
AJAXアプリケーションのデバッグ、JavaScriptログ出力、Log4js - FAX
リンク Ajax非同期通信アプリケーションのデバッグを行う際に、以下ライブラリを利用し、ログ出力を行ないながら動作詳細を確認した。フランス製。 Log4js 前提クライアントとサーバーの通信をリアルタイムでログ出力を確認したい。Venkmanでステップ実行を行うと、タイムアウトが発生する。また正確なタイミングで振る舞いを確認できない。debug.jsは、まとめてフラッシュするため利用は難しい。 特徴ログを出力すると、リアルタイムに行が増えていく。ソートや、フィルタも存在する。debugや、infoなどのカテゴリ分けがある。ログと一緒に、オブジェクトインスペクタも表示できる。 利用手順ダウンロードし展開されたファイル全てを一つのディレクトリへ配置。HTMLヘッダに、以下を記述。 ログ出力したい部分に、以下を記述。debug、info、error、warnの4つのメソッドがある。フランス語、N
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スライドショー、ブックマークレット - FAX