表示：[自由に並び替え][日付順][完了したタスク][ゴミ箱]

どこに消えちゃうのか分からないかったから
完了済みってリストを作って
いちいちそこにぶっこんでました。

戻す時は
「完了したタスク」に入ってるもののチェックを外す。

メモ

tasksは、ほとんどchromeの
New Tab to Tasksこれで立ちあげてる
新しいタブを立ちあげたら（ctrl+T）
タスクが表示されるので。

firefoxはgoogleツールバーにタスクのボタンがあるので特に何も入れてない

これavastのアドオンが悪さしてるみたい。
avast! WebRepってのを無効化して再起動したら
コメントに

ウェブ評価
全体の評価

がついてこなくなった

日々、エロとのっちと格言名言lifehackやオサレ風写真とたまにwebの事をリブログするばかりの
生粋のリブロガーなので（オリジナルポスト5%くらい）
tumblr以外は特に稼働していないのだけれど

リブロガーたるもの自分の言葉で何かを語る事は、はばかれる為
悶々としたものはtwitterに流します。
悶々としてないものも流します。

そうすっとtwitterからはmixiとgreeに飛んでいくので無責任な生存確認になってるようなならないような。

うちの中心はtumblr

リブログしてるだけでお金が貰えたらなーなんてことを考えるくらい
気分転換にポチポチしてます

それを支えるのはFirefoxと
tombloo

そして今は
tomblooにgoogle+に投稿出来るパッチをインストールして
（参考:Firefox用アドオン「Tombloo」にGoogle+への投稿を追加する方法｜いちの日記（チラシの裏））
polygonplanet/tombloo – GitHub

以下のページを参考に
（参考:これはすごい！Google＋でエクステンションを使わずにFacebook・Twitter・Evernoteへ同時投稿する裏技 | Chrome Life）
dlvr.itにgoogle+のfeedを登録して
twitterとfacebookに飛ばした

ゴミをまき散らしてるだけな気がするけど
もうちょっと続けてみる。

[追記]
思うようにコントロール出来なかったから
dlvr.itを使うのやめた
こえーこえー

opera:configの中にそれらしいのが見当たらないので途方に暮れていたけど
エクステンションでいいのがあった。
operaのエクステンションって使った事なかったけど簡単ですねぇ。

Source – Opera extensions

ctrl+F9でソース表示

メニュー – エクステンション – 拡張機能の管理から設定を変える事で行数も表示でけた。

よかったよかった。

ついでにいれた画像を拡大するヤツもなんかいい感じ
Image Preview Popup – Opera extensions

safariを使った方法

ツールバーに開発を表示させる

開発からユーザーエージェントを変更する
iPhoneのUA(ユーザーエージェント)は最初からあるので選ぶだけ。

開発 – ユーザエージェント

ログインしてみる。

UAをiPhoneにしておくとハコニワは対応してないと言われるので
ここらへんを参考にAndroidのUAに変更してみる

スマートフォンのユーザエージェントを纏めてみたよ « 色々やってみてはみる
softbankのMobile Creation / Android™ ユーザエージェント

例えばガラパゴスのUAはこれ

Mozilla/5.0 (Linux; U; Android 2.2.1; ja-jp; SBM005SH Build/E1172) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

それを

開発 – ユーザエージェント – その他
にコピペするか
UserAgents.plist

C:\Program Files (x86)\Safari\Safari.resources\UserAgents.plist

に追加して(テキストエディタで開ける)、safariを再起動させる

20110527追記
追加する場所は入れ子を間違えなきゃ
どこでもいいと思うけど、うちが入れてるのは
UserAgents.plistの一番下の

</array>
</plist>

の手前に、以下を追加

<dict>
<key>separator</key>
<true/>
</dict>
<dict>
<key>name</key>
<string>GALAPAGOS (005SH)</string>
<key>version</key>
<string>2.2.1</string>
<key>platform</key>
<string>SoftBank</string>
<key>user-agent</key>
<string>Mozilla/5.0 (Linux; U; Android 2.2.1; ja-jp; SBM005SH Build/E1172) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1</string>
</dict>

うまく追加できてればこんな感じになってるはず。

20110527追記ここまで

初ハコニワ

よくわかんない。

追記

ブラウザではタッチイベントを拾えなかったけれど
Android SDKを使うとタッチイベントを実行する事ができました。

趣旨が変わってしまったけど。

参考
Android携帯を買わずにAndroid OSをテストドライブしてみようじゃないか : ライフハッカー［日本版］

virtualAndroidが起動しないとき
シンボリックリンクの作成方法
Windows7におけるシンボリックリンク作成 « katharsis blog
これでどうでしょう。

新しいPCになってIE9preview版を使えるようになったけど
どうせIE9正式版がすぐに出るんだろうって事でインストールを放置してました。

でつい先日IE9日本語正式版が公開されてインストールしてみたんだけど
IE9をインストールすれば、IETesterで勝手に使えるようになるわけじゃないんですね

IE9日本語正式版をIETesterで使えるようにする

評価版の場合、iepreview.exe.localをIEtestのIE9フォルダにぶっこんでから
ietester.ie9.exe.localにリネームすればおkだったようだけど
正式版にはiepreview.exe.localっちゅーモノがない。

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

そのままInternet Explorerフォルダをぶち込めばおkという事なので

Windows7 64bitの例
C:\Program Files (x86)\Internet Explorer

を

