私が気に入って使っているjQueryのプラグインに、yuga.jsというスクリプトがある。
MITライセンスということで、趣味サイトやこのブログはもちろん、仕事で新規サイトを制作する際も必ずと言っていいほど実装するプラグインだ。
このブログでも、自動外部リンクやページ内スクロール、画像への直リンクを自動的にthickboxで開くといった機能を利用しているが、通常の企業サイトなどではロールオーバーの簡便化や現在のページのナビゲーションをハイライト表示させるなど、かなり有効に使わせていただいている。
細かなかゆい所に手が届くような改良を重ね、現在のバージョンは0.7.1。
作者のサイトで、ダウンロードはもちろんyuga.jsの使い方も詳しく解説されている。
target=”_blank”は是か非か
yuga.jsには様々な機能が実装されているが、外部リンクにいちいち target=”_blank” を記載しなくても別ウインドウで開くというものがある。
target=”_blank”がユーザビリティ的に是か非かの論争は非常に多くなされていて、恐らく「ユーザーが判断するので、target=”_blank”は記載しない」という論調が優勢かと思うが、私はyuga.jsのこの機能を有効化して使っている。
つまり、ソース上にはtarget=”_blank”を記載していないが、外部リンクはjsによって大半のユーザーに別ウィンドウで開いてもらっている。
確かに本当のPC初心者の方というのは、「別ウィンドウ」などという概念自体が無いので「戻るボタンで元に戻れない。どうしたんだろう？」と混乱させることになる。
これはここ半年ほど、帰省の度に親にPCやネットの使い方を教えていて本当に痛感した。
私たち制作者はWEBに慣れすぎてしまっている。ポインタを目的の場所に持っていくことにつまづく人だって多くいるだろうし、ボタンの形をしていればクリックできると認識してくれるだろうというのは私たちの勝手な思い込みに過ぎない。
親にPCやネットの使い方を教えてみるというプチ親孝行は、ユーザビリティを考える上でも大変お勧めです。
が、しかし。話は戻るが、一方の「同じウィンドウで外部リンクを開いてしまうとユーザーが離脱してしまう」という意見も非常にわかる。
本来なら「離脱してしまう（戻って来ない）ならそれまで」という意見が正しいと思うのだが・・・、結局私は思いきれずに別ウィンドウを開かせてしまっている。
target=”_blank”部分のカスタマイズ
yuga.jsの別ウィンドウを開かせる部分のプログラムは、http://から始まる自サイト内以外のリンクを_blankで開くのですが、https://の外部リンクには対応していません。
そこで、yuga.jsバージョン0.7.1のソース148行目あたりの
var e = $(‘a[href^="http://"]‘) ～ を
var e = $(‘a[href^="http://"], a[href^="https://"]‘) ～ に変更すると、https://の外部リンクも別ウィンドウで開くことができます。
ただし、共有SSLなど違うドメインのhhttpsを利用している場合は、新しいウィンドウが開いてしまうと思うので要注意。
また、新しいバージョンでは、http://で始まる自サイト内へのリンクは同じウィンドウで開くので、http://で始まる絶対パスが多く使用されるWordPressなどのCMSでyuga.jsを利用しても問題ありません。
いろいろな可能性や環境を知っておくことが必要
これが使いたくてyuga.jsを使ってると言えるくらい便利なのが、ページ内のスムーズスクロール（スムー「ス」？）。
スクロール機能単体のスクリプトもあるのだが、yuga.jsではページ内リンクをクリックした後、URLに#で始まるアンカー（http://web35.net/#hoge といったアドレス）が残らないのが便利だったのだ。
ただ、バージョン0.7.0からページ内スクロールを利用した後、アドレスに#hogeが残る仕様になってしまった。
当初よく調べもせず不具合か何かかと思って、古いバージョンのyuga.jsを使い続けていたのだが、0.6.3の公開時にユーザーの方から「#hogeを残した方がいいのでは？」とのコメントがあり、それによって仕様が変更されたことをつい先日知った。
0.6.3のページのコメントを読んで、目からうろこである。#hogeが無いとフォーカスが移動しないということらしい。なるほど。恥ずかしながら全く気付きもしなかった。
ただし、私は逆の立場から考える。#hogeが残らないと不便な人もいれば、#hogeが残ることが不便な場合もあると思うのだ。
詳しくないので、言葉の少々の間違いはご容赦をいただきたいが、例えばページ内アンカーを利用したフォトギャラリーなどでは、ページ遷移はなくてもクリックした数だけブラウザの履歴となり、戻るボタンで前のページの戻ろうとすると、#sage→ #mage→ #hoge→ #なしのページ→ 前のページ と、閲覧した写真の分だけさかのぼって行かなくてはならない。
また、訪問者の方に「いいページだからリンクを張ろう」と思っていただけても、ページ内スクロールを利用した後の#hogeの付いたアドレスをコピーしてリンクされてはSEOの効果も期待できない。これは、だいぶ前だが私が実際に経験したことがある話。
#hogeありなしのどちらが正解かなんて言うつもりはないので誤解なく。ただ、別の意見があるということを知っておくということは、非常に重要なことだと思うのです。
ページ内リンク部分のカスタマイズ
私はページ内リンク後URLに#hogeが付かない方がいいので、0.7.1の165行目から252行目までのページ内リンクのプログラムを、#hogeを付けない仕様だった0.6.3のソース139行目から207行目に置き換えて使用している。
何はともあれ、yuga.jsは私にとって非常に有効なスクリプトだ。無償で提供してくださっている作者の方には本当に敬意を表します。
まだまだ、:first-child・:last-childの疑似クラスなどは有効に使えていないので、jsオフ環境のことなども考慮しながら使いこなしてゆきたい。
さてさて、ユーザビリティと一口に言っても、爆発的なインターネット人口の増加により訪れる人のスキルも環境も本当に千差万別。
末端の零細WEB制作者には、ユーザビリティの「答え」なんて偉そうなものは提示できないが、何かのきっかけに、せめて思い悩み、考え、知ろうとすることを止めてはいけないと思ってエントリーとしてみた次第です。