モノ太郎さんのページ

ここでは、以下に焦点を当てた考察を行っています。(2010-06-20)

1. お絵カキコの自動リンク機能における不具合および問題点
2.  とお絵カキコの組合せの問題点

お絵カキコの自動リンク

2010年1月中頃から、記事内お絵カキコの自動リンク機能が追加されました。

→記事内のお絵カキコに、自動で元レスへのリンクが付与されるようになりました。 - ニコニコ大百科開発日記

メリットは以下

• 編集者がお絵カキコの元リンクを探す手間が省ける。リンクミスも起こらない。
• リンク元の記事名変更があった場合にもリンクが迷子にならずにすむ。
  ただし<a href="/oekaki_id/***"></a>を使えばこの限りではない
• HTMLソースのサイズが小さくなる

また、「初音ミクのお絵カキコ」などのお絵カキコ一覧記事の作成が楽になります。

不具合と問題点

編集者にとってリンク先を探す手間が省けるために便利な自動リンク機能ですが、万能と言うわけではなく厄介な問題も抱えています。

記事に貼ったお絵カキコには必ずリンクが付与される

例えば「どせいさん」や「シンハラ文字」の記事では、お絵カキコ(文字)の自動リンクが逆に邪魔になってしまう場合も…。
CSSのbackground-imageプロパティで指定すればお絵カキコの自動リンクを回避できるが、 CSSの知識が必要なため万人向けではない。

imgタグによる貼り付け	background-image

お絵カキコを並べると間の半角空白が削られる不具合

お絵カキコを並べた際にスキマが無くなって見づらくなる可能性がある。 レイアウトが崩れる。

今のところ大百科モバイルではお絵カキコの自動リンクが実装されていない

だそうです。

&nbsp;とは

 

&nbsp;は、HTMLに用いられる文字参照のひとつ。半角空白と同じ見た目をしている。 このスペースを挟んだ文章の前後では自動的な改行(折り返し)が無効化される。 UnicodeはU+00A0 (半角空白はU+0020)

こちらも参照→ノーブレークスペース - Wikipedia

半角空白	 
aa aa aa aa aa aa aa aa aa aa aa	aa aa aa aa aa aa aa aa aa aa aa

問題点

&nbsp;は半角空白と違って

1. 環境によってはHTMLソースの見た目が半角空白と区別がつかない
2. ブラウザからのコピペの際に半角空白に変換されてしまう
3. お絵カキコ(画像)の間に&nbsp;をはさんだHTMLを表示する場合
   Operaでは折り返しが無効化されてしまう

上記のような理由から、不特定多数が編集に参加できるニコニコ大百科では他の 編集者が意図せず&nbsp;を半角空白に変換してしまう可能性があるため利用する際には 注意が必要となる。※3については後述

お絵カキコの表示用サンプル

	半角空白	 
自動リンク	A	B
手動リンク	C	D

※HTMLソースの見た目を考慮して半角空白は改行で代用しています。

自動リンク＋半角空白

HTMLソース

<p style="width: 400px; border: 1px solid #AAAAAA; margin: 10px; background-color: #98514B;">
<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />
<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />
<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />
<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />
<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />
</p>

表示結果

お絵カキコの間の空白が削られてしまっている。

自動リンク＋&nbsp;

HTMLソース

<p style="width: 400px; border: 1px solid #AAAAAA; margin: 10px; background-color: #98514B;">
<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />&nbsp;<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />&nbsp;<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />&nbsp;<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />&nbsp;<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />
</p>

表示結果

Operaブラウザで見てみると…

    

手動リンク＋半角空白

HTMLソース

<p style="width: 400px; border: 1px solid #AAAAAA; margin: 10px; background-color: #98514B;">
<a href="/b/a/%E3%83%8B%E3%83%AF%E3%83%B3%E3%82%B4/1-#4"><img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" /></a>
<a href="/b/a/%E3%83%8B%E3%83%AF%E3%83%B3%E3%82%B4/1-#4"><img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" /></a>
<a href="/b/a/%E3%83%8B%E3%83%AF%E3%83%B3%E3%82%B4/1-#4"><img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" /></a>
<a href="/b/a/%E3%83%8B%E3%83%AF%E3%83%B3%E3%82%B4/1-#4"><img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" /></a>
<a href="/b/a/%E3%83%8B%E3%83%AF%E3%83%B3%E3%82%B4/1-#4"><img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" /></a>
</p>

