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

JS内容及び導入手順については弊テンプレートに限定した内容です。

他製作者さんのテンプレートのhtml内容を把握できない(しない)以上、「FC2全般」とするには無理がありますのでご容赦ください。弊テンプレート以外での導入を禁ずる、という意味ではありません。念の為。

個人設定「コメント欄のオートリンク」の問題点

何故自前のJSで行う必要があるのか。それは個人設定のオートリンクの仕様に多少問題があるためです。ただこれは特殊というか、趣味や日記といったジャンルのブロガーさんにはまず起こらないと思います。webの技術やwebページ作成、あるいはアプリケーション開発など に関連したブログの場合が主な対象となります。

例えば上記のようなコメントを受信あるいは送信したとします。緑色の部位が自動でリンクになっています。この部位を拡大したものが以下のスクリーンショットです。

URL末尾をよく見ると test.jpg の直後にある " の記号も緑になっていることがわかるかと思います。ダブルクォーテーションは「URLに含めることができない」記号ですが、FC2ブログのオートリンクのプログラムがリンク部位として巻き込んでしまいます。従って バリデートエラー (不正確なhtml) です。

正しいリンクアドレスは

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

なんだけども、

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

こう認識してしまうんですね。ここは修正して欲しいなぁ、と思うんですが、コメント欄でソースコードが記されるというのは一般ブロガーさんではまず無いのでリクエストしてもどうだろう。期待薄かも。単純にアドレスだけが記された場合にこういうことは起こりません。htmlやCSS(はたぶんまず無いけど)やJSのコード内に含まれていた場合に起こります。 そもそもコード内のリンクアドレスを機能させる必要が無いっちゃ無いんですが、それはときと場合によるので一概に言えませんし、必要か不要かを判断すること自体非常に困難というか、無理。

で、オートリンクやっぱり欲しいですよね (´・ω・｀)
コメント欄はhtmlの記載はできてもhtmlとして実態変換されることはありませんので、「リンク文字列をクリックしたらそのページに飛ぶ」を実現したい場合はサーバーサイドで変換してもらう(これが個人設定のオートリンクです)か、今回紹介するようなJSでももって強制的にa要素として後付マークアップするかです。

というわけで FC2ブログ個人設定の「オートリンク」に頼らず、自前のJSでなんとかする ってスンポー (o'ω')ﾉ

導入手順

コメント欄へのソースコード掲載はまず無い、と判断できる場合は導入しない方がベター。

コメント1件につき1度のJS処理が入りますので無ければ無いに越したことはありません。また当然ですがリンクとして機能させる必要性を感じない、という方も導入の必要は無し。

個人設定のオートリンクをopt out

「コメント設定」 > オートリンク設定

テンプレートhtml編集

まず Ctrl + F キー検索で <%comment_body> を探します。1箇所あるはずです。

<%comment_body> は概ね以下のような形でhtmlタグで挟まれています。

<p class="comment-body"><%comment_body></p>

pタグではなくdivタグの場合や、class名がcomment-bodyではない場合もあります。また、クラス属性の値がダブルクォーテーションで囲まれていない場合もありますが、今回の作業では無視してください。ともかく <%comment_body> を挟んでいるその 開始タグの方にid属性を追加します。以下のようになります。

<p class="comment-body" id="commenttarget<%comment_no>"><%comment_body></p>

この際に元々あるタグ内に既にid属性が付いている場合はこの方法を使えませんので注意。弊テンプレートの場合は大丈夫です。 続いて今度は 終了タグの直後にJSを追加 します。内容が複雑なのでコピーしてください。

<script>function autoLink(){var a=document.getElementById("commenttarget<%comment_no>");if(!a){return}a.innerHTML=a.innerHTML.replace(/(https:\/\/[!#-9A-~\.?=;:]+)/g,'<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>')}autoLink();</script>

作業については以上です。htmlが正しく編集でき、JSが上手く実行されると以下のようになります。

注意点

リンクは httpsスキームのみ を対象としています。httpの場合は文字列としての表示です。httpのアドレスをリンク形成したからといってSSLの混在コンテンツになるだとかそういったことは無いんですが、今回はJS内容をシンプルにする意味も含め敢えて除外しています。

また、対応できないケースも存在します。例えば

https://blog-imgs-137.fc2.com/v/a/n/省略

こんな記載が行われた場合。緑部位がリンクと判断され、「省略」の部位は文字列表記です。リンク範囲を押すと 404 not found の結果になります。

また、リンクは 別タブで開く 指定になっています。

必要があればカスタマイズして頂いて構いませんがその際は自力で ╭( ･ㅂ･)و

まとめ

コメント欄は管理者権限だけでなく第三者権限も扱うことになります。どんな文章を書くか、というのはコメンテーター次第なのでなかなか制限できるものではありません。「リンクを形成しない」というのが一番確実ではあるんですが、ユーザビリティを考えるとクリックで開けた方が便利なわけで。

コメント欄がバリデートの邪魔になることが多々あるんですね。コメント欄で障害になるものは

• 絵文字 --- alt属性なしエラー
• 文字色変更 --- 廃止要素(font要素)利用エラー

これらを利用されるとエラーが確定します。文字色変更が5回行われるとエラーが5つ。10回使われるとエラーは10になります。単純なエラーですから無視すれば良いんですが、他部位の検証時にすっげー邪魔になる(笑)

なので割り切れる方は コメント装飾ツールの削除 をおすすめします。とはいえコメンテーターが文字色変更用の変数を知っていれば使われる可能性がありますので、100%防ぐことはできません。

FC2ブログのコメント装飾ツールは思い切って削除して良いと思う

FC2ブログではコメント入力時に使える装飾ツールが準備されていますが、方針次第で思い切って削除してしまえば良い、のススメ。簡単に言えば 第三者による入力内容の制限 です。...

vanillaice000.blog.fc2.com

このあたりの事情や対処、そして見解についてはまたそのうち記事にしようかな、と思っています。