(〜・◇・)〜 o O ( 闇色 JavaScript イディオム〜 - latest log
(ε・◇・)з o O ( 最近ブログ書いてないなー、そろそろ書かないとなー (ε・◇・)з o O ( JavaScriptイディオム集 が大人気かぁー、もうすぐブクマ1000個とかすごいなー (ε・◇・)з o O ( よーし。便乗して、ボクも手持ちの闇色な奴を幾つか紹介するよー window.onload をもっと使い倒したい? (ε・◇・)з o O ( window.onload には、コールバック関数を1つしか設定できないという昔からの制限があるよね? (ε・◇・)з o O ( そこを中央突破ですよ! __defineSetter__("onload", function(callback) { addEventListener("load", callback); }); (ε・◇・)з o O ( はい、これで何個でも設定できちゃうね onload = function(
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JSでローカルスコープ作るときのアレの意味
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / JSでこういうの見たことあるんじゃないかと思います。 何これと思ってたんだけど、Paul Irishがスクリーンキャストで解説していた。 まず、undefinedについて。これは、undefinedという値はJSでは上書き可能なので、こうやって、渡されない引数を使えば、このfunction内では確実にundefinedがundefinedであることを保証できる$=jQueryは、$がjQueryであると中で保証させるするためwindow, documentについては意味ないんじゃ？と思いきや、これは、主にJSのminifierのため。これをやると、JSのminifierは、関数内でwindow
実行間隔を調整する - はてなダイアリー - 無料で簡単。広告のないシンプルなブログをはじめよう！
JavaScriptDebouncing Javascript Methods | Unscriptable.com 密に処理が実行されてしまうのを避けるため、二つのかたちがあるとのこと。下のデモ。throttleは、0.5秒ごとに点の位置が変わる。debounceは、0.5秒いると赤くなる。 デモ throttleひとつ目は一定間隔以内の呼び出しは間引いて無視する方法。イベントの発生頻度が多く、処理が重い場合に使う。 Function.prototype.throttle = function(threshold, alt){ threshold = threshold || 100; var me = this; var last = Date.now(); return function(){ var now = Date.now(); if(now - last debounceも
progress.from.tv » JavaScriptでJavaのようなenumを定義するには？
Java 5.0がら導入されたenumは、他の言語のenumと異なって、独自のメンバーを所有することができる。(また、互換性維持の為、Javaのenumはコンパイル時にクラスへと変換される) 参考： J2SE 5.0 Tiger 虎の穴 Typesafe Enum http://www.javainthebox.net/laboratory/J2SE1.5/LangSpec/TypesafeEnum/TypesafeEnum.html これは非常に便利。たとえば、リバーシの駒を列挙型で表現するとき、列挙値として、黒、白を定義し、さらに裏面を取得するメソッドを定義できる。 今回は、これをJavaScriptで実現するための方法を考えてみた。 Javaで記述した場合、次のような感じ。 public enum Piece { Black, White; public Piece getTurn
string.prototype.i - taizooo
@suzukiiiiiiiiiiの「i」は10個という話をふと思い出して、文字列の最後の文字を繰り返すメソッドを書きました。 var suzukiiiiiiiiii = 'suzuki'.i(10); のように使えば絶対に間違えません。発展させていい感じの記法に出来ないだろうか。 http://less.carbonfairy.org/post/869074107/string-prototype-i var x = 'taizo'.i(3); var y = 'go'.i(2)+'gle'; var z = '3'.i(2); ???! http://d.hatena.ne.jp/taizooo/20100803/1280794504 http://gyazo.com/3f149cc20c57052221edbfa9b6f35181.pngTue Aug 03 07:53:41 via
コードを削る - latest log
Twitter だとちょっと厳しいので、こっちでまとめ。 MobileWebKit に対応しようと思ったら、コードをなんとかして削る必要があります。 AND 演算子 で 4byte 削る(10byte → 6byte) if (a) { b(); } ↓ a && b(); OR 演算子 で 5byte 削る(11byte → 6byte) if (!a) { b(); } ↓ a || b(); ドット演算子以降を自力で Minify する JavaScriptは動的な言語なので、ドット演算子以降は基本的に minify しても圧縮されません。 document.createElement("div"); document.createElement("a"); document.createElement("p"); ↓ このままだと、minify しても縮まらない document.
オブジェクトのコピーと継承 - prog*sig
循環参照を含むオブジェクトのディープコピー - 素人がプログラミングを勉強するブログ http://d.hatena.ne.jp/javascripter/20081115/1226739628 function deepCopy(orig) { var clone = {}; return (function (orig, clone, visited, ref) { for (var k in orig) { var v = orig[k]; if (v instanceof Object) { var i = visited.indexOf(v); if (i == -1) { var o = {}; visited.push(v); ref.push(o); clone[k] = arguments.callee(v, o, visited, ref); } else { clo
140文字以内でパスワード丸見え - latest log
パスワードを忘れちゃった時などに。 Firefox3.5+, Safari4+, Google Chrome, Opera10.10+ で動きます。IE9でも動くかもしれません 76byte javascript:document.querySelector("input[type=password]").type="text";void 0
ライブラリの一部でありながら単体利用も可能にする工夫 - latest log
140文字を超えちゃうので、こちらで。 JavaScriptなコードを書いてると「このへんの処理はどこにも依存してないから、特定のライブラリの一部ではなく、単体でロードしても使えるような部品としてまとめられたらなぁ」とか「でも、ライブラリの一部として利用する場合にグローバルネームスペースを汚染するのはダメだよなぁ」と、考えたことはありませんか? window.uu 以下をライブラリのネームスペースとして利用している uupaa.js では、このような工夫をしています。 // === uu.base64 / window.base64 === (function(namespace) { namespace.base64 = { encode: base64encode, // base64.encode(data:String/ByteArray, // toURLSafe64:Boole
GIGAZINE - クリックするだけで編集可能な「Easy AJAX Inline Text Edit」
GoogleCalendarもそうでしたが、クリックするだけで編集可能になり、そのまま別のところをクリックすれば保存完了というAJAX。 いちいち「編集」とか「保存」とかそういうボタンを押さずに済むのでラクチン。 例はこちら。 Example page: instant edit AJAX-style http://www.yvoschaap.com/instantedit/ ソースコードのダウンロードや解説は以下を参照。 YvoSchaap.com ほかにもダブルクリックでインラインディタとして「FCK Editor」を呼び出す例。 Inline Text Edit with FCK Editor
Photoshopのスクリプト制御：CodeZine
はじめに Photoshopは、印刷、デザイン、Web製作、ゲーム開発などのさまざまな仕事の現場で利用されている画像加工・作成アプリケーションです。このPhotoshopは、バッチ処理を行う強力なアクション機能を備えています。しかし、少し複雑なことをさせようとすると、とたんに限界に行き当たるのが現実です。 Photoshop 7.0以降では、Scripting plug-inを使うことで、プログラミングで直接Photoshopを制御できるようになりました。この機能を使えば、アクション機能では実現できなかった細かな処理を行えます。 例えば、ファイル名の作成などの「文字列処理」、画像サイズを計算して求める「計算処理」、そして「条件分岐」といったプログラム特有の処理は、アクション機能では実現できないものです。 本記事では、JavaScriptというWeb関連の技術者におなじみのプログラム言語を使
デフォルトのフォームをクールにカスタマイズする方法:phpspot開発日誌
maratz.com archive Fancy checkboxes and radio buttons Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included). デフォルトのフォームをクールにカスタマイズする方法。 以前、「Niceformでエレガントなフォーム生成 」というので独自フォームにデザイン変更する方法をお伝えしましたが、どういう仕組みか気になっていました。 独自フォームデザインの実装方法について書かれているサイトを発見したので仕組みを説
Enjoy×Study - JavaScriptの正規表現で、メタ文字の"\s","\d"はクロスブラウザでの互換性が無い。
正規表現で"\d"は、"[0-9]"と一緒だとずっと思っていましたが、FireFoxでは全角数字もマッチします。(FireFox1.5.0.4で確認) /\d/.test('1') // =>true /\d/.test('１') // =>trueちなみにIE 6、Opera 9では、"/\d/.test('１')"はfalseとなります。 気になったので、"\s"、"\w"についても調べてみたところ、下記のような結果になりました。 パターンFireFox 1.5,2.0IE 6, 7Opera 9 /\s/.test(' ') // 半角truetruetrue /\s/.test(' ') // 全角truefalsetrue /\d/.test('1') // 半角truetruetrue /\d/.test('１') // 全角truefalsefalse /\w/.test('
最速インターフェース研究会 :: Shibuya.js #2 でしゃべってきました
前回に続き、shibuya.jsでしゃべってきました。 プレゼン資料はこちら。諸事情により少しフォントが小さめです。 http://ma.la/files/shibuya.js/techtalk2.html JavaScriptが無効でも閲覧できるように画像に変換しておきました。 いくつか補足 - APIは最初から全部できてるわけじゃなく、必要に応じて拡張していく感じ - 最初はダミーのJSONを読み込ませたりする - プログラマはクライアント側一人、サーバー側一人、の計二人 - UIを作るのは分業できない気がする。 - 「とりあえず動く」状態ものは10日ぐらいで出来た。3月の頭ぐらい。 - プロトタイプを発展させてって、そのまま本番用になった。 - APIは今のところPlaggerで使ってる例もあるけど(Plagger以外で使ってる例ないけど)、人間向けのサーバーにアクセスが来るのは良く
最速インターフェース研究会 :: 萌ディタとSleipnirとWEBrickを使って人のサイトのCSSをリアルタイム編集するデモ
Shiubya.js #1で話したネタですが、Winkでデモを作ってみました。 http://la.ma.la/misc/demo/realtime_cssedit.htm エディタとブラウザが並んでて窮屈ですが、実際はこれを20インチワイド液晶縦置きデュアルでやります。 仕組みは、WEBrickでローカルプロキシを立てて、同名のファイルがローカルにある場合は内容を置き換えて表示する、というもので、CSSやJavaScriptを編集するのに向いています。 プロキシサーバーはPerlで書かれた同等のものがここにあります。 http://www.ornithopter.jp/archives/2006/05/perl_perl.html 自分が使ってるのは必要に応じて行き当たりばったりに拡張していったりするのですが、現時点でのソースを置いておきます。 http://la.ma.la/misc/
L'eclat des jours(2006-07-24)
_ きたこれ EZwebにGoogle検索、7月20日から──KDDI ['^http://ezsch\.ezweb\.ne\.jp/search/.*?query=([^&]*).*', 'ezweb検索(\1)'] をtdiary.confの@referer_tableに追加（ぴったり20日からだから間違いないと思う。.*?が入っているのは"search/?query="となるパターンと"search/ezGoogleMain.php?query="となるパターンの2種類があったので）。 よたらぼでも話題になってるなぁ。 _ DI&AOP表紙出た Seasar2で学ぶ DIとAOP アスペクト指向によるJava開発(arton) （キャッシュ消すまで更新されないんだな、これが）(キャッシュ消して取り直した) 意見が通ったのか最初からそのつもりだったのか、「アスペクト指向による」は副題と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexible callback arguments
http://caolanmcmahon.com/writing_for_node_and_the_browser.html