JavaScript のワンライナーでカラーコード - IT戦記
RGB 値が分かってて #XXXXXX を計算するのめんどいなーと思って Firebug でやってみた。 '#' + [76, 84, 105].map(function(i){ return (i >> 4 ? '' : 0) + i.toString(16) }).join('') このくらいならワンライナーで書けて便利ー＾＾ 追記： 弾さんからトラックバックもらって見てみたけど弾さんはちょっとミスってたので再トラバします。 (function(r,g,b){return '#' + (r < 16 ? 0:'') + (r*65536+g*256+b).toString(16)})(15, 127, 255) http://blog.livedoor.jp/dankogai/archives/50911084.html これだと (function(r,g,b){return '#'
JavaScript で構文解析: Days on the Moon
C++ の特徴のひとつである演算子オーバーロード、その粋を極めたのが Boost Lambda (無名関数) と Boost Spirit (構文解析) ではないかと思っています。JavaScript では無名関数が使えるので Lambda に関しては間に合っているとも言えますが、Spirit はそうも行きません。JavaScript 2 で演算子オーバーロードがサポートされるのならチャレンジしてみようかななどと思ってそれきりになっていました。 しかし、一部でパーサブームが起こっているというのを受け、Perl 6 Rules をつらつらと眺めているうち、正規表現のメタ文字を使えば文法定義をきれいに書けるのではと思い至りました。そこで実際に JavaScript でパーサジェネレータを作り、Spirit にあやかって Gin (ジン) と名づけてみました。 文法定義 正規表現リテラルを使うこ
最速インターフェース研究会 :: キー割り当て用ライブラリを作った
依頼を受けて作ってみた。 http://la.ma.la/roll.html http://la.ma.la/js/hotkey.js j,kでスクロールできる。 使いまわしがきくように他のライブラリに依存も影響もしないように作ってあります。Bloglinesのj,kでスクロールみたいなのを作りやすいようにするのが目的。ただsafariとかは何かかなり違うらしいので、そこらへんは良く知らない。あとOperaはデフォルトでワンキーショートカットが割り当てられてたりするので動くとは限らない。 全体に対してキーイベントを設定すると、フォームの入力ができなくなるっていう問題があるのでイベントの発生元がinput|textareaの場合は処理しないようにしてある。 追加したコードはこんな感じ。 var kb = new HotKey; kb.add(["j","2","down"], functio
GreasemonkeyスクリプトのGM_xmlhttpRequestとかで取得したhtmlとかxmlをいじる場合はxpathだと遅いことが多いかも - gotin blog
GM_xmlhttpRequestはresponseXMLを返してくれない。 DOMを作ってくれない、ということ（作ってくれなくていいんだけど）。 xpathするにはDOMを作る処理が必要になる。 DOMParser使うとか、適当なelementのinnerHTMLに突っ込んだりする。 そのときの処理時間がそれなりにかかるので、正規表現とかでひょいひょいパースするほうが早く終わるケースが多いような気がする。 だけど正規表現だと読みにくくてつかれてしまうので、例えばこんな感じの関数でも定義しておけばそれなりに読みやすくなりそうだしそれなりに速いし、ってことになるかなぁ、どうだろう。 function getTags(html, tagName, className){ var cls = ""; if(className){ cls = "[^>]*?class=\"" + classNam
jQueryから学んだ名前空間を節約する方法 - 考え得る最高を常に行う
実装側では非常に苦労しますが、使い勝手は抜群。わざわざnew演算子を使ってインスタンス生成をしなくても関数の戻り値としてオブジェクトを使うテクニックです。 例を使って説明します。以下はDOMの操作で要素を削除する方法です。 普通の方法 var elem = document.getElementById('navi'); elem.parentNode.removeChild(elem); DOMのAPIでは直接要素を削除できません。いったんparentNodeをたどり、removeChildでDOMツリーから削除します。 普通のクラス化 var Elem = function(id){ this.elem=document.getElementById(id); }; Elem.prototype.remove = function(){ this.elem.parentNode.rem
Latest topics > getElementsByなんちゃら の代わりにXPathを使う - outsider reflex
Latest topics > getElementsByなんちゃら の代わりにXPathを使う 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « 不可逆的な変化に対する感じ方と、死 Main CSS3セレクタとXPathでの表現の対応表 » getElementsByなんちゃら の代わりにXPathを使う - Sep 09, 2007 拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。 W3CのDOMでは、要素ノード（およびそのリスト）を得る方法として以下の方法がある。 getElementById(aName) IDをキーにして単一の要素ノー
FirefoxのsetTimeoutの実装 - bits and bytes
Firefoxのソースコードを追っているうちに、たまたま1年遅れで IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 の裏側がどうなっているかがわかったので、その話を。 タイマーの管理方法 そもそもjavascriptからsetTimeoutを呼ぶと、どういう仕組みで指定した時間後に渡した関数が呼び出されるようになっているのでしょう。Linuxであればsleepのように一定時間後にawakeするという処理は、タイマーリストによって管理されています。カーネルの中にN jiffies(LinuxのOS内時間の単位はjiffyと呼ぶそうです)経過後に実行することリストがあって、カーネルが4msごとに毎回タイマーリストをチェックしてやることがあったときにはそれを実行しています。 FirefoxもLinuxと同じようにタイマーリストみたいな
digitrick | 一行で複数の外部JSファイルを読み込む
一風変わった（？）複数の外部JSファイルの読み込み方。 <script type="text/javascript" src="○○○.js?△△△.js,×××.js"> </script> 上記のように、一つ目のファイルの後に?で繋ぎ二つ目以降はカンマ区切りでsrc属性を書く。
2007-09-06
選択日curDateの日にちを1日に設定してから指定されたdateの月，年に設定し，カレンダテーブルを再生成しています。最初に日にちを1日に設定しているのは，日にちによっては意図した月と異なる月になってしまう可能性があるためです。たとえば1月31日を表すDateオブジェクトに対し setMonth(1)を実行する（Dateオブジェクトは1月を0として扱うため，1は2月を表す）と，2月31日ではなく，3月3日に変更されます。このようにDateオブジェクトは存在しない日時を示さないように適切に処理する機能があるのですが，カレンダの生成処理では指定した月に応じたカレンダを表示したいので，このような月のジャンプが起こらないようにしたいわけです。そのため日にちを先に1日するようにしています。 Greasemonkeyによるアプリケーション開発：第3回 Greasemonkeyによるカレンダアプリケー
スライドショーのようにテキストを読むGreasemonkeyスクリプト、YHC - FAX
JavaScript YHC – Userscripts.org 長文をスライドショー形式で読むテキストリーダーです。デモビデオ(1分半)は以下。kotorikoさんの『捨松定吉』を、ランダムフィルタをかけて読んでいます。 機能説明ウィンドウ右下のGreasemonkeyメニューから[YHC]を選びスタートさせます。先に文章の一部を選択している場合はその部分を、そうでない場合は対象となる部分をマウスで指定します。 操作は主にキーで行います。 キー機能Esc終了↓ or S再生開始/停止→ or J or Space次のスライド 再生中はスピードアップ← or K前のスライド 再生中はスピードダウンGジャンプHome先頭のスライドEnd最後のスライド ↓キーで再生を開始して、→キーで再生速度を少し速くして、速すぎたら←で遅くして。気になるところに戻りたい場合は、↓で止めて、←→で移動して手動
入力したキーを表示するGreasemonkeyスクリプト - FAX
JavaScriptFLASH KEY – Userscripts.org 操作を録画すると、マウスはカーソルが見えますが、キーは何を打ったかわかりません。このスクリプトは、最前面に角丸四角のボックスで押下されたキー内容を表示します。 適当です。セミコロン周辺や、ファンクションキーはマッピングしていません。適時、追加してください。
Latest topics > 他の拡張機能やFirefoxの機能を破壊しないための基本テク - outsider reflex
Latest topics > 他の拡張機能やFirefoxの機能を破壊しないための基本テク 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « いちばんになりたい Main ISBNコードからAmazonのアフィリエイトのリンクを生成するカスタムスクリプト for ContextMenu Extensions » 他の拡張機能やFirefoxの機能を破壊しないための基本テク - Sep 04, 2007 拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。 JavaScriptでは、普通に宣言した変数や関数はグローバルな物になる。 var name
アップした写真をお洒落に見せるJavaScript
久しぶりのJavaScriptネタです。最近は、マック（MBP）で作業することも多いのですが、アップルの提供する.Mac というサービスを使うと簡単に見栄えのよいホームページ（HP）を作成することが出来ます。このサービスはマックを使ってこそ活きるものですが。 で、何種類ものHP向けのテンプレートが予め用意してあるんですが、多くのテンプレには、デジカメで撮った写真を単に貼り付けるだけでなくて、それらをちょこっと斜めにしたり切手風に縁取りしたり出来て、お洒落に演出できるわけです。自分も以前からこういうことをppBlogでしたいなぁとは思っていて、現状、写真っぽく見せたりドロップシャドウを付けたりというのはスタイルシートを使って出来るようにしています。後は、切手風とか写真を少し傾けて貼り付けるとかですが、これらはサーバーサイドのPHPプログラムで画像を加工すれば可能なんだけど、写真をアップする際
JavaScriptがウェブを遅くする--今できる緩和策を考える
JavaScriptの1行が、今日のブログ技術に多くのパワーを与えている。ウィジェット、共有ツール、訪問者の追跡、広告。多くの場合、ブロガーは新しい技術を自分のブログに導入するのに、JavaScriptを1行加えるだけでいい。問題は、それらの1行のJavaScriptが多数組み合わされたときに起こる。 物理学には、非線形性と呼ばれる有名な現象がある。多くの異なることが相互作用すると、結果を予測するのが難しくなるのだ。ソフトウェアの場合も違いはない。多くのコンポーネントを組み合わせると、何が起こるか予測できなくなる。これは、各コンポーネントはスタンドアロンのように振る舞うが、それらは決まった区画内のスペースと閲覧者の注意を争う関係にあるからだ。そして、この争いはすべての人を傷つける。読者、ブロガー、サービス。誰もが不満を抱くことになる。 ブロガー：疑うことを知らない被害者 ウィジェットは今流
日本語向けfonts.css登場？ 無料で使えるJSライブラリYUIの基礎 | Web担当者Forum
去る8月10日、銀座のアップルストアにて「CSS Nite Vol.20」が開催された。 テーマは米ヤフーが無償で提供しているJavaScriptとCSSのライブラリ「Yahoo User Interface Library」。「YUI」の名で知られる、このライブラリに関して、米ヤフーのYUIチームエンジニアリングマネジャーであるエリック ミラグリア氏が来日して講演した。 編集部では、独自に日本語向けのYUI CSSに関する情報も入手したので、イベントの様子と併せてレポートしよう。 結論から言うと、YUIライブラリは非常によく作り込まれているので、どんなウェブサイト開発にも利用できる便利なもので、ぜひ使ってみてほしい。無償で利用できるうえに、利用条件としても、再配布時に著作権表示をするだけいい「BSDライセンス」で提供されているので、商用サイトで使う場合でも、ソースコードを公開する義務が生
prototype.jsを読み解く：第1回 Prototypeライブラリ（1〜197行目）｜gihyo.jp
他のライブラリや、自分のコードと共存させるときは、これらの名前と衝突しないように気をつける必要があります。同じ名前を使ってしまうと、コードがロードされた順番によって挙動が変わる、というようなわかりにくい問題が発生してしまう場合が出てきます。 オブジェクト、クラスの使われ方 ライブラリ内では、上記の名前空間は大きく分けて以下のような使われ形をしています。 その下に別のオブジェクトを入れるための親名前空間として使う Class.create()を使って Prototypeライブラリ風のクラスとして定義する Object.extend()を使って他のクラス、オブジェクトから継承されることを前提とする関数を集める コードを簡潔に記述する為に短い名前の関数として使う 特に、Object.extend()を使って継承を実現している箇所が多く、最終的にどのオブジェクト・クラスにどのメソッドが定義されてい
Firebug で XPath を簡単に試す方法 - IT戦記
適当に XPath を試したい時に 以下のようにすれば、簡単に XPath をためせます。 document.evaluate( '//div[@class="hoge"]', // XPath 式 document, // 基準となるノード（要素とか null, // 名前空間の解決方法（適当にやるときは null 6, // 取得する形式の指定（適当にやるときは 6 null // 結果を再利用するかどうか（適当にやるときは null ); 簡単ですね。 document.evaluate、式、ドキュメント、ヌル、６、ヌル。 覚えましたか？ でも、これを Firebug で実行するとこうなっちゃいます。 うーん。これではどの要素が選択されたかわかりません＞＜ 不便ですねー。 というわけで、以下のブックマークレットを実行してあげてください。 javascript:void(XPathRe
XPath のパーサ書いた - IT戦記
ふー。XPath パーサが出来ましたよ＞＜ わーい。 昨日中に作ろうとは思っていたけど＞＜ もうすぐ朝の 6:00 か。 もう 18 時間くらいはずっとコード書いてたんだなあ。集中してて時間が過ぎるのが一瞬だったよ。 XPath パーサのデモ http://amachang.art-code.org/xpathparser/ このデモでは、テキストボックスに書かれた XPath を動的に解析していきます。 実際に XPath を書き足していくと「うにょうにょ」構文木が構築されていく様子が分かります。 ちょっとおもしろいです。 注意 とりあえず、実装することだけを目標に書いたので、高速化や最適化やリファクタリングなどは一切やっていません。 あと、 パーサを作りながら、いろいろ勉強になって、いろんなことブログにも書きたいんだけど＞＜ でも、今日はもうヘロヘロ＆手がプルプル＆明日拡張勉強会なので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Greasemonkeyによるアプリケーション開発 記事一覧 | gihyo.jp
サービス終了のお知らせ