『コメント欄のオートリンクを自前で』改正版

コメント欄のオートリンクを自前で

FC2のコメント欄は バリデートエラー対象がいっぱい 問題(笑) 今回はコメント内にURLと思しきものが記載された際に自動でリンクになるようにするJSの導入方法と、コメント欄とバリデートの関係についても少し触れます。...

vanillaice000.blog.fc2.com

はじめに

上記リンク先の記事をご覧頂くとわかるんですが、サンプルが

<img src="https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/test.jpg" style="width: 700px; height: auto;">

これで、FC2ブログのオートリンク機能を利用するとリンク部位が

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/test.jpg"

と、余分なダブルクォーテーションが付いて、正しいURLとして機能しない(つまりクリックしても開けない)ので、

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/test.jpg

と、正しくなるようにしましょうよ、と。でも思ったんです HTMLやCSSの一部として記載されている場合はそもそもリンクにしなくて良くね？ と (∵`)

例えば、私のブログの場合、コメントでURLと思しき文字列が記載されるのはテンプレートに関するご質問がほとんとで、多くは HTMLあるいはCSSのソースコード です。その主旨というのは、記載されたファイル内容やリンク先を見てほしい、というのではなく、コードが正しいかどうか、です。

多くの場合リンクとして機能させたいのは、コード中のURLではなく、例えば「このサイトを参考にしました」といった感じで参照元を記したり、「この画像を使用したいです」など、ファイルそのものを見てほしいという希望がある場合ですよね。

ということで出発点が間違ってるな、と思いまして (∵`)
わかりやすい具体例は以下のような感じです。

最初に掲載した記事『コメント欄のオートリンクを自前で』内で提供しているJSの結果は②です。けれども質問者のコメントの sample.html などのページ内容をチェックしたいわけではなく、コードの内容を確認できれば良いだけなので、リンクにする必要性は低いです。

質問に対する回答の方は「参照してください」とある通り、クリックしてページを開いて見てもらう、というのが目的ですからリンクになっている方が親切です。②のように開く必要のないアドレスが機能していたり装飾が付けられていると視覚的に邪魔になるなぁ、と感じるようになりまして。

一部不備がありました

以下のようなケースに対する配慮が欠けていました。

