タグ

ブックマーク / www.koikikukan.com (7)

  • chrome拡張のポップアップ画面でalert()やconsole.log()を出力する方法

    chrome拡張のポップアップ画面でalert()やconsole.log()を出力する方法を紹介します。 1.問題点 「Google Chrome拡張の作り方(その4:オプション画面と保存データのバックグラウンド・ポップアップとの連携)」で作成したポップアップ画面のデバグをするために、次のようにalert()やconsole.log()をpopup.htmlに埋め込んでみましたが、alert()も表示されず、console.log()も出力されません。 var showOption = function() { var str = localStorage.getItem("test"); var obj = JSON.parse(str); console.log(obj['tab']) $('#maxtab').text(obj['tab']); }; $(function(){ s

  • 「file:///」でスラッシュが3つ並んでいる理由

    ブラウザにテキストファイルや画像ファイルをドラッグるすと、テキストや画像が表示され、URLが「file:///」で始まるのは皆さんご存知かと思います。 Windowsであれば、「file:///」「file:///C:/」と入力すれば、エクスプローラーのような表示を行うこともできます。 で、「何でスラッシュが3つ並んでるんだろう?」と疑問に感じていたものの、「まぁそういうものなんだろう」と、ほったらかしにしていました。 ということでこの疑問を解消すべく、「file:///」について真面目に調べてみました。 1.「file」について まず「file」は、ホストコンピュータ上でアクセス可能なファイルを示すもので、RFC1738(URL仕様)の3.10に以下の記載がありました。 3.10 FILES The file URL scheme is used to designate files a

  • CSSでfloatを解除する方法のまとめ

    CSSのfloatを解除(クリア)する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題(というか仕様)と、その対処方法についてネットで調べた情報を一通りまとめました。 1.floatにより親要素の高さが出なくなる(=背景がなくなる)問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi

    CSSでfloatを解除する方法のまとめ
  • ウェブサイトをgzip圧縮で高速化する

    ウェブサイトをgzip圧縮を使って高速化するカスタマイズを紹介します。当サイトでもgzip圧縮を利用しています。 1.gzip圧縮によるウェブサイト高速化のイメージ gzip圧縮によるウェブサイト高速化のイメージをご覧ください。 (クリックすれば拡大します) クライアント(ブラウザ)から、あるウェブサイトの「index.html」にアクセスしたとき、リクエストを受信したサーバでは、HTTPリクエストの分析や、「index.html」の圧縮ファイル「index.html.gz」の有無などをチェックして、圧縮ファイルが返却可能であれば「index.html.gz」を返却します。 返却できない場合は通常の「index.html」をレスポンスで返却します。 圧縮ファイルを返却できれば、データの転送量を減らすことができるので、これによりウェブサイトの高速化につながります。 圧縮ファイルは受信したブラ

    ウェブサイトをgzip圧縮で高速化する
  • TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」

    TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 1.サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 2.プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 3.プラグインのダウンロード githubのjQue

    TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
  • 「8.8.8.8,8.8.4.4」より速い「129.250.35.250」

    iPhoneDNSの設定変更が話題になっているようなので、レスポンスの速いDNSサーバがないか調べてみました。便乗記事です。 ネタフル - iPhoneのWiFi接続を高速化する魔法の数字「8.8.8.8,8.8.4.4」 測定ツールはWindows用の「DNS Nameserver Performance Benchmark」です。ツールの詳細は割愛しますが、測定するには下のスクリーンショットの「Nameservers」タグの右側にある「Run Benchmark」をクリックするだけです。 Bフレッツ接続のPCで測定しています。 1.ベンチマーク結果 まずはベンチマーク結果をご覧ください(クリックすればちょっと拡大します)。 測定している値は次の3種類です。それぞのれの意味については「私家版 ITプロフェッショナルの仕事術 - GRCのDNS BenchmarkでDNSをスピードアップ

    「8.8.8.8,8.8.4.4」より速い「129.250.35.250」
  • IE6/IE7/IE8/IE9のCSSハック

    IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 1.IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6:プロパティの先頭にアンダースコア「_」を付与 IE7:プロパティの先頭にアスタリスク

  • 1