Windows7 64bitの例
C:\Program Files (x86)\Core Services\IETester\ie9

にコピーして、

ietester.ie9.exe.local

にリネーム

でIE9のタブのグレーアウトが外れて
使えるようになりました。

ieやietesterのexeがあるフォルダの簡単な開き方(うちがやってる方法)

それぞれの[アイコンを右クリック] – [プロパティ] – [ファイルの場所を開く]

でもってその値にantialiased;を指定すると
他のブラウザと同じような細さになるようなならないような。

確認用スクリーンショット

確認用ページ

※safariで見ないと意味ないよ。
-webkit-font-smoothingでsafariの文字の太さを他のブラウザと合わせる。

プロパティと値

-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

noneを指定したら、それ以降が激しく文字化けしたので
確認用ページから外した。

参考にしたサイト /

Maxvoltar – -webkit-font-smoothing

こんな感じで

どうも原因はtumblrのダッシュボードが日本語化されて

XPath に title 属性を使っていて、それが日本語になったため

らしいです。

こちらで修正パッチが配布されてました。
Tumblr日本語ダッシュボード用Tomblooパッチ | 圧縮電子精神音楽浮遊構造体

はーこれはたすかる

うちの環境では直接右クリックからインストール出来ず
ダウンロードして
C:\Users\[ユーザー名]\AppData\Roaming\Mozilla\Firefox\Profiles\[プロファイル名]\tombloo\script
にぶっこんで
メニューの 「ツール」→「Tombloo」→「Tomblooのリロード」でインストールしました。

それでは素敵なtumblr lifeを。

みた感じaタグのmargin-bottomが拡張されている風だけど
marginを0にしても消えない。

どうもこれは、hasLayoutがtrueじゃないから起こるみたいで
普段はaタグにwidthを指定してるから発生してなかった。
(widthに値が入ってればhasLayoutがtrueになる)

今回は_zoom:1を追加して対処。

他にhasLayoutをtrueにするには
hasLayout Property (A, ABBR, ACRONYM, …)

CSS property	Value
display	inline-block
height	any value
float	left or right
position	absolute
width	any value
-ms-writing-mode	tb-rl
zoom	any value

ブラウザの表示倍率をリセットする方法は無いかな？と試行錯誤してみました。

ちょっと調べてみるとscreen.devicexdpiってのを使うと画面のdpiがわかるみたい

参考にさせてもらったページ
javascript screen deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI
deviceXDPI Property (screen, Screen Constructor)
これでできる！ クロスブラウザJavaScript入門：第19回　CSSOM View Module解説

windowsは96でIEの表示を400%にしてる時は384。

そこに直接数字を入れたらコントロールできるかのか？と
screen.devicexdpi=96;みたいにしても反応なし。
読み取るだけなのか、使い方を間違ってるのかとにかくこの方法じゃ出来なかった。

なのでzoomプロパティを使って拡大してる分を縮小させてみる事に。
こんな感じ

function cz(){
      if (screen.deviceXDPI !=96) {
      var dxd=screen.deviceXDPI;
      var nowMagniFication=dxd/96;
      var chgZoom=1/nowMagniFication;

      document.body.style.zoom=chgZoom;
      document.body.style.width=document.body.clientWidth*nowMagniFication+"px";
   }
}
window.onload=cz;

zoomを1になるようにしても
横幅が拡大した時のサイズにあわせて変更されちゃうので
document.body.clientWidthを倍率に合わせて拡張

スクロールバーが表示されるのでbodyにoverflow-x:hidden;を指定して切捨て。
window.onloadとwindow.onresizeで呼び出してみたけど
書き方が悪いのかwindow.onresizeがあると横幅が異常に広がってしまうので削除した。

なんとなくokぽい感じがしないでもないけど
上下marginがあると拡大したままになってしまうのよね、これ。

縦のスクロールも伸びっぱなしでした。
ん～もうちょっと頑張らないと使い物にならないかなぁ。

例えば

IE6だと左右のmarginが40pxになってしまう以下の記述

#test{
margin:20px;
float:left;
}

これをie6 css fixerで変換させると
(select your master stylesheetのpaste your complete master stylesheetを選択してgive me my ie6 fixesをクリック)

/* add display:inline to floated elements */
#test {display:inline;}

なんてcssを吐き出してくれる。

これを保存してコンディショナルコメントでie6だけ読み込むようにすれば対策完了。

でもって、最初からdisplay:inline;が付けてる場合は、新たにdisplay:inline;を吐き出さないのかな？と試してみたけどdisplay:inline;を吐き出してた。

というか、

#test{
float:left;
}

を変換すると

/* add display:inline to floated elements */
#test {display:inline;}

を吐き出してた。
むむむ？

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;を付けるとズレなくなりました。

<dl>
<dt>乱雑</dt>
<dd>モックアップ</dd>
</dl>

dt {
 width:3em;
 float:left;
}
dd {
 margin-left:3em;
 _zoom:1;
}

zoomの前の_はIE6用のハック
/にするとIE7以下に効く。

現在開いているページを、Internet Explorer、Chrome、Safari、Opera など、他のブラウザで簡単に開けるようなメニュー項目を追加します。

IETesterなど別のブラウザも簡単に追加出来る。

でも残念な事に引数を渡せないのでバージョン指定出来ない。
しかしお手軽。

バージョン指定して開けるようにするには

Launchy :: Add-ons for Firefoxを使うといいみたい。

