2011.04.06

de.de.popooooo

今日、免許更新した免許書を受け取りに地元警察にゆきますた。
僻地ゆえ免許郵送サービスとかはありません。
免許更新の申請にゆき1、更新講習を受け2、新しい免許書を受け取りに行く3、という三度手間。
しかも1ヶ月越しであります。
免許証を受け取りにゆくのを忘れていましたよ。
iphoneのカレンダーに通知を設定しておいてよかった。
道すがら、ちょー天気がよくて、春はやはりいいものだ。と再確認しました。
帰りに警察署の駐車場で2羽の鳩を見ました。
へーめずらしいなぁ。
と思いきや。車に乗り込み駐車場から出ようとすると…

どどーん。前方に…

めずらしくないわーっ!w
うちの周りには殆どおらんのです。鳩。
警察署からうちまで、直線距離にして1.2kmと、おもわずgoogleMapに定規を当てて計算してみるほど、離れてないのです。
個体数が少ないから、勢力範囲を広げないのでしょうかね。
えさでも撒いてあるのかな。温かいし楽しそうだす。

2011.04.01

Firefox カスタムペルソナ


Firefox 4が出ましたが、3.6.16の話題。
Firefox 4発表と同時期くらいに3.6のマイナーアップデート3.6.16(つい最近もう一つ前があった気もします)が来てました。
またまた同時期にアドオンのPersonas Plus 1.6.2のアップデートも当たりました。
その時以来、今までうたい文句はありながらまったく機能しなくなった「カスタムペルソナ」がやっとこさ表示できるようになりました。
補足説明を少しするとFirefoxはここからブラウザのデザインが選べるのですが、Personas Plusというアドオンを入れると、オリジナルのデザイン画像を全世界に晒すことなくプライベート(ローカル)だけで表示させることもできるのです。
それが上のキャプチャ画像だす。
シンクロニシティつーか、死蔵するのもなんだなぁとペット崇拝画像wを自サイトにアップしたところで、活用できるようになったというちょっとオカルトな報告でした(lll゚Д゚)。

2011.03.31

RSSアイコンと導入顛末

管理人サイト さわやかまみれにも今更ながらRSSを導入しました。
そんで、上記RSSアイコンを早速制作して、設置したわけですが… 苦労話読んでやって下さいw

(上記RSSアイコン さわやかまみれ/さわやかFree Web素材まみれ で配布しております。)
昔はホームページといえば訪問して貰った上「更新履歴」などで、更新箇所を確認して貰わねばなりませんでした。
今やRSSフィードが更新をお知らせし、履歴を残してくれるつーことで、不定期更新のサイトや月1ブログと化している当ブログ(…すまんとです)には、なんたるおあつらえ向き機能。導入しない手はありません。遅いけど。
ブログは初期状態でRSSを配信してくれているので苦労はないのですが、自分で一から作ったサイトとなると、自分でRSSフィードを用意せねばなりませぬ。
RSSを記述するためのXMLなどの書式が難しい上に厳密。
タイプミスを血眼で捜し、神経をすり減らすより、確実かつ素早く作成できるRSSエディタを利用した方が吉かということで、
アールケー開発さんのHistoryEditor を使わせて貰いました。
<description>にエンティティ化されたhtmlが使用可というRSS2.0で運用することにしました。
便利なことにHistoryEditorはdescriptionにあたる「内容」フィールドにタグを書くと、自動的にエンティティ化してくれます。
無事に出来たRSS2.0のhogehoge.rssファイルをリモートフォルダへアップロード。
サイトのindexページのヘッダーに

と記述することで配信完了。
safari、Firefox共にロケーションバーの横にRSSボタンが表示され、クリックするとブラウザのRSSリーダーで正常に読めました。
しかし、神は試練をお与えになった…
上記スズメのRSSアイコンを設置し、hogehoge.rssにリンクすると
SafariのRSSリーダーは正常に働くのですが、FirefoxはそのままXMLのソースコードを表示してしまいました。がっくし。
当サイトの置いてあるレンタルサーバ(nifty @homepage)では、拡張子.rssに正しいMIME TYPEを設定していないため、Firefoxは文字列として表示したようです。
今どきのサーバでは拡張子.rssに、application/rss+xml というMIME TYPEを設定してあるようですが、一部そうじゃないサーバが存在します。text/plainとか…、そもそも設定してないとか…。
自前の .htaccessを置けるサーバでしたら、

と記述することで解決できるのですが、当サイトのサーバは.htaccess不可。うっ。
RSS2.0は、XMLで記述されているので、
エディタで保存時に自動的に付けられた.rssという拡張子を.xmlに書き換えてアップロードしました。
成功であります。
ただ、拡張子を書き換えると編集時にHistoryEditorではなくテキストエディタで立ち上がってしまうです。
HistoryEditorを継続して使いたい。すごく便利だし。
そこで、hogehoge.xmlを開くアプリケーションを変更することにして、Mac osX の Finderでファイルを選択し「詳しい情報」→「このアプリケーションで開く」のプルダウンメニューでHistoryEditorを選択しました。
問題なく.xml拡張子のままHistoryEditorで編集できるようになりますた。
よかったよかった。

