知り合いから教えてもらったのですが、Google AJAX Language APIなるものが公開されていたんですね。
これを使えば、誰でも多言語対応サイトを作れる！ ……かもしれないAPIです。かもしれない、というのは精度的にはやはりまだまだ、というところで。とはいえ他の翻訳サイトも似たようなものですし、Javascriptで誰でも使えるというのがすごいところです！
mycomの記事に分かりやすいサンプルソースがありますので、気になる方は一度ご覧ください。APIのシンプルさを感じてもらえると思います。
Googleからの贈り物 - Google AJAX Language APIでカンタンに翻訳サイトを
上のサンプルソースを参考にして、ブログの<p>タグ内の文字を翻訳するサンプルを作ってみました。うねうね訳していくのは仕様です（笑）。あと、あまり長文は訳されません（恐らくAPIの制限）。
追々、もうちょっとこなれたのを公開します。
サンプルスクリプト：言語を選択して下さい。
 |
 |
|
|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
今回は、ロールオーバーの設定を少し楽にするスクリプトを紹介したいと思います。
ロールオーバーとは、皆さん存知だと思いますが、ボタンをポイントしたことをユーザに分かりやすくするために、ボタンの画像を入れ替えるやつです。
方法は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."（マウスの上においた手）という文章を考えてみると良く分かると思います。それともこれの親戚かしらん？
かなりいまさらな話題ですが、2年ほど前から、FlashなどのActiveXコントールに「このコントロールをアクティブ化して使用するにはクリックしてください。」というポップアップが出るようになったのは、皆さんご存知だと思います。
これはMicrosoft社とEolas Technologies社との特許紛争のためにやむを得ず導入された措置であり、誰からも望まれたものではありません。詳しくは下記リンクの当時の記事をご覧ください。
そして最近になってようやく解決の目処が立ったようです。4月ということなので、もうすぐこの煩わしさからは開放されるでしょう。
しかしながらいつの時代も古いバージョンというのは生き残っているもので、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による再埋め込みを行います。
せっかくですので、コードの中身についても後日解説を入れたいと思います。
