注釈ポップアッププラグインを作ってみますた。2007年01月10日 20時15分02秒

こんな感じで動作します

ここをクリックしてみませう。

こんな感じで、その場で注釈を表示できます。

注釈を閉じるには、この注釈をクリックします。

使い方

  1. annopop.js ファイルをダウンロードし、あなたが管理する Web スペースに upload する。アップロードした annopop.js ファイルの URI をメモしておくこと。
  2. 注釈ポップアッププラグインを使用したいページのどこかに、以下の HTML を追加してください。
    <script type="text/javascript" src="(1.でメモしたURI)"></script>
    
    <head> 要素の中で記述するのがベストですが、基本的にはどこでも構いません。ブログなどであれば、フリースタイルのブログ部品として記述しても ok です (このブログではそうしてます)。なお、本ブログのように、本文テキストが固定幅でレイアウトされているような場合、annopop_view_rect 変数のプロパティを変更することによって、注釈の窓が表示される領域を制限することができます。その場合は、以下のような記述を更に書き加えてあげてください (HTML 4.01 の場合)。
    <script type="text/javascript"><!--
    annopop_view_rect.left = 0;
    annopop_view_rect.right = 560;
    //--></script>
    
    もちろん、XHTML の場合はコメントタグ <!----> の代わりに、<![CDATA[]]> を使うようにしましょう。
  3. 実際に注釈を挿入するには、以下のように記述します。
    <a href="javascript: void(0);" id="annopop-(任意のID名)">注釈を入れたいテキスト</a>
    <span id="(任意のID名)">注釈の内容</span>
    
    1. 注釈を入れたいテキストは、アンカータグ <a> で挟みます。href 属性には必ず javascript: void(0); と記述し、クリックしてもどっかのページに飛んでいかないようにしておきます。そして、id 属性には、任意の ID 名に接頭子 annopop- を付けた名前を記述します。
    2. 注釈の内容を挟むタグは何でも ok です (実際、このページの最初に示した例では <div> タグを使っています)。id 属性には、a. で指定した任意の ID 名 (接頭子 annopop- を取り除いた名前) を記述します。