参考 / Firefoxで今見ているページを右クリックからIETesterで開く方法 – lucky bag

lucky bagさんが用意してくれているlaunchy.xmlを
Launchyの設定 – launchy.xmlタブの中に書いてあるフォルダにぶっこんで再起動するだけ。

しかしアドオン入れ直すの面倒だなぁ。
個人的にFirefoxは大好きだけど、これはアドオンがあって初めて使えるブラウザなわけで、使えるブラウザに仕上げるのが何気に面倒、やり過ぎると重くて使えないし。

ブラウザのbody部分のサイズを取得したくて

window.onresize=function(){
w = document.body.clientWidth;
alert(w);
}

とやってみたらFirefoxが吐き出す値が大きすぎるうえに
あるサイズ以下になると一定の値しか返さなくなる。

アドオンがいけないのかな？とか色々消していったら
ナビゲーションツールバーを非表示にした時に期待した値を取れるようになりました。

ナビゲーションツールバーを無視してサイズを取得するにはどうしたらいいんだろう…

position:relative;

を一緒に指定してみるのが良いみたい。

IE6での表示
真ん中が見切れている状態で、一番下がposition:relative;を追加して問題を回避した表示。

しかし2010年の今になって初めて出会うなんてなぁ。

ちなみにIE6以外だと同じソースでこんな感じ。

なんで今までこの現象が起きなかったんだろう？と首をかしげつつ
再現出来る最小限のソースを作ろうと問題部分を抜粋していじるけどなかなか再現させられない。。。
結局、ネガティブマージンがある要素とその親要素両方にwidthを指定したらハミ出した部分が消えた。
最小限のソースにしなくちゃと思う気持ちがもつ脆弱性をついた攻撃！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乱雑モックアップ｜ネガティブマージンを指定した要素がIE6消えたら一緒にposition:relativeを指定してみようテスト。</title>
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
/* レイアウト */
*{
padding:0;
margin:0;
}
#contents {
  padding:30px;
  margin:30px;
  width:480px;
  background:#d7d7d7;
}
.topics {
  width:480px;
  background:#f3f3f3;
}
dl {
  padding-bottom:1em;
}
dt {
  width:460px;
  background:#09C;
  color:#fff;
  padding:5px 10px;
}
dd {
  margin-top:5px;
}
ul {
  padding-left:1.5em;
}
li {
  list-style:disc;
}

/* 問題のネガティブマージン */
.negative_margin dt {
  margin-left:-15px;
}
/* 回避策らしいrelative */
.fix dt {
  position:relative;
}

</style>
</head>
<body>
<div id="contents">
  <div class="topics">
    <dl>
      <dt>お知らせですよー / ネガティブマージンなし</dt>
      <dd>
        <ul>
          <li>2010年 - お知らせはありませんよー</li>
          <li>2009年 - お知らせはありませんよー</li>
          <li>2008年 - お知らせはありませんよー</li>
        </ul>
      </dd>
    </dl>
    <dl class="negative_margin">
      <dt>お知らせですよー / ネガティブマージンあり</dt>
      <dd>
        <ul>
          <li>2010年 - お知らせはありませんよー</li>
          <li>2009年 - お知らせはありませんよー</li>
          <li>2008年 - お知らせはありませんよー</li>
        </ul>
      </dd>
    </dl>
    <dl class="negative_margin fix">
      <dt>お知らせですよー / ネガティブマージン position:relative;あり</dt>
      <dd>
        <ul>
          <li>2010年 - お知らせはありませんよー</li>
          <li>2009年 - お知らせはありませんよー</li>
          <li>2008年 - お知らせはありませんよー</li>
        </ul>
      </dd>
    </dl>
  </div>
  <!-- / #contents -->
</div>
</body>
</html>

試してる間にposition:relative;使っても見切れるのを回避できないネガティブマージンにも出会ったけど、そうなったらおとなしく親要素のpaddingやmarginでレイアウトした方がいいと思った。

operaの場合

アドレスバーに以下を入力してenterするとopera6.ini 設定を変更するためのウェブページが開く。

opera:config

Opera の設定ファイルの解説

fontの設定をデフォルトに戻したかったのでFontsのデフォルトをクリックしてみるとh1~h6はＭＳ Ｐゴシックがデフォルトだったみたい(うちの環境では)。
デフォルトでは何も指定してくれていない方が助かるんだけどな
空白にして保存したらもしかして？と思ってやってみたけど再起動したら空白にする前の設定が復元された。ちぇ。

22,7,0,0,0,0,ＭＳ Ｐゴシック みたいにフォント名の前に数字がズラズラと書いてあるけどその意味は
フォントサイズ,ウェイト / 2(細字)｜4(通常)｜7(太字),イタリック(0｜1),下線(0｜1),上線(0｜1),打消線(0｜1),フォント名 みたい

firefoxの場合

アドレスバーに以下を入力してenterすると設定ページが開く

about:config

しかしopera程わかりやすいものじゃない。

とりあえずフィルタに「font」と入力して状態でソートしたらユーザー設定が上に来た、右クリックしてリセットすると初期化される。

もう一つ、セーフモードを通してリセットする方法
設定のリセット

こっちは試してないです。

safariの場合

ブラウザ右上の歯車アイコンに設定のリセットがあるけど、ここからfont設定を初期化できないみたいなので設定ファイルを消す。
C:\Documents and Settings\[ユーザー名]\Application Data\Apple Computer\Preferences\com.apple.Safari.plist を削除(リネーム)

