簡単に引用マークアップ(<code>blockquote</code>要素)を生成できる-javascript

引用文を簡単に抜き出せてマークアップとして生成できるjavascriptの紹介です。ブックマーク用のスクリプトなので使い勝手がいいです。また、WEB標準に準じて生成できるのもこのスクリプトのスゴイところです。

最近エントリーの更新を怠っているのは、javascript勉強中でなかなか時間が作れないでいるから（時間を作ろうとしていないのが本音）。何とかしてモノにしたいのだが、これまた思うように理解できていなく毎日振り出し状態。自分にはとても難しすぎる感じがしてきた今日この頃。把握するのにも本に記載されていることやWEBで紹介されていることなどを読んでもイマイチ。

やはり、簡単なスクリプトから理解しながら手打ちでタグを打ち込んで表示処理を経験していかないとダメっぽい。36歳には、なかなか手ごわすぎる。

最近凝っているものは、引用タグの<blockquote></blockquote>もの。

引用を簡単にできるjavascriptを作ろうかと思っていたら、やはり先駆者がいて、その方のスクリプトがスゴく、それを把握するのにも時間がかかっていたのもある。

今回はその方のjavascriptを紹介。

引用マークアップを生成 - 徒書で紹介されている引用マークアップを生成できるブックマーク用javascript（最近コレ系にハマっている）

このスクリプトは、以下の点が使用にあたっての利点。

実際の引用先で使われているマークアップも一緒に生成してくれる。
WEB標準で推奨されている<blockquote></blockquote>の属性や要素を取り入れた使い方でのマークアップが生成できる
引用したい部分のテキストを選択して、後はブックマークをクリックするだけで簡単。

`blockquote`要素

『Web標準の教科書』 | CYBER@GARDENから

テキストをまとまった引用文（block-level quotation）として定義するには、blockquote要素を使用する。blockquote要素はブロックレベル要素であるが、直接インライン要素やテキストを含むことはできず、p要素などの他のブロックレベル要素を含まなければならない。

引用文の近くや引用文のなかで引用元の情報（WEBページや書名など）をテキストとして明示したい場合があるだろう。テキストを引用元・参照元の情報として定義するにはcite要素を利用する。

私は引用文で<blockquote></blockquote>を使う場合に、属性の中にあるcite要素を使って引用元アドレスを、そしてtitle属性を使ってと参照先名をマークアップしています。

例えば、今回の引用文のマークアップはこんな感じです。

簡単に引用マークアップを生成できる-javascript

毎回、引用するときには結構手間であったため何とかjavascriptで簡単にできないかと考えて、以前にカスタマイズしてみた2つのパターン（ダブルクリックで検索結果表示するjavascript、表示しているページのテキストリンクを生成するjavascript）を使ってオリジナルで作ってみたが、改行されているパターンの場合はうまく使えないことに気が付き、いろいろと探しまわって見つけたのが、引用マークアップを生成 - 徒書で紹介されている引用マークアップを生成できるブックマーク用javascript。

ブログなどのエントリーで引用する際には使えるスクリプトだと思います。引用元のマークアップも一緒に抜き出せるのにも驚いています。

引用マークアップを生成 - 徒書: http://www.akatsukinishisu.net/itazuragaki/js/quote_markup.html

Firefoxエクステンションでの電網探題: Copy URL +をカスタマイズしたパターンも考えましたが、引用マークアップを生成の方が後々勝手がいいかと思っています。

カスタマイズ

紹介されているコードでマークアップを生成すると引用元のアンカーリンクが先に（<blockquote>要素前）生成されます。もし、わたくしと同じように<blockquote></blockquote>の中の属性cite要素を使って引用元アドレスを、そしてtitle属性を使ってと参照先名をマークアップのみで使う場合には、以下の部分のコードを削除するといいです。


'<p><a href=\x22'+url+'\x22 title=\x22'+t+'\x22><cite>'+t+'</cite></a>\u3088\u308A\u5F15\u7528:</p>\n\n'+
上記コードをエディタを使って"検索・置換（指定なし）"で削除すればいい。
引用元のアンカーリンクを表示したい方には、そのままお使いになる方がいいと思います。
blockquote要素の属性を抜き出して引用文後にリンク表示するjavascript
わたくしがこの次に考えているのが、<blockquote></blockquote>属性でのcite要素とtitle属性をjavascriptを使って抜き出し、引用文の後にリンク表示するとい事。
今回のこの便利なブックマークスクリプトとセットでのパターンで理解してから紹介しようと思っていましたが、結構長い時間がかかりそうなので前倒しで紹介することにしました。
blockquote要素の属性を抜き出して引用文後にリンク表示するjavascriptは、次回紹介することにします。
キーコードを検知してレイヤー表示を消すスクリプトを教えてください。
このスクリプトもそうですが、新規レイヤー表示をキー操作（ショートカット）でウインドウを閉じるようにするスクリプトを追加しようとこれまた考えていてたりもしていました。実際のところ今の私では難しくて手をこまねいています。
どなたか参考になるスクリプトがあればご紹介ください。コメント・トラックバックお待ちしております。



                                
                                    

    
                                        カテゴリ:
                                        
                                            javascript
                                        
    

                                    
                                    	
                                    

                                        タグ:
                                        
                                            blockquote,
 javascript,
 Web標準の教科書,
 マークアップ
                                        

                                    	                                    	
                                    
					

                                    
                                    
					Loading...
                                    
                                     
                                         関連記事
                                         
                                         
                                    
                                  

                                
                                	
                                		
                                		  Comments for this entry on FriendFeed.