注意事項

  • http://daiyokujo.harapeko.jp/annopop/annopop.js を直接リンクするのは、なるべく避けてください。まさかとは思いますが、サーバーに負担がかかる可能性がありますので。なお、この URL は予告無く変更または削除する場合があります。
  • <body> 要素の OnLoad 属性に何か書いている場合、動作がおかしくなるかもしれません。window.onload に何か別のハンドラを設定している場合、既に登録済みのハンドラも合わせて実行するようにしてありますが、本プラグインが先に実行された場合にはこの限りではありません。つか、それ以前にその辺の動作は未テストです (^_^;
  • Internet Explorer 6.0 では、position: fixed; が使えない為、表示がイマイチです (これは今後何らかの形で修正するかも)。
  • Internet Explorer 7.0 では (6.0 もかな?)、line-height スタイルに十分な余裕がない場合、アンカーの下線が表示されないかもしれません (アンカーのスタイルは annopop.js ファイル内にて設定しています。ソースの冒頭に出てくる変数設定がそれです。状況やお好みに合わせて適宜カスタマイズしてください)。

メモ

Javascript のクロージャに関して、こちらのサイトの記事が参考になりますた。


Thu Jan 11 10:48:52 JST 2007 - 追記

annopop_view_rect 変数を追加しました。説明も追記しておきますた。


Thu Jan 11 15:22:26 JST 2007 - 追記

ちょくちょく修正加えてます。annopop.js ファイルの冒頭のコメント部分にバージョン番号 (vX.Y.Z みたいなやつ) を入れました。最新のものかどうかご確認願います。現在 v1.0.1 です。


Thu Jan 11 23:49:08 JST 2007 - 追記

v1.0.2 - 重複読み込みされても安全に動作するように修正しました。


Sat Jan 13 05:07:43 JST 2007 - 追記

annopop_view_rect.left に 0 以外の値を指定しても、ウィンドウの左端が基準になってしまうバグを修正しました。


Sat Jan 13 22:40:27 JST 2007 - 追記

アクセシビリティに配慮した v2.0 をリリースしますた。

コメント

_ @DRK ― 2007/01/10 22:25:37

おお、便利。
内容吟味した上で、そのうち使わせてもらうかもよ。

「(c)T.MURACHI」って書いとくわ。

_ T.MURACHI ― 2007/01/10 23:56:24

ソースに Copyright 書いてないや (^_^; 。
あとで書き足しておこう (^_^; 。
つか、コメントもちっと充実させな (^_^;;; 。

_ T.MURACHI ― 2007/01/11 00:03:52

とりあえず Copyright だけ書き加えておきますた>annopop.js 。。。

_ @DRK ― 2007/01/11 13:32:10

順調に動作しとります。
サイドメニューでやろうとするとエラー出たけど。

Stack overflow at line: 58

だって。
popといえばstackかw

_ T.MURACHI ― 2007/01/11 15:18:56

むぅ、なんだろう? stack 積みすぎるような処理 (関数の再起呼び出しとか) はやってないはずなんだが。。。
今日のお昼ごろにもちょこちょこ修正入れてたから、一応最新のに差し替えて試してみてちょ。

_ @DRK ― 2007/01/11 16:38:06

ツールバーのところにスクリプト文を置いてしまうといかんようだ。
blog内のどっかしらにあればよい、という事か?

ただ読み込みのタイムラグがあって、注釈の中身が数秒間表示されたりするが。

_ T.MURACHI ― 2007/01/11 23:26:43

ていうか、annopop.js ファイルを読み込む為の <script> 文は、ページ内で 1 箇所しか書いちゃダメよ。2 箇所以上書いちゃうと、確かにおかしいことになるかもしれない (多分 window.onload の 二重登録で再起呼び出しになっちゃってるんじゃないかと思われ)。

_ T.MURACHI ― 2007/01/11 23:48:38

。。。いや、やっぱり重複読み込みされても安全に動くように修正しよう。ということで、修正しますた。
v1.0.2 に差し替えてみそ。

_ T.MURACHI ― 2007/01/11 23:57:20

あ、ちなみに、ページを読み込み終わってから表示を変更、という動作になっているので、ページの読み込み自体に時間がかかるようだとどうしてもタイムラグが発生しちゃいます。ユーザーサイドにおける記述の楽チンさとのトレードオフなので、こればっかりは目を瞑ってちょ (^_^; 。

_ @DRK ― 2007/01/12 10:31:33

スクリプト指定の文と、注釈の文の前後関係は無視しても大丈夫?
今、スクリプト文の方が読み込みが後になってる予感。

_ T.MURACHI ― 2007/01/12 11:32:14

無問題。つか、少なくともここはそれで動いてる。

動作原理としては、ページをすべて読み込み終わったタイミングで、<script> 文で読み込んでおいた annopop.js にて定義されている関数が実行されて、その関数が注釈の文を探し出して、表示を変更したりハンドラを追加したり、ということをやっている。HTML 上での出現順序は関係しないような作りにしてあるだす。

_ @DRK ― 2007/01/12 12:23:39

おk。今のところ不具合は無いです。

ポップアップメニュー内でもタグが使えるのは便利だなぁ。
fontタグでサイズ間違えるとやけにでっかくなっちまうがw

_ なす ― 2007/01/12 15:56:09

出てきたポップをクリックで元に戻すより、本文(?)をもう一回クリックして元に戻すの方が解りやすいような気がするんだけども・・・。
一瞬、消し方迷った>俺w

てゆーか、annopop→庵野popに脳内変換された駄目変換機能(´・ω・)

_ T.MURACHI ― 2007/01/12 22:02:22

>なす
本当は [×] ボタンを表示するのが一番いいんだけどね。今後の検討課題。
本文クリックは、それこそ他の Javascript モジュールを同時に使っているような場合で機能の衝突がありうるので、ちょっとやりづらい。

てゆか、注釈の文で指定するタグをもうちっとシンプル且つ HTML 的に不自然のないスタイルにできるんじゃないかと検討中。今の実装だと Javascript を off にしてる人とか、そもそも Javascript が使えない環境 (ケータイのビルトインブラウザとか) ではどうしても不自然な表示になってしまいがちなので。
これについては近日中に機能追加して別記事でお知らせする予定。。。

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※投稿には管理者が設定した質問に答える必要があります。

名前:
メールアドレス:
URL:
次の質問に答えてください:
おいらがやっている会社の名前をひらがな4文字で。

コメント:

トラックバック

※トラックバックの受付件数を超えているため、この記事にトラックバックを投稿することができません。