2011.03.19

祈り

大変な事が起こりました。
東北地方太平洋沖地震の被害に遭われた方にお見舞いを申し上げます。
お亡くなりになった方のご冥福を心よりお祈りいたします。
地震から一週間が経ちました。
未だに夢ではないのかと、何度も何度も思います。
一刻も早く、大変な思いをしている方々に支援の手が届くことを祈っています。
今、福島の原発で命がけの作業をしている自衛隊、消防、警察、東電関係者の皆様の無事を祈っています。
ここ一週間、何時間も災害の報道に目を通したりして、日常が疎かになっていました。
「また、復興しましょう!」
被災した自らを嘆くことなく、そう言ってくれたおじいさんがおられました。
被害に遭わなかった私たちに出来ることは、普通の生活を営んで世の中を今まで通りに動かすことです。
余震や原発の状況はまだまだ恐ろしいですが、その恐ろしさだけにとらわれず、復興する東北・関東の方々を迎えるべくがんばりましょう!
今日、NHKでちいさいけれど役立つ情報を仕入れました。被災地の方がご覧になってると良いのですが。
輪番停電などでも寒い思いをされている方もいらっしゃると思います。
首回りを暖かくすると手足まで暖まるようです。
番組ではタオルの片方の端に結び目を作り、もう片方の端を結び目に通して巻いてました。
肌に密着させて隙間を作らず、広い範囲で首を被うのがよいようです。
北国で暮らしてますが、外出時でもマフラーを忘れがちな私には目から鱗。ただ首もとが暖かいだけではないのですね。
こちらは震度4程で、被害は全くありませんでした。ご心配をお掛けしました。
いそこ(飼っているカメ)は地震以来ご飯を食べず、水の中に引きこもっておりましたが、昨日やっと陸場に登りました。

2011.03.11

続、うるぁぁ〜IE 真解明編

