ただいま極秘プロジェクト中につき、ブログ更新が滞っております。
そういえばデザイン変更は、って？ いやサボってるわけじゃないんですよ？
MovableType4.2の正式版が出たら、フォルダ構成とか一緒に変えようかと。
|ω･｀) ﾁﾗ 実はWordPress変更案もちょっと復活してたりして。
あと空いてる分の過去記事がこっそり増えていても気にしないでください（笑）。
タイトルネタ元を知らない方はこちら。
開発の最近のブログ記事
ウェブマスター向けツール「Yahoo!検索 サイトエクスプローラー」ベータ版が公開されました。
サイトのインデックス状況の確認や、サイトマップ（RSS,Atom,etc）の送信、検索結果からの削除などが行えます。GoogleウェブマスターツールのYahoo!版という感じですね。
さっそくこのサイトを登録したところ、Googleのと違って認証に多少時間がかかるそうです（24時間以内）。認証後の画面を下においておきます。インデックス数が2とまだ悲しい状況です（笑）。
今回は、ロールオーバーの設定を少し楽にするスクリプトを紹介したいと思います。
ロールオーバーとは、皆さん存知だと思いますが、ボタンをポイントしたことをユーザに分かりやすくするために、ボタンの画像を入れ替えるやつです。
方法は2通りあります。Javascriptで<img>タグにonmouseover/onmouseoutイベントを書く方法か、またはCSSでa:hoverを設定して実装する方法です。それぞれの特徴を表にしてみました。
| Javascript | CSS | |
|---|---|---|
| メリット |
|
|
| デメリット |
|
|
| マークアップ |
|
|
| SEO |
|
|
どちらも一長一短あり、Javascript版ではJavascriptを実行OFFの設定にしていると動作せず、CSS版では、CSS動作ONかつ画像表示OFFのときに何も表示されなくなり、displayやvisilityプロパティで非表示にすると音声ブラウザで読み上げられなくなるそうです。またプリントアウトしようと思ったときに、デフォルトが背景画像を印刷しない設定になってるブラウザも多く、ボタンのところが抜け落ちてしまう欠点があります。さらに、どちらにしても一個一個設定しないといけない面倒さがありますよね。
というわけで一番簡単で妥当な解決策として、ロールオーバーイベントを追加するスクリプトを作ってみました。
#あくまで「妥当」です。正統でも正解でもありません。
まず下のファイルをダウンロードしてください。
次に通常のボタン画像とロールオーバー画像を用意し、"button.gif"、"button_ro.gif"のように元ファイルに_roを付加した名前をつけます。そして、(X)HTMLには通常のボタン画像を普通に<img>タグで設置してください。そして(X)HTMLの<head> ～ </head>タグ内に
<script type="text/javascript" src="addevent_rollover.js" charset="UTF-8"></script>
という一行を追加してください。フォルダ分けされた複数ページで使う場合は、jsファイルの置き場所にあわせてsrc="addevent_rollover.js"の部分を修正してくださいね。
それだけで<a>タグに囲まれた<img>タグをリストアップし、ロールオーバー画像が存在するもののみ、onmouseover/onmouseoutイベントを追加します。ついでにPreload（データの先読み）もしてくれます。
もし画像名を自由に設定したい場合は、
<script type="text/javascript" src="addevent_rollover.js" charset="UTF-8"></script> <script type="text/javascript"> <!-- RO_PREFIX = ""; RO_SUFFIX = "_RO"; // --> </script>
というように、先ほどの(X)HTMLの<head> ～ </head>タグ内の記述に、RO_PREFIXとRO_SUFFIXの設定を追加してください。RO_PREFIXが元ファイル名の先頭に付く名前、RO_SUFFIXが元ファイル名の後ろに付く名前です。ご覧いただいて分かるように、デフォルトではRO_PREFIXが「」（なし）、RO_SUFFIXが「_RO」に設定されています。例えば、RO_PREFIXを「over_」、RO_SUFFIXを「」（なし）に設定すると、元ボタン名が「button.gif」の場合、「over_button.gif」を探しにいきます。
注意点として、RO_PREFIX/RO_SUFFIXの設定はスクリプトファイルを置いた場所より下に記述してください。直後でなくともかまいませんが、上においた場合はデフォルト設定が優先されます。
付け加えて、このスクリプトも欠点がないわけではなく、<a>タグ内の<img>タグで指定されたファイルをすべてチェックしに行きますので、ロールオーバー画像のないボタンが多い場合、サーバー側のエラーログに404 File not found.エラーが沢山残ります。
それ自体が即問題となるわけではありませんが、不要なエラーを残すのもあまりスマートではないかもしれません。後ほど、それに対する対策を入れたスクリプトも作ってみようかと思います。ただその場合、<img>タグにロールオーバーをつけるつけないの設定が必要になりますので、一個一個設定する手間は必要になります。
そういえば余談ですが、たまーに「オンマウス」って略す方を見かけます。でも、なんだか変ですよぅ。on mouseで切っちゃうと、「マウスの上」ということになり、それはなに？ということになりますです。例えば"your hand on a mouse."（マウスの上においた手）という文章を考えてみると良く分かると思います。それともこれの親戚かしらん？
さてブログ立ち上げにあたって、どのシステムを使おうか悩んだわけです。
とりあえず検索したり、友人から聞いたりして、以下のものが候補に挙がりました（他にも良さげなものはたくさんあると思いますが）。
結論から言うと、現在このブログはMovableType4.1で動いています。
理由としては、ブログ設置に慣れていないので、ドキュメントや参考事例が豊富なほうが好ましいこと（できれば日本語で）、シェアの多さからレンタルサーバー側のサポートも期待しやすいこと、が挙げられます。
世界的な主流はWordPressになりつつあるらしいですね。逆に日本ではMovableTypeのシェア率は衰えていないようです。なんだかGoogleとYahoo!の利用率に似ている気がします。
昔はヒネクレものだったので、メジャーなものはメジャーであることを理由に避けていましたが、今はとりあえず主流のものを触ってみて、不満があれば他を試すという姿勢に変わりつつあります。
インストールはマニュアル通りすんなり行きました。しかしながら実際触っていくと、いくつか不明なところが……
1). 一部の文字が化ける
具体的に言うと、
- ～
- 波形
- …
- 3点リーダ
- －
- 全角マイナス
- ＼
- 全角バックスラッシュ
などが？に化けました。これではAAが貼れなくてがっかり、なので色々いじること数時間……
まず入力時のフォーマットを「なし」に。そもそも勝手に不要なタグをつけられるのは困ります。慣れてくれば、見た目もコードだけで大体想像できますし。ただこれでは当然解決せず。
次に「設定」の項目を眺めてみて、「ブログの設定」の「ブログ記事」を見ると、「Word特有の文字を置き換える」というそれっぽいのを発見。これだ、と思ったんですが、3つのどれを選んでもあまり変わらず。エンティティを選んだときは3点リーダだけエンティティ（&#xxxx;）に変換されて表示されるようにはなりましたが……
仕方ないのでWebで検索してみると、MySQLの設定の問題っぽいという情報をいくつか見つけました。考えてみれば、まずDBの文字コードを確認するのは当たり前ですね。化けたのが一部の文字だけだったのと、普段はPosgreSQLを使ってるもので（言い訳）。
最終的に、phpMyAdminからMySQLの設定を確認して、「MySQLの接続照合順序」を「ujis_japanese_ci」から「utf8_general_ci」に変更して解決しました。
#接続照合順序とかujisとかナゾの言葉ですね、これがMySQLライクなのかしらん？
2). エラーログに「Premature end of script headers: mt.cgi, referer:～」というエラーが時々出ている。
例によってWebで検索して調べてみると、「原因不明なときによくでるエラーです」というヤな記述が。とりあえずマニュアルと違うのはsuEXECなところかなぁ、とパーミッションを見直しつつ、configって何かあるかなとWeb上のマニュアルを見てみるとそれっぽいのが。インストールが画面上でできてしまったので見てませんでした。
そんなわけで、mt-config.cgiに以下の設定を追加
# suEXEC環境下なので
DBUmask 0022
HTMLUmask 0022
UploadUmask 0022
DirUmask 0022
# 初期値UTF-8だけどおまじない
PublishCharset UTF-8
# 5秒間隔の自動保存は鬱陶しいので10分感覚に
AutoSaveFrequency 600
# これも初期値1だけどおまじない。リビルド時に不要ファイル消し
DeleteFilesAtRebuild 1
DBUmask 0022
HTMLUmask 0022
UploadUmask 0022
DirUmask 0022
# 初期値UTF-8だけどおまじない
PublishCharset UTF-8
# 5秒間隔の自動保存は鬱陶しいので10分感覚に
AutoSaveFrequency 600
# これも初期値1だけどおまじない。リビルド時に不要ファイル消し
DeleteFilesAtRebuild 1
これで一応消えたっぽい？ しばらく様子見中です。
というように解決したものはいいのですが、実はまだ解決してないのが2点あります。
3). 「設定」＞「ブログの設定」＞「コメント」を選ぶと500エラーが出る
4). GIFファイルをファイルアップロードからアップロードすると500エラーがでる
3). はさっぱりです。インストール直後からこの項目を見れたことがありません。他の項目は普通に見れるのに。というわけでコメントの設定ができません（苦笑）。デフォルトのままで問題なければよいのですが……
4). はWebで検索したら同じような症状の人がいたのですが、その時の問題はPerlのバージョンが5.8.0だったことらしく、こちらは5.8.5で違う原因のようです。レンタルサーバーなのでバージョン上げろと言われても困りますし。
仕方がないので、動かしながら解決策を探りたいと思います。
あとは、検索エンジン用に、各記事のファイル名は記事タイトルをURLエンコードしたものにしたいのですが、今のところそういう設定は見当たらず。プラグインを探してみます。
というわけでまだデザイン等にまで手が回っていません。そのうち、がらっとデザインは変えると思います。
エラーが出てたら、またなんかトラブってるんだな、と思ってください（泣）。
#どうにもならなくなったら他のシステムに変えるかも（ぼそ
かなりいまさらな話題ですが、2年ほど前から、FlashなどのActiveXコントールに「このコントロールをアクティブ化して使用するにはクリックしてください。」というポップアップが出るようになったのは、皆さんご存知だと思います。
これはMicrosoft社とEolas Technologies社との特許紛争のためにやむを得ず導入された措置であり、誰からも望まれたものではありません。詳しくは下記リンクの当時の記事をご覧ください。
参考URL：
ITmedia News：特許訴訟対策のIEアップデートがリリースマイクロソフト，「Active Xコントロール実行時に確認画面が出る」パッチをリリース：ITpro
そして最近になってようやく解決の目処が立ったようです。4月ということなので、もうすぐこの煩わしさからは開放されるでしょう。
参考URL：
MS、Eolasからライセンス取得でIEの「余分な1クリック」解消へ - ITmedia News追記：4月9日付けでWIndowsUpdateに入りました。
しかしながらいつの時代も古いバージョンというのは生き残っているもので、Web制作者としてはすぐ最新のみ対応とするわけにはいかないのがつらいところですね。
もちろん以前の対策法はあちこちで公開されており、その対策法を適用したままでも最新のInternetExplorerで問題はないでしょう。 しかしよく知られているJavascriptを使った書き出し法は、swfファイルごとに記述が必要な上に、Javascriptを有効していないと動作しないという問題があります（Javascriptが無効で、ActiveXが有効というクライアントがどれくらいあるかはさておき）。
そこで移行期間用に、少しの作業で対策でき、後で外すのも簡単な方法をご紹介します。まず下のファイルをダウンロードしてください。
flashloader.jsそしてダウンロードしたファイルを、Flashを配置しているHTMLと同じ場所に置き、<head> ～ </head>タグ内に、
<script type="text/javascript" src="flashloder.js" charset="UTF-8"></script>という一行を加えてください。それだけで、そのページ内に含まれるすべての<object>タグを検出し、Javascriptによる再埋め込みを行います。
せっかくですので、コードの中身についても後日解説を入れたいと思います。