safariを最初に立ち上げた時のムービー(html5css3で出来てるんだっけ？)がまた見れた。

chrome

C:\Documents and Settings\sakura-chiro-haiji\Local Settings\Application Data\Google\Chrome\User Data フォルダを削除(リネーム)
エクステンションやらブックマークとか全て初期化される。

webkit系は任意の設定だけ初期化する簡単な方法がわからんかった。
[追記 / 20100829]
chromeにもfirefoxみたいなabout:～があるんですね
アドレスバー – Google Chrome まとめWiki(サーバの障害対応中らしいのでキャッシュへリンク)

見逃してるだけかもしれないけどピンポイントでフォント設定を初期化する方法は見当たらなかった。

*1
Ctrl+F12(メニュー – 設定 – 設定) – 詳細設定タブ – フォント をみると[見出し<h1>～見出し<h6>]あたりがMS Pゴシックになってる。

なにが良いかって

本体のexeをドラッグ&ドロップしなくても、アプリのショートカットからでもちゃんとアイコン画像を取り出せて楽チン。
あと256 × 256 px の大きなサイズのアイコンにも対応してる。
[options] – [languages] – [Japanese] からメニューを日本語に出来る。

アイコン画像の保存

Ctrl+E ([File] – [Export Image…])で画像を保存出来る。
save ( Ctrl +S )だと .ico / .icns の保存。

欲をいえば、名前が Untitled になってしまうので、勝手にアプリの名前を補完して欲しいかも。

変更しなくてもだいたいわかるけど言語設定。

本当はアイコンを編集するアプリらしいので影つけたり編集も色々できるぽい。

IE7以下のアイコンが欲しかったから IE Collection ( Internet Explorer 1.0からInternet Explorer 8.0までを一括でインストールできる。IETesterとは別 )をインストールしてアイコンを抽出してみたけど、IE6のアイコンは48pxまでしか入ってなかった、残念。
chromeも 48 × 48pxだったのが驚き。
XPだから?

おまけ

ついでにpngで抽出した各ブラウザのアイコンを、zipったので置いておきます。
browser-icon.zip / http://sakurachiro.com/data/browser-icon.zip
中身

IE / 1.5, 4, 5.5, 6, 7, 8
firefox, chrome, safari, opera
IETester, jane style

以上。

http://help.opera.com/Windows/9.22/ja/wand.html

Opera が前回入力したフォームフィールドを認識した場合、認証管理機能を使ってフィールドに情報を入力することもできます。認証管理ボタンをクリックするか Ctrl+Enter をクリックしてください。

目印は黄色の枠

パスワードを保存していないページの input (入力欄)は黒

パスワードが保存されているページの input (入力欄)は黄色

Ctrl + Enter を押すと認証管理の窓が立ち上がって複数アカウントでも簡単に入力できる。

はぁだいぶ使いやすくなった。

$(function(){
  $('a[href*=#]').click(function() {
    var $target=$(this.hash);
    var targetY=$target.offset().top;
    $('html').animate({scrollTop: targetY},2000);return false;
  });
});

