日曜日, 10月 15, 2006

世界時計

久しぶり、世界時計がウェブ画面で見えるサイトを発見しましたので、ここにリンクを貼り付けます。

世界時計


元々はいつも読んでいるサイト(トルコリラとアイスランドクローナで年間1000万円運用生活)に乗せてあるので、あちらの方々に感謝します。

水曜日, 10月 11, 2006

A little about the differences between IE and its counterparts

A Greasemonkey's Guide to Turnabout by Adam Hindman

There are some points about differences between IE7 and its enemies. Here I copy some contents here for myself.

Events

The resize Event Fire Multiple Times

In Firefox, resizing the browser window fires the resize event exactly one time, after the user has "let go" of the window. However, in Internet Explorer, the resize event will fire continuosly, every time the window size changes at all. This can make a huge difference if your script does something like increment a variable every time the window is resized.

Internet Explorer Supports onmouseenter and onmouseleave

You may already be familiar with the handy onmousever and mouseout events, which are fired by the mouse moving on top of or away from the element that calls it, but also any elements that it bubbles up to. This means that if a DIV has a button nested inside, and both these elements have onmouseoverDIV that contains it.

onmouseenter and onmouseleave get around this potential problem. They work in a similar manner, activating when the mouse touches an element, or moves away from it, respectively. The difference is that these events do not bubble up the document tree. Mousing to the button in the previous example would not fire the DIV's event if both were using onmouseenter.

Internet Explorer has the advantage here, since it supports both sets of events.

Example script: The Difference Between onmouseout and onmouseleave

The following examples illustrate the different behaviors you can produce by choosing between onmouseout and onmouseleave. What you should see is two sets of boxes. Each set of boxes is composed of one large box containing one small box. If you move your mouse into one of the larger boxes and then out again, it should report the color of the box you just left. However, if you mouse into one of the interior boxes and then back out again, you should notice a different between the set of boxes on the left, and the set of boxes on the right. This difference is should illustrate the ways in which onmouseleave treats the element hierarchy of a document differently than onmouseout.

Move your mouse in and then out of the following sets of boxes:

onmouseleave onmouseout


Internet Explorer Does Not Support addEventListener()

Sadly, the standards-compliant method of event registration suggested in the W3C DOM Level 2 document is not supported by Internet Explorer. Using

element.addEventListener ('click',doSomething,false)

to assign a function to an event will not produce any result whatsoever. It goes without saying that related event registration methods (such as removeEventListener and dispatchEvent) do not work either.

The scripter is left with 2 cross-browser options, and 1 option that is proprietary to IE5.5+.

Internet Explorer's Options for Event Registration

    The following event registration methods produce the same result in Internet Explorer and can be used in place of the non-supported addEventListener()
  1. The Deprecated but Still-Used Way:
    <A HREF="somewhere.html" onClick="doSomething()">
  2. The Non-Standard but Preferred Way:
    element.onclick = doSomething
  3. The Internet Explorer Only Way:
    element.attachEvent ('onclick',doSomething)

木曜日, 10月 05, 2006

css-discuss Wiki

css-discuss Wiki

The css-discuss Wiki is a companion to the CssDiscussList mailing list. Among other things the wiki serves as a collective long-term memory for the list participants.

火曜日, 10月 03, 2006

Mozilla Firefox用RSSリーダーSage(セージ)の検索窓にRSS検索エンジンを追加する方法まとめ

随分と間が空いたが、2006年度の初記事としてRSSリーダーSageのカスタマイズに関する記事を書きたい。

人力検索はてなで下記のような質問を見かけた。

はてな 最強RSSリーダーをさがせ!?何種類かRSSリーダーを使用してみたところ、Sageが使いやすくて気に入ってました。でもひとつ気に入らないのは、Sageでは・・

内容に対する回答は既に書いたとおりで、以前書いた記事1記事2を見れば大体のやり方はわかると思うが、まとめの意味で書いておく。

