Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
ラベル firefox の投稿を表示しています。 すべての投稿を表示
ラベル firefox の投稿を表示しています。 すべての投稿を表示

2011年11月29日火曜日

Google Calendar Header and Navigation Switcherを 最新のGoogleカレンダーに対応

FirefoxのGreasemonkeyで、Googleカレンダーのサイドバーと上部コントロールを非表示にしてカレンダー部分を広くできる便利な「Google Calendar Header and Navigation Switcher」というのがあるが、これがGoogle+風の新しいGoogleカレンダーのデザインだと機能しない。

Userscripts.orgにこれの解決策が書いてあった。

Broken with new look - Userscripts.org

Fixed it.    Change line 88 to: var head = new DisplaySwitcher("head", "#vr-proto-header,#topBar,#cornerBookmarks,#gbar,#gbarl,#guser,#ft+.s,.gbh", (#vr-proto-header is the new header) and add after line 45 (or pretty much anywhere inside DisplaySwitcher.prototype.toggle declaration) the following line: if (this.id=="navi") { document.getElementById("mainbody").style.marginLeft = hide ? "0px" : "210px"; } (to fix the white space that the hidden sidebar leaves)

要約すると、
  • 88行目で指定する隠す対象の指定(後述)を変更する
  • 45行目あたりに、下記のif文を追加する(サイドバーを非表示にした時に空白のスペースが残るのを防ぐため)
    if (this.id=="navi") { document.getElementById("mainbody").style.marginLeft = hide ? "0px" : "210px"; }

88行目で指定する、隠す要素の指定についてはいろんな意見が出てる。
  • #vr-proto-header,#topBar,#cornerBookmarks,#gbar,#gbarl,#guser,#ft+.s,.gbh
  • #onegoogbar,#vr-proto-header,#vr-proto-nav,#topBar,#cornerBookmarks,#gbar,#gbarl,#guser,#ft+.s,.gbh
  • #onegoogbar,#vr-proto-header,#vr-nav,#vr-header,#vr-proto-nav,#topBar,#cornerBookmarks,#gbar,#gbarl,#guser,#ft+.s,.gbh

3番目のahbiさんのやつが一番指定要素が多いので一番シンプルになる。

ただ、自分の場合はアカウントの切り替えができるOne Google Barは残したいので、88行目を下記のようにした。
  var head = new DisplaySwitcher("head", "#vr-proto-header,#vr-header,#vr-proto-nav,#topBar,#cornerBookmarks,#gbar,#gbarl,#guser,#ft+.s,.gbh",
refleshCal);

うん、快適。

2011年9月15日木曜日

画面をキャプチャするブラウザのプラグインいろいろ

ブラウザで表示している画面のスクリーンショットを撮るプラグインのメモ。



いずれも、Flashの領域もキャプチャできたし、画面全体をスクロールしてキャプチャする機能もあった。

画像形式は「キャプチャー イット!ツールバー」はJPEG、それ以外はJPEGかPNGから選べる。

Google Chromeの2つは、キャプチャ直後に新しいタブが開き、そこでキャプチャした画像の編集ができる。そのまま1クリックで印刷もできるので、画面イメージを印刷する用途には便利。
でも逆に、ファイルとしてどんどん溜めていきたい場合には毎回タブで開くより「キャプチャー イット!ツールバー」のように黙々とフォルダに画像ファイルを保存して行ってくれた方が便利かも。(「Screen Capture」の方は、設定でそうすることもできる。)

Chromeの「Screen Capture」以外は日本語化されていた。


ブラウザのプラグインではないけど、JTrimは画面キャプチャから画像の加工までできて便利。

2011年8月23日火曜日

各ブラウザのconsole.log()実装状況


Firefox以外のモダンブラウザは、標準で装備していた。

ブラウザ調査した
バージョン
ログの表示方法その他
IE8ツール

開発者ツール

「スクリプト」タブ
IE8以降で搭載。
String型にCASTされて出力される。
(Objectの中身は見られない。)
Firefox6.0アドオンのFirebugを使う


Chrome11.0ツール

JavaScript コンソール

「Scripts」タブ

Safari5.1ページのメニューボタン

開発

JavaScriptのデバッグを開始

「コンソール」タブ
Windows版で確認。
Opera11.50Operaボタン

ページ

開発者用ツール

Opera Dragonfly
バージョン11から搭載。
ObjectやArrayの中身は見られない。
CSS等のエラーとごっちゃに出るので見辛い...


所感
  • SafariやOperaはコンソールの表示方法が分かり辛い。
  • IEやOperaはObjectの中身を見られない(Operaは配列の中身も見られない)ので使い辛い。
  • Operaは他のエラー(CSS等)と一緒に出力されるので見辛い。


参考

2011年5月31日火曜日

Firefoxのアドオンから Java Consoleを削除する方法

Javaをインストールすると勝手にインストールされるFirefoxアドオンの「Java Console」。
要らないので削除したいのだが、通常のアドオンと違って「削除」ボタンが表示されないので普通には削除できない。

そこで、「Java コントロールパネル」で下図のように「ブラウザのデフォルトの Java」の「Mozilla ファミリ」のチェックを外したら、アドオン一覧に表示されなくなった。



同じような状況のアドオンとして「Java Quick Starter」があるが、これも同様に上記の図の「その他」のところにある「Java Quick Starter」のチェックを外せばアドオン一覧に表示されなくなる。

2011年5月25日水曜日

Twitterで情報収集するための便利ツールまとめ

Twitterで情報を集める上で便利なツールを集めてみた。

  • Advanced Twitter Search
    • Twitter自身によるTwitter Searchの詳細版
    • 要はTwitter Search Operatorsを使いやすいようにフォームにしたということか
    • キーワードはもちろん、発言者や言及先のユーザー、ユーザーの場所などいろいろ検索オプションがある
      • ユーザーの場所については、実は主にユーザーのプロフィールに書かれている場所からジオコーディングして取得してるだけなので結構間違ってたりする
    • OR検索は小文字の「or」ではなく大文字の「OR」なので注意
    • URLで検索すると、短縮URLは短縮前のURLで検索してくれる
    • 検索結果をRSSフィードで購読できる
    • Twitter本家からリンクしていないのはなぜ?
  • Google リアルタイム検索
    • Twitter等へのPOSTをリアルタイムで検索できる
    • Googleだけあって検索能力はTwitter Searchよりも強力
      • 例えば語句の揺れ(ひらがな⇔カタカナ、日本語⇔英語、タイプミス、等)に強いとか
    • 検索対象にFacebook等が加わったらしいけど、いまだに日本ではTwitterが独占状態
  • なんでも速報 Tweets on the Map
    • Googleリアルタイム検索の地図版
    • お天気専門の天気速報
  • ホームページのつぶやき見える君(仮)
    • ブラウザで表示中のページのURLを含むTweetを表示してくれるChrome拡張 & Firefox用Greasemonkey
    • 短縮URLでも拾ってくれる
  • Twitter Streaming API
    • Twitter等へのPOSTをリアルタイムで取得できるAPI
      • 通常は取得できる内容に制限がある
      • 制限なしで全Tweetを取得できるStreaming APIの「Firehose」の提供先にdocomoが加わったのは記憶に新しい
    • APIなのでプログラムができないと使えない
    • キーワードを指定しての取得は、日本語には対応していない
    • 解説(英語):Streaming API Documentation | dev.twitter.com
    • PHPでTwitter Streaming APIを使って特定のキーワードを追跡する例:P2_Service_Twitter

2011年4月19日火曜日

Google Font APIはどうやってマルチブラウザ対応しているのか

WebFontsを読み込む場合のCSSの書き方はブラウザごとに異なるため、こんなsyntaxを使う必要がある。
しかし、Google Font APIで読み込むCSSをではそんな書き方はしていない。
そこで、試しにTangerineのCSSを各ブラウザで読み込んでみて、Google Font APIがどのようにマルチブラウザ対応をしているのか調べてみた。


IE 8

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE');
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
URLはIE専用。
2行目のsrcはIE9用?


Firefox 4
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
URLはChromeと同じ。


Chrome 10
@media screen {
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
}
URLはFirefoxと同じ。
@mediaでscreenだけにしているのはAndroid対策か何かか?


Safari 5 (for Windows)
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}
URLはSafari用(Operaと共通)。アンダーバーで区切ってるのはiPhone用(iOS用?)が別にあったりするためか?


Opera 11

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}
URLはSafariと同じ。OperaもTrueType組。