$('a[href*=#]').click(function() {

#を含むリンクをクリックすると

var $target=$(this.hash);
var targetY=$target.offset().top;

クリックされた要素のハッシュを$targetに入れて
offset().top;で位置を調べてtargetYに入れる

$('html').animate({scrollTop: targetY},2000);return false;

scrollTop(=スクロールの位置)に先程調べたtargetYを入れる、2000ミリ秒で移動完了。

以上のコードでFirefox、Opera、IE8と動いた
さすがjQuery、案外簡単にできちゃうんだなぁと思っていたら
Chromeで動かない、うんともすんとも言わない(safariの確認はしてない)。

$(‘html’).を変更する

$('html,body')

とすると
chromeでも動くようになった、良かった。

だが断るしかし

今度はOperaで上に戻るスクロールが通常のアンカーリンクのように一瞬でページの一番上まで戻り、それからゆるゆるとスクロールしながら画面がチカチカする。

Operaでは、htmlとbody両方の指定が有効になるのがチラつきの原因みたい。とほほ
jQueryでscrollToを使うときの注意点 – NoteBook
$(‘html’)と$(‘body’)のどちらが有効か?の表がある。

しかし、operaでは、両方の指定が有効になり、ちらつきの原因となるので、以下のように指定します。

$($.browser.opera ? document.compatMode == ‘BackCompat’ ? ‘body’ : ‘html’ :’html,body’)
.animate({scrollTop:目標のオフセット値Y,scrollLeft:目標のオフセット値X});

流用させてもらったらこうなった。

$(function(){
  $('a[href*=#]').click(function() {
    var $target=$(this.hash);
    var targetY=$target.offset().top;
    $($.browser.opera ? document.compatMode == 'BackCompat' ? 'body' : 'html' :'html,body').animate({scrollTop: targetY},2000);return false;
  });
});

しかしこの三項演算子が全く解読できない＞＜

今回チェック用のhtmlとcss

<body>
<p><a href="clicktest.html">clicktest</a></p>
<p><a href="#abc">link</a></p>
<p><a href="#def">link</a></p>
<p><a href="#ghi">link</a></p>
<div id="wrap"> wrap内 </div>
<p id="abc">abc</p>
<p id="def">def</p>
<p id="ghi">ghi</p>
<p><a href="#wrap">to wrap</a></p>
</body>

<style type="text/css">
body {
  text-align:center;
}
#wrap {
  height:5000px;
  background-color:#f63;
}
</style>

メモ

$.browser.～
jQuery.browser – jQuery 日本語リファレンス

※jQuery 1.3からはサポート外。jQuery.supportを使って下さい。
navigator.userAgentを元に、ユーザエージェントを識別するためのフラグを連想配列として保持しています。
現時点で有効なフラグは次の通りです。
* safari
* opera
* msie
* mozilla

よく聞く「何もしてないのにおかしくなったんです」またまたご冗談をが自分の身にも起こるなんて。
普段使わないからこのままでもいいんだけど
画面のプロパティからデザインをXPスタイルに変更したら治った。

変更は “画面のプロパティ – デザインタブ – ウィンドウとボタン” から

XPスタイルにしたら解決、でもなにこれ色がすごく眩しい。

クラシックに戻しても問題なし。

なんか文字詰めが変わったような?

IE8なのにIE7Proを入れたのが原因なのかな
IE7Pro – 究極のアドオン用Internet Explorer
マウスジェスチャーやアドレスバーからタグを開けるようになる拡張機能。

[追記]
再起動したらまた黒くなった、あるぇ?

[追記の追記]
Windows Update (MS Update) したら治った。
本当に治ってるのか…?

話がそれた。
そんなちょっと快適なOperaですが気になる事がありんす。
サイトによっては全角数字がバケるんです。
別にOperaが悪いわけじゃなんだけどね。

英数なんて全角で使わないけど、サイトによってはゴチャ混ぜになってるのよね。
例えば知恵袋なんてOperaで見ると何書いてあるんだかさっぱり。
どうも原因はLucida Grande。

ちなみに、知恵袋はこんな風なfont指定をしてる

font-family:"MS PGothic","Lucida Grande",sans-serif;

Firefoxだと”MS PGothic”が有効になるけど、Operaは”ＭＳ Ｐゴシック”と書かないと認識しないので次の”Lucida Grande”が適用される。

そして Lucida Grande で全角数字を表示するとバケる。
表示できないからバケる?
詳しい事はわかりませんけど。とにかくバケる。
Lucida Grandeてのはwindows版のsafariをインストールすると付いてきてたみたいだけど今はどこからやってくるんだろう?
Safari.resourcesフォルダの中には無かった。

とりあえずOperaのフォントを変更しても、font-familyが指定してあるページのフォントは変更できないので解決しない。

解決策は?

制作側の解決方法は”Lucida Grande”を最初に指定しない。
観覧側の解決方法はいくつか選べて

1. Lucida Grandeを削除する(windowsに元々あるfontじゃないから無くても平気)
2. Firefox用のLucida Grandeフォント | pyotr.guru.ru様が配布されてるLucida Grandeと置き換える
3. ユーザースタイルシートでfont-familyを上書きする

今回は3番の「ユーザースタイルシートでfont-familyを上書きする」をやってみます。

Ctrl + F12 ( [設定] – [設定] ) – [詳細設定タブ] – [コンテンツ] – [スタイルオプション]

を開くとユーザースタイルシートの保存場所と名前を設定できる。
初期値はuser.cssみたい。

ちなみにうちのOperaは10.50 betaが出た時に別フォルダを作ってインストールしたんだけど
そのフォルダのまま勝手にアップデートされてて、中身は10.53なのに紛らわしい事になってる。けどそのまま。

user.cssは存在しなかったので、こんな風に記述して保存

body{
font-family:inherit !important;
}

結果

文字化けは治ったけど、font指定を片っ端から上書きしちゃうのは良くないよねぇ…
やっぱり1番か2番が良いのだろうか。

表示しているページのタイトルとアドレスを一括コピーできるFirefoxアドオン <make link> の、google chrome版があった。
すごく嬉しい、けどFirefoxの出番がさらに減って複雑な気持ち。

Create Link – Google Chrome 拡張機能ギャラリー

IE 8 の表示(6～8同じ感じだった)

Firefoxは最初っからイイ感じ。

html

<input type="text" name="example" />

css

input[type="text"]{
height:1.6em;
}

細かい事で申し訳ないけど気持ち悪い、なんとかしたい。

IEでも縦位置中央にするには

試してみた結果、heightと同じ値をline-heightに指定する方法が有効ぽかった。

input[type="text"]{
height:1.6em;
line-height:1.6em;
}

すると、IEの表示がこうなる。

確認用テキストフィールド

heightのみ指定

line-heightを追加

paddingの場合

• Web Developer / Webdeveloperのダウンロード：ミナトラボ
• Xmarks / Xmarks Bookmark and Password Sync :: Add-ons for Firefox

こっちはWeb Developerでcssのon / offをしたいのに、なぜかXmarksブックマークの同期の方が有効になっていて変更できない。

そこでkeyconfig

keyconfig / keyconfig 20080929 • mozillaZine Forums
インストールしてCtrl+Shift+F12で設定画面が開く。
もしくは[ツール] – [キーボードショートカットのカスタマイズ]

色がついてるのが被っているショートカット。
要らない方を選択して[キーを削除]して再起動したらおk。

やっと、Web Developerのctrl+xhift+sが復活したヾ(ﾟωﾟ)ﾉ゛

その原因は2つありました。

1. ローカルだと機能しない
2. cssは外部化しておく

以下、使い方メモなど。

ヘッダ部分の例

<!--[if lte IE 8]>
<script type="text/javascript" src="js/DOMAssistantCompressed-2.8.js"></script>
<script type="text/javascript" src="js/ie-css3.js"></script>
<![endif]-->

ie-css3.jsダウンロード先
Keith Clark – IE CSS3 pseudo-class selectors

IE8以下にcss3の擬似クラスを対応させるjsのバージョンが1.0になって名前と配布サイトが変わってた。
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

ie-css3.js以外にjavascript libraryが必要、色々対応してるので好きなのを選んで使う。
DOMAssistant 2.8.0と併用すれば以下の擬似クラス全てに対応するようだ。

v0.9.5bで対応している擬似クラス
Supported JavaScript Libraries

1. :nth-child
2. :nth-last-child
3. :nth-of-type
4. :nth-last-of-type
5. :first-child
6. :last-child
7. :only-child
8. :first-of-type
9. :last-of-type
10. :only-of-type
11. :empty
12. :enabled
13. :disabled
14. :checked
15. :hover
16. :focus
17. :target
18. ::first-line
19. ::first-letter

選択子 / 6.6.5 構造上の擬似クラス(日本語訳)

ie-css3.js動作確認サンプル
確かにIEでも擬似クラスが有効になってるけど、<pre>のcssが無効になってる。使い方間違ってるのかな…
でもどうやら@importから先のcssファイルを読み込んでくれてないみたいだ。

書いてあった＞＜；；

A few things you should know:

* Style sheets MUST be added to the page using a tag. You can still use @import in your style sheets. Page level style sheets won’t be parsed
* Style sheets MUST be hosted on the domain as the page.

以前より動作が安定してアイコンも綺麗になってた。

My DebugBar | IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 9

Note for IE9 : IETester installer does not include IE9 files, so you will need to install IE9 preview and copy files manually : See How To install IE9 under IETester (No more than 1 minute).

IE9は含まれてないから必要なら別途preview版をダウンロードしてきてね、と書いてある。

IE9 previewのダウンロードはたぶんここから｜Internet Explorer 9: Testing Center
(右上のinstall the previewのボタン)

同ページ内で、IE9のWeb標準対応度なんてのが他ブラウザと比較されてたり。

IEは大嫌いだけど、IE9はみんながさっさと乗り換えたくなるような素晴らしいブラウザになればいいなと期待。
IEがちゃんとしてれば制作が幾分楽になるもんね。

Internet Explorer Platform Preview requires Windows Vista or Windows 7. Feel free to explore our Test Drive demos in your current browser.

ただ、IE9を使うにはWindowsVistaか7が必要。という事で、XPでIE6使ってる人達はIE9がすげぇ良いブラウザだとしても使えないわけで、どうなんだろう?

Plain Text

Make Link :: Add-ons for Firefox <https://addons.mozilla.org/ja/firefox/addon/142>

Forum Code

[url=https://addons.mozilla.org/ja/firefox/addon/142]Make Link :: Add-ons for Firefox[/url]

HTML

<a href="https://addons.mozilla.org/ja/firefox/addon/142">Make Link :: Add-ons for Firefox</a>

Markdown

[Make Link :: Add-ons for Firefox](https://addons.mozilla.org/ja/firefox/addon/142 "Make Link :: Add-ons for Firefox")

その他、リンク・URL関係で入れてるアドオン

CopyAllURLs :: Add-ons for Firefox

Make Linkのタブ版みたいな感じ、全然使ってない。
開いてる全てのタブのurl / タイトルをコピーしたり、履歴まで含めてコピーできたり、指定した文字数以上urlは自動的にtinyurlに変換するとか出来る。

テキストリンク (Text Link) :: Add-ons for Firefox

リンクになっていないURI文字列をダブルクリックで開ける。
例えばこんなのとか

http://www.google.co.jp/

どっかでよく見かけるこんなのとか
ttp://www.google.co.jp/
いまどき無いだろうっていうこんなのとか
ｈｔｔｐ：／／ｗｗｗ．ｇｏｏｇｌｅ．ｃｏ．ｊｐ／
全部ダブルクリックするだけで開ける、素敵。

どうもFirefox3.6になってからflash上でマウススクロールがきかなくなったんだけど、なにげに不便。
それを解決するアドオンがFOX x FOXさんで紹介されてたので入れてみました。

参考｜Flash上でマウススクロールができる Scroll on Flash 0.1.9 FOX x FOX解説付き。

アドオン｜Scroll on Flash
スクロール出来るようになった。

20101229 追記

新しい)別の方法

互換性について – Firefox更新情報 Wiki*

Firefox 3.6 以降

1. ロケーションバー（アドレスバー）に「about:config」と入力する。
2. フィルタ欄に「extensions.checkCompatibility.3.6」と入力する。
3. 設定名「extensions.checkCompatibility.3.6」の行が表示されている場合はその行をダブルクリックし、値を「false」へ切り替えて完了です。行が表示されない場合は(4.)へ。
4. 右クリックしてコンテキストメニューから「新規作成」→「真偽値」を選択する。
5. 設定名は「extensions.checkCompatibility.3.6」と記入し、真偽値は「false」を選択して完了です。

20101229 追記ここまで

google ノートブックの時みたいにinstall.rdfを変更

(googleノートブックエクステンションをFirefox3.5以降にも対応させる方法)
install.rdfのem:maxVersionを3.6.*に書き換えてみるもFirefox 3.6 には対応していません。と言われる、残念。

extensions.rdfを削除してみたら使えた。

C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles\プロファイル名

内にあるextensions.rdfを削除してFirefoxを再起動させたら使えるようになった。

参考にしたページ

Firefox3.5に未対応なアドオンを優しくアップデートに対応させる方法
コメント欄も役にたつかも。

何種類かサンプルを作って何度か書き直してるうちに、
IE6もdisplay:inlineでOKだったり、親要素から指定しなくても問題なかったり混乱する結果ばかり
そして最終的には全然シンプルに出来た。

なのでメモの必要もない感じになってしまったけどせっかくなので
以下、サンプルと気を付けた事、気づいた点のメモ。

サンプル

IE8やFirefox3、chromeでやるにはとてもシンプル。
test1:IE7以下を対象から外したサンプル

test2:IE7以下も対応

気を付けた事、気づいた点

ポップアップさせる要素に.popupというclassを付与した場合

a:hover,
a:hover .popup

みたいにa:hoverも指定が必要だった。

:hoverのdisplayの代わりにbackgroundに何か指定してもOKだった。

haslayoutが関係してるのかなとzoom:1を使ってみたところ
IE7でポップアップが消えなかったり希望した動きにならなかった。

カテゴリーなど特定の文字が重なる。
categoryに変更すると重ならない。
CSSが問題なのか？と調べてみてもよくわからん。

で、もしやとエクステンションをかたっぱしから無効にしたら

正常に表示された。

ん～どれが問題だったんだろう。
特定するの面倒くさいな。

chrome extensions(beta)

Google Chrome 拡張を作成してみたいデベロッパーの方へ

Google Chrome 拡張を開発するデベロッパーのための準公式コミュニティ、Chromium-Extensions-Japan がスタートしました。

(中略…)

なお、すでに300を超える拡張 (Extensions) をこちらのギャラリーからみつけることができます。Windows、または、Linux をお使いの方は、これらは、かっこよくて、便利で、そして見栄えの良い拡張 (Extensions) をお試しください。

Macはダメなんだねぇ。
しかしもう300個もあるのかぁ。

インストールしてみたエクステンション

• Google Mail Checker
• AdBlock
• Chrome Gestures
• Mouse Stroke
• Evernote Web Clipper
• GooglePreview
• Xmarks Bookmark Sync
• Firebug Lite
• hatena-bookmark
• AutoPagerize for Chrome
• GNote

Chrome Gesturesは設定がしづらい、最初日本語だったけど、一度設定して次に設定画面を開いたら英語に変わってしまった。
Mouse Strokeは英語だけど設定がしやすく分かりやすい。
どっちもちょっと不安定。

ちなみにテーマギャラリーとJavascriptのデモ

例えばgoogle analyticsのカレンダー部分など下の画像のようになってた。
日付が表示されない。

正常ならこう表示される。

Firefox以外のブラウザでは表示されているので、うちのFirefoxに問題ありなんだろうとアドオンを一度全部無効化してみると、カレンダー部分のFlashが表示された。

ん～、

一個づつ有効化して原因を特定。
以前投稿した縦長のサイトで画面に見えない部分もキャプチャしたいで導入したPearl Crescent Page Saver(現在開いているWebサイトの表示されてない部分を含めたキャプチャが出来るFirefoxのアドオン)の設定が問題だったみたい。

Webページの読み込み時にFlashのコンテンツも取得のチェックを外してFirefoxを再起動したら表示されなかったFlashが表示されました。

例えばFirebugでalert()の代わりに使っているconsole.log();を
以下のようにスニペットに登録して、ショートカットキーを割り当てると、選択したテキストを挟み込んでくれたり便利です。

<script type="text/javascript">
var aaa=10;
aaa//aaaを選択(反転)して割り当てたショートカットキーを押すと
</script>

こうなる

<script type="text/javascript">
var aaa=10;
console.log(":"+aaa);
</script>

aaaを手打ちで追加して

<script type="text/javascript">
var aaa=10;
console.log("aaa:"+aaa);
</script>

Firefoxでプレビューしてみる。

他に登録してるスニペット

clreafixinline-tableって相当古い。

/* clearfix
-------------------------------------------------- */
ここにセレクタ:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* for ie */
* html ここにセレクタ {
display:inline-table;
}
/* hides from ie-mac \*/
ここにセレクタ {
height:1%;
}
/* end hide from ie-mac */

inline-block

display: inline-block;
/display: inline;
/zoom: 1;

「/」はIE6～7用のハック

css3の角丸

border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

min-height

ここにセレクタ {
min-height:100px;
height: auto !important;
height: 100px;
}

ん～CSSばっかりだ。

あとはfont-familyをゴシック、明朝、英文の3セットや
Google Analyticsのコード

以前はIEのイメージツールバーを非表示にするmetaタグなんかも登録してたけど

<meta http-equiv="imagetoolbar" content="no">

新規htmlのテンプレの方に書き込ん出るからもう必要なくなった。

FirefoxのアドオンPearl Crescent Page Saver Basic。

もうこれで満足。

機能

• Pro(有料)とBasic(無料)がある。
• 縦は下まで、横幅はFirefoxの横幅にあわせてキャプチャする。
• マウスカーソルはキャプチャされない。
• 速くて簡単

他には

消費リソース零!「キャプラ」

• マウスカーソル埋め込める
• キャプチャした画像の処理を自動化できる
• キャプチャした画像の一部を切り抜きできる
• ちょっと使いづらい(キャプチャする時やプレビューをスクロールさせる時とか)

ですがある日気づくと、いつの間にか自動でログインしなくなっていて
メールを確認しようとするとgmailのログイン画面で毎回パスワードを入力するように。

さすがにあぶないなぁと検索してみると、現時点での解決方法をまとめてくださってる方がいらっしゃいました。
「Gmail Manager」にログインできない　まとめ編

で、そこからリンクをたどっていって以下のgmanager0575b2.xpiを入れたらログインできました。
[Ext] Gmail Manager 0.5.7.4 – Manage multiple Gmail accounts
の
http://longfocus.com/firefox/gmanager/releases/gmanager0575b2.xpiを入れました。

別に他のブラウザを使えば済む話だし、むしろFirefoxよりwebkit系の方がサクサク動いて気持ち良いのだけれど、Firefoxのアドオンが便利すぎて、それなしのネット徘徊はだいぶ不便。

プロファイルを削除して再インストールすれば解決するのかもしれないけれど、最近プロファイルの全削除してから再インストールしたばっかりなので、他の方法はないかな？と探す。

Firefoxプロファイルフォルダ直下にある *.sqlite データベースの最適化をしてくれるというアドオンがあったので試しに入れてみる。
SQLite Optimizer
そうしたところスクロール時にフリーズする現象がなくなった。

しばらく様子見。

[追記｜20090928_01:48]

やっぱりすぐ重くなったのでsqlite3.exeを使ってみる
places.sqliteが522MBから516MBに減った、けど500MB超えてるなんて、、、。

[追記｜20090928_02:21]

ブラウザの履歴を90日から30日に変更
6月、7月、8月の履歴削除
そうしてもplaces.sqliteのサイズは516MBのままなのに、だいぶキビキビ動くようになった。

ショートカットのプロパティのリンク先のおしりに
「 –enable-extensions」追加
どうも今は上のがなくても（Devだと）エクステンションが動くみたいだなぁ

エクステンション
http://www.mychromeaddons.com/

インストールされてるエクステンション確認
chrome://extensions/

ユーザースクリプトと同時に使うにはどうしたらいいのかなぁて検索してたら
Google Chrome 拡張(Chrome Extension) はてなブックマークのエントリー数を表示する Chrome拡張を作ったに画像入りでわかりやすく書いてあったのでそっちを参考にすればいいか！とういうメモになった。
勉強になります。

C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles\プロファイル名\extensions\notebook@google.com

install.rdfのem:maxVersion=”3.5.*”

メインのFirefoxを3.5にバージョンアップしなかったのは、このアドオンが使えなくなるからだったので、ひとまず解決できてよかった。

追記 / 2010-04-06
googleノートブックエクステンションが元々インストールされていない状態のFirefoxには、新規でエクステンションをインストールしようとしても互換性がない為インストール出来ない。
つまりinstall.rdfも存在しないわけで別の方法で強制的にインストールさせる必要がある。
結局Nightly Tester Tools(日本語化はこちら)をインストールするハメに。
追記ここまで

それまではプロファイルを分けてFirefoxを複数インストールして対処してた。
この先は、その為のメモ。

プロファイルの管理

プロファイルマネージャを起動する
[ファイル名を指定して実行]

firefox.exe -ProfileManager

コマンドラインオプション
複数のプロファイルを同時起動
ショートカットのリンク先に

 -p プロファイル名を入力 -no-remote

えむもじら｜複数のバージョンの Firefox を使用する際の鉄則

さて、コンディショナルコメントというものがあります。
このブログにも使ってみました。
IEにだけ読み込ませたり、読み込ませなかったり、IEのバージョン毎に読み込むものを変えたりできるアレです。
[20090916修正]

書き方

expressionの条件と一致するIEだけに適用する

<!--[if expression]> ～ <![endif]-->

expressionの条件と一致しないIEだけに適用する

<!--[if !expression]> ～ <![endif]-->

IE全て

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_all.css" />
<![endif]-->

IE7のみ

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie_7.css" />
<![endif]-->

IE6以下

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="under_6.css" />
<![endif]-->

IE以外

<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="normal.css" />
<!--<![endif]-->

IE全部拒否

<![if !IE]>
<link rel="stylesheet" type="text/css" href="not_ie.css" />
<![endif]>

IE以外とIE全部拒否は同じようだ

comparisonとversionは省略することが可能
comparison feature version

• feature: ブラウザの種類を指定
• version: ブラウザのバージョンを指定
• comparison: バージョンとの比較により適用対象の範囲を指定

lt

versionより下のIEに適用する。versionで指定したIEには適用しない

lte

version以下のIEに適用する。versionで指定したIEも適用対象に含む

gt

versionより上のIEに適用する。versionで指定したIEには適用しない

gte

version以上のIEに適用する。versionで指定したIEも適用対象に含む

参考url

• 正式版完全対応! Internet Explorer 7 CSS攻略法

Internet Explorer 6 on Windows XP Home Edition Service Pack 2は2010/07/13でサポート終了

• Firefoxダウンロードページ
• 3.5のダウンロード具合-灯

プロファイルの保存場所

C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles

と思ったけどやめました。

プロファイルを別に作成して3.5をインストール、googlenotebookのアドオンが使えなくなった、どうしようすごく便利だったのに。