WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

あまり使いどころのないSelection APIについての雑感

   

ブログサービス提供大手のはてなで、つい最近ブログ記事を書くときに別のはてなブログの記事を引用するための便利な新機能が加わりました。

他のブログの文章を簡単に「引用」できる機能を追加しました(はてな開発ブログ)

スクリプトのソースをのぞいてみたところ、当然というかファイル圧縮により難読化されていたので参考にすることができませんでしたが、実際の機能を試してみたところ、マウスドラッグでテキスト選択したタイミングで引用機能が呼び出される仕組みであったことから、何となくSelection APIあたりを使っているのだなとは思いました。

さて、マウスでWebページのテキストをドラッグして選択、コピペする作業はPCのネットユーザーなら誰でもやったことがあると思いますが、スクリプティングサイドでフォーカスがあたることはほとんどなかったと思います。せいぜい、選択してハイライトされたテキスト部分を変数に入れたり、またはハイライトの色をCSSで変更するくらいではないでしょうか。

W3Cで策定されたSelection APIは、マウスで選択したテキストを抜き出すためだけに利用する者からすると、いらない機能がありすぎてかなりマニアックな印象です。たとえば、選択テキストを抜き出すならばwindow.getSelection().toString()するだけで十分です。Selection APIには他に選択範囲をスクリプティングで操作するメソッドがありますが、使い道が限られ実用する場面が想像しにくいです。

一方で以前、SelectedTextStyle.jsというjQueryのプラグインを作ったことがあります。これはマウスで選択した範囲にCSSでスタイルを適用するというもので、こちらはSelection APIのより踏み込んだ機能を使っています。この選択テキストにCSSを適用するというのが、簡単そうにみえて以外に難しいものでして、少し説明してみましょう。次のようなタグで構成されたテキストがあるとします。

<p>ああああああああああ<strong>いいいいいい</strong>うううううううううう</p>

ここで、文中の強調されたフレーズを囲うようにテキスト選択するとします。次のように赤い文字の部分が選択された部分とします。

<p>ああああああああああ<strong>いいいいいい</strong>うううううううううう</p>

Selection APIにはRange.surroundContents(element)というメソッドがあり、引数に指定した要素の中に選択された範囲のテキスト(要素)を流し込む便利なのがあります。それを使うと次のようになるでしょう。

<p>あああああ<span>あああああ<strong>いいいいいい</strong>ううううう</span>ううううう</p>

しかし、選択範囲が次のようでしたらどうでしょう。

<p>ああああああああああ<strong>いいいいいい</strong>うううううううううう</p>

これを仮にSPAN要素で囲むとしたら、STRONG要素の終了タグをまたいでしまうので、文法エラーとなりRange.surroundContents()はエラーを起こします。

このあたりの説明はuhyohyo.net – JavaScript初級者から中級者になろう八章第三回 Rangeの活用とSelectionを参考にしました。それではどのようにすればエラーを起こさずに、選択部分にCSSを適用できるかですが、ここからはスクリプティングによる制御です。選択テキストのうち「テキストノード」に注目して、要素内のテキストノードだけをSPAN要素などで逐次ラップしていきます。上の例は次のようになるでしょう。

<p>あああああ<span>あああああ</span><strong><span>いいいいいい</span></strong><span>ううううう</span>ううううう</p>

後はSPAN要素だけにCSSを適用して、選択テキスト全体を同じスタイルに変えます。こちらのデモページで実際にjQuery SelectedTextStyle.jsを使った「テキスト選択⇒CSS適用」を試すことができます。このプラグインはもともと、ワードプレスに例のはてなブログのような引用機能を付けるプラグインが作れないか考えたときに作ったスクリプトですが、結局PHPの勉強の方が追いつかずいつの間にか忘れ去ってしまったものです。

この構想していたプラグインを具体的に説明すると、あるブログの記事をユーザーが見たとき、記事のある部分がハイライトされていて、その部分について誰かがコメントしたか分かるという機能を作ろうとしていました。Selection APIが使われるのは、コメントする側が記事の引用したい箇所を指定するときです。マウスドラッグで記事を囲うとその部分についてコメントできるようにします。閲覧者が記事のどの部分が引用されたか分かる仕組みということで、トラックバックに近い機能ですね。トラックバックが記事全体に対する引用の通知であるのに対し、こちらは記事の引用部分がはっきりしているという違いがあります。

それはさておき、Selection APIはやはり使い道の難しい機能ですね。History APIにしてもこれらは実用性より一歩先んじて出てきてしまった未来機能のような気がして、本来の機能を発揮するのはまだまだこれからといったところでしょうか。

 - JavaScript/Ajax , ,