JavaScript へのリンクの正しい書き方

2004年01月17日 (土)

JavaScript へのリンクの正しい書き方

例えば iBlog にコメントシステムを HaloScan を利用して付加するときなど a タグの href 属性に javascript: HaloScan(...); というような HTML コードを書きますよね。大抵の場合これでうまく動作するのですが、実はこういう HTML は推奨されません。と言われても多くの場合困ってしまうと思います。私も「じゃあどうすれば誰にも文句を言われないんだ?」という状態でした。
そこで今回は私のわかる範囲で徹底的にこだわった書き方を工夫してみました。
[2004.09.23 追記あり]

HaloScan の話にまでなると「本当にここのテーマは .Mac Tips か?」という感じになってきますが、言い訳としては「外部のコメントシステムを導入しないと .Mac ではコメントシステムできないから、.Mac の利用にあたってこういうのは必要」ということで勘弁してください。iBlog のカテゴリに入れようとも思いましたが、iBlog で HaloScan を利用するときだけの内容では無く、Web ページ一般に通用することですので、ホームページのカテゴリに入れることにしました。

HaloScan のサイトでは iBlog で利用するためにどういうコードを埋め込んだらよいかが紹介されています。お薦めできないのは Step3 の CODE です。

<_a href="javascript:HaloScan('<$EntryUUID$>');"><script type="text/javascript">postCount('<$EntryUUID$>'); </script></a>

解説は後回しにして結論を書くと

<_a href="http://www.haloscan.com/comments.php?user=YOURUSERNAME&comment=<$EntryUUID$>" target="_blank" onclick="HaloScan('<$EntryUUID$>'); return false;" onkeypress="HaloScan('<$EntryUUID$>'); return false;"><script type="text/javascript">postCount('<$EntryUUID$>');</script></a><noscript><_a href="http://www.haloscan.com/comments.php?user=YOURUSERNAME&comment=<$EntryUUID$>" target="_blank">Comment</a></noscript>

とするのが正解です。(私が知っている範囲でですが)
[追記 2004.09.23]
どうも正解ではないと思い始めています。onkeypress 属性があると tab などでフォーカスを移すときにも反応してしまうからです。HTML Techniques for Web Content Accessibility Guidelines 1.0 の 12.4(日本語訳) には onclick と onkeypress を対で使用するように書かれていますが、実際には onkeypress が無い方がアクセシビリティは高いかもしれません。

オリジナルでは JavaScript をサポートしていないブラウザや OFF にしているブラウザではコメントへのリンクが表示されません。また、そうでなくともリンク先のスキーム(http: とか ftp: とかに相当する部分)が javascript となっていて、このスキームをサポートしていないブラウザや OFF にしているブラウザではリンクを辿れません。

どうして上のようなのになるかというとこういう理由です。手順的に説明します。

javascirpt スキームが効かないときのためにオリジナルで href の値になっていたものを onclick に移動します。
その際、"javascript:" というスキームの記述は取り去ります。
onclick の内容を実行した後に href の URL(これは空ではいけないので後で埋め込みます) へジャンプしないように return false; を加えます。
~~onclick を付けたらマウスがないシステムを利用している人のために同じ内容を onkeypress も付けます。~~
href には代わりにJavaScript なしでアクセスするための URL を書きます。
a タグで囲まれた部分が JavaScript オンリーになっているので JavaScript が有効でないときのための代替の表記を noscript タグを使って付け加えます。
しかし、XHTML では a 要素の内部に noscript タグが使えないので、JavaScript なしの場合は別に書きます。
ページ全体がコメントの表示になると嫌な場合は a タグに target 属性を入れるとよいでしょう。

いかがでしょうか?

ちょっと形を変えて、公式風に書いてみましょう。

書き換え前	書き換え後
`<　a href="javascript:JSコード">`	`<　a href="JSなしのURL" onclick="JSコード; return false;" onkeypress="JSコード; return false;">`
`<script type="text/javascript"> 文字列を出力するJSコード </script>`	`<script type="text/javascript"> 文字列を出力するJSコード </script> <noscript> 代わりの文字列 </noscript>`

こんな感じです。noscript タグを使用するときは仕様上、a 要素の内部には noscript タグを使ってはいけないという制約があることも忘れないでください。どのタグがどこで使えないのかはチェックツールに怒られるまで気付きにくいものです。

外部サービスを利用する場合、これを埋め込んで使いなさいという HTML コードが提供されるものですが、このコードは大抵どこかよくないところがあるものです。特に無料サービスの中には正確にこう書くようにというただし書きまで付いていたりします。しかし、間違いや推奨されないコードだったらそれを直してよいと考えています。

なぜ正確にこう書くようにと但されているかを考えてみればわかると思います。そうすることによってサービスの提供元がわかるようになったりするからです。つまりその提供者の主旨を守った上で更に正しく書けば、提供者も不幸せにならない上に、参照してくれる方も不幸せになりません。仮に提供者が正確に書き写されていないのを見つけたとしても、むしろそこには本来プロである提供者が最初から配慮して提供すべきものが書いてあるわけですから、感謝されるはずです。それに気付かず文句をいう提供者の提供するものの品質はたかが知れているのでとっとと別なサービスに乗り換えましょう。

Posted: 20:49 | Comment | Trackback

Trackback Ping URL(U)

以下、類似エントリです。

>  >

2004年01月17日 (土)

JavaScript へのリンクの正しい書き方

> >