まとめ
おそらくUser-Agentで判断して振り分けているだけのようだ。
フォントファイルは大きく分けると下記の3つに分かれるようだ。
  • IE8-
  • IE9+、Firefox、Chrome
  • Safari、Opera


参考:Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax) - フォントブログ

2011年2月17日木曜日

Gmailの新着メールを通知してくれる Firefoxアドオン 4つを比較

Gmailが進化して、Google Chromeなら拡張なしでも(HTML5を使って)Gmailの新着メールをデスクトップ通知してくれるようになった。(Google AppsのGmailはまだ未対応?通知は来たけどうまく機能しなかった。)

で、同じようなことをFirefoxでやりたくてアドオンを調べたのでメモ。
調査ポイントは、

  • Google AppsのGmailで使えるか
  • デスクトップ通知(ブラウザ以外のアプリ(例えばExcel)で作業をしている場合でも、新着メールの通知を表示する)があるか
  • ステータスバーのアイコンをクリックした時に、いい感じにGmailのページを表示してくれるか


Gmail Notifier
  • 2010年の年末頃からログインできなくなった(これにより、世に言うGmail Notifer難民が発生した)
  • Google AppsのGmailでも使用可(だった)
  • デスクトップ通知あり(だった)
  • ステータスバーのアイコンをクリックすると、既にGmailを開いている場合はそのタブを表示、Gmailを開いていない場合は新しいタブを開いて表示、空白タブしかない場合は空白タブ上で表示できるのが便利(だった)
  • 非公式ビルドならログインできるらしい


