イメージブロックの検証

-]

概要

下記フォーラムの書き込みの検証試験をおこなった。

画像挿入時の文章回りこみの仕様の差異

avatar.php?userid=2051406&size=normal&timestamp=1495789047lTasteHill 23 May 2017, 03:50

移転確認作業中に際して、SCP-1974-EXに画像が無かったため原文ページと同じコードで挿入を試みたところ、サンドボックスでは特別収容プロトコルのパラグラフが画像の左に回りこんでくれませんでした。(原文ページの)画像挿入のコードがJPのテンプレートとは改行の仕方などが違ったため、JPのものに合わせて挿入してみましたがやはり回りこみませんでした。画像のwidthを300pxではなく、220pxにしたところ回りこみしたため、この結果に合わせてJPの該当ページを更新しました。

しかし、コードを書き違えてwidth:300pxのままだったにも関わらずサンドボックスとは違い、文章の回りこみが問題なく発生しました。念のため、JPで使用したコードでサンドボックスに投稿してみましたが、やはりサンドボックスでは回りこみが発生しませんでした。

JPとサンドボックスの環境に差異があるのでしょうか?同じコードを投稿した結果を置いておきますので確認をお願いします。

本投稿:
http://ja.scp-wiki.net/scp-1974-ex
サンドボックス
http://scp-jp-sandbox2.wikidot.com/tastehill

各image-blockのソースコードの抽出方法

SCP財団の場合はcomponent:カテゴリのページの「ページのソースを見る」が一般サイトメンバーでも有効であった為、通常のページと同じ様にページのソースから抽出した。

サンドボックスの場合一般サイトメンバーではcomponent:カテゴリの「ページのソースを見る」が無効であった為、下記の構文を使い抽出した。

[[html]]
<textarea style="height:10em;width:100%;">
[[include component:image-block]]
</textarea>
[[/html]]

ただし、インクルード元にインクルード文がある場合は、先にそのインクルード文が反映されたコードに改変されてから出力される為、サンドボックスのインクルード文第1層目は引数を入れた時と入れていない時の差異を比較して、予想と言う形で書き出した。

各image-blockのソースコード

SCP財団: ハブインクルードを使用

第1層目

