君は3つのリロードを知っているか？ - os0x.blog
はい、今さら聞けないウェブ開発者の基礎知識のお時間です。 ブラウザには3つの読み込みモードがあることはご存知ですか？ 2つくらいはわかるけど、3つ目が出てこないって方は少なくないかもしれません。 リロード 一番オーソドックスなのがブラウザのリロードボタンを押したときの挙動ですね。普通ですね。 スーパーリロード ブラウザによっては、スーパーリロードという機能を備えています。IEの場合Ctrl+F5(Ctrl+更新ボタン)、Firefoxの場合Ctrl+F5(Shift+更新ボタン)、Chromeの場合Shift+更新ボタン(Ctrl+Shift+R)などでスーパーリロードを呼び出すことができます。スーパーですね。 ページ遷移(リフレッシュ) 3つ目はちょっと良い名前が思いつかないのですが、リロードではなく、通常の画面遷移での読み込みのことです。アドレスバーにフォーカスしてenterするといっ
script, styleタグ内のコードの書き方 - os0x.blog
# 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<！--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし
Chromeで読み込みに失敗した画像についてリファラを消して再読み込みを試みる方法 - os0x.blog
[追記]実際に使用したい方は @civic さん作のLDR Image Loader extensionをどうぞ。 Chrome Dirty Hacks 01: fc2 image for LDR - 枕を欹てて聴くの別解みたいなのです。要は、livedoor Readerでfc2やアメブロの画像を表示してやろうというネタです。 まず、id:edvakfさんが実験していた edvakf's gist: 48621 — Gist から インラインフレームにdataスキームでhtmlを挿入するとlocationがそのdataスキーム自身になり、そこからのリクエストにはリファラがつかない というテクニックを応用して、さらに errorイベントキャプチャリングフェーズで監視*1して画像のerrorを捕捉 インラインフレームを作ってデータスキームのhtmlを挿入し、そのなかで読み込みに失敗した画像を
AutoPagerizeを軽量化するアイデア - 0xFF
先に結論を言うと、AutoPagerizeは拡張版がオススメです。以下その理由と余談的なお話です。 拡張版のAutoPagerizeについてちょっと勘違いしてました。AutoPagerizeは軽量化できるという話に路線変更します。 AutoPagerizeってのは、次のページを今見ているページの下に継ぎ足して、ページ遷移することなく次のページを見ることができる、ブラウザの機能を拡張するスクリプトです。 このAutoPagerizeは派生スクリプトがたくさんあって、FirefoxだけでみてもGreasemonkey版のAutoPagerize(本家)、cho45さんのjAutoPagerize、Add-onのAutoPagerize(本家)、AutoPager(作者は日本人ではなく、どちらかというと非日本語圏向けかも)などなど。他にもかなりの数があります*1。 で、Opera、Google
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でも動くはずなんですが、基本動かないっぽいです…。リロードしてるとたまに動きます。よくわからない…。ただのキャッシュ問題でした… すご
JavaScriptの勉強会資料を公開 - os0x.blog
私が講師役をしている社内向けJavaScript勉強会の資料をまとめて公開しました。 実践JavaScript - 株式会社ALBERT 社内勉強会資料 1回目を書いてからだいぶ間が空いてしまいましたが、その分6回分をまとめて、インデックスや見た目等々を整理してあります。 コードのハイライトには google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting を使用してみたのですが、すごく重かったので出力結果を静的に使っています。 オススメ回は実践JavaScript - JavaScript特有の問題・クロスブラウザなど - 株式会社ALBERT 勉強会資料でしょうか。特にクロスブラウザなDOMサイズ取得は自分でも良く参照してます。 間違いなどありましたら
Tween3とsetTimeoutの最適化 - os0x.blog
JSTweener ライクなアニメーション code snippets - 0xFF、Tween2.js - 0xFFの続編です。 今までは、複数のアイテムを動かす時に動かすモノの数だけタイマーが必要でした。対して、JSTweenerはタイマー一つで動くように作られていて、自作Tweenもそうしたいと思いつつ、そういう場合は素直にJSTweener使えばいいかと思っていました。 が、ちょっと極力コンパクトな実装(ブログパーツ的なものに貼り付けたりするので、サイズ的にも、名前空間的にも)が必要になったので、改めて実装してみました。 http://gist.github.com/188922 で、JSTweener Example (Motion Typo)を Tween3で再現してみたり Tween3.js (JSTweener Example (Motion Typo)) まあ、割といい感
gihyo.jpにChrome Extensionsの特集記事を書かせて頂きました - os0x.blog
先取り！ Google Chrome Extensions：第1回 Google Chrome Extensionsとは｜gihyo.jp … 技術評論社 本日より、4回の集中連載になります。いやはや、こういった記事を書かせて頂くのは初めてのなので、緊張しますし、予想はしていましたがやはり大変ですね。なんとか第2回分も提出できたので、原稿はあと2回です。 さて、Chrome Extensionsの特集について少し。 正直なところ、まだ記事を書くには時期尚早じゃないのって面はあります。ただ、英語のドキュメントはどんどん充実していっているのに、日本語の情報は断片的なものばかりで全然まとまっていないので、一時的なまとめだとしても十分に価値があるかなと思っています。紙面じゃなくてWEBだから改訂もできるしね。 で、第1回について。今回は概要的な話で、具体的なモノがないのでいまひとつパッとしないかな
Chrome Extensionsの作り方 2009/06/25版 - os0x.blog
続きは、特集：先取り！ Google Chrome Extensions｜gihyo.jp … 技術評論社 と、 連載：続・先取り！ Google Chrome Extensions｜gihyo.jp … 技術評論社をどうぞ。 用意するもの Google Chrome 3.0.190.1以降(dev版か、latest Chromium snapshotがオススメ。) 最低限必要なもの manifest.json JSON(not JavaScriptなので、値を'ではなく"で囲まないといけないなど、割と厳格なので注意)で書く拡張の定義ファイルです。 一応必須といえるのはnameとkeyの2つですが、とりあえずはnameさえあればOK。keyはパッケージするときに自動で振られるので自分で書く必要はありません。 { "content_scripts": [ { "js": [ "all.js"
OperaのCanvasでParticles(Sand/Snow) - os0x.blog
ふと、Saqoosha 先生の Snow*1をCanvasで出来たりするのかなーと気になって、ちょっと調べてみたら、OperaのCanvasが凄いと言われたので、早速移植してみました。 http://ss-o.net/test/opera.snow.html (Operaのロゴは404: Page not foundから) んー、(簡略化したのに)重いし、(簡略化したから)あんまり綺麗じゃないですね…… フィルターもないしこれ以上は難しいかなぁ。 一度に動かしすぎなだけか、もうちょっと改良しよう nitoyon先生のHello Snow!!!を参考に改良してみた。そこそこ良い感じになったかな。 snowってよりsandっぽいデモだったので、snowっぽいバージョンに更新した。 sandはこっちに http://ss-o.net/test/opera.sand.html ちょっと気になったの
大量に同じ画像を表示したいとき - 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); })();
期間限定、Google Chrome 2 の HiResTimeでベンチマーク - os0x.blog
dev版のGoogle Chrome 2.0.166.1を弄っていたら、HiResTimeというグローバル関数を見つけました。perlとかでお馴染みの高精度のタイマー関数のようです。 さっそく試してみましたが、非常に高性能でお薦めです……と言いたいところなのですが、実はChromiumではすでに廃止されてしまっているようです。 hide the native HiResTime() function. http://codereview.chromium.org/28201 というわけで、期間限定の機能です。この機会に是非お試しを(dev版についてはChrome Release Channels - The Chromium Projectsで)。 ちなみに、Chromiumといえば、GM_xmlhttpRequestのコミットが間近です。 Issue 27037: Implement G
OperaのpostMessageの実装(Opera10でLDR Full Feedを動くように) - os0x.blog
OperaでLDR Full Feed - 0xFFがOperaで動かない件を調べてみたら、Opera10でpostMessageの実装が修正させていることに気がつきました。 元々、OperaはHTML5のドラフト時の仕様に沿って document.postMesage を実装していました。その後 HTML5側ではwindow.postMessageに仕様が変更されたのですが、しばらくの間Operaは古い実装のままでした。 その後、Opera9.50でwindow.postMessageに修正されました。ただ、この修正は単にdocumentからwindowに移動しただけという中途半端なもので、originなどのセキュリティ周りもdocumentに実装されていたときのままでした。 postMessageはIE8でも実装されていて標準化が進んでいるのに、Operaが足を引っ張る形になっているの
1983パーリィ！だそうですよ - os0x.blog
june29さん企画の1983パーリィ！ : ATNDです。 ボクから見える範囲では1981と1986がとても盛り上がっていて，ちょうど間にいる1983はどうしたものかと． http://june29.jp/2009/01/18/1983party/ うんうん、私も身近な同級生にIT系に進んだ人がほとんどいないこともあって、同世代の人がどんな仕事しているのかとか気になっていたり。 というわけで、1983に興味のある方は是非。 追記: でも、id:os0xさんがエントリ入れるとはおもはなんだ。もっと年上かと思ってたのに。 http://d.hatena.ne.jp/hao_yayoi/20090210/1234234406 あー、よく言われるかな。 そういえば、あんまりプロフィール書いたことないなと思い、ちょろっとメモ。 1983/6/8生まれ 神奈川県の藤沢生まれ、藤沢育ち 小学校から大学
ブラウザの体感的な速さにおけるJavaScriptの比重は大きくないので、CarakanでOperaが劇的に高速化されるかのような期待を抱くべきではない - os0x.blog
Opera Core Concerns - Carakan 【速報】Opera新JavaScriptエンジンCarakan発表、50倍高速化も | エンタープライズ | マイナビニュース まー、もちろん劇的な違いを体感できるケースはあるだろうけど、少なくとも3Dとかハッシュとかの演算*1が速くなってもあんまり嬉しくないでしょう。 個人的にはClient-side Database Storageが載るかどうかが問題です。 # ちなみに、Firefoxは別で、体感的な速さにおけるJavaScriptエンジンの比重が大きい(アドオンとかが高速になる)ので、JITの効果に期待したいところ 体感的な速さとは、例えば「Ctrl+t押したときに新しいタブが何msで表示されるか」とか。Firefoxはこういうところが弱かったりする。IE7はもっと弱かったりする。 *1:[http://d.hatena.
JavaScriptによるブラウザ判別の実際 - os0x.blog
1 行でブラウザ判別を行うスクリプト (IE 用の日本語紹介記事、Firefox、Safari 用の日本語紹介記事) を発端に、SpiderMonkey の判別とブラウザ判別: Days on the Moon や JavaScript でのブラウザ判別 - 「仕様の盲点」ではなく、「プロパティの有無」を使う方がマシ - 2009年2月 - Blog - EOFなどの記事があがっています。 ここでは少し実際的なケースごとにサンプルコードを紹介していきたいと思います。(サンプルコードは適当に書いているので、不正確な箇所があるかもしれません。ご了承ください。間違い等ご指摘いただけると助かります。) なお、これらは汎用的なJavaScriptライブラリを使っていれば意識しなくても良いケースがほとんどです。 分岐する必要がないケース 分岐する必要がないなら、ケースとしてあげる必要はないと思われるか
空から降ってくる女の子(ゲームっぽく) - os0x.blog
空から女の子が降ってくる - ぼくはまちちゃん！(Hatena) id:murky-satyr先生 の http://gist.github.com/45346 を勉強目的に読んでたら、自分でも書きたくなってついやってしまった。すごく出遅れ感あるけど、折角なので公開。 <br /> javascript:H='http://hamachiya.com/g';E='.gif';R=Math.random;Q=new Image;Q.src=H+1+E;N=90;P='%';I=0;L=function(Y,r,V,f,S){S=(V=Q.cloneNode(r=R(Y=N)+1)).style;S.position='absolute';S.right=R()*N+P;(B=document.body).appendChild(V);f=function(){Y>2?(S.bottom=(Y
AutoPagerize#SITEINFOのinsertBeforeを省略する際の精度をあげる - os0x.blog
AutoPagerize0.0.18 - SWDYHより、 siteinfoにinsertBeforeがなくてもいいようにしました。 とあって、実装は下記のようになっている。 if (info.insertBefore) { this.insertPoint = getFirstElementByXPath(info.insertBefore) } else { var lastPageElement = getElementsByXPath(info.pageElement).pop() if (lastPageElement) { this.insertPoint = getFirstElementByXPath('following-sibling::node()', lastPageElement) } } .insertBeforeが空だったら、{{pageElementの最後の
AutoPagerize_operaにaddFilterとか実装してみた - 0x集積蔵
AutoPagerizeをOperaに移植してみた - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥に手を入れて、addFilterなどを実装してみました。 [追記] 対応サイトが増えたoAutoPagerize - 0xFFをどうぞ。 [/追記] 最新版 http://ss-o.net/userjs/test/AutoPagerize_opera.user.js 最新.js版(オススメ) http://ss-o.net/userjs/test/AutoPagerize_opera.js 更新情報 2008/01/27 01:26 いまさらながら本家0.0.19にあわせて更新。oAutoPagerizeのsiteinfo移植。 2007/11/02 11:00 Tumblrのリニューアル、kichikutter、limilic.comに対応。 2007/1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
