ページ 2 / 2
Re: 長いコードを本文に記述しないで済ませられないか?
Posted: 2018年12月23日(日) 10:25
by omasu
お世話になります。
イグトランスさん、表示・非表示機能の組み込みありがとうございました。
他のトピックでも機能していることを確認しました。
これからもよろしくお願いいたします。
追伸:「少し変更しています」はTip:の記述だけでしょうか、興味深々です。
Re: 長いコードを本文に記述しないで済ませられないか?
Posted: 2019年1月06日(日) 00:38
by イグトランス
返事まで時間が開きましてすみません。もう少し改良が必要だと考えていて、その準備をしていました。
- class="codebox"を削除。現在使用中のphpBBスタイルでは、これに対応するCSSの指定が特になかったため。
- クリック部分のメッセージを単に「ここをクリックすると内容が表示されます。」と「ここをクリックすると非表示にします。」のみに変更。
- 表示・非表示の切り替えの実装方法をCSSのdisplayプロパティからHTMLのhidden属性に変更。
- 切り換え部分のメッセージの書き換え処理に使用するプロパティをinnerHTMLからtextContentに変更。
- 表示・非表示の状態をaria-expanded属性で明示。
今回、最後のaria-expandedを追加しました。それ以外は前回の時点で変更しました。
[ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
コード: 全て選択
<dl aria-expanded="false">
<dt>
<a href="javascript:void(0)"
onclick="var topElement = this.parentNode.parentNode;
var e = topElement.getElementsByTagName('dd')[0];
if (e.hasAttribute('hidden')) {
e.removeAttribute('hidden');
this.textContent = 'ここをクリックすると非表示にします。';
topElement.setAttribute('aria-expanded', 'true');
} else {
e.setAttribute('hidden', '');
this.textContent = 'ここをクリックすると内容が表示されます。';
topElement.setAttribute('aria-expanded', 'false');
}">
ここをクリックすると内容が表示されます。
</a>
</dt>
<dd hidden>{TEXT}</dd>
</dl>
Re: 長いコードを本文に記述しないで済ませられないか?
Posted: 2019年1月06日(日) 13:31
by omasu
お世話になります。
omasuはphpBBのフォーラム原文から何とか改修し、
[SPOILER]を[hide]にするのが精一杯だったのですが、
それを進化させてしまうなんて、すごいですね!
自分のphpBB環境でもイグトランスさんのコードは動きました。
※class="codebox"は非表示エリアを網掛けする機能の様です。
以下がphpBB原文コードとomasuのコード、イグトランスさんのコードです。
比べて見るとすごい事が解ります。
phpBBフォーラムの原文コードです
[ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
コード: 全て選択
<dl class="codebox">
<dt>
<a href="javascript:void(0);"
onclick="var el = this.parentNode.parentNode.getElementsByTagName('dd')[0];
var v = el.style.display != 'none';
el.style.display = v ? 'none' : 'block';
this.innerHTML = (v ? '[SPOILER]' : '[HIDE]'); "
>
[SPOILER]
</a>
</dt>
<dd style="display: none;">
{TEXT}
</dd>
</dl>
omasuが原文をもとに改修したコードです
[ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
コード: 全て選択
<dl class="codebox">
<dt>
<a href="javascript:void(0);"
onclick="var el = this.parentNode.parentNode.getElementsByTagName('dd')[0];
var v = el.style.display != 'none';
el.style.display = v ? 'none' : 'block';
this.innerHTML = (v ? '[hide=ここをクリックすると内容が表示されます。]'
:
'[hide=ここをクリックすると非表示にします。]'); "
>
[hide=ここをクリックすると内容が表示されます。]
</a>
</dt>
<dd style="display: none;">
{TEXT}
</dd>
</dl>
イグトランスさんのコード
[ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
コード: 全て選択
<dl aria-expanded="false">
<dt>
<a href="javascript:void(0)"
onclick="var topElement = this.parentNode.parentNode;
var e = topElement.getElementsByTagName('dd')[0];
if (e.hasAttribute('hidden')) {
e.removeAttribute('hidden');
this.textContent = 'ここをクリックすると非表示にします。';
topElement.setAttribute('aria-expanded', 'true');
} else {
e.setAttribute('hidden', '');
this.textContent = 'ここをクリックすると内容が表示されます。';
topElement.setAttribute('aria-expanded', 'false');
}">
ここをクリックすると内容が表示されます。
</a>
</dt>
<dd hidden>{TEXT}</dd>
</dl>
これなら[hide=
説明文]{text}[/hide]の記述改修が可能かな?
と思ってしまいました。
なお[hide]タグ内の{text}は、
[hide=
{text1}]{text2}[/hide]というように、
番号付けができるので、試行錯誤してみます。
Re: 長いコードを本文に記述しないで済ませられないか?
Posted: 2019年1月07日(月) 00:11
by イグトランス
※class="codebox"は非表示エリアを網掛けする機能の様です。
そうなんです。omasuさんの掲示板のように、phpBBのスタイル次第ではそうなるようです。このフォーラムでもそうしたほうがいいとは思うのですが、そこまで対処できていません(将来なんとかするかも)。以前のhideも現状のように修飾がない表示だったと記憶しているので、最低限以前と同じ状態の再現はできているだろうと思っています。
これなら[hide=説明文]{text}[/hide]の記述改修が可能かな?
と思ってしまいました。
なお[hide]タグ内の{text}は、
[hide={text1}]{text2}[/hide]というように、
番号付けができるので、試行錯誤してみます。
これについて調べていました。どうやら
コード: 全て選択
[hide]{TEXT}[/hide]
を
コード: 全て選択
[hide={TEXT1;optional}]{TEXT2}[/hide]
とすると、説明文が有っても無くてもOKになるようです。
Re: 長いコードを本文に記述しないで済ませられないか?
Posted: 2019年1月07日(月) 21:15
by omasu
お世話になります。
イグトランスさん、ありがとうございます。
早速チャレンジ(1回目の思考錯誤です)
コード: 全て選択
[hide={TEXT1;optional}]{TEXT2}[/hide]
に設定変更して
コード: 全て選択
<dl aria-expanded="false" class="codebox">
<dt>
<a href="javascript:void(0)"
if ({TEXT1} == NULL)
{
{TEXT1} = 'ここをクリックすると内容が表示されます。'
};
onclick="var topElement = this.parentNode.parentNode;
var e = topElement.getElementsByTagName('dd')[0];
if (e.hasAttribute('hidden')) {
e.removeAttribute('hidden');
this.textContent = 'ここをクリックすると非表示にします。';
topElement.setAttribute('aria-expanded', 'true');
} else {
e.setAttribute('hidden', '');
this.textContent = {TEXT1};
topElement.setAttribute('aria-expanded', 'false');
}">
{TEXT1}
</a>
</dt>
<dd hidden>
{TEXT2}
</dd>
</dl>
とコードを加工し登録すると、
警告
トークン {TEXT} が HTMLタグ 内で使用されています。XSS 攻撃を受ける可能性があり、セキュリティ上非常に危険です。
HTMLタグ 内ではより限定的な {SIMPLETEXT} または {INTTEXT} が使用されるべきです。
この危険性を十分承知した上でどうしてもトークン {TEXT} を HTMLタグ 内で使用したい場合は “はい” をクリックしてください。
というエラーが発生し、それを無視し突破して、
コード: 全て選択
[hide]test1[/hide]
[hide=test2]test2[/hide]
とテストするも、やっぱりうまく動きません。
試行錯誤というよりは暗中模索ですね。m(_ x _)m
とりあえずイグトランスさんの提示していただいた母体コードで稼働中です。
コード: 全て選択
<dl aria-expanded="false" class="codebox">
<dt>
<a href="javascript:void(0)"
onclick="var topElement = this.parentNode.parentNode;
var e = topElement.getElementsByTagName('dd')[0];
if (e.hasAttribute('hidden')) {
e.removeAttribute('hidden');
this.textContent = 'ここをクリックすると非表示にします。';
topElement.setAttribute('aria-expanded', 'true');
} else {
e.setAttribute('hidden', '');
this.textContent = 'ここをクリックすると内容が表示されます。';
topElement.setAttribute('aria-expanded', 'false');
}">
ここをクリックすると内容が表示されます。
</a>
</dt>
<dd hidden>
{TEXT2}
</dd>
</dl>
※すいません。hideの記述にhideコードで非表示にすると、機能してしまうので、非表示機能は使用していません。
※ソートロジック大会の最終トピックは以下のコードで記述していますが、
コード: 全て選択
[hide=最終実行速度比較が表示されます。]
山本さまはどんなコードを記述したのか、神の領域ですね。
Re: 長いコードを本文に記述しないで済ませられないか?
Posted: 2019年1月12日(土) 22:46
by omasu
お世話になります。
[hide=説明文]本文[/hide]という記述にとりあえず対応しました。
チャレンジ(2回目の思考錯誤です)
※まだ最終形ではありません。
{TEXT1}の入力があれば{TEXT1}を表示し、
{TEXT1}の入力がなければ"ここをクリックすると内容が表示されます。"にする。
omasuBB掲示板で、実際の表示・非表示動作です
参考文献
設定情報
コード: 全て選択
[hide={TEXT1;optional}]{TEXT2}[/hide]
コード情報
コード: 全て選択
<dl class="codebox">
<dt>
<a href="javascript:void(0);"
onclick="
var el = this.parentNode.parentNode.getElementsByTagName('dd')[0];
var v = el.style.display != 'none';
el.style.display = v ? 'none' : 'block';
this.innerHTML = (v ?
'ここをクリックすると内容を表示します。'
:
'ここをクリックする非表示にします。'
) + ' {TEXT1}';
"
>
ここをクリックすると内容を表示します。 {TEXT1}
</a>
</dt>
<dd style="display: none;">
{TEXT2}
</dd>
</dl>
警告はでます。
警告
トークン {TEXT} が HTMLタグ 内で使用されています。XSS 攻撃を受ける可能性があり、セキュリティ上非常に危険です。
HTMLタグ 内ではより限定的な {SIMPLETEXT} または {INTTEXT} が使用されるべきです。
この危険性を十分承知した上でどうしてもトークン {TEXT} を HTMLタグ 内で使用したい場合は “はい” をクリックしてください。
説明情報
コード: 全て選択
表示・非表示を切り替えます。[hide=説明文]本文[/hide]
今回の改修に伴う試験用の記述です。
※H31.1.21 イグトランスさん導入ありがとうございました。
今回の改修に伴う試験用のコードです。
コード: 全て選択
[hide=説明文]
本文1
本文2
[/hide]
[hide]
本文1
本文2
[/hide]
Re: 長いコードを本文に記述しないで済ませられないか?
Posted: 2019年1月21日(月) 01:09
by イグトランス
その問題について考えていました。そうしたら、TEXT1は常に表示するするので、
コード: 全て選択
<a onclick="…"><span>ここをクリックすると内容を表示します。</span>{TEXT1}</a>
として、<span>ここをクリックすると内容を表示します。</span>の部分だけをJavaScriptで制御すれば良いことに気付きました。
ただ、そのことに気付いたのはtextContentの書き換えを完全にやめる(テキストをすべてHTMLで記述しておき、JavaScriptではhidden属性の制御に徹する)方式で実装した後だったので、結局この方式で、フォーラムに適用しました。
現在のhideコードです [ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
コード: 全て選択
<div aria-expanded="false">
<a href="javascript:void(0)"
onclick="var topElement = this.parentNode;
var headerElements = this.getElementsByTagName('span');
var e = topElement.getElementsByTagName('div')[0];
if (e.hasAttribute('hidden')) {
e.removeAttribute('hidden');
headerElements[0].setAttribute('hidden', '');
headerElements[0].setAttribute('aria-hidden', 'true');
headerElements[1].removeAttribute('hidden');
headerElements[1].setAttribute('aria-hidden', 'false');
topElement.setAttribute('aria-expanded', 'true');
} else {
e.setAttribute('hidden', '');
headerElements[0].removeAttribute('hidden');
headerElements[0].setAttribute('aria-hidden', 'false');
headerElements[1].setAttribute('hidden', '');
headerElements[1].setAttribute('aria-hidden', 'true');
topElement.setAttribute('aria-expanded', 'false');
}">
{TEXT1}
<span aria-hidden="false"> [ここをクリックすると内容が表示されます]</span>
<span hidden aria-hidden="true"> [ここをクリックすると非表示にします]</span>
</a>
<div hidden>{TEXT2}</div>
</div>
また、phpBBがBBCode処理に使っているライブラリの説明
Custom BBCode syntax - s9e\TextFormatterを読んだところ、{TEXT1;optional}は{TEXT1?}でも良いという記述を発見したので、今回からそうしています。
Re: 長いコードを本文に記述しないで済ませられないか?
Posted: 2019年1月21日(月) 19:29
by omasu
お世話になります。
イグトランスさん導入ありがとうございます。m(_ w _)m
そうですよね。
{TEXT1}[ここをクリックすると内容を表示します。]と、
{TEXT1}[ここをクリックすると非表示にします。]が、
前後はどちらか迷いますが、通常の表記方法ですよね。
イグトランスさんに示唆していただいたphpBBサイトの基本構造でもこの方式てす。
phpBBサイト BBコードのSPOILERの記述マニュアルへジャンプ (戻るボタンで戻ってこれます。)
このphpBBサイトのコードを製表すると以下になります。 [ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
コード: 全て選択
<div class="spoiler">
<div class="spoiler-header">
<button onclick="
var
a=parentNode.nextSibling.style,
b=firstChild.style,c=lastChild.style;
b.display=a.display;
a.display=c.display=(b.display)?
''
:
'none';
return!1
"
>
<span>
Show
</span>
<span style="display:none">
Hide
</span>
</button>
<span class="spoiler-title">
Spoiler: {TEXT1}
</span>
</div>
<div class="spoiler-content" style="display:none">
{TEXT2}
</div>
</div>
※早速、取り込みしました。
このコードをomasu流にアレンジすると以下になります。 [ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
コード: 全て選択
<div class="codebox">
<div>
<button onclick="
var
a=parentNode.nextSibling.style,
b=firstChild.style,
c=lastChild.style;
b.display=a.display;
a.display=c.display=(b.display)?
''
:
'none';
return!1
"
>
<span>
ここをクリックすると内容を表示します。 {TEXT1}
</span>
<span style="display:none">
ここをクリックすると非表示にします。 {TEXT1}
</span>
</button>
</div>
<div style="display:none">
{TEXT2}
</div>
</div>
※これにより、BBcode登録時のトークンエラーは発生しなくなりました。
BBcodeの作成領域はイグトランスさんに提起していただいた{TEXT1?}を使いました。
コード: 全て選択
[hide={TEXT1?}]{TEXT2}[/hide]
ヘルプライン領域は以下にしました。
コード: 全て選択
表示・非表示を切り替えます。[hide]本文[/hide] または [hide=説明文]本文[/hide]
追伸:{TEXT1}の入力がなければ[ここをクリックすると内容を表示します。]を表示して、
入力があれば{TEXT1}を表示にするのは今後の課題とします。
※{TEXT1}がNULLであれば{TEXT1}に”[ここをクリックすると内容を表示します。]”を代入できれば、
解決するのですが・・・
よろしくお願いします。
追伸2:参考ですが、[class="codebox"]についてphpBB内部を調べてみました。
フォルダ名[phpBB3\styles\prosilver\theme]
ファイル名[colours.css]
このファイルの中に以下の記述がありました。 [ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
コード: 全て選択
/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
background-color: #EBEADD;
border-color:#DBDBCE;
}
blockquote blockquote {
/* Nested quotes */
background-color:#EFEED9;
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #EBEADD;
}
/* Code block */
.codebox {
background-color: #FFFFFF;
border-color: #C9D2D8;
}
.codebox p {
border-bottom-color: #CCCCCC;
}
.codebox code {
color: #2E8B57;
}
コード: 全て選択
<div class="codebox">
を
<div style="background-color: #FFFFFF; border:1px solid #C9D2D8;">
にしても一応動作しました。※ボーダーが機能しないので記述を変更しました。
<div・・・>の行の前に<br>改行が欲しいな、とも思いました。
Re: 長いコードを本文に記述しないで済ませられないか?
Posted: 2019年1月25日(金) 00:26
by omasu
お世話になります。
表示・非表示機能の構築ですが、
{TEXT1} [ここをクリックすると内容を表示します。]と、
{TEXT1} [ここをクリックすると非表示にします。]+本文を、
最終形としたいと思います。
思考錯誤して試験をしてきましたが、上記の表現が最もわかりやすいと感じました。
[BBcode作成]領域です。
コード: 全て選択
[hide={TEXT1?}]{TEXT2}[/hide]
[Htnl表現]領域は2点を思考錯誤しました。
一つ目のコードは以下になります。 [ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
コード: 全て選択
<div class="codebox">
<div>
<a href="javascript:void(0);"
onclick="
var el0 = this.parentNode.parentNode.getElementsByTagName('dd')[0];
var v0 = el0.style.display != 'none';
el0.style.display = v0 ? 'none' : 'block';
var el1 = this.parentNode.parentNode.getElementsByTagName('dd')[1];
var v1 = el1.style.display != 'none';
el1.style.display = v1 ? 'none' : 'block';
var el2 = this.parentNode.parentNode.getElementsByTagName('dd')[2];
var v2 = el2.style.display != 'none';
el2.style.display = v2 ? 'none' : 'block';
"
>
<dd style="display: block;">
{TEXT1} [ここをクリックすると内容を表示します。]
</dd>
<dd style="display: none;">
{TEXT1} [ここをクリックすると非表示にします。]
</dd>
</a>
<dd style="display: none;">
{TEXT2}
</dd>
</div>
</div>
二つ目のコードは以下になります。 [ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
コード: 全て選択
<div class="codebox">
<div>
<a onclick="
var a=parentNode.nextSibling.style,
b=firstChild.style,
c=lastChild.style;
b.display=a.display;
a.display=c.display=(b.display)? '' : 'none';
return!1
"
>
<span>
{TEXT1} [ここをクリックすると内容を表示します。]
</span>
<span style="display:none">
{TEXT1} [ここをクリックすると非表示にします。]
</span>
</a>
</div>
<div style="display:none">
{TEXT2}
</div>
</div>
一つ目のほうが解りやすいと思いましたが、
ロジックとしては、二つめのほうが良いと感じたので、
二つめを採用することにしました。
ヘルプライン領域は以下にしました。
コード: 全て選択
表示・非表示を切り替えます。[hide]本文[/hide] または [hide=説明文]本文[/hide]
イグトランスさん、大変お世話になりました。
omasuBB掲示板での表示・非表示機能です。