うひぃ 先日、IE6は必要悪みたいな事を書いた矢先、タイミング良く?マイクロソフトがIE6撲滅キャンペーン…を打ち出しました。
www.itmedia.co.jp/news/articles/1103/07/news024.html
作った本人が撲滅とか何を言っているんだいw
IE6を考慮に入れなくて良くなれば、大変ありがたいですが。
ところで、以前なやみに悩みまくった
IE8のIE7互換表示でtableに配置した画像に謎の隙間及び、画像がずれる(うるぁぁぁ〜っシリーズ)件。
原因がわかりました。
当時は混乱の極みで記事も大変判りにくいので、整理してみたいと思います。
お急ぎの方下の方のまとめお読み下さい〜。
お急ぎでない方は、このままお読み下さい(;´Д`)ゝ。

まず、こういった現象が起こったわけです。
IE8(IE7互換表示)及びIE7もしかしてIE6も

aaaaの部分は画像。
テーブルのtd内に画像を配置して、リンク<a>を貼り、<a>をdisplay:blockでブロック化したものです。
<a>をブロック化しなければ、画像下部に隙間ができてセルが広がります。
当初IE8の仕業かと思ったのですが、IE7互換表示の仕業でした。なのでIE7のバグになるかとおもわれます。
この現象が起きたのは、cssで全称セレクタのfont-familyにメイリオを指定(注1
画像にvertical-align:bottomを指定した時です。
前回は解決策としてimgをdisplay:blockでブロック化してずれをなくす。
と、書きました。
そうすると好きなだけ、font-familyも画像にvertical-alignも指定できる、とも書きましたが、よくよく考えて見れば、ブロック化したらvertical-alignは無効となります。
おもいっきりvertical-align:bottom;が悪さをしていたという事がわかりました。
しかし、imgに対してvertical-align:bottomを指定するのは、画像を縦に並べる時に隙間が出来てしまうのを回避する為に良く使われる手段ですし、一括指定してる場合も多いかと思われます。
そしてimgをブロック化すると困る場合もあります。ちょっと不便です。
と、そこでなぜメイリオだけ(ヒラギノ無罪)こんな現象が起こるのか改めてググってみたところ、
こんなに有名な事象が。Alternative Design Projectさん
IE6/IE7のunderlineバグとのことですが、これはもしやっ?!
テキストリンクのアンダーラインが文字に掛かって打ち消し線のようになってしまう、a要素とメイリオ(ブラウザのデフォルトフォント)とvertical-alignに関するバグのようです。

>同じ行のimg要素、または包含するブロック要素(pなど)に、baseline以外のvertical-alignを指定する。
(Alternative Design Projectさんより引用)

この辺りになにか感じます。
「うるぁぁぁ〜っ」の場合、text-decoration: underlineや半角英数フォントを優先などのバグ出現要素は満たしていないのですが、どうも同じ臭いがします。

このような指定をしていたので、メイリオ指定を疑っていたのですが、

>CSSのfont-familyでメイリオを直接指定した場合は大丈夫なようだ。
(Alternative Design Projectさんより引用)

と、あり。全称セレクタのfont-familyに(注1:メイリオを指定したことが原因ではなく、あくまでもブラウザのデフォルトフォントのメイリオの問題で、もしかしてもしかすると全称セレクタでのfont-family:’メイリオ’,Meiryo;指定では、この現象を回避できないのかもしれません。

とすると、デフォルトフォントがメイリオのブラウザでも、MS Pゴシックに上書きされるので回避できるわけで、前回の検証でも効果が出たのですが、これはメイリオを使いたいのであればムダですな。
全称セレクタでfont-familyを指定せず、おのおのの要素に指定するのが良いようです。
imgはvertical-align:baseline;で運用することでも避けられるようです。
しかし、テーブルに画像を敷き詰めるにはvertical-align:bottom必須です。tableを使わないのが一番の解決策なのですが大人の事情でまだtableも健在ですし…、table以外でも色んな場面で発生しそうなバグでもあります。
大変詳しく解説して下さった Alternative Design Projectさんに、お礼を申し上げます。ありがたや〜。

■シリーズ全まとめ

【症状】

IE6/7/8におけるtableセルに配置したリンク画像の隙間、リンク画像の表示切れ

【発生条件】

メイリオがデフォルトフォントになっているIE6/IE7/IE8の互換表示で起こる。
IE8モードでは正しく表示される。

  • IE7/IE6使用時 IEのデフォルトフォントをメイリオにしている。
  • 上の条件かつ、 a img{ に対しvertical-align: beseline以外を指定している。
  • IE8使用時 気付かぬうちに互換表示(IE7)になっている。

【回避方】

  • cssで各要素にfont-familyを明示する。全称セレクタ*では回避できないかも。
  • またはimgをdisplay:blockにする。(vertical-align:bottom; を使わない方法)
  • IE8を互換表示させない。(IE7/6に対応しない場合のみ)

IE8で意図せずに互換表示になるケース

マイクロソフトの互換表示リストに使用ドメインがリストアップされている。
ツール→互換表示設定「マイクロソフトからの更新されたWebサイト一覧を含める」をチェックオフ

デフォルトでは「マイクロソフトからの〜」チェックオンで、強制的にIE7互換表示となっている。
しかし、不特定多数の閲覧側にこれを強いるのは無理。
<meta http-equiv=”X-UA-Compatible” content=”IE=8″>で対応。

DTDが書かれていないか、HTML3.0以下の文書型である。
または、HTML4.01Transitionalのシステム識別子(url)を省略している。

→IE6、IE7のQuirksモード(IE5相当)で表示されてしまうので回避する。

HTML4.01Transitionalで作成の場合、識別子は省略せず
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>とする
なお、HTML4.01Strictは識別子なしでもIE8Standardsモード。
XHTML1.0 Transitional/Strict ではXML宣言ありなし共に、IE8モード(Almost Standards/Standards)で表示。
XHTML1.1 ではXML宣言ありなし共に、IE8Standardsモード。
Nagomi’s memoさん参考になりました。凄く判りやすい!

プレビューなどローカルでHTMLを表示している。
ツール→互換表示設定「互換表示でイントラネット サイトを表示する」をチェックオフ

ここからは推察というか、蛇足。
色々と調べている内にメイリオのディセンダ(baselineより下のスペース)で問題が発生しているケースに出くわしました。
メイリオは特に広いディセンダを持っているようです。
「うるぁぁぁ〜っ」のケースでa要素をブロック化しない場合、
a要素はinline要素なのでディセンダ分の高さを確保していると思われます。line-height:0;を指定しても隙間が消えないのは、メイリオ自体に変更できないディセンダがあるので仕方ありません。
内容にあわせてセルの高さが、ディセンタ分下方向に広がるのは当然な気もします。
imgのbottomよりも、メイリオのbottomの方が遙か下にあり、隙間が生じる。
もしかしてfont-size:0;で回避できたのかもしれませんが、それも試したけどムダだったような気もします。同じ環境が無いのでテストできないのがもどかしいです。
ただ、文字が無いa要素にも文字の高さが反映されるのかどうかが、謎ですが。
そして、a要素をブロック化した時に、なぜ画像の下が切れて表示されないのかも謎のままですが(#・ж・)プン
一応、解決らしきものを見たので、ご報告まで。

「うるぁぁぁ〜」シリーズ過去の記事。興味がございましたらどうぞ。
IE8のバグではなく、IE8の互換表示でバグります。
うるぁぁぁ〜っIE8っ!vol.4 解明編
対策してみた。
うるぁぁぁ〜っIE8っ!vol.3 検証結果なんぞこれ
うるぁぁぁ〜っIE8っ!vol.2 検証してみた
うるぁぁぁ〜っIE8っ!

PageTop