Gmail Manager
  • Google AppsのGmailでも使用可
  • デスクトップ通知なし
  • 新着メール通知の一部が文字化けしているが、件名とかは無事なので支障はない
  • ステータスバーのアイコンをクリックした時にどのタブで表示するかは設定できるが、Gmail Notifierのような動きはできない
  • 中クリックを新着メールチェックに割り当てられるのは便利

WebMail Notifier
  • Google AppsのGmailで使えなかった。使える場合もあるので、Google Appsのセキュリティ等の個別のポリシーが原因だと思われる


GMail Checker
  • Google AppsのGmailでも使用可
  • デスクトップ通知あり
  • ステータスバーのアイコンをクリックした時にどのタブで表示するかの設定でGmail Notifierのような動きはできない
  • 日本人はあまり使っていない?上記3つに比べて、日本語の紹介サイトが少ない


元々はGmail Notifierを使っていて「デスクトップ通知」を使えていたのだけれど、去年末からログインできなくなった。
それでGmail Managerに乗り換えたが、機能的には良いのだが残念ながら「デスクトップ通知」をしてくれない。
WebMail Notifierは自分が使っているGoogle Appsで使えなかった。
結局、Gmail Checkerに落ち着きそう。

Gmail Checkerは機能的には過不足なくいい感じだけど、ステータスバーのアイコンをクリックした時の動きはGmail Notifierが一番良かった。
メール件数はfaviconで見えるから、あと欲しいのはデスクトップ通知なのです。

2010年11月21日日曜日

PHPで 「Webページの有効期限が切れてます」となる時の傾向と対策

PHPでフォーム等を作った場合、Webブラウザの戻るボタンやJavaScriptのhistory.back()で前のページに戻った時に「Webページの有効期限が切れてます」と表示されることがある。

上記はIEの場合で、ブラウザによって少し挙動が違う(下記)。
いずれもページを更新(リロード)するとサーバにPOSTが再送信され、ページが表示される。
  • IE
    • 上記(IE8の例)のような画面が表示される。
  • Firefox
    • 「このページを表示するにはフォームデータを再度送信する必要があります。フォームデータを再送信すると以前実行した検索、投稿や注文などの処理が繰り返されます。」という確認ダイアログが表示され、「再送信」ボタンと「キャンセル」ボタンが表示される。「再送信ボタン」をクリックするとページが表示される。
  • Chrome
    • 「フォーム再送信の確認
      このウェブページを正しく表示するには、先ほど入力したデータが必要です。データをもう一度送信することは可能ですが、このページで行った操作をすべて繰り返すことになります。データを再送信してこのページを表示する場合は [再読み込み] をクリックしてください。」というメッセージのみの画面が表示される。
  • Safari
    • このようなダイアログが表示される。(Windows版で確認。Mac版は分からない。)



犯人はだれだ?