表示結果

リンクが機能して、かつお絵カキコの間の空白が残っている。

手動リンク＋&nbsp;

HTMLソース

<p style="width: 400px; border: 1px solid #AAAAAA; margin: 10px; background-color: #98514B;">
<a href="/b/a/%E3%83%8B%E3%83%AF%E3%83%B3%E3%82%B4/1-#4"><img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" /></a>&nbsp;<a href="/b/a/%E3%83%8B%E3%83%AF%E3%83%B3%E3%82%B4/1-#4"><img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" /></a>&nbsp;<a href="/b/a/%E3%83%8B%E3%83%AF%E3%83%B3%E3%82%B4/1-#4"><img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" /></a>&nbsp;<a href="/b/a/%E3%83%8B%E3%83%AF%E3%83%B3%E3%82%B4/1-#4"><img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" /></a>&nbsp;<a href="/b/a/%E3%83%8B%E3%83%AF%E3%83%B3%E3%82%B4/1-#4"><img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" /></a>
</p>

表示結果

Operaブラウザで表示させるとお絵カキコがはみ出てしまう。

    

参考：自動リンク＋&nbsp;＋改行

<p style="width: 400px; border: 1px solid #AAAAAA; margin: 10px; background-color: #98514B;">
<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />&nbsp;
<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />&nbsp;
<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />&nbsp;
<img src="/oekaki_thumb/1.png" title="1.png" alt="1.png" width="120" height="120" />&nbsp;
</p>

表示結果

お絵カキコの間の空白は&nbsp;と半角空白の2つが残っている。

       

お絵カキコ自動リンクと&nbsp;の組合せで起こる問題点

上の例で示したように、 imgタグの間にある空白が削られる不具合を&nbsp;で対処しようとすると Operaブラウザでは画像の回り込みまで無効化されてしまう。 回り込みがされなくなってパソコンの画面からはみ出たお絵カキコは、当然見れなくなる。

&nbsp;によって折り返しが無効化されてしまって、お絵カキコがブラウザのウィンドウからはみ出してしまっている記事の例は以下↓

○…折り返しあり / ×…折り返し無し

記事名	IE8	Firefox3	Google Chrome	Opera	参考
ゆめにっきのお絵カキコ/634378	×	○	○	×	「窓付き」の一覧辺りが三行で表示されている
本日の萌絵/691257	○	○	○	×	「本日の次席（順不同）」が一行表示になっている

解決策・回避策

手動リンクを使う

そもそもimgタグの空白除去はお絵カキコの自動リンクが付与される際に起こる不具合なので、
<a href="..."><img src="..."></a>
のようにお絵カキコに手動リンクを付与すれば回避可能。ニコニコ大百科モバイルのリンクにも対応できる。
ただしHTMLの記述量が増えるのが玉にキズ。慣れてない人にはオススメできない。

CSSを弄る

imgタグのCSSにmarginプロパティを指定すれば、お絵カキコの間に任意の幅のスキマを空けることができる。
ただし、該当CSSはお絵カキコ(imgタグ)全てに記述する必要があるため量が多いと非効率。 自動リンクによって記述量を減らしたはずなのに、スキマを空けるためだけにCSSを編集するのは本末転倒かもしれない。

&nbsp;以外の空白を利用する

• &thinsp; (U+2009) [ ]
• &ensp; (U+2002) [ ]
• &emsp; (U+2003)[ ]
• 全角空白 (U+3000) [　]

&nbsp;のような回り込みの問題は(たぶん)確認されてないので 知識があるならば利用するのも一手。
ただし他の編集者がコピペなどで削ってしまう可能性がある。

諦める

デザインを特に気にしないならお絵カキコは単純に並べるだけでもOK。

参考リンク

• &nbsp;と普通の半角スペースの違い - うなの日記

関連項目

• お絵カキコ
• 自動リンク / 手動リンク
• HTML / 文字参照 / 数値参照