君は3つのリロードを知っているか？ - os0x.blog
はい、今さら聞けないウェブ開発者の基礎知識のお時間です。 ブラウザには3つの読み込みモードがあることはご存知ですか？ 2つくらいはわかるけど、3つ目が出てこないって方は少なくないかもしれません。 リロード 一番オーソドックスなのがブラウザのリロードボタンを押したときの挙動ですね。普通ですね。 スーパーリロード ブラウザによっては、スーパーリロードという機能を備えています。IEの場合Ctrl+F5(Ctrl+更新ボタン)、Firefoxの場合Ctrl+F5(Shift+更新ボタン)、Chromeの場合Shift+更新ボタン(Ctrl+Shift+R)などでスーパーリロードを呼び出すことができます。スーパーですね。 ページ遷移(リフレッシュ) 3つ目はちょっと良い名前が思いつかないのですが、リロードではなく、通常の画面遷移での読み込みのことです。アドレスバーにフォーカスしてenterするといっ
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
どう書くXPath:ここからここまで - os0x.blog
XPathの不便なところ - ぶろぐ。@はてなより、http://labs.cybozu.co.jp/blog/akky/archives/2009/02/interviewd-by-junior-high.htmlの本文を取るXPathを考えてみた。 とりあえず、2パターン。*1 id("center")/div/*[preceding-sibling::*[following-sibling::h2] and self::*[not(preceding-sibling::p[@class="posted" and a])]]id("center")/div/*[self::h2[following-sibling::h3] or (preceding-sibling::h2 and following-sibling::p[@class="posted" and a]) or self
JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
ユーザースタイルシートでChrome風ステータス表示 - os0x.blog
Chrome風なステータスバー表示をするSafari拡張が何種類か出ているみたいですが(どれもText URL Linkerと相性が悪く…)、CSSだけで大体実現できそうだなと思い、試してみました(Text URL Linkerとの相性が良いので)。 このスタイルはサイトによって、リンクがクリックできなくなるなどの不具合を起こす可能性があります。ご了承を。 @namespace url(http://www.w3.org/1999/xhtml); a[href]:hover:before{ content:attr(href) !important; display:inline-block !important; position:fixed !important; left:0px !important; background:#ccc !important; height: 1.5e
NinjaKit - os0x.blog
NinjaKit*1というChrome/Safari拡張を公開しました。 Chrome:Chrome Web Store - NinjaKit Safari:NinjaKit for Safari Source: os0x/NinjaKit · GitHub これはFirefoxのアドオンであるGreasemonkey相当の機能を実装することを目指しています。 今のところ、 GM_xmlhttpRequest GM_addStyle GM_getValue GM_setValue GM_deleteValue(new in ver 0.7) GM_listValues(new in ver 0.7) GM_log GM_openInTab GM_registerMenuCommand(Safari版は未サポート) Metadata @include @exclude @require @b
Twitterで自分がブロックしているユーザーを確認するブックマークレット(とサービス) - os0x.blog
Who I Block? by @arikfrでSign in with Twitterボタンをクリック→Twitterのサイトに飛ぶのでそこで拒否か許可を選択。whoiblockに戻るとブロックしているユーザーが表示される。こちらでは下記のようなブラウザの再起動みたいな手間もなく割と安全に確認できるはずです。ただ、このサービスを私とは一切関係がないので本当に安全かどうかは(私は)保証できません。あしからず。 Twitterの仕様変更により、下記のブックマークレットは動作しません。 http://twitter.com/ を開いた状態で、下記をブラウザのアドレスバーに貼り付けて実行すると認証ダイアログが出るので、ユーザー名、パスワードを入力してください。サイドバーにユーザー名がずらっと出てくると思います(一人もブロックしてなければ何も出てきませんが)。 なお、一度認証を通すと、ブラウザを再
Googleのトップページを開くと毎秒100回実行されるスクリプトを止めるユーザースクリプト - os0x.blog
Googleのトップページを開くと毎秒100回JavaScriptが実行されるよ - 射撃しつつ前転をみて、ちょっとソース読んでみたらホントにそんな実装になっていた。んじゃ、止めちゃいますかってことで、サジェスト自体はそのまま機能させつつ、IMEでの確定前の入力には反応しないという実装に無理やり変えるスクリプトを書きました。一応動作を確認したのはFirefox3.5(Greasemokey 0.8)、Opera10、Google Chrome Dev(4.0.213.1)です。GreaseKitは実行タイミングの問題で怪しいかも。 404 Not Found – Userscripts.org ちなみに、なんでGoogleはポーリングをしているかっていうと、IMEが確定する前の入力途中のキーワードを捕まえるためのようです。そこまでする必要ないよって人も多そうですよね。そういう人向けのスクリ
IE6,7のためにArray.join("") による文字列連結を使うべき - os0x.blog
理由がない限り、Array.join("") による文字列連結は使わないほうがいいみたい - latest log の件について。 IE6の+による文字列結合が遅くて、Array.joinで連結するとマシになるよって話を(私が)初めて聞いたのはShibuya.js第1回の id:amachang の発表だったと思います。 Shibuya.js Technical Talk #1 を終えて。 - IT戦記 *1 少なくとも3年以上前のバッドノウハウが未だにIE6のみならず、IE7でも有効という現実に気が遠くなりそうですね。 で、IE6,7は基本的なパワー不足で、同じJavaScriptでも他のブラウザより処理が遅いことがほとんどです。遅いブラウザに合わせてチューニングをするほうが一般的なので、特に理由がなければArray.joinを使っておいたほうが無難だと思います。 Array.joinを
AutoPagerizeで継ぎ足された部分に自分のスクリプトを適用する方法あれこれ - os0x.blog
以前からある手法から順番に見ていきます。 ページの高さの監視 setIntervalでページの高さを監視して、増えていたらAutoPagerizeが動いたとみなして処理を行う var THRESHOLD = 300; var _height = window.innerHeight; setInterval(function(){ if (window.innerHeight - _height > THRESHOLD) { // 処理 } _height = window.innerHeight; }, 300); メリット AutoPagerizeだけでなく、はてなダイアリー・ブックマーク、Twitterなどでのサイト側でのページの継ぎ足しにも対応できる デメリット THRESHOLDをいくつにするかなど、一概に決められない。タイマーをたくさん回すと重くなる。Floatしている要素を継
JavaScriptの勉強会資料 - os0x.blog
JavaScript社内勉強会｜渋谷ではたらくベンチャーCTOのブログ 実践JavaScript - Event編 - 株式会社ALBERT 勉強会資料 月一で講師をしている、社内向けJavaScript勉強会の資料です。 初回はEvent周りの一般的な話(実際、割と良く目にするネタばかりだと思います)だったので、(かなり整形して)資料を公開しました。2回目は内輪ネタだったので、公開はなしです。次回(もう来週)はprototypeとか、thisの話とかにしようと思います。こちらは公開予定です。 資料は取説 正規表現をベースに、HTML5を意識してみたり、CSSでHTMLタグの可視化 - 0xFFしてみたりといった感じです。pタグが少しうるさい感じはしますが、割と綺麗な資料になったかなーと思います(まだしっくりしない部分はありますが、細部にこだわってもキリがないので)。 さて、資料作りをしな
AutoPagerizeの動作の流れ - os0x.blog
AutoPagerize くらいは - twwp宛て。 本家swdyh版について(oAutoPagerizeも主な流れは同じだけど)、ざっくりと処理の流れを(細かいところやメインでない部分は省いています)。 ページの読み込み→Greasemonkey起動(この辺は省略)、AutoPagerize起動 SITEINFOの読み込み SITEINFOの期限が切れていた場合、wedataから最新を取得 URLにマッチするSITEINFOがあるかチェック、なければ終了 SITEINFOのXPathが機能しているかチェック、XPathで要素を取れなかったら終了 初期化処理 次のページのURL取得 差込位置の決定、insertBeforeか、pageElementの最後の次の要素 右上アイコン・ヘルプの設置 スクロール監視の開始 読み込み開始位置の決定(どこまでスクロールしたら次のページを読み込むかは、
Twitter用AutoPagerize - os0x.blog
2009/04/30あたりのTwitterのリニューアルでAutoPagerizeがうまく動作しなくなりました。(Pager部分がJavaScriptを動的に生成するようになったため、SITEINFOだけでは対応できなくなってしまいました) 2009/05/07あたりから、oAutoPagerizeならデフォルトのままで動作するようになったみたいです。 FirefoxというかGreasemonkeyでは、 AutoPagerizeTwitterFilter - SWDYHがお勧めです。 JavaScriptを有効にしていないとページを遡ることもできなくなったので、その点に関して修正が入ればAutoPagerizeが再び動作するようになることも期待できるのですが、残念ながらそういった様子はないみたいです。 というわけで、Twitter用のAutoPagerizeを書きました*1。 twitt
CSSでHTMLタグの可視化 - os0x.blog
CSSのcontentで、insタグやdelタグの可視化ってのは少し前からやってたんだけど、 del:after{ content:"[DEL:" attr(datetime) "]"; } ins:after{ content:"[INS:" attr(datetime) "]"; } del:after, ins:after{ color:#888888; font-size:85%; } より多くのタグを可視化してみた。まあ、ネタのひとつです。UserCSSにしてみる(http://gist.github.com/101046)と面白いけど、すごく重いしすごく崩れるのでお勧めはできない。 ただ、「可視化しても可読性を損なわない、むしろ読みやすくなるHTMLを心がける」というのは良いことだと思う。 さすがにpとliあたりはクドイので、その辺りは消した。 del:before{ cont
JavaScriptは悪くない - os0x.blog
JavaScript の不思議な面白さ - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第二回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第三回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第四回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第五回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第六回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 最終回 - Yahoo! JAPAN Tech Blog のシリーズがJavaScriptの面白さよりも、暗黒面ばかり伝えてしまっている印象で、連載モノだか
Googleの検索結果からキーワードハイライトするGreasemonkey Script - 0xFF
先々週くらいからコツコツと書いていたキーワードハイライトするGreasemonkey Script(もしくは UserJavaScript)をリリースします。 word highlight for Greasemonkey 今のところ、Opera9.5+(Operaで使う場合はファイル名をword_highlight.jsで保存してください。.userはつけないでください)、Firefox3+、Google Chrome2(Devリリース)、WebKit Nightlyあたりで動作します。Safari3、4は後で対応するかも。 検索語を強調表示＆ショートカットが快適なグリモンスクリプト :教えて君.netで紹介記事頂きました。ありがとうございます。記事書くのすげー早い。しかも、要点書いてあるし、画像付きでわかりやすいし、ほんと嬉しいです。 特徴 高速(だと思う) XPathを使って検索する
大量に同じ画像を表示したいとき - os0x.blog
画像周りの速度メモ - #生存戦略 、それは - subtechの件。 最終手段として、CSSを使う。 .hatenastar{ display:inline-block; width:11px; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); } (function(){ var now = new Date*1; for (var i = 0; i < count; i++) { var span = document.createElement('span'); span.className = 'hatenastar'; container.appendChild(span); } document.title += ' css:' + ((new Date*1) - now); })();
SITEINFOのnextLinkケーススタディ - os0x.blog
AutoPagerizeのSITEINFOを書くとき、ネックになりがちなのはnextLinkのXPath。 pageElementのXPathは割とシンプルに書ける*1し、insertBeforeは省略しても構わない。 というわけで、nextLinkのXPathのパターンを簡単にまとめてみる。 aタグを直接指定できるケース 次のページのURLを情報*2を含む要素を直接指定できるケース。精度が高く、メンテナンス面も優れる。 Microformats 例:はてなダイアリー AutoPagerize本体にも組み込まれている通り、aタグもしくは、linkタグのrel属性にnextが指定された要素を取得する。 html <link rel="prev" href="/os0x/?of=5" title="前の5日分"> XPath nextLink: '//link[@rel="prev"]' 大抵
CSSの:target擬似クラスによるクリックで開くフッター - os0x.blog
予備知識として、target擬似クラスと、そのメニューへの応用についてはCSS 3のセレクタ解説：:root、:not、:empty、:target - builderとCSS 3のセレクタ「:target」でタブメニューをつくる - builderが良記事だと思うのでそちらを。 で、今回の場合はさらに応用を利かせて、クリックしたら開いて、もう一度クリックしたら閉じるようにしてみました。まあ、要はコントローラー部分をtargetの中に入れて、targetの状態によって、表示されるアンカーが変わるようにしただけです。(↓↓の「カレンダー、最近の記事、コメント、トラックバックを見る」というアンカーをクリックしてみてください。(アンカーテキストが冗長過ぎる感じだけど、スペース余ってるしわかりやすいからこれでいいや。)) #blogfooter{ position:fixed; bottom:0p
GM_addStyleの実装と最適化 - os0x.blog
GreasemonkeyのGM_addStyle関数は呼び出すたびにhead内にstyle要素を作る。 Greasemonkey 0.8.20080609.0のソースより。 function GM_addStyle(doc, css) { var head, style; head = doc.getElementsByTagName("head")[0]; if (!head) { return; } style = doc.createElement("style"); style.type = "text/css"; style.innerHTML = css; head.appendChild(style); } これは、はっきり言って効率が悪い。 補足:CSSをミスったときの影響が自分だけに留まるというメリットはある。 補足2:効率悪いと書いたけど、体感できるような話ではないと思
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
