ab.com コミュニティ https://www.activebasic.com/forum/ |
|
長いコードを本文に記述しないで済ませられないか? https://www.activebasic.com/forum/viewtopic.php?t=422 |
ページ 2 / 2 |
作成者: | omasu [ 2018年12月23日(日) 10:25 ] |
記事の件名: | Re: 長いコードを本文に記述しないで済ませられないか? |
お世話になります。 イグトランスさん、表示・非表示機能の組み込みありがとうございました。 他のトピックでも機能していることを確認しました。 これからもよろしくお願いいたします。 追伸:「少し変更しています」はTip:の記述だけでしょうか、興味深々です。 [ここをクリックすると内容が表示されます]
現在、[hide=説明文]テキスト[/hide]のような、 ユーザー記述対応を試行錯誤しています。 |
作成者: | イグトランス [ 2019年1月06日(日) 00:38 ] |
記事の件名: | Re: 長いコードを本文に記述しないで済ませられないか? |
返事まで時間が開きましてすみません。もう少し改良が必要だと考えていて、その準備をしていました。
[ここをクリックすると内容が表示されます]
コード: <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> |
作成者: | omasu [ 2019年1月06日(日) 13:31 ] |
記事の件名: | 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]というように、 番号付けができるので、試行錯誤してみます。 |
作成者: | イグトランス [ 2019年1月07日(月) 00:11 ] |
記事の件名: | Re: 長いコードを本文に記述しないで済ませられないか? |
引用: ※class="codebox"は非表示エリアを網掛けする機能の様です。
そうなんです。omasuさんの掲示板のように、phpBBのスタイル次第ではそうなるようです。このフォーラムでもそうしたほうがいいとは思うのですが、そこまで対処できていません(将来なんとかするかも)。以前のhideも現状のように修飾がない表示だったと記憶しているので、最低限以前と同じ状態の再現はできているだろうと思っています。引用: これなら[hide=説明文]{text}[/hide]の記述改修が可能かな?
これについて調べていました。どうやらと思ってしまいました。 なお[hide]タグ内の{text}は、 [hide={text1}]{text2}[/hide]というように、 番号付けができるので、試行錯誤してみます。 コード: [hide]{TEXT}[/hide]を コード: [hide={TEXT1;optional}]{TEXT2}[/hide]とすると、説明文が有っても無くてもOKになるようです。 |
作成者: | omasu [ 2019年1月07日(月) 21:15 ] |
記事の件名: | 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=最終実行速度比較が表示されます。]山本さまはどんなコードを記述したのか、神の領域ですね。 |
作成者: | omasu [ 2019年1月12日(土) 22:46 ] |
記事の件名: | 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]今回の改修に伴う試験用の記述です。 説明文 [ここをクリックすると内容が表示されます]
本文1 本文2 [ここをクリックすると内容が表示されます]
※H31.1.21 イグトランスさん導入ありがとうございました。
本文1 本文2 今回の改修に伴う試験用のコードです。 コード: [hide=説明文] 本文1 本文2 [/hide] [hide] 本文1 本文2 [/hide] |
作成者: | イグトランス [ 2019年1月21日(月) 01:09 ] |
記事の件名: | Re: 長いコードを本文に記述しないで済ませられないか? |
その問題について考えていました。そうしたら、TEXT1は常に表示するするので、 コード: <a onclick="…"><span>ここをクリックすると内容を表示します。</span>{TEXT1}</a>として、<span>ここをクリックすると内容を表示します。</span>の部分だけをJavaScriptで制御すれば良いことに気付きました。 ただ、そのことに気付いたのはtextContentの書き換えを完全にやめる(テキストをすべてHTMLで記述しておき、JavaScriptではhidden属性の制御に徹する)方式で実装した後だったので、結局この方式で、フォーラムに適用しました。 現在のhideコードです [ここをクリックすると内容が表示されます]
また、phpBBがBBCode処理に使っているライブラリの説明Custom BBCode syntax - s9e\TextFormatterを読んだところ、{TEXT1;optional}は{TEXT1?}でも良いという記述を発見したので、今回からそうしています。
コード: <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> |
作成者: | omasu [ 2019年1月21日(月) 19:29 ] |
記事の件名: | 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流にアレンジすると以下になります。 [ここをクリックすると内容が表示されます]
※これにより、BBcode登録時のトークンエラーは発生しなくなりました。コード: <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の作成領域はイグトランスさんに提起していただいた{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>改行が欲しいな、とも思いました。 |
作成者: | omasu [ 2019年1月25日(金) 00:26 ] |
記事の件名: | 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掲示板での表示・非表示機能です。 |
ページ 2 / 2 | 全ての表示時間は UTC+09:00 です |
Powered by phpBB® Forum Software © phpBB Limited https://www.phpbb.com/ |