XULアプリケーション開発へのいざないによると、拡張機能のファイルに含まれている「.jar」という拡張子のファイルは単なるzipファイルである。解凍すれば簡単に中身のファイルを見ることができる。したがって、zip圧縮に対応しているアーカイバーがあれば、カスタマイズしたファイル群を圧縮する事で「.jar」という拡張子のファイルを作成する事ができる。

今回のカスタマイズに必要なもの

  • Mozilla Firefox
  • 導入済みのSage
  • zipファイルに対応しているアーカイバ(当方ではLhaplusを利用)
  • テキストエディタ(Sift-JISでの文字コード保存に対応しているものを使用する。Windowsならメモ帳でも可。当方ではEmEditor Freeを利用)
  • アイコン作成ソフト(当方では@icon変換を利用)

追加するRSS検索エンジン等

準備作業(アイコン作成)

  1. RSS検索エンジンの各サイトからfavicon.icoをダウンロードして保存する。
  2. ダウンロードしたfavicon.icoを@icon変換のウィンドウにドラックアンドドロップで移動する。
  3. @icon変換のウィンドウに表示されたファイルを選択し、16x16ピクセルのpngファイルとして保存する。半角英数で各検索エンジンの名前をつけて保存すること。

カスタマイズの作業内容

  1. 導入済みのSageが入っているフォルダを探す。
    • Sage.jarが入っているフォルダをファイル検索機能を使って探す。(WindowsならC:\Documents and Settingsのどこか)
  2. Sage.jarが見つかったら、ファイルをデスクトップにコピーする。
  3. 拡張子をzipに書き換え、zipに対応したアーカイバを使ってSage.zipを解凍する。(jarファイルに対応しているアーカイバならそのまま解凍可)
  4. 解凍して現れたフォルダのうち、contentフォルダ内にあるsearchフォルダを開く。
  5. 追加したい検索エンジン用のアイコンファイル(pngファイル)をsearchフォルダ内に保存。
  6. searchフォルダ内にあるsearchEngine.rdfをエディタで開く。
  7. searchEngine.rdfに追加したい検索エンジンを追記して保存。
    • 追加したい検索エンジンのURLの中に含まれる「&」は「&amp;」に置き換えて記述する必要がある(「」内の文字は半角英数字で記入すること)。
    • 検索エンジンのアイコンを指定する際、既に保存してあるpngファイルにつけたファイル名と一致させる事。
    • 具体的な記述内容に関しては編集し直したsearchEngine.rdfのテキストファイルを参照のこと。丸ごと流用も可。
      • 注意:searchEngine.rdfのテキストファイル(.txt)を丸ごと流用する場合には、「searchEngine.rdf.txt」から拡張子の「.txt」を外して「searchEngine.rdf」に変更すること。
  8. contentフォルダ、localeフォルダ、skinフォルダをまとめてzip計式で圧縮。
  9. 圧縮して保存したzipファイルの名前と拡張子をSage.jarに変更する。
  10. Firefoxが起動していない状態の時に、変更したSage.jarを元々のSage.jarが入っていたフォルダにコピーする。
  11. Firefoxを起動してSageの検索窓に各RSS検索エンジンが追加されていて、正常に動作すればOK。

作業内容は以上である。やってみると結構簡単であることに気が付くので、おためしあれ。

追記:Firefoxの拡張機能開発についてはFirefoxの改造テクニック!―カスタマイズ&拡張機能開発ガイドが詳しい。拡張機能を作成したい向きの人は読んでみると良いかもしれない。

Firefoxの改造テクニック!―カスタマイズ&拡張機能開発ガイド
大浦 淳
毎日コミュニケーションズ (2005/09)
売り上げランキング: 8,968
おすすめ度の平均: 4
4 順を追ってカスタマイズ方法を理解できる本です


2006年3月15日追記

2006年5月21日追記

2006年6月7日追記

|

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/8680075

この記事へのトラックバック一覧です: Mozilla Firefox用RSSリーダーSage(セージ)の検索窓にRSS検索エンジンを追加する方法まとめ:

» Firefoxのネタ トラックバック ネタ蔵
Firefoxのネタを追いかけるヨ! [続きを読む]

受信: 2006/02/16 3:25:51

» 最強RSSリーダーをさがせリターンズ トラックバック ラクガキ黒板
RSSリーダーをいろいろ試して、Firefoxの拡張機能であるSageを使用することになったということを以前に書いた。で、1つ課題であったのは、 キーワード登録。一部のRSSリーダーでは、キーワードを登録すると、そのキーワードでひっかかったサイトを拾ってくれる。Sageでもできるが、そのと き1回だけである。RSSバーとかgooRSSリーダーなどは、キーワードを1回登録すると、その後はずっと常に引っかかったサイトを拾ってくれる。 Sageでそれができないかな、と思っていた。 freshfeedというサー... [続きを読む]

受信: 2006/02/16 23:56:02

» Mozilla Firefox 用 Yahoo!ブログ検索プラグイン+RSSリーダーSage用カスタマイズ トラックバック データバックアップメモ - extended -
Yahoo!Japanからブログ検索としてYahoo!ブログ検索のベータ版がリリースされた。というわけで、Mozilla Firefoxの検索プラグイン(検索プラグインという言い方でよいのだろうか?)を作成してみた。 Yahoo!ブログ検索プラグインをワンクリックで追加(※JavaScriptを有効にした状態でページを読み込んでからクリックすること。) ※ワンクリックでのインストールがうまくいかない方は手動で以下のファイルを¥Mozilla firefox以下にあるsearchpluginフォ... [続きを読む]

受信: 2006/03/15 1:14:48

» [Web]Firefoxメモ: RSSフィーダーSageに関する備忘録 トラックバック ixtlanの日記
本家サイト: Sage: a feed reader for Firefox FirefoxまとめサイトのSageセクション: http://firefox.geckodev.org/index.php?Sage 現行バージョン:1.3.6 (Firefox 1.5.0.3対応) 日本語化: 済 カスタマイズ: RSSフィードをコンテンツエリアに読み込む際のユーザーCSSの変更... [続きを読む]

受信: 2006/05/31 23:59:06

コメント

こんばんは。はてなでお世話になっていますnaodayと申します。今回の質問はありがとうございました。
さて、あの後、なんとか書いていただいたとおりやってみて、なんとかできました。私のレベルでは決してスムーズにはできませんが、なんとか目標は達成しました。これからSagegがますます便利になりそうで、楽しみです。

それでは、お礼とご報告まで。

投稿 naoday | 2006/02/17 0:07:01

naodayさんコメントありがとうございます。私のまとめは過去の奮闘を忘れない為に書いているようなものなので、さほどレベルが高いわけではないです(笑)。

Sageは割とシンプルなソフトなので、私のレベルでもそれなりに使いこなせているというのが実態です。

お互いに上手く使いこなしていきましょう(笑)。それでは。

投稿 Kazabana | 2006/02/21 0:03:05

こちらの通りカスタマイズしてみたのですが、上書き後の起動で変なバーが出てきたり、Sageのアイコンが出なかったりと、が正しく起動してくれませんでした。
また、xpiに固めて試したのですが、"インストールスクリプトが見つかりません"というエラーでだめでした。

zipに圧縮するときに何か問題でもあるような気がしたのですが、なにか方法はないでしょうか?

投稿 sippu | 2006/03/15 12:40:05

sippuさんこんにちは。

当ブログで公開しているカスタマイズ版のsearchEngine.rdfのテキストファイルですが、ファイル名から拡張子の.txtを外して拡張子を.rdfに変更しておく必要があります。この点は大丈夫でしょうか?

もし上記の内容が該当するようでしたら、お手数ですが拡張子の部分についての作業をやり直してみてください。

※ココログはアップロードできるファイルの種別が制限されている関係上、拡張子が.rdfのものをアップロードする事ができません。そのため、 searchEngine.rdfもテキストファイルとしてアップロードしております(ファイル名がsearchEngine.rdf.txtになってい ます。)