[[include component:image-block-base name={$name}|caption={$caption}|width={$width}|width=300px|link={$link}|link=#|align={$align}|align=right]]

第2層目

[[div class="scp-image-block block-{$align}" style="width:{$width};"]]
[[image {$name} style="width:{$width};" link={$link}]]
[[div class="scp-image-caption" style="width:{$width};"]]
{$caption}
[[/div]]
[[/div]]
[[module css]]
.scp-image-block {
        float: none;
    clear: none;
    border: solid 1px #666;
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
    width: 300px;
}
 
.scp-image-block.block-right {
        float: right;
    clear: right;
    margin: 0 2em 1em 2em;
}
 
.scp-image-block.block-left {
    float: left;
    clear: left;
    margin: 0 2em 1em 0;
}
 
.scp-image-block.block-center {
    margin-right: auto;
    margin-left: auto;
}
[[/module]]

サンドボックス: ハブインクルードを使用
第1層目

[[include component:image-block-base name={$name}|caption={$caption}|width={$width}|width=300px]]

2層目

[[div class="scp-image-block" style="width:{$width};"]]
[[image {$name} style="width:{$width};"]]
[[div class="scp-image-caption" style="width:{$width};"]]
{$caption}
[[/div]]
[[/div]]
[[module CSS]]
/* Standard Image Block */
.scp-image-block {
  float: right;
  clear: right;
  margin: 0 2em 1em 2em;
  border: solid 1px #666;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  width: 300px;
}
.scp-image-block img {
  border: 0;
  width: 300px;
}
.scp-image-block .scp-image-caption {
  background-color: #eee;
  border-top: solid 1px #666;
  padding: 2px 0;
  font-size: 80%;
  font-weight: bold;
  text-align: center;
  width: 300px;
}
.scp-image-block > p {
  margin: 0;
}
.scp-image-block .scp-image-caption > p {
  margin: 0;
  padding: 0 10px;
}
[[/module]]

SCP財団のimage-blockは左寄せ等多彩な寄せ方ができるのに対し、サンドボックスのimage-blockは右寄せしかできない事が明らかになった。

比較実験

SCP財団仕様

rating: 0+x

アイテム番号: SCP-1974-EX

オブジェクトクラス: Safe Explained

1974-ex.jpg

[編集済]における配布事件の後に残された、SCP-1974-EXの標本

特別収容プロトコル: SCP-1974検体は、実験時以外はサイト61の低価値物品倉庫に収容されます。SCP-1974-EX検体はサイト55の研究開発保管区画の通常の小物品用金庫に収容されます。

実験の被験者以外の職員が取り扱う場合、特異な効果SCP-1974-EXの材質に練りこまれた薬物への曝露を防ぐため、ブチルゴムまたはニトリル(NBR)ゴム製の手袋を着用しなくてはなりません。影響を受けた職員は免職され、効果が切れるまで(およそ36時間)隔離されなくてはなりません。

現場エージェントに指令61-1974-Bが発令されました。指令は低優先度で、内容は財団に確保されていないSCP-1974検体の確保と収容、また発生源への手がかりを探すことです。指令61-1974-Bは1992年08月16日をもって破棄されました。

説明: SCP-1974-EXは通常のアクリロニトリル・ブタジエン・スチレン(ABS)重合体を材質とした20面ダイス(テーブルトーク式ロールプレイングゲームではd20とも呼ばれる)です。

いかなる人物でも、SCP-1974-EXを5分間握り続ける、あるいは通常のロールプレイングゲームでおよそ1時間以上使用し続けると、幻覚の効果の影響を受け、強烈な暗示にかかります。SCP-1974-EXがロールプレイングゲームに使われた場合、影響を受けた被験者のうちおよそ90%が、ゲーム中のパラメータや状況を現実のものと信じ、それに応じて行動するようになります。この効果は36時間持続するのが典型的です。残りの10%の被験者は、LSD-25やシロシビンに意図せず曝されたとき生じるような種々雑多な幻覚を体験します。SCP-1974-EXの使用方法を特に指定せずにSCP-1974-EXの影響を受けた被験者も、同様に種々雑多な幻覚を体験します。

現在、SCP-1974の影響が化学的なものか、ミーム的なものか、または超常的なものか調査中です。

分析の結果、SCP-1974-EXに含まれる[編集済]が結合したABSはジメチルスルホキシド(DMSO)に類似する溶媒・分散媒ですが、室温では固体です。これは長時間作用する幻覚剤であるr-エルゴタミン誘導体を導入するのに用いられます。加えて、SCP-1974-EXは周波数[編集済]の聞き取れない音を発信する装置を含んでおり、これが幻覚剤と結びついて心理音響効果を引き起こし、SCP-1974-EXに暴露した被験者にきわめて強い被暗示性をもたらします。

SCP-1974-EXは単に被験者に幻覚をもたらすだけであり、かつそれは密かに幻覚剤を投与することによって行われているため、1992年08月16日現在をもってSCP指定から外れ、メインSCPデータベースから除外されます。さらなる未収容個体は警察の手に委ねられ、財団エージェントの任務となることはありません。

秘密活動や人間型SCPのコントロールに利用できる可能性があるため、財団研究開発部がSCP-1974-EXの徴用を行い、別の形で同じ効果を得る方法を開発中です。

補遺: SCP-1974-EXは、19██年█月の██日から██日にかけて行われたサイエンスフィクション・ファンタジーのコンベンションである[編集済] ConにてSCP-1974-EX個体が無料サンプルという形で大量に配布されたために財団に注目されました。200人以上が奇妙な行動を起こし、█人の死者、██の重軽傷者が出、また多くの器物損壊事件や治安びん乱行為を行ったために拘留されました。███個のSCP-1974-EX個体が没収され、事件は大量の食中毒による集団パニックであるということになりました。

事件記録 1974-01: 以下はSCP-1974-EXが初めて公に解放された直後の事件報告の抜粋です。大多数の被験者は害こそないが不条理な振る舞いを起こし、また少数は自身または特に怪しまない無防備な他者に危険な振る舞いを起こしたということが示されています。

  • █████ ██████; █████ホテルのドアマンをひどく打ちのめした; 被害者を"オーク"であると信じ込んでいた。被験者は少々の怪我で拘束することに成功した。
  • ████ ████████; 不明な言語で”ファイヤーボールを唱え”つつ、ビリヤードのキューを振り回しながらキッチンに並べられたスパイスを燃やしているところを拘束された。怪我は報告されなかった。
  • ███████ ████; TRPG”パラノイア”をプレイした後、[編集済]のために働いていると主張した; 尋問後、被験者は本物の機密情報をなにも知らないと判明したため解放された。
  • █████ █████; 肉切り包丁を持って“血の暗黒神に、血を捧げよ!”と叫びながら████████警察の警官の一団に突撃した後、警官に殺害された。
  • ███ ███████; TRPG"クトゥルフの呼び声"をプレイした後に”ヨグ・ソトホースを召喚”するべく妹を生贄に捧げようとした。[データ削除済]。

SCP-1974-EXの出処は不明です。関連情報は引き続きの捜査のために匿名で████████, ██警察に送られます。

サンドボックス仕様(Width300px)

rating: 0+x

アイテム番号: SCP-1974-EX

オブジェクトクラス: Safe Explained

1974-ex.jpg

[編集済]における配布事件の後に残された、SCP-1974-EXの標本

特別収容プロトコル: SCP-1974検体は、実験時以外はサイト61の低価値物品倉庫に収容されます。SCP-1974-EX検体はサイト55の研究開発保管区画の通常の小物品用金庫に収容されます。

実験の被験者以外の職員が取り扱う場合、特異な効果SCP-1974-EXの材質に練りこまれた薬物への曝露を防ぐため、ブチルゴムまたはニトリル(NBR)ゴム製の手袋を着用しなくてはなりません。影響を受けた職員は免職され、効果が切れるまで(およそ36時間)隔離されなくてはなりません。

現場エージェントに指令61-1974-Bが発令されました。指令は低優先度で、内容は財団に確保されていないSCP-1974検体の確保と収容、また発生源への手がかりを探すことです。指令61-1974-Bは1992年08月16日をもって破棄されました。

説明: SCP-1974-EXは通常のアクリロニトリル・ブタジエン・スチレン(ABS)重合体を材質とした20面ダイス(テーブルトーク式ロールプレイングゲームではd20とも呼ばれる)です。

いかなる人物でも、SCP-1974-EXを5分間握り続ける、あるいは通常のロールプレイングゲームでおよそ1時間以上使用し続けると、幻覚の効果の影響を受け、強烈な暗示にかかります。SCP-1974-EXがロールプレイングゲームに使われた場合、影響を受けた被験者のうちおよそ90%が、ゲーム中のパラメータや状況を現実のものと信じ、それに応じて行動するようになります。この効果は36時間持続するのが典型的です。残りの10%の被験者は、LSD-25やシロシビンに意図せず曝されたとき生じるような種々雑多な幻覚を体験します。SCP-1974-EXの使用方法を特に指定せずにSCP-1974-EXの影響を受けた被験者も、同様に種々雑多な幻覚を体験します。

現在、SCP-1974の影響が化学的なものか、ミーム的なものか、または超常的なものか調査中です。

分析の結果、SCP-1974-EXに含まれる[編集済]が結合したABSはジメチルスルホキシド(DMSO)に類似する溶媒・分散媒ですが、室温では固体です。これは長時間作用する幻覚剤であるr-エルゴタミン誘導体を導入するのに用いられます。加えて、SCP-1974-EXは周波数[編集済]の聞き取れない音を発信する装置を含んでおり、これが幻覚剤と結びついて心理音響効果を引き起こし、SCP-1974-EXに暴露した被験者にきわめて強い被暗示性をもたらします。

SCP-1974-EXは単に被験者に幻覚をもたらすだけであり、かつそれは密かに幻覚剤を投与することによって行われているため、1992年08月16日現在をもってSCP指定から外れ、メインSCPデータベースから除外されます。さらなる未収容個体は警察の手に委ねられ、財団エージェントの任務となることはありません。

秘密活動や人間型SCPのコントロールに利用できる可能性があるため、財団研究開発部がSCP-1974-EXの徴用を行い、別の形で同じ効果を得る方法を開発中です。

補遺: SCP-1974-EXは、19██年█月の██日から██日にかけて行われたサイエンスフィクション・ファンタジーのコンベンションである[編集済] ConにてSCP-1974-EX個体が無料サンプルという形で大量に配布されたために財団に注目されました。200人以上が奇妙な行動を起こし、█人の死者、██の重軽傷者が出、また多くの器物損壊事件や治安びん乱行為を行ったために拘留されました。███個のSCP-1974-EX個体が没収され、事件は大量の食中毒による集団パニックであるということになりました。

事件記録 1974-01: 以下はSCP-1974-EXが初めて公に解放された直後の事件報告の抜粋です。大多数の被験者は害こそないが不条理な振る舞いを起こし、また少数は自身または特に怪しまない無防備な他者に危険な振る舞いを起こしたということが示されています。

  • █████ ██████; █████ホテルのドアマンをひどく打ちのめした; 被害者を"オーク"であると信じ込んでいた。被験者は少々の怪我で拘束することに成功した。
  • ████ ████████; 不明な言語で”ファイヤーボールを唱え”つつ、ビリヤードのキューを振り回しながらキッチンに並べられたスパイスを燃やしているところを拘束された。怪我は報告されなかった。
  • ███████ ████; TRPG”パラノイア”をプレイした後、[編集済]のために働いていると主張した; 尋問後、被験者は本物の機密情報をなにも知らないと判明したため解放された。
  • █████ █████; 肉切り包丁を持って“血の暗黒神に、血を捧げよ!”と叫びながら████████警察の警官の一団に突撃した後、警官に殺害された。
  • ███ ███████; TRPG"クトゥルフの呼び声"をプレイした後に”ヨグ・ソトホースを召喚”するべく妹を生贄に捧げようとした。[データ削除済]。

SCP-1974-EXの出処は不明です。関連情報は引き続きの捜査のために匿名で████████, ██警察に送られます。


比較した場合、どちらも回り込みは正常に動いている事がわかる。

JStyleの影響

この実験の結果はC-takeC-takeのサンドボックスでも同じであった。すると残るのはTasteHillTasteHill氏とC-takeC-takeのサンドボックス及びこのページの差異を検証する事である。
TasteHillTasteHill氏は自身のサンドボックスに(サンドボックス仕様の)JStyleを導入している。このJStyleを適用した場合を実験する。

下記ボタンでJStyleを適用状態にできる。
Jstyle適用


この状態でSCP財団及びサンドボックス、両者共回り込みが発生しなくなった事がうかがえる。

またTasteHillTasteHill氏の下記の証言も検証しよう。

画像のwidthを300pxではなく、220pxにしたところ回りこみしたため、この結果に合わせてJPの該当ページを更新しました。

サンドボックス仕様(Width220px)

rating: 0+x

アイテム番号: SCP-1974-EX

オブジェクトクラス: Safe Explained

1974-ex.jpg

[編集済]における配布事件の後に残された、SCP-1974-EXの標本

特別収容プロトコル: SCP-1974検体は、実験時以外はサイト61の低価値物品倉庫に収容されます。SCP-1974-EX検体はサイト55の研究開発保管区画の通常の小物品用金庫に収容されます。

実験の被験者以外の職員が取り扱う場合、特異な効果SCP-1974-EXの材質に練りこまれた薬物への曝露を防ぐため、ブチルゴムまたはニトリル(NBR)ゴム製の手袋を着用しなくてはなりません。影響を受けた職員は免職され、効果が切れるまで(およそ36時間)隔離されなくてはなりません。

現場エージェントに指令61-1974-Bが発令されました。指令は低優先度で、内容は財団に確保されていないSCP-1974検体の確保と収容、また発生源への手がかりを探すことです。指令61-1974-Bは1992年08月16日をもって破棄されました。

説明: SCP-1974-EXは通常のアクリロニトリル・ブタジエン・スチレン(ABS)重合体を材質とした20面ダイス(テーブルトーク式ロールプレイングゲームではd20とも呼ばれる)です。

いかなる人物でも、SCP-1974-EXを5分間握り続ける、あるいは通常のロールプレイングゲームでおよそ1時間以上使用し続けると、幻覚の効果の影響を受け、強烈な暗示にかかります。SCP-1974-EXがロールプレイングゲームに使われた場合、影響を受けた被験者のうちおよそ90%が、ゲーム中のパラメータや状況を現実のものと信じ、それに応じて行動するようになります。この効果は36時間持続するのが典型的です。残りの10%の被験者は、LSD-25やシロシビンに意図せず曝されたとき生じるような種々雑多な幻覚を体験します。SCP-1974-EXの使用方法を特に指定せずにSCP-1974-EXの影響を受けた被験者も、同様に種々雑多な幻覚を体験します。

現在、SCP-1974の影響が化学的なものか、ミーム的なものか、または超常的なものか調査中です。

分析の結果、SCP-1974-EXに含まれる[編集済]が結合したABSはジメチルスルホキシド(DMSO)に類似する溶媒・分散媒ですが、室温では固体です。これは長時間作用する幻覚剤であるr-エルゴタミン誘導体を導入するのに用いられます。加えて、SCP-1974-EXは周波数[編集済]の聞き取れない音を発信する装置を含んでおり、これが幻覚剤と結びついて心理音響効果を引き起こし、SCP-1974-EXに暴露した被験者にきわめて強い被暗示性をもたらします。

SCP-1974-EXは単に被験者に幻覚をもたらすだけであり、かつそれは密かに幻覚剤を投与することによって行われているため、1992年08月16日現在をもってSCP指定から外れ、メインSCPデータベースから除外されます。さらなる未収容個体は警察の手に委ねられ、財団エージェントの任務となることはありません。

秘密活動や人間型SCPのコントロールに利用できる可能性があるため、財団研究開発部がSCP-1974-EXの徴用を行い、別の形で同じ効果を得る方法を開発中です。

補遺: SCP-1974-EXは、19██年█月の██日から██日にかけて行われたサイエンスフィクション・ファンタジーのコンベンションである[編集済] ConにてSCP-1974-EX個体が無料サンプルという形で大量に配布されたために財団に注目されました。200人以上が奇妙な行動を起こし、█人の死者、██の重軽傷者が出、また多くの器物損壊事件や治安びん乱行為を行ったために拘留されました。███個のSCP-1974-EX個体が没収され、事件は大量の食中毒による集団パニックであるということになりました。

事件記録 1974-01: 以下はSCP-1974-EXが初めて公に解放された直後の事件報告の抜粋です。大多数の被験者は害こそないが不条理な振る舞いを起こし、また少数は自身または特に怪しまない無防備な他者に危険な振る舞いを起こしたということが示されています。

  • █████ ██████; █████ホテルのドアマンをひどく打ちのめした; 被害者を"オーク"であると信じ込んでいた。被験者は少々の怪我で拘束することに成功した。
  • ████ ████████; 不明な言語で”ファイヤーボールを唱え”つつ、ビリヤードのキューを振り回しながらキッチンに並べられたスパイスを燃やしているところを拘束された。怪我は報告されなかった。
  • ███████ ████; TRPG”パラノイア”をプレイした後、[編集済]のために働いていると主張した; 尋問後、被験者は本物の機密情報をなにも知らないと判明したため解放された。
  • █████ █████; 肉切り包丁を持って“血の暗黒神に、血を捧げよ!”と叫びながら████████警察の警官の一団に突撃した後、警官に殺害された。
  • ███ ███████; TRPG"クトゥルフの呼び声"をプレイした後に”ヨグ・ソトホースを召喚”するべく妹を生贄に捧げようとした。[データ削除済]。

SCP-1974-EXの出処は不明です。関連情報は引き続きの捜査のために匿名で████████, ██警察に送られます。

回り込みしてない。困った。

なぜこうなるのか

証言と食い違ったがTasteHillTasteHill氏が直面した不具合の直接の原因がJStyleにある事がわかった。しかし、JStyleがどのように作用しているのかは明らかになっていない。

ここからより詳しい検証する。

Nanimono DemonaiNanimono Demonai氏の証言

画像挿入時の文章回りこみの仕様の差異

avatar.php?userid=1703549&amp;size=normal&amp;timestamp=1495795073Nanimono Demonai 26 May 2017, 19:35

取り急ぎ画像の原因はここですね。

span[style="text-decoration: line-through;"] {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    vertical-align: bottom;
}

根本的な対策は後で行います。

上記のCSSは自身の中に子要素があった場合、それを指定の通りに並べるものである。上記の場合は下記のように文章を構成するようになる。

--[[span]]ああああ[[/span]] [[span]]いいいい[[/span]]--
↓下記htmlに変換
<span style="text-decoration: line-through;"><span>ああああ</span><span>いいいい</span></span>

実際の表示

ああああいいいい

この時、<span style="text-decoration: line-through;">はinline-blockと同じ仕様になる。inlineブロックとは、自身の要素の左右に異なる要素をつける事ができる設定である。
上記の打ち消し線によって作られる要素をわかりやすくする為に色付けを行う。

このように打ち消し線が囲まれて、そしてその左右には別の要素、つまりこの文章を取り付ける事ができる。
重要な事はこの要素は矩形によって作られる事である。
従ってこのように長い文章(ここから字数稼ぎ)あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああを囲った場合だとページの幅一杯のブロック要素に囲まれた状態となり、その左右に異なる要素をつける事ができなくなる(正確に言えば異なる要素をつけるスペースがなくなる)。
従って、JStyleを導入し、長い文章に打ち消し線を付けると、その左右に別の要素をつける表記(今回の場合はfloat:rightで右に寄せられた画像を隣付ける処理)ができなくなり、視覚的に言えば文章の回り込みが不可能となっているのである。

なお、TasteHillTasteHill氏の下記の証言は

画像のwidthを300pxではなく、220pxにしたところ回りこみしたため、この結果に合わせてJPの該当ページを更新しました。

画像のwidthを小さくした結果、画像が打ち消し線要素の隣にあるスペースに入り込めるようになった為発生した事だと考えられる。

解決策

抜本的解決策はJStyleの作者であるNanimono DemonaiNanimono Demonai氏以外できないであろう。
現状での解決策としては、JStyleを導入し、なおかつ割注機能を使わない場合は

[[include inc:jstyles]]

の下に

[[module css]]
span[style="text-decoration: line-through;"] {
    display: inline;
}
[[/module]]

という構文を入れる事が挙げられる。
こうすると打ち消し線からinline-flexの属性が消えて通常の打ち消し線と同じになる。
例えばこの様に長い文章に打ち消し線を入れた場合、JStyleを導入時は幅がページ幅と同じ矩形の要素に入れられる事になる。その為諸所の不具合が起きたしかし、display:inlineでオーバーライドすれば元の打ち消し線に戻る。言い換えるとこれは割注機能を殺しているのであり、当然この対処を行うと割注は使えない。

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License