--bgimage-fixed: url(https://blog-imgs-139.fc2.com/x/y/z/xyz/sample.jpg);/* 固定背景 */

上記は CSSでURLを扱っており、URL直後にコメントアウトが存在している例 です。既存JSでは以下のようになってしまいます。

正しくは https://blog-imgs-139.fc2.com/x/y/z/xyz/sample.jpg の部位がa要素としてリンク形成されるべきですが、https://blog-imgs-139.fc2.com/x/y/z/xyz/sample.jpg);/ とコメントアウト記号の一部を取り込んでしまっています。このパターンを失念していました。すみません。

一般ブロガーさんのコメント欄でソースコードが記載される可能性というのはそんなに高くはないでしょうから、自分には関係ないなぁ、と思われる場合は改正版への切り替えは不要です。

改正版でできないこと

1. 実存URLか否かの真偽確認
2. HTML, CSSのソースコード内に記載されていると判断できるURLのリンク化
3. URLと通常テキストを 区分せず連続して記されたURL のリンク化
4. http:// スキームURLのリンク化

コメントされる方がどのような形でテキストを入力するか、想定できる状況をできるだけ事前に把握をして処理を分岐させる必要がありますが、完璧に行うのは難しいです。例えばURLの付近に顔文字が記載されており、それがHTMLやCSSで利用される記号や、URLに用いられる記号である、など。それこそ個人個人でいろんな記し方が行われるわけですから、完全なものはできません。

実存URLか否かの真偽確認

①の真偽の確認とは記されたURLが本当に存在するものなのかどうかの判定のことで、これはほぼ不可能です。ディレクトリや拡張子の状態など、形状が正規のURLと思しきものでも実は偽のアドレス、つまりダミーURL、というのはよくあります。例えやサンプルとして記載するURLは実存するかどうかは問わない・問う必要がありませんよね。なので『偽やサンプルのアドレスはリンクにしない』というのが好ましいかもしれませんが、その真偽を確認するには実際にそのリンク先を訪問するしかありません。そこまではできないというか、しないしするべきではない。詐欺サイトのURLでもアクセスしなければいけなくなりますし、パフォーマンス面でもNOです。

ソースコード内URL

②について、これがなかなか難しいんですが、今回は前後の <br> の有無も判定に含めました。「これがベスト」というよりも「こうするしかないかなぁ」という感じです。なのでまた私の想定し得なかったパターンでの不備が生じる可能性はあります。その際にはご連絡頂ければ対処可能かもしれません(あくまでも「かも」です)

明確な区分の無い文字列

重要なのは③なんですが、稀にこういった書き方をされる方が。

https://xxx.yyy.com/で確認しました

これ、わかりますか。URLとテキストを区別せずズラズラと記している という例です。この場合は以下のようになります。

後ろのプレーンテキストまで含めてリンク化されています。これ最初は対処したんですが、辞めました。意地悪なようですが こういう書き方をすること自体が良くない。URLの文字列をただのテキストと同じような感覚で扱う事自体がどうかしてると思ったのでやめました。最低でも

https://xxx.yyy.com/ で確認しました

わかりづらいかもしれませんが、こちらはURLの後ろに半角スペースが入っています。これだと

こうして正しく形成されます。URLというのはその始まりとその終わりの区切り、自身の前後要素との区分が非常に重要です。無理やり表現するなら 句読点が全く無い文章 という感覚に似ているかもしれません。半角スペースはそもそも主に『区分』『区別』を担う記号ですから、適切に利用しましょう。

URLの末尾はスラッシュや拡張子やドメインとは限りません。例えばGoogle fontsのファイルなどは

https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap

こういうURLですよね。後ろが日本語ならかろうじて区別できる可能性はあるでしょうが、アルファベットが続けば区別は非常に困難です。

https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swapirrepressible gangsta

とか、どこまでがURLデスカ？？ってなってしまいます。 ましてFC2ブログでは既にカスタムURL機能も導入されて、URLに日本語を含む場合もあるわけですから、URLの一部なのか、それともただのテキストなのか、明確に区分するよう心がけたいですね。

httpスキーム

④は旧コードと同じ方針で、非SSLアドレスは開かなくて良いやろ、という判断です。

改正版JS

<script>function autoLink(){var a=document.getElementById("commenttarget<%comment_no>");if(!a){return}var text=a.innerHTML;var urlInCss=[];text=text.replace(/url\((https:\/\/[^\)]+)\)/g,function(fullMatch,url){var encodedUrl='ENCODED_URL_'+urlInCss.length;urlInCss.push(url);return 'url('+encodedUrl+')';});text=text.replace(/(https:\/\/[^\s"'<>\)]+(?:\.[a-zA-Z]{2,6}|\/)(?:[^\s"'<>\)]*)?)(?=\s|$|<br>|<\/a>)/g, function(match){let cleanMatch=match.replace(/[);]*$/,'');return '<a href="'+cleanMatch+'" target="_blank" rel="noopener noreferrer">'+cleanMatch+'</a>';});text=text.replace(/url\(ENCODED_URL_(\d+)\)/g,function(fullMatch,index){return 'url('+urlInCss[index]+')';});a.innerHTML=text;}autoLink();</script>

以前の内容よりも複雑化していますので、若干重たくはなっています。といってもパフォーマンスが如実に変わるほどの影響はありません。記載場所は以前と同じです。

自身のコメント欄にソースコードが記載される可能性が高い、という方は改正版への切り替えをおすすめします。それ以外の方は旧コードをそのままご利用ください。