投稿 Kazabana | 2006/03/16 23:56:07

報告と御礼です、なんとかうまくいきました。
原因は、sage.jarに固めるときに、contentフォルダ、localeフォルダ、skinフォルダをまとめてzip形式にしなかった(その上にあたるsageフォルダごとzipに固めてしまった)ためだったようです。

結局その通りにやらなかったところでした。説明文をよく読んでなかったようですorz
お騒がせしました^^;

投稿 sippu | 2006/03/17 11:37:22


Sageのスタイルシートをいじる

Firefox用のRSSリーダの拡張であるSageのデフォルトのフォントサイズ設定では文字が小さ過ぎるし,Tapestryによる漫画の表示の問題があるので1コラムでアイテムを並べたいためスタイルシートをいじってみる.いちいち細かい設定する余裕がないので,元のスタイルを叩き台にフォントサイズだけいじる.以下手順:

  • まずSageのインストールページからxpiファイルをいただく."click here to install"のリンクを右クリックし,[Save Link As...]を選んでダウンロードする.xpiファイルの実体はzipファイルなので,unzipして中に出てくる sage.jar を取り出す.

  • さらにjarファイルも実体はzipファイルなのでsage.jarをunzipすると,content/res/sage.css というファイルがあるので,これを取り出していじる.

  • いじったファイルは適当な場所に置き,Firefoxのメニューから[Tools]→ [Extensions]で拡張のリストを開いてSageのオプション設定の画面を開いてFeed RenderingのUse custom style sheetにチェックしてファイルのパスを指定する.

私がいじった場合のdiffはこんな感じ:

% diff -u sage.css.orig sage.css
--- sage.css.orig Sat Sep 11 02:57:00 2004
+++ sage.css Mon Jan 24 16:09:32 2005
@@ -11,6 +11,7 @@
margin: 0px;
color: #222;
font-family: verdana;
+ font-size: medium;
}

a:link { text-decoration: none; color: #436976; font-weight: bold; }
@@ -28,21 +29,21 @@
}

#rss-title {
- font-size: large;
+ font-size: larger;
line-height: 1;
margin: 0px;
padding: 0px;
}

#rss-desc {
- font-size: small;
+ font-size: inherit;
margin: 0px;
padding: 5px 0px 0px 20px;
}

div.item {
border: 1px solid #8cacbb;
- width: 47%;
+ width: 96%;
min-width: 14em;
margin: 0px 0px 8px 2%;
padding: 0px;
@@ -51,7 +52,7 @@

h2.item-title {
background-color: #dee7ec;
- font-size: x-small;
+ font-size: inherit;
font-weight: normal;
line-height: 1.1;
margin: 0px;
@@ -64,13 +65,13 @@

div.item-desc {
min-height: 6em;
- font-size: x-small;
+ font-size: inherit;
margin: 0px;
padding: 8px 10px;
}

div.item-pubDate {
- font-size: x-small;
+ font-size: smaller;
margin: 0px;
padding: 8px 10px;
width: 80%;


IE7について

  1. Be aware that the HTML element has a default border of 1.
  2. Windows Internet Explorer 7 and greater: Fixed positioning is available through strict mode.

    Internet Explorer 6 and greater: It is recommended that your !DOCTYPE be set to strict mode to enable rendering compliance with the W3C specification for Cascading Style Sheets, Level 2.1 (CSS2.1) .


    Fixed Positioning

    Beginning in Internet Explorer 7, web developers can use fixed positioning, a subcategory of absolute positioning. Similar to the containing boxes of absolute positioning, fixed position elements are independent. When applied, they are not relative to preexisting parent or child elements. The distinction involves element placement. Rather than localization on the body of a page (as with absolute positioning), the contents of a fixed positioned element flow within the given dimensions of the browser window (also known as the viewport).



  3. By default, a positioned element always has a higher z-coordinate than its parent element so that it will always be on top of its parent element.