作成者 |
メッセージ |
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
お世話になります。
表示・非表示機能の構築ですが、
{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掲示板での表示・非表示機能です。
お世話になります。
表示・非表示機能の構築ですが、 {TEXT1} [ここをクリックすると内容を表示します。]と、 {TEXT1} [ここをクリックすると非表示にします。]+本文を、 最終形としたいと思います。
思考錯誤して試験をしてきましたが、上記の表現が最もわかりやすいと感じました。
[BBcode作成]領域です。 [code][hide={TEXT1?}]{TEXT2}[/hide][/code]
[Htnl表現]領域は2点を思考錯誤しました。 [hide=一つ目のコードは以下になります。] [code] <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> [/code] [/hide] [hide=二つ目のコードは以下になります。] [code] <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> [/code] [/hide] 一つ目のほうが解りやすいと思いましたが、 ロジックとしては、二つめのほうが良いと感じたので、 二つめを採用することにしました。
ヘルプライン領域は以下にしました。 [code] 表示・非表示を切り替えます。[hide]本文[/hide] または [hide=説明文]本文[/hide] [/code]
イグトランスさん、大変お世話になりました。
[url=http://omasu.sakura.ne.jp/phpbb3/viewtopic.php?f=6&t=271]omasuBB掲示板での表示・非表示機能です。[/url]
|
|
|
投稿記事 |
Posted: 2019年1月25日(金) 00:26 |
|
|
|
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
お世話になります。
イグトランスさん導入ありがとうございます。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>改行が欲しいな、とも思いました。
お世話になります。
イグトランスさん導入ありがとうございます。m(_ w _)m
そうですよね。 {TEXT1}[ここをクリックすると内容を表示します。]と、 {TEXT1}[ここをクリックすると非表示にします。]が、 前後はどちらか迷いますが、通常の表記方法ですよね。
イグトランスさんに示唆していただいたphpBBサイトの基本構造でもこの方式てす。 [url=https://s9etextformatter.readthedocs.io/Plugins/BBCodes/Add_from_the_repository/#spoiler]phpBBサイト BBコードのSPOILERの記述マニュアルへジャンプ (戻るボタンで戻ってこれます。)[/url]
[hide= このphpBBサイトのコードを製表すると以下になります。] [code] <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> [/code] [/hide]
※早速、取り込みしました。 [hide= このコードをomasu流にアレンジすると以下になります。] [code] <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> [/code] [/hide] ※これにより、BBcode登録時のトークンエラーは発生しなくなりました。
BBcodeの作成領域はイグトランスさんに提起していただいた{TEXT1?}を使いました。 [code][hide={TEXT1?}]{TEXT2}[/hide][/code] ヘルプライン領域は以下にしました。 [code]表示・非表示を切り替えます。[hide]本文[/hide] または [hide=説明文]本文[/hide][/code]
[color=#FF0000]追伸:{TEXT1}の入力がなければ[ここをクリックすると内容を表示します。]を表示して、 入力があれば{TEXT1}を表示にするのは今後の課題とします。
※{TEXT1}がNULLであれば{TEXT1}に”[ここをクリックすると内容を表示します。]”を代入できれば、 解決するのですが・・・ [/color] よろしくお願いします。
追伸2:参考ですが、[class="codebox"]についてphpBB内部を調べてみました。 フォルダ名[phpBB3\styles\prosilver\theme] ファイル名[colours.css] [hide=このファイルの中に以下の記述がありました。] [code] /* 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 */ [color=#FF0000].codebox { background-color: #FFFFFF; border-color: #C9D2D8; } [/color] .codebox p { border-bottom-color: #CCCCCC; }
.codebox code { color: #2E8B57; } [/code] [/hide]
[code] <div class="codebox"> を <div style="background-color: #FFFFFF;[color=#FF0000] border:1px solid #C9D2D8;[/color]"> にしても一応動作しました。[color=#FF0000]※ボーダーが機能しないので記述を変更しました。[/color]
<div・・・>の行の前に<br>改行が欲しいな、とも思いました。 [/code]
|
|
|
投稿記事 |
Posted: 2019年1月21日(月) 19:29 |
|
|
|
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
その問題について考えていました。そうしたら、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?}でも良いという記述を発見したので、今回からそうしています。
その問題について考えていました。そうしたら、TEXT1は常に表示するするので、 [code]<a onclick="…"><span>ここをクリックすると内容を表示します。</span>{TEXT1}</a>[/code] として、<span>ここをクリックすると内容を表示します。</span>の部分だけをJavaScriptで制御すれば良いことに気付きました。
ただ、そのことに気付いたのはtextContentの書き換えを完全にやめる(テキストをすべてHTMLで記述しておき、JavaScriptではhidden属性の制御に徹する)方式で実装した後だったので、結局この方式で、フォーラムに適用しました。
[hide=現在のhideコードです] [code] <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> [/code] [/hide]
また、phpBBがBBCode処理に使っているライブラリの説明[url=https://s9etextformatter.readthedocs.io/Plugins/BBCodes/Custom_BBCode_syntax/]Custom BBCode syntax - s9e\TextFormatter[/url]を読んだところ、{TEXT1;optional}は{TEXT1?}でも良いという記述を発見したので、今回からそうしています。
|
|
|
投稿記事 |
Posted: 2019年1月21日(月) 01:09 |
|
|
|
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
お世話になります。
[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]
お世話になります。
[hide=説明文]本文[/hide]という記述にとりあえず対応しました。
チャレンジ(2回目の思考錯誤です)
※まだ最終形ではありません。 {TEXT1}の入力があれば{TEXT1}を表示し、 {TEXT1}の入力がなければ"ここをクリックすると内容が表示されます。"にする。
[url=http://omasu.sakura.ne.jp/phpbb3/viewtopic.php?f=6&t=269]omasuBB掲示板で、実際の表示・非表示動作です[/url]
[url=https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://www.phpbb.com/customise/db/bbcode/spoiler/&prev=search]参考文献[/url]
設定情報 [code] [hide={TEXT1;optional}]{TEXT2}[/hide] [/code]
コード情報 [code] <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> [/code]
警告はでます。 [quote] 警告 トークン {TEXT} が HTMLタグ 内で使用されています。XSS 攻撃を受ける可能性があり、セキュリティ上非常に危険です。 HTMLタグ 内ではより限定的な {SIMPLETEXT} または {INTTEXT} が使用されるべきです。 この危険性を十分承知した上でどうしてもトークン {TEXT} を HTMLタグ 内で使用したい場合は “はい” をクリックしてください。 [/quote]
説明情報 [code] 表示・非表示を切り替えます。[hide=説明文]本文[/hide] [/code]
今回の改修に伴う試験用の記述です。
[hide=説明文] 本文1 本文2 [/hide] [hide] 本文1 本文2 [/hide] [color=#FF0000]※H31.1.21 イグトランスさん導入ありがとうございました。[/color]
今回の改修に伴う試験用のコードです。
[code] [hide=説明文] 本文1 本文2 [/hide] [hide] 本文1 本文2 [/hide] [/code]
|
|
|
投稿記事 |
Posted: 2019年1月12日(土) 22:46 |
|
|
|
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
お世話になります。
イグトランスさん、ありがとうございます。
早速チャレンジ(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=最終実行速度比較が表示されます。]
山本さまはどんなコードを記述したのか、神の領域ですね。
お世話になります。
イグトランスさん、ありがとうございます。
早速チャレンジ(1回目の思考錯誤です)
[code] [hide={TEXT1;optional}]{TEXT2}[/hide] [/code]に設定変更して
[code] <dl aria-expanded="false" [color=#FF0000]class="codebox"[/color]> <dt> <a href="javascript:void(0)" [color=#FF0000]if ({TEXT1} == NULL) { {TEXT1} = 'ここをクリックすると内容が表示されます。' }; [/color] 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 = [color=#FF0000]{TEXT1}[/color]; topElement.setAttribute('aria-expanded', 'false'); }"> [color=#FF0000]{TEXT1}[/color] </a> </dt> <dd hidden> [color=#FF0000]{TEXT2}[/color] </dd> </dl> [/code]とコードを加工し登録すると、
[quote] 警告 トークン {TEXT} が HTMLタグ 内で使用されています。XSS 攻撃を受ける可能性があり、セキュリティ上非常に危険です。 HTMLタグ 内ではより限定的な {SIMPLETEXT} または {INTTEXT} が使用されるべきです。 この危険性を十分承知した上でどうしてもトークン {TEXT} を HTMLタグ 内で使用したい場合は “はい” をクリックしてください。 [/quote]というエラーが発生し、それを無視し突破して、
[code] [hide]test1[/hide] [hide=test2]test2[/hide] [/code]とテストするも、やっぱりうまく動きません。
試行錯誤というよりは暗中模索ですね。m(_ x _)m
とりあえずイグトランスさんの提示していただいた母体コードで稼働中です。
[code]<dl aria-expanded="false"[color=#FF0000] class="codebox"[/color]> <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> [color=#FF0000]{TEXT2}[/color] </dd> </dl> [/code]
※すいません。hideの記述にhideコードで非表示にすると、機能してしまうので、非表示機能は使用していません。
※ソートロジック大会の最終トピックは以下のコードで記述していますが、 [code][hide=最終実行速度比較が表示されます。][/code] 山本さまはどんなコードを記述したのか、神の領域ですね。
|
|
|
投稿記事 |
Posted: 2019年1月07日(月) 21:15 |
|
|
|
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
引用: ※class="codebox"は非表示エリアを網掛けする機能の様です。
そうなんです。omasuさんの掲示板のように、phpBBのスタイル次第ではそうなるようです。このフォーラムでもそうしたほうがいいとは思うのですが、そこまで対処できていません(将来なんとかするかも)。以前のhideも現状のように修飾がない表示だったと記憶しているので、最低限以前と同じ状態の再現はできているだろうと思っています。
引用: これなら[hide=説明文]{text}[/hide]の記述改修が可能かな?
と思ってしまいました。
なお[hide]タグ内の{text}は、
[hide={text1}]{text2}[/hide]というように、
番号付けができるので、試行錯誤してみます。
これについて調べていました。どうやら コード: [hide]{TEXT}[/hide] を コード: [hide={TEXT1;optional}]{TEXT2}[/hide] とすると、説明文が有っても無くてもOKになるようです。
[quote]※class="codebox"は非表示エリアを網掛けする機能の様です。[/quote]
そうなんです。omasuさんの掲示板のように、phpBBのスタイル次第ではそうなるようです。このフォーラムでもそうしたほうがいいとは思うのですが、そこまで対処できていません(将来なんとかするかも)。以前のhideも現状のように修飾がない表示だったと記憶しているので、最低限以前と同じ状態の再現はできているだろうと思っています。
[quote]これなら[hide=説明文]{text}[/hide]の記述改修が可能かな? と思ってしまいました。
なお[hide]タグ内の{text}は、 [hide={text1}]{text2}[/hide]というように、 番号付けができるので、試行錯誤してみます。[/quote]
これについて調べていました。どうやら[code][hide]{TEXT}[/hide][/code]を[code][hide={TEXT1;optional}]{TEXT2}[/hide][/code]とすると、説明文が有っても無くてもOKになるようです。
|
|
|
投稿記事 |
Posted: 2019年1月07日(月) 00:11 |
|
|
|
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
お世話になります。
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]というように、
番号付けができるので、試行錯誤してみます。
お世話になります。
omasuはphpBBのフォーラム原文から何とか改修し、 [SPOILER]を[hide]にするのが精一杯だったのですが、 それを進化させてしまうなんて、すごいですね!
自分のphpBB環境でもイグトランスさんのコードは動きました。
※class="codebox"は非表示エリアを網掛けする機能の様です。
以下がphpBB原文コードとomasuのコード、イグトランスさんのコードです。 比べて見るとすごい事が解ります。
phpBBフォーラムの原文コードです
[hide] [code] <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> [/code] [/hide]
omasuが原文をもとに改修したコードです
[hide] [code] <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> [/code] [/hide]
イグトランスさんのコード
[hide] [code] <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> [/code] [/hide]
これなら[hide=[color=#FF0000]説明文[/color]]{text}[/hide]の記述改修が可能かな? と思ってしまいました。
なお[hide]タグ内の{text}は、 [hide=[color=#FF0000]{text1}[/color]]{text2}[/hide]というように、 番号付けができるので、試行錯誤してみます。
|
|
|
投稿記事 |
Posted: 2019年1月06日(日) 13:31 |
|
|
|
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
返事まで時間が開きましてすみません。もう少し改良が必要だと考えていて、その準備をしていました。
- 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>
返事まで時間が開きましてすみません。もう少し改良が必要だと考えていて、その準備をしていました。
[list] [*]class="codebox"を削除。現在使用中のphpBBスタイルでは、これに対応するCSSの指定が特になかったため。 [*]クリック部分のメッセージを単に「ここをクリックすると内容が表示されます。」と「ここをクリックすると非表示にします。」のみに変更。 [*]表示・非表示の切り替えの実装方法をCSSのdisplayプロパティからHTMLのhidden属性に変更。 [*]切り換え部分のメッセージの書き換え処理に使用するプロパティをinnerHTMLからtextContentに変更。 [*]表示・非表示の状態をaria-expanded属性で明示。 [/list]
今回、最後のaria-expandedを追加しました。それ以外は前回の時点で変更しました。
[hide] [code] <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> [/code] [/hide]
|
|
|
投稿記事 |
Posted: 2019年1月06日(日) 00:38 |
|
|
|
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
お世話になります。
イグトランスさん、表示・非表示機能の組み込みありがとうございました。
他のトピックでも機能していることを確認しました。
これからもよろしくお願いいたします。
追伸:「少し変更しています」はTip:の記述だけでしょうか、興味深々です。
お世話になります。
イグトランスさん、表示・非表示機能の組み込みありがとうございました。
他のトピックでも機能していることを確認しました。
これからもよろしくお願いいたします。
追伸:「少し変更しています」はTip:の記述だけでしょうか、興味深々です。
[hide]
現在、[hide=[color=#FF0000]説明文[/color]]テキスト[/hide]のような、 ユーザー記述対応を試行錯誤しています。
[/hide]
|
|
|
投稿記事 |
Posted: 2018年12月23日(日) 10:25 |
|
|
|
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
ありがとうございます。早速組み込ませていただきました(その際、少し変更しています)。
引用: phpBBのバージョンアップの影響なのでしょうか?
ご迷惑をおかけして申し訳ありません。おそらくそのとおりです。以前のhideの組み込み方は未確認ですが、今回は紹介いただいたとおりphpBB本体の設定で追加しているので、当面は誤って使用不可能にしてしまうことは無いのではないかと考えています。
ありがとうございます。早速組み込ませていただきました(その際、少し変更しています)。
[quote]phpBBのバージョンアップの影響なのでしょうか?[/quote]
ご迷惑をおかけして申し訳ありません。おそらくそのとおりです。以前のhideの組み込み方は未確認ですが、今回は紹介いただいたとおりphpBB本体の設定で追加しているので、当面は誤って使用不可能にしてしまうことは無いのではないかと考えています。
|
|
|
投稿記事 |
Posted: 2018年12月22日(土) 23:01 |
|
|
|
|
|
お世話になります。
phpBB掲示板で表示・非表示を切り替える機能ですが、
以下の設定で復元が可能だと思います。(phpBB 3.2.4)
権限者にしかできないようなので組み込みをお願いします。
[ここをクリックすると内容が表示されます] [ここをクリックすると非表示にします]
引用:
[ACP_SHORT]に入り、
[投稿]タグ内の、
[BBCode]にある、
[BBCodeの追加]ボタンをクリックして、
[BBCode作成]領域に以下のコードを半角で入力してください。
コード:
[hide]{TEXT}[/hide]
※[/hide]が機能してしまうため全角で表示しています。
[HTML表現]領域に以下のコードを貼り付けしてください。
コード:
<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>
[ヘルプライン]領域に以下のような説明文を入力してください。
コード:
表示・非表示を切り替えます
[設定]内の、
[投稿画面で表示する]にチェックを入れてください。
h301223
イグトランスさん組み込みありがとうございました。
このphpBBのバージョンでは[code]内に[/hide]があると、
非表示の停止と勘違いして、機能してしまうようです。
[hide]{TEXT}[/hide]と全角で入力しました。
omasuBB掲示板で、実際の表示・非表示動作です
参考文献
お世話になります。
phpBB掲示板で表示・非表示を切り替える機能ですが、 以下の設定で復元が可能だと思います。(phpBB 3.2.4)
権限者にしかできないようなので組み込みをお願いします。
[hide] [quote]
[ACP_SHORT]に入り、
[投稿]タグ内の、
[BBCode]にある、
[BBCodeの追加]ボタンをクリックして、
[BBCode作成]領域に以下のコードを半角で入力してください。 [code] [hide]{TEXT}[/hide] [/code]※[/hide]が機能してしまうため全角で表示しています。
[HTML表現]領域に以下のコードを貼り付けしてください。 [code] <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> [/code]
[ヘルプライン]領域に以下のような説明文を入力してください。 [code] 表示・非表示を切り替えます [/code]
[設定]内の、
[投稿画面で表示する]にチェックを入れてください。
[/quote] [/hide]
[color=#FF0000]h301223 イグトランスさん組み込みありがとうございました。 このphpBBのバージョンでは[code]内に[/hide]があると、 非表示の停止と勘違いして、機能してしまうようです。 [hide]{TEXT}[/hide]と全角で入力しました。 [/color]
[url=http://omasu.sakura.ne.jp/phpbb3/viewtopic.php?f=6&t=267]omasuBB掲示板で、実際の表示・非表示動作です[/url]
[url=https://www.phpbb.com/community/viewtopic.php?t=2342161]参考文献[/url]
|
|
|
投稿記事 |
Posted: 2018年12月08日(土) 15:40 |
|
|
|
|
|
記事の件名: |
Re: 長いコードを本文に記述しないで済ませられないか? |
引用付きで返信する |
|
お世話になります。
8年ぶり?の投稿となります。 m(_w_)m
便利だった[hide][/hide]タグは、
もうなくなってしまったのでしょうか? (o!o)
通常は非表示で、クリックすると内容が表示される機能です。
過去ログを参照させていただいていますが、
[hide][/hide]と共に、コード全体が表示されています。 (v!v)
phpBBのバージョンアップの影響なのでしょうか?
よろしくお願いします。
お世話になります。
8年ぶり?の投稿となります。 m(_w_)m
便利だった[hide][/hide]タグは、 もうなくなってしまったのでしょうか? (o!o) 通常は非表示で、クリックすると内容が表示される機能です。
過去ログを参照させていただいていますが、 [hide][/hide]と共に、コード全体が表示されています。 (v!v)
phpBBのバージョンアップの影響なのでしょうか?
よろしくお願いします。
|
|
|
投稿記事 |
Posted: 2017年12月06日(水) 19:50 |
|
|
|
|
|
これいいですね。長いコードも投稿しやすくなります。
対応ありがとうございました。
これいいですね。長いコードも投稿しやすくなります。 対応ありがとうございました。
[hide=テスト][code]#N88BASIC Dim i As Long For i=32 To 126 Print Chr$(i); If (i Mod 16)=15 Then Print Next[/code][/hide]
|
|
|
投稿記事 |
Posted: 2005年11月04日(金) 22:32 |
|
|
|
|
|
お世話になります。
早速の対応ありがとうございます。
[hide]機能を「ソートロジック大会」に使用してみました。
大変、見やすくなったと感じます。
今までのコードが非常に目だっていたため、
高速スクロールで目的のコードを探そうとすると、
見逃す可能性はあるような気がします。
コード: ここをクリックするとコードが表示されます
フォント色や フォントサイズを変更する等の 策が必要となると思います。
あつかましいかもしれませんが、背景色または色が目立つような規定値か、
または、ボタンアイコンのようなものが表示できれば幸いです。
お世話になります。
早速の対応ありがとうございます。
[hide]機能を「ソートロジック大会」に使用してみました。
大変、見やすくなったと感じます。
今までのコードが非常に目だっていたため、 高速スクロールで目的のコードを探そうとすると、 見逃す可能性はあるような気がします。
[hide]ここをクリックするとコードが表示されます[/hide][code]ここをクリックするとコードが表示されます[/code]
[color=red]フォント色[/color]や[size=200]フォントサイズ[/size]を変更する等の 策が必要となると思います。
あつかましいかもしれませんが、背景色または色が目立つような規定値か、 または、ボタンアイコンのようなものが表示できれば幸いです。
|
|
|
投稿記事 |
Posted: 2005年11月04日(金) 22:16 |
|
|
|
|
|
お疲れ様です。>>山本さん
お疲れ様です。>>山本さん
|
|
|
投稿記事 |
Posted: 2005年11月04日(金) 17:12 |
|
|
|