するするさせたい：サイボウズ採用情報のアニメーション（その3） - fragmentary
サイボウズ採用情報のアニメーションがするするしてないので調べた件、今回は雑記。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる 描画領域とPaint Flashing その1でPaint flashingを見たときにはアイコンの周りに枠がついていたのに、その2で描画領域を見たら文書全体で起こっていたたのをふしぎに思ったひとがいるかもしれない。 これはPaint flashingの説明 Hightlights areas of the page that need to be repainted というのをよく読むといいかも。緑色になったところは「再描画が必要になったところ」、paint invalidationを指している。なので変化していない箇所は緑色にならなかったわけだ。 Chrome
するするさせたい：サイボウズ採用情報のアニメーション（その2） - fragmentary
サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。 今回はするするさせられないか、がんばってみる。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションを止める まず、いまのjQueryベースなアニメーションを止める。 コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
HTML の script タグ内にインラインで書かれた js をデバッグする方法 - Qiita
はじめに HTML の script タグ内にインラインで書かれた js をデバッグする方法を共有します 本来であれば外部ファイルとして *.js にすべきですが、ワケあって <script> タグ内に js が書かれている場合に有効です！ この方法は script タグに囲まれた js を、 あたかも外部ファイルの js として扱えるようになります やってみよう 例えば、以下のような html があるとします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Qiita</title> </head> <body> <div id="hello">Hello World!</div> <script> document.querySelector('#hello').addEventListene
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
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
Google Chrome版Firebug：デベロッパーツール取扱説明書 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
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を挿入し、そのなかで読み込みに失敗した画像を
ChromeでGIFアニメーションを止める - by edvakf in hatena
Chrome だって Opera みたいにアニメーション画像を止めたい! ってなことで、XMLHttpRequest でバイナリを読み込む方法で GIF アニメーションの1フレームだけを取り出して、data:URL にする方法でやってみた。 止めた画像の上では、カーソルがこういうアイコンになって、クリックするとまた動きだす。 ↓インストール Pause! Pause! Pause! - Google Chrome 拡張機能ギャラリー ↓ソース edvakf's Pause--Pause--Pause- at master - GitHub ちょっと大きな画像になると replace(/[\u0100-\uffff]/g, function(c){ return String.fromCharCode(c.charCodeAt(0) & 0xff); }) の部分が1秒近くかかってしまうこと
Grab and Drag for Google Chrome - 素人がプログラミングを勉強していたブログ
MacのChromiumの最新版でしか確認していないのでそれ以外の環境で動くかは未確認。それから、cursor: -webkit-grab等の値は認識されているがカーソルに反映されていないようであり、よくわからないのでそのままにしてある。 乗り遅れないうちに、Google Chromeの拡張でも書いておこうかなと思って、Google Chromeで使えるGrab and Drag（iPhoneやAdobeReaderみたいに掴んでスクロールできる物）を作った。 javascripter/Grab-and-Drag · GitHub grab_and_drag.crx 現状ではメインの部分は下のようになっていて、クリックしてから300ms以上マウスを動かさなかったらドラッグではなくテキストの選択ができるようにした。 こういった状態遷移のあるプログラムでは、Stateパターンを使うとif文によ
GoogleChromeの拡張を作る上でFirefoxアドオン作者が知っておくべき10の違い【GoogleChromeでニコ動拡張を作ってみた感想】 - love_firefoxportableの日記
https://chrome.google.com/extensions/detail/bkdolnoepbjajdhjejfajjbjbnfhnifb 上記のニコニコ動画向けのExtensionを作ろうとして、色々と現時点でのGoogleChromeの拡張限界がわかったので書いておく。 ※環境はWindowsXP Home SP3, GoogleChrome4.0.249.30 右クリックはいじれない 調べた範囲じゃ無理。 データのダウンロード保存はできない 例えば動画サイトを開くと「DL」ボタンが生成されて、それを押すとあらかじめ指定しておいたフォルダへ自動的にバックグラウンドでダウンロードが開始される、といった動作は無理。落としたい動画URLをwindow.openで開けば自動的にダウンロードは開始されるけど、ニコ動で言えばsmile.flv?XXXXX.XXXXって感じのURLなの
グリモンuserscriptをChromeに移植するときに使う、GM APIのラッパっぽいものとプロジェクトテンプレートを書いた - 心魅 - cocoromi -
2010/10/17 公開先をGithubにしています。 http://d.hatena.ne.jp/umezo/20100411/1270988391 Chrome速くて良いのですが、いかんせん、グリモンとか便利な物が無い。 そこでグリモンのスクリプトをextensionとしてChromeに持って行きたいのですが、GM_*なAPIが無い…… さらに、extensionの制限上の理由から、完全に移植することは出来ません。 ただし、何点かの妥協と既存のuser scriptのちょっとした修正で移植可能です。 移植用に可能な限りGM_*をラップ出来るようなものを作りました。 http://umezo.tsuyabu.in/chrome/gmWrapper.zip 使い方 zipファイルを展開すると以下のようなファイルが格納されています。 manifest.jsonを移植するグリモンに合わせて編
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Big Sky :: Google Reader Full Feed for Chrome作った。
個人的には一番使っていて無いとちょっと不便に感じる自作のグリモンといえば「Google Reader Full Feed」なのですが、最近メインのブラウザをGoogle Chromeに変えた事もあり、使えずにちょっぴり不便になってました。 しかしながらGoogle Chromeに移植するとなれば簡単には行かないだろう事が分かっていたので移植するのを躊躇していました。先日、はてなブックマーク数を表示するGoogle Chrome Extensionも作った事だし、少しは知識もついたので、ようやく重い腰をあげて作ってみました。 最初は移植を考えてましたが、結構元にしているLDR FullFeedのコードがまばらになっていてメンテナンス性も悪かったので、今回は元のコードを捨てて１から作り直しました。とはいっても中で使っている部品などはConstellationさんの物や、os0xさんの物を使わせ
Google Chrome 2.0のUserScriptsはGreasemonkey互換のようで、そうではない - os0x.blog
嵌る人がいそうなので、先に書いておきます。 User Scriptsを書いてみると GM_系のAPIが一通り定義されていて、一見Greasemonkeyと互換性がありそうに見えますが実はほとんど機能していません。 実装は http://src.chromium.org/viewvc/chrome/trunk/src/chrome/renderer/resources/greasemonkey_api.js?view=log にあるんですが、例えば GM_[gs]etValueはlocalStorageを使っていて、(これはChrome 3.0 で実装される予定、つまり未実装なので)使うとエラーになります。 そのほかも、中身は throw new Error("not implemented."); となっていて、使うとエラーをぶん投げてきます(typeofとかでチェックしても使えるかわから
Google Chrome 2.0 で使える(自作の) User Scripts - 0x集積蔵
やけにあっさりと Google Chrome 2.0 がリリースされました。 というわけで、Greasemetal, GreaseKit で使える UserJavaScript (自作中心) - 0xFFのGoogle Chrome 2.0版(今回は自作のみ)です。 最初に、GreasemetalはGoogle Chrome 2にGreasemonkey相当の機能が実装されたため、開発を終了しています。ので、以下はChromeに搭載されたUser Scriptsを対象とします。(ちなみに、User Scriptsを書いてみようという方は、Google Chrome 2.0のUserScriptsはGreasemonkey互換のようで、そうではない - 0xFFをチェックしておくと良いかもしれません) User Scripts の導入 起動時に --enable-user-scripts オ
Safari や Google Chrome でもはてなスターで選択範囲を引用できるようにする Bookmarklet - IT戦記
今まで Google Chrome ではてスタしても、選択範囲の引用ができなかった＞＜ というわけで ブックマークレット作った。 以下のブックマークレットを実行してから、テキストを選択して、はてスタすると引用できるようになる。 javascript:window._gs = window.getSelection; document.onselectstart = document.ondblclick = function() { window._s = _gs()+'' }; window.getSelection = function() { return window._s || '' }; void(0); この方法だと、 getSelection を上書きしてるので、グリモン的に自動読み込みでやるのはお勧めしない。 もし、 HatenaStar.js を直すとしたら。 以下、
Google ChromeのCanvasがすこぶる速い件について - monjudoh’s diary
前置き mal_blue@tumblr Google Chrome 速っ！で、 Untitled Film Works | Professional Film Makersなる3Dゲーム風デモを引き合いに速い件について言及されていた。 それを受けて体感速度の比較記事(http://dara-j.asablo.jp/blog/2008/09/12/3756785)を書いている人も出てきた。 で、件の3Dゲーム風のデモなんだけど、 JavaScriptでゴリゴリ計算して2DのCanvasで3Dを表現みたいな感じなので、「Canvas の描画速度速い」じゃなくて巷で言われてるとおりの演算速度の速さが、表示の軽さにつながってるってことじゃないかなー。 こんな疑問を持ったので純粋にCanvasの描画速度だけ見るベンチマークを探してみた。 過去ブクマにはてなブックマーク - CanvasのdrawIm
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Developer Toolsを使いこなそう！
Google Chrome Extensions Tutorial: Getting Started (Hello, World!)