原因は、PHPでSESSIONを使うと(デフォルト設定では)自動でキャッシュ制御用のHTTPヘッダーが送出され、それによりクライアント側のキャッシュが使用不可にされるため。(参考:floatingdays: PHPでブラウザキャッシュを有効にする

つまり、下記条件を全て満たした場合にこの現象が発生する。
  1. HTTP POSTで遷移してきた。
  2. SESSIONを使っている。(session_start()してるか、php.ini等でsession.auto_start=1に設定している。)
  3. 次のページに行ってから、ブラウザの履歴機能(JavaScriptのhistory.back()を含む)で戻ってきた。



じゃあどうすればいいの?

対策として有名なのは、session_start()する前に、session_cache_limiter('none')とすること。
session_cache_limiter('none');
session_start();
これにより、SESSIONを使っても余計なHTTPヘッダーが送出されなくなる。

または、php.ini等でsession.cache_limiterに"none"を設定しても同じことになる。(おそらく元ネタはこのあたりだろう → PHP: session_cache_limiter - Manual

実際にこれで問題は解決する。



異論反論オブジェクション! [shut very bad!]

しかし、「PHP/「ページの有効期限切れ」対策 - Glamenv-Septzen.net」によると、これはPHPが想定しているパラメータではなく、お行儀のよいやり方ではないらしい。

'none'というパラメータは正しいパラメータではなく、それゆえに何もHTTPヘッダーを送出しないという挙動になるらしい。
(ただし、もし「規定外のパラメータはスルーする」というのが意図した仕様だとしたら、'none'でも何でも「正しいパラメータ」だけど。)

上記の記事ではsession_cache_limiter('none')ではなくsession_cache_limiter('private_no_expire')を推奨している。
「ページの有効期限切れ」をsession_cache_limiter()で解決 - shinyanakaoのよすがブログ」でも同様にprivate_no_expireを推奨している。

しかし、実際にsession_cache_limiter('private_no_expire')を使うと、やはり余分なHTTPヘッダーが送出される。

private_no_expireの場合、(privateに比べて)Expiresが送出されなくなるが、「Cache-Control: max-age=(session.cache_expire ぶんだけ未来)」が送出されるため、やはりブラウザに影響が出てしまう。(参考:現在のキャッシュリミッタを取得または設定する - PHP 5.3 日本語マニュアル
Firefoxでは問題ないが、IEだとリロード時にもキャッシュを使ってしまい、サーバからのリロードができなくなるようだ。(参考:Webアプリケーション開発ラボ by NPO情報活用センター - PHP:キャッシュ問題について。PHP Tips|ワークスポット・ジェーピー
おそらくsession.cache_expireで設定されている期間はキャッシュが有効になるのだろう。(Expiresでそう指定しているのだから、IEは悪くない。)

なので、お行儀が悪くてもsession_cache_limiter('none')を使うしかないのでは?('none'じゃなくて'hoge'でも'hage'でも「正しい」パラメータ以外なら何でもいいけど。)



新たな選択肢

しかし、こういう手もあるよ。
session_start();
header('Expires:'); //下記「余談」の追記も参照
header('Cache-Control:');
header('Pragma:');

header()でセミコロンの右に何も書かないと、PHPは何も送出しないようだ。
これにより、session_start()のHTTPヘッダー送出を上書きし、結果的に何も送出しない。

session_cache_limiter('none')より冗長だが、明示的という意味ではいいかもしれないと思っている。
(キャッシュを有効にしたい場合にも応用が効く。)



余談

上記のようにブラウザキャッシュの無効化を無効化すると、当然ながらSESSIONの最新情報が反映されていないブラウザキャッシュをブラウザが表示してしまうので注意。

(2011/1/7 追記)
IEはキャッシュがあり、かつ、そのキャッシュがExpiresを何も指定されていないと、アドレスバーにURLを直接入力された場合やリダイレクトした場合などにサーバにアクセスせずにキャッシュの方を使ってしまう。(Firefoxはその場合もサーバにアクセスしてくれる。)
ブラウザの履歴機能を使うためにキャッシュはさせたいが、上記の場合にはサーバにアクセスさせたい場合は、Expiresで-1を指定すると良いようだ。
header('Expires: -1');
ログイン管理をする場合などはこれをやっておいた方が良さそう。
(追記終わり)

また、POSTのパラメータに「チケット」(=ワンタイムトークン)を入れることによる二重POST防止を推奨するのは正しい。というか二重POSTを確実に防ぎたいと思ったらこれしかない。


2010年6月14日月曜日

Google Reader plus Hatenaで「リスト表示」でもコメントを表示する方法

Firefox用GreasemonkeyのGoogle Reader plus Hatenaは、Googleリーダーに はてなブックマークのブックマーク数やリンクが付けてくれる便利なスクリプト。
Googleリーダーでの表示方法が「全文表示」の場合は、はてなブックマークのコメントを取得して記事の下に表示するという機能もある。
しかし、表示方法が「リスト表示」の場合は、このコメント表示機能が動かない。

下記に「リスト表示」でも動かす方法が書いてあったが、自分の環境ではこの方法では動かなかった。(GoogleリーダーのHTML構成が変わった?)
googleリーダー内ではてなブックマークのコメントを参照したいです。 Google Reader plus Hatenaというグリモン... - 人力検索はてな


そこで、自分の環境で「リスト表示」でも はてなブックマークを表示する方法のメモ。

  • 172行目を下記のように変更

    //var entryURL = findNode( eventTarget, 'ancestor::div[@class=...

    var entryURL = findNode( eventTarget, 'ancestor::div[@id="current-entry"] //a[@class="entry-title-link"]/@href' ) ;
  • 200行目を下記のように変更

    //eval("(" + x.responseText + ")");

    eval(x.responseText);


全文表示では動かなくなるかもしれないが、リスト表示しか使わないのでこれでいいや。

2010年6月7日月曜日

CSSによる背景色グラデーションのブラウザごとの書き方

例えば、上から下に白から青のグラデーションを表示したい場合はこう書く。(省略可能なパラメータは省略した。)

/* IE */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#ff0000ff);

/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#ff0000ff)";

/* Firefox */
background: -moz-linear-gradient(white, blue);

/* Chrome, Safari */
background: -webkit-gradient(linear, left top, left bottom, from(white), to(blue));

IE8は右辺をクォートで囲う必要があるので注意。

IE以外は、詳細な指定をすれば複数の濃淡を指定できたり球状の効果を表現できたりと色々できる。

Operaは未対応らしい。


参考
IE:Gradient - filter,フィルタ
Firefox:-moz-linear-gradient - MDC
Chrome, Safari:CSSでグラデーションを表現する - builder by ZDNet Japan

2010年5月28日金曜日

JavaScriptによって動的に CSSを追加する場合のブラウザごとの挙動の違い


(2011/3/29追記:Firefox4とChrome10の実験結果を追加。)


JavaScriptに続いて、動的にCSS(またはstyle要素)を追加する場合の、追加方法の違いによるブラウザごとの挙動も調べた。


調査に使ったJavaScript(HTML5なのでtype属性は省略してある。)

window.onload = function() {
    // divのinnerHTMLに外部CSSの読み込みを突っ込む
    try {
        var div1 = document.createElement("div");
        div1.innerHTML = '<link rel="stylesheet" href="test1.css" />';
        document.body.appendChild(div1);
    } catch(e) {
    }
    
    // createElementでlink要素を生成して外部CSSを読み込む
    try {
        var link2 = document.createElement("link");
        link2.rel = "stylesheet";
        link2.href = "test2.css";
        document.getElementsByTagName("head")[0].appendChild(link2);
    } catch(e) {
    }
    
    // divのinnerHTMLに生のstyleを突っ込む
    try {
        var div3 = document.createElement("div");
        div3.innerHTML = '<style>#test3{ color: red }</style>';
        document.body.appendChild(div3);
    } catch(e) {
    }
    
    // createElementで生のstyleを追加する
    try {
        var style4 = document.createElement("style");
        style4.innerHTML = "#test4{ color: red }";
        document.getElementsByTagName("head")[0].appendChild(style4);
    } catch(e) {
    }
};

test1.css
#test1{ color: red }

test2.css
#test2{ color: red }


結果は下記の通り。

ブラウザ
1
2
3
4
IE 8




Firefox 3.6




Firefox 4.0




Chrome 4




Chrome 10




Safari 4




Opera 10.53






やはりIEではcreateElementで外部ファイルを読み込む方法しか動かない。
(ちなみに外部ファイルはhead要素でなくbody要素にappendChild()してもOKだった。)

でもChrome、SafariやOperaでほぼ動いたのが意外だった。


(2011/3/29 追記)
style 要素を動的に生成する - m2の方法を使えば、innerHTMLに生のstyleを突っ込むことができる。IE8、Firefox4、Chrome10、Opera11で動作することを確認した。

JavaScriptによって動的に script要素を追加する場合のブラウザごとの挙動の違い


(2011/3/29追記:Firefox4の実行結果を追加)


JavaScriptによって動的にscript要素を追加する場合の、追加方法の違いによるブラウザごとの挙動を調べた。


調査に使ったJavaScript(HTML5なのでtype属性は省略してある。)

<script>
function test(value) {
    document.getElementById("test").value += value + ",";
}

window.onload = function() {
    // innerHTMLに外部JSの読み込みを突っ込む
    try {
        var div1 = document.createElement("div");
        div1.innerHTML = '<script src="test1.js"><' + '/script>';
        document.body.appendChild(div1);
    } catch(e) {
    }
    
    // createElementでscript要素を生成して外部JSを読み込む
    try {
        var script2 = document.createElement("script");
        script2.src = "test2.js";
        document.body.appendChild(script2);
    } catch(e) {
    }
    
    // innerHTMLに生のJSを突っ込む
    try {
        var div3 = document.createElement("div");
        div3.innerHTML = '<script>test(3);<' + '/script>';
        document.body.appendChild(div3);
    } catch(e) {
    }
    
    // createElementで生のJSを追加する
    try {
        var script4 = document.createElement("script");
        script4.innerHTML = "test(4);";
        document.body.appendChild(script4);
    } catch(e) {
    }
};
</script>


test1.js
test(1);

test2.js
test(2);

処理が実行されたら、表示用のテキストボックス(id="test")に番号が表示される。

結果は下記の通り。

ブラウザ
1
2
3
4
表示順
IE 6/8




2
Firefox 3.6




1→2→3→4
Firefox 4.0




4→2
Chrome 4




4→2
Safari 4




4→2
Opera 10.53




2→4


innerHTMLにscript要素を入れるのはFirefox3.6以外では動かない。(セキュリティ的な施策?)
Firefoxでしか動作確認していないと嵌りそうだ。(というか嵌った。)

IEのことを考えると、生のcreateElementで生成したscript要素に生のJavaScriptを書くやり方も使えない。
(そんなことが必要になるケースは無いかもしれないが。)

素直にcreateElementで外部JSを読み込むのが良いようだ。


(2011/3/29 追記)
innerHTMLに生のJavaScriptを入れる方法としてinnerHTMLでscriptする - Thousand Yearsの方法があったようだ。
しかし現在のブラウザでは、IE8では動作したが、Firefox4、Chrome10、Safari5、Opera11では動作しなかった。

2009年11月28日土曜日

Googleサイト内検索結果でページの下端が切れる問題

検索向けAdSenseによるサイト内検索で、IE以外だと検索結果の下端が切れてしまう問題について。


【発生条件】
検索結果を自分のサイト内に表示する場合に起きる。
広告を右のみにした場合に起きた。広告を他の位置にしたら起きないかも。
Firefox(3.5)、Google Chrome(4)、Safari(4 Windows版)で発生を確認した。


【現象】
検索結果の内容に関わらず、検索結果を表示するiframe(JavaScript http://www.google.com/afsonline/show_afs_search.js により生成される)の高さが常に1200pxになる。
その結果、検索結果が少ない場合は検索結果とフッターの間に大きな空白ができる。反対に検索結果が多い場合、検索結果の下端に表示されるページ番号の表示が途中で切れてしまったり表示されなくなってしまう。(実際にはframeの外側にあり、かつframeのスクロールバーが非表示になっているので隠れているだけだが。)


IEの場合、iframe内の検索結果のHTMLのbody要素に、onloadで下記のようなJavaScriptを実行している。

onload="window.top.location='http://(親windowの検索結果のURL)#'+document.body.scrollHeight;"
これにより、親windowのURLの末尾にiframe内のコンテンツの高さを表すhashが付く。

そして検索結果のshow_afs_search.jsの方でlocation.hashを取得し、それをiframeの高さとして設定している。(0.01秒ごとに実行するという監視をしている。高さが取得できた後も。)
その結果、検索結果のコンテンツの内容に応じて検索結果をリサイズするというユーザーフレンドリーなユーザーインターフェイスを実現している。

試しに検索結果を表示した後、URLの最後に「#500」などと付けると検索結果の高さが変わる。これはFirefoxでも有効。


なぜIE以外ではiframe内のbodyのonloadのJavaScriptを付けないのだろう?Firefoxのセキュリティ等により無意味なんだろうか?


【回避策】
検索結果を表示するページのgoogleSearchXxxを設定しているJavaScriptに、下記のように高さを明示的に指定してあげる。
var var googleSearchFrameWidth = 800; //これは既存のコード
var googleSearchFrameHeight = 1210; //これを追加する
これにより、デフォルトの高さが1210pxになり、検索結果の下端が切れなくなる。

IEの場合、これでもリサイズが有効なので、この値は無視してリサイズしてくれると思う。

2009年8月28日金曜日

Firefoxの起動や終了が遅い問題を解決するアドオンいろいろ

Firefoxの起動や終了にやたらと時間がかかる原因の1つは、Firefoxの内部データを保存しているDBの1つであるplaces.sqliteが肥大化することらしい。
Firefoxの終了が遅くなると、終了してから起動しようとすると「Firefoxは起動しています」とか言われて起動できないこともよくある。

で、そのplaces.sqliteをVACUUMするアドオンが相次いでリリースされている。


Vacuum Places :: Firefox Add-ons

  • ステータスバーのアイコンをクリックするとVACUUM
  • 設定画面(ロシア語!)はあるが、実際には使えない(設定しても意味無い) バージョン0.2からは使えるようになったらしい


Vacuum Places Improved :: Firefox Add-ons
  • 上記のVacuum Palcesの改良版
  • 設定画面が英語になり、かつ、実際に使えるようになっている
  • 設定すれば、一定のFirefox起動回数ごとに自動でVACUUMしたりできる


ふと今日は・・・・・・  Vacuum Places 日本語化
  • 上記2つの日本語化版


PlacesCleaner :: Firefox Add-ons
  • アクセス回数が少ないページを履歴から削除することにより、さらにplaces.sqliteをダイエットできるそうだ


SQLite Optimizer :: Firefox Add-ons



個人的には以前から使っているSQLite Optimizerが気に入っている。
VACUUM&Reindexしたら、確かに再起動が早くなった。
ていうか、これはFirefox本体でやるべきことだと思う。


ちなみに、上記のアドオンをいくつか試していたら、DeliciousアドオンのSQLiteのデータがおかしくなった。(ReSyncですぐに直ったけど。)どれが悪さしたんだろう?



参考:
 Places を VACUUM する拡張機能3個 - えむもじら
 Firefoxを起動したままplaces.sqliteをVACUUMできる: べつになんでもないこと
 Mozilla Re-Mix: Firefoxの[places.sqlite]をワンクリックで最適化できるアドオン「Vacuum Places」

2009年7月4日土曜日

Firefox3.5で最後のタブを閉じてもWindowを閉じないようにする方法

Firefox3.0から3.5にUpdateしたら、全てのタブを閉じたときにFirefoxのWindow自体も閉じるようになってしまった。
(タブバーは常に表示するようにしている。)

これでは使いにくいので調べた。

Closing the only tab closes the windowにあるとおり、about:configで browser.tabs.closeWindowWithLastTab をfalseにすると、3.0までと同じように空のタブを残してくれるようになった。

どうも3.5がBeta版の時から論議が交わされてきた設定らしく、同じように不満を持つ人も少なくないようだ。

2009年5月13日水曜日

Firefoxのアドオン CustomizeGoogleを自分で SearchWikiに対応させる方法

やったことのメモ。
Firefoxは閉じてからやった方がよいと思う。

  1. FirefoxのProfilesフォルダを開く
  2. extensionsフォルダの中からCustomizeGoogleのフォルダを探す
  3. chromeフォルダの中にファイル「customizegoogle.jar」があるので、これのバックアップをとっておく
    (必須ではないが、念のため。)
  4. customizegoogle.jarを解凍ソフトで開く(たぶん拡張子をZIPにすればWindowsの標準機能でも展開できると思う)
  5. contentフォルダの中にあるcustomizegoogleフォルダの中にあるファイル「javascript.js」をテキストエディタで開く
  6. 文字列「/li[@class='g']」を、全て「/li[@class='g' or @class='g w0']」に変換し、ファイルを上書き保存する
  7. contentフォルダ、localeフォルダ、skinフォルダをまとめてZIPにして、ファイル名を「customizegoogle.jar」にする
  8. 作った「customizegoogle.jar」を、3の同名のファイルのところに上書きコピーする


検索結果はli要素として表示されるが、そのclass属性が"g"から"g w0"に変わったことが原因だった。
「検索ツール」を使って再検索した場合など、class属性が昔ながらの"g"になる場合もある。
"w0"の意味は知らないので期待通りに動かないこともありそうだが、とりあえずこれで様子を見る。

2009年2月11日水曜日

IEと Firefoxと grayと grey

色として灰色を指定する場合、Firefoxではアメリカ流の"gray"でもイギリス流の"grey"でも、どちらでも表示できる。
しかし、IEでは"gray"しか対応していないので注意。

もっと注意なのが。薄灰色。IEではgrayへの対応とは反対に、なぜか"lightgrey"の方しか対応していない。



Firefoxの場合





IE7の場合(IE6も同様だった)

参考:
 Remember grey!=gray in IE CSS! - Democratic Underground
 灰色 - Wikipedia

2008年10月30日木曜日

PCで携帯向けのWeb開発をするためのメモ






とりあえずメモ書き。整理できると良い。


モバイル検索結果をPCで見る

  • Googleモバイル検索
    • Googleモバイル検索
    • 携帯でも同じURL(www.google.co.jp/m OR google.jp/m)で使える
    • URL例: http://www.google.co.jp/m?q=[URLエンコードした検索文字列]
    • URLエンコーディングはたぶんUTF-8で
  • Yahoo!モバイル
    • Yahoo!モバイル検索の結果をキャリア別に表示
    • 検索結果から、そのまま携帯ブラウザのシミュレータでの閲覧ができる


シミュレーター(× シュミレーター)


PCサイトを携帯用に変換するサービス


その他


参考資料

2008年9月1日月曜日

Google Reader Filterで日本語のキーワードを扱う方法

Google Readerで指定したキーワードを含む記事をグレイアウトしたりハイライトしたりするGreaseMonkeyの「Google Reader Filter」。(そのまんまな名前だ。)

日本語が 使えないという指摘があるが、実際には使える。
ただし、キーワードの前後が半角スペースか先頭か末尾でないとヒットしない
これは日本語に限った話ではないが、単語単位で半角スペースが入る英語では問題が無いため、日本語の問題に見えたのだろう。


具体的なコードの該当箇所は下記のとおり。

_getRegExp:function (items) {
 return new RegExp("(^| )("+items.join("|")+")($| )","i");
}
JavaScriptと正規表現が読める人には察しが付くだろうが、キーワードをorで繋いで、前に「先頭or半角スペース」、後ろに「末尾or半角スペース」という条件でマッチさせている。

なので、日本語をキーワードに使うには、キーワード欄に
.*あああ.* (「あああ」を含むタイトルをマッチ)
いいい.* (「いいい」で始まるタイトルをマッチ)
.*ううう (「ううう」で終わるタイトルをマッチ)
というように書けばOK。

キーワードは正規表現として使われるので、他の正規表現を埋め込んじゃってもOK。
逆に正規表現で特別な意味を持つ記号はエスケープしないと正しく動かない。


上記のような書き方が面倒な人は、GreaseMonkeyのファイルを開いて該当箇所を下記のように変更すれば「.*」の記述が不要になる。
キーワードの使い方によっては幅広くヒットしすぎて使い辛そうだが。
_getRegExp:function (items) {
 return new RegExp("("+items.join("|")+")","i");
}

2008年8月14日木曜日

Delicious Bookmarksからデータが消えて PCがフリーズする問題の解決方法(追記:解決した!)

FirefoxのアドオンにDelicious Bookmarksというものがある。ショートカットからDeliciousへのPOSTができたりBookmarkをツールバーに表示したりと非常に便利なのだが、バージョンが2.0.95に上がったら壊れてしまった。(ローカルデータが認識できなくなりSyncを繰り返す。CPU負荷も高く、PCが固まる。)

しばらくこのアドオンを無効にしていたが、先ほどこの問題の解決策を見つけた。

It seems that 2.0.95 causes some trouble, but after I delete delicious.rdf file in my firefox profile directory, it seems works well. This is suggested at the forum in yahoo group described above. Worth to try, I guess, if you in trouble.
from Delicious Bookmarks のレビュー :: Firefox Add-ons
(※2008/8/13のXoraさんのレビュー)
Firefoxのプロファイルにあるファイル「delicious.rdf」を削除したら直るとのこと。
試しにやってみたら、確かに直った気がする。しばらく様子を見てみよう。(※追記あり!)

しかしXolaさんも書いているとおり、"And of course we still need a fix release."
Fixした時に今回の解決策(delicious.rdfを2.0.95に合った形にした)のせいでまたインストールし直しとかにならなければよいが。


追記:しばらくしてFirefoxを再起動したら、またSyncし始めちゃったよー

追追記(2008/08/21):
Delicious Bookmarks のレビュー :: Firefox Add-onsの"Work-around for 2.0.95 problems"をやったら解決した。
1) Log out of delicious.
2) Uninstall delicious addon 2.0.95.
3) Quit firefox
4a) Delete this file for XP: C:\Documents and Settings\\Application Data\Mozilla\Firefox\Profiles\.default\delicious.rdf
or
4b) Delete this file for vista: C:\Users\\AppData\Roaming\Mozilla\Firefox\Profiles\.default\delicious.rdf
5) Restart firefox and install delicious addon version 2.0.64

2.0.64は2つ前のバージョン。1つ前までは試してみたが、2つ前まで戻さなくちゃいけないとは。
今のところこれで以前のように動いている。
Deliciousからの新バージョンについての反応がまだ無いところを見ると、よほど深刻な問題なのか?!

追追追記(2008/08/22): 1つのPCでは解決したが、1つのPCではフリーズっぽくなる...HELP!

ブログ アーカイブ

tags