CSSにデータを埋め込む方法を考えてみた(CSS2KB) - latest log
ここ最近 DOM + CSS + JavaScript な Widget を作ってます。タブとかスライダーとかです。 Wiget の見栄えを切り替える方法(テーマ)も実装してますが、CSS とテーマ情報を格納するファイルが、別々のファイル(CSS + js)に分かれてしまうので、どうにかしてこれらを一元管理できないもんかと考えてました。 今日は、list-style-image: や background-image: の URL(QueryString) に定数を埋め込む方法を思いついたので、その説明です。 list-style-image: url(1dot.gif?key=val) の key=val が取り出せるか試してみる <!doctype html><html><head><title></title> <style> .widget { list-style-image:
Diff algorithm - 枕を欹てて聴く
id:smoking186 さんの指摘を受け, First Authorの名前などを付加しました. どうもです. 記事内のcodeは最適化などを施しておらず, 冗長に, 定義どおりに書いています. ifがまとめられたりとかしますが, そのあたりはご容赦を... Rubyでlevenshtein距離を見て以来, 個人的にdiffブームが来ていた. 計算量O(ND) / O(NP)のalgorithmなどがあるのは知っていたが, 論文(英語)および, 解説のみ, またはソースコードのみなど分かれているものが多く, algorithmに疎い自分には理解するのに大変時間がかかってしまった. しかしやっとわかったので, 解説+JS実装してみる. 解説とソースコードがセットだと, 多少はわかりやすくなるかと... 自分は正直これくらい細かく言われないとすぐにはわかんない人なので(the O(ND)だけ
CPUの使用率を表示するFirefoxアドオンをリリース - ククログ(2009-10-19)
CPUの使用率をFirefoxのウインドウ右上に表示するアドオンをリリースしました。ダウンロードはこちらからどうぞ。新しいバージョンがすでに公開されていますので、そちらを参照して下さい。 インストールすると、以下のイメージのようにウインドウ右上に直近のCPU使用率がグラフで表示されます。 プラットフォームは、WindowsXP SP1以降、Mac OS X、Linuxをサポートしています。Linuxではlibgtop2を使用していますので、別途インストールしてください。 また、このアドオンではCPU使用率をWebアプリケーションからも使えるようにしてあります。JavaScriptで以下のように書くと、intervalTime間隔ごとにfunctionが呼び出され、aUsageにその時のCPU使用率が渡ってきます。 system.addMonitor("cpu-usage", functio
くるくる回して入力するUIを作ってみた - 今日のごはんは素麺です
とある範囲の値を入力してもらいたいけど, テキストボックスじゃ自由度高すぎるし, 範囲が微妙に広いからコンボボックスじゃ選ぶのめんどいなー*1. そんなコトを考えているときに「こんなのどうよ?」と思って作ってみた. とりあえずこんな風になった このページを開いて, 青いボックスの上でマウスのボタンを押しっぱなしにすると, ちっこい矢印がでてくる. その状態で, その矢印を中心に: 時計回りにドラッグするとカウントアップ 半時計回りにドラッグするとカウントダウン します. 欠点 入力の仕方がわかりにくい*2 入力範囲が広すぎると何回もくるくるしなくちゃいけないのでめんどくさい とりあえず意外におもしろい動きなんじゃないかと思います. iPodのUI? 知らないお( ^ω^)*3 あ, もし使いたい方はこちらからJavaScriptのソースを取得してもらえればいいかと思います. ちなみにjQu
CanvasでParticles(Sand) - os0x.blog
「HTML5のcanvasで作る画像フィルター」は自分ならこう書く - by edvakf in hatenaとCanvasでローレンツアトラクタ - by edvakf in hatenaに刺激されてCanvasネタを1つ。といっても以前やったOperaのCanvasでParticles(Sand/Snow) - 0xFFの焼き直しです。 canvas sand (例によって劇重注意) Chromeで見ると良い感じだと思います(ただし、Chromeは容赦なくマシンリソースを使うのでPCが不安定になるかも…)。一応、uupaa-excanvas.jsを読み込んでいますが、IEのcreateImageDataはサポートされていないので、動作しません。Operaでも動くはずなんですが、基本動かないっぽいです…。リロードしてるとたまに動きます。よくわからない…。ただのキャッシュ問題でした… すご
Canvasでローレンツアトラクタ - by edvakf in hatena
pythonでローレンツアトラクタ（オイラー法） - yattの日記 この記事に刺激されて JavaScript でローレンツアトラクタを書いてみた。 ただ書くだけじゃつまらないので、Canvas を使ってちょっと趣向を凝らしてみた。 Lorentz Attractor with Canvas Sylvester という、2次元3次元のベクトル演算を扱う JavaScript のライブラリを使って、実際にプロットする部分は Sylvester をグラフに出力できるプラグインみたいなものを自作した。自作部分はパブリックドメイン。 Opera, Firefox, Chromium, Safari で動作確認した。id:uupaa さんの uupaa-excanvas.js をロードしてあるので、もしかしたら IE でも動くかも。(動いたら教えてください) あ、そうそう、WebGL が使えるよう
Web ブラウザに表示されている画面を直接編集する方法
これはすごい。Web ブラウザのアドレスバーに以下を入力し Enter すると、 今表示されている内容を直接編集できる。Firefox 3.0.14 と IE8 で出来 ることを確認した。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 WEBブラウザーに表示されている画面を直接編集する方法 - sanonosa システム管理コラム集 追記(2009-10-04): 戻す方法はないものかなあ。‘false’ と ‘off’ では出来なかった。 追記(2009-10-17): 「戻す方法」というのは、「編集モードから閲覧モードに戻す方法」のこ とです。端折った書き方ですみませんでした。もう少し楽な方法が見つかっ たので、以下に追記します。 IE では、以下を入力し Enter
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
加速スクロールをユーザースクリプトでやってみた - os0x.blog
ChromeのマウスジェスチャーExtensionで実験的に実装してみたやつが意外と面白かったので、少し手を入れてFirefox, Opera用にユーザースクリプトにしてみました。このスクリプトも実験的なものなので、その点はご了承ください。 Scroll Acceleration for Greasemonkey (Operaで使う場合はファイル名を.user.jsではなく.jsで保存推奨です) これはいわゆる加速スクロールってやつで、マウスホイールを素早く動かすと、速く動かした分だけたくさんスクロールするという代物です。 マウス自体や、マウスジェスチャーソフト(かざぐるマウスとか)にそういう機能があるみたいで、それをJavaScriptで実現してみました。 ちなみになぜ実験的なのかというと、こういう制御はユーザースクリプトのようなレイヤーではなく、OS寄りのところで実装するべきだと思うか
「HTML5のcanvasで作る画像フィルター」は自分ならこう書く - by edvakf in hatena
ASCII.jp：HTML5のcanvasで作る画像フィルター｜古籏一浩のJavaScriptラボ こちらの記事をたまたま拝見して、コメント欄もなければトラックバックもできないようなので、どうやって反応を返せばいいのかわからないけれど、もし古籏一浩さんご本人が見てくれたらいいなあ、ということで書きます。 全体的にはとても素晴らしい記事なのですが、いくつか言いたいことがあります。 ImageData まず、CanvasRenderingContext2D#createImageData というメソッド。これは知りませんでした。 Opera には window.ImageData というグローバルオブジェクトとして似たものが定義されています。(createImageData と違い、第三引数に配列を渡せるのが特徴ですが) if (window.CanvasRenderingContext2D
文書構造と動的なWebのアクセシビリティ | Web標準Blog | ミツエーリンクス
Mozillaでアクセシビリティ関連のQAを担当しているMarco Zeheが自身のBlogに “The importance of placement of HTML elements in a document” という記事を投稿していました。JavaScriptでモーダルダイアログなどを実現するものがありますが、実装方法によってアクセシビリティを著しく損ねることになるケースが紹介されています。 記事で例に挙げられていたのはThickBox。デモの写真やリンクをクリックするとダイアログが開くのですが、これは新たに生成したdivを文書の一番後ろに追加し、それをスタイルシートで調整するという実装が行われています。 表示上はなんら問題ない方法ですが、Zeheはこの「文書の一番後ろに追加する」ことに問題があると述べています。文書の最後に要素を追加してしまうと、内容の多いページにおいてはアンカー
「ExtendScriptをどうやって覚えたらよいのか？」について考えてみる - なにする？DTP+WEB
ExtendScriptとはJavaScriptをAdobeが独自に拡張（Extend）したもの。 Adobe InDesign、Adobe Illustrator、AdobePhotoshopとかで使う。 ExtendScriptを理解するにはまずはJavaScriptについて知る必要がある。 JavaScriptを理解すれば40%は出来たようなものだ。 JavaScriptの習得については、既に様々な良書が出ているし。 ネットにも沢山の情報が溢れている。 だから比較的、初心者にも簡単に学習を始めることができる。 さらに、「ExtendScript Toolkit」という開発環境まで用意されている。 補完機能もついているし、インターネットブラウザーでJavaScriptを学習するよりも効率がいい。 JavaScript: The Good Parts ―「良いパーツ」によるベストプラクテ
type detection - latest log
2011-07-10追記 モダンブラウザでは、 typeof /^a/ は "function" ではなく "object" に修正されています。2009年10月(このエントリの初出)時点で /^a/("a") と記述可能な場合がありましたが、現在はエラーになります。 2010-01-21追記 http://d.hatena.ne.jp/uupaa/20100120/1263998056 2009-10-18追記 uu.type(new String('hoge'))とか渡した時4が帰ってきたりするので、プリミティブラッパー（ってJSで言うのか？）の判定を_TYPEに入れたほうがいいのかもしれませんね。 by tera コメント欄でのご指摘を受け、以下のコードを追記しています。 "[object Boolean]": 0x40, // uu.type(new Boolean(false))
文書中のXPathだとかセレクターを取得するGreasemonkey - ?D of K
必要に迫られてようやく作った。 // ==UserScript== // @name XPath Finder // @namespace userscript // @include * // ==/UserScript== function $X(exp, context, type) { if (context && !context.nodeType) { type = context; context = null; } if (!context) context = document; var exp = (context.ownerDocument || context).createExpression(exp, function (prefix) { return document.createNSResolver(context).lookupNamespaceURI(
はてなブックマーク開発ブログ
はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。7月7日（月）～7月13日（日）〔2025年7月第2週〕のトップ30です*1。 順位 タイトル 1位 あの2人組が「ぽっこりお腹はどうすれば簡単に治るか？」を教えてくれる→「そんな腹筋で大丈夫か？」「大丈夫だ。問題ない」 - posfie 2位 何が長期的に出生率を下げてきたのか｜筒井淳也 3位 ※オススメです！【簡単！！ゆでて切るだけ】夏にぴったり！雲白肉(ウンパイロー) | 山本ゆりオフィシャルブログ「含み笑いのカフェごはん『syunkon』」Powered by Ameba 4位 速習 Claude Code 5位 たった5分でストレスを和らげる確かな方法6選、科学の裏付け | ナショナル ジオグラフィック日本版サイト 6位 【速報】米国依存から自立する努力必要と石破首相|47NEWS（よん
id:mindcatさんのJavaScriptエントリに少しだけコメント - os0x.blog
FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラムが凄く良く出来てて、くやしい。じゃなくて、折角なので少しだけツッコミを。いや、これだけ完成度が高いのにツッコミというのも無粋ですが。 数値を文字列に、逆に文字を数値に変換する String(x)、Number(x)を推奨されていますが、一応、IE6ではパフォーマンスに差が出る点に注意が必要だと思います。 to_string (関数呼び出しのコストのため)IE6だとこのように結構な差がでます。(といっても10万回での結果ですが。) "" + 78ms "" + 63ms String() 125ms String() 125ms確かにChromeなどString()のほうが少しだけ速いみたいなので、ケースバイケースですね。 JavaScriptで ""+x を文字列変換に使うのは気持ち悪い - 風と宇宙とプログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなハイク サービス終了のお知らせ
Admiral
N個の配列生成 - hogehoge @teramako
http://blog.fulltext-search.biz/archives/2009/10/greasemonkey-search-on-the-history.html