長いコードを本文に記述しないで済ませられないか？

[omasu]

お世話になります。

　イグトランスさん、表示・非表示機能の組み込みありがとうございました。

他のトピックでも機能していることを確認しました。

これからもよろしくお願いいたします。

追伸：「少し変更しています」はＴｉｐ：の記述だけでしょうか、興味深々です。

[ここをクリックすると内容が表示されます]

　

[イグトランス]

返事まで時間が開きましてすみません。もう少し改良が必要だと考えていて、その準備をしていました。

• class="codebox"を削除。現在使用中のphpBBスタイルでは、これに対応するCSSの指定が特になかったため。
• クリック部分のメッセージを単に「ここをクリックすると内容が表示されます。」と「ここをクリックすると非表示にします。」のみに変更。
• 表示・非表示の切り替えの実装方法をCSSのdisplayプロパティからHTMLのhidden属性に変更。
• 切り換え部分のメッセージの書き換え処理に使用するプロパティをinnerHTMLからtextContentに変更。
• 表示・非表示の状態をaria-expanded属性で明示。

今回、最後のaria-expandedを追加しました。それ以外は前回の時点で変更しました。

[ここをクリックすると内容が表示されます]

[omasu]

お世話になります。

　ｏｍａｓｕはｐｈｐＢＢのフォーラム原文から何とか改修し、
　［ＳＰＯＩＬＥＲ］を［ｈｉｄｅ］にするのが精一杯だったのですが、
　それを進化させてしまうなんて、すごいですね！

自分のｐｈｐＢＢ環境でもイグトランスさんのコードは動きました。

　※class="codebox"は非表示エリアを網掛けする機能の様です。

以下がｐｈｐＢＢ原文コードとｏｍａｓｕのコード、イグトランスさんのコードです。
比べて見るとすごい事が解ります。

phpBBフォーラムの原文コードです

[ここをクリックすると内容が表示されます]

ｏｍａｓｕが原文をもとに改修したコードです

[ここをクリックすると内容が表示されます]

イグトランスさんのコード

[ここをクリックすると内容が表示されます]

これなら［ｈｉｄｅ＝説明文］｛ｔｅｘｔ｝［／ｈｉｄｅ］の記述改修が可能かな？
と思ってしまいました。

なお［ｈｉｄｅ］タグ内の｛ｔｅｘｔ｝は、
［ｈｉｄｅ＝｛ｔｅｘｔ１｝］｛ｔｅｘｔ２｝［／ｈｉｄｅ］というように、
番号付けができるので、試行錯誤してみます。
　

[イグトランス]

※class="codebox"は非表示エリアを網掛けする機能の様です。

そうなんです。omasuさんの掲示板のように、phpBBのスタイル次第ではそうなるようです。このフォーラムでもそうしたほうがいいとは思うのですが、そこまで対処できていません（将来なんとかするかも）。以前のhideも現状のように修飾がない表示だったと記憶しているので、最低限以前と同じ状態の再現はできているだろうと思っています。

これなら［ｈｉｄｅ＝説明文］｛ｔｅｘｔ｝［／ｈｉｄｅ］の記述改修が可能かな？
と思ってしまいました。

なお［ｈｉｄｅ］タグ内の｛ｔｅｘｔ｝は、
［ｈｉｄｅ＝｛ｔｅｘｔ１｝］｛ｔｅｘｔ２｝［／ｈｉｄｅ］というように、
番号付けができるので、試行錯誤してみます。

これについて調べていました。どうやら

コード: 全て選択

[hide]{TEXT}[/hide]

を

コード: 全て選択

[hide={TEXT1;optional}]{TEXT2}[/hide]

とすると、説明文が有っても無くてもOKになるようです。

[omasu]

お世話になります。

　イグトランスさん、ありがとうございます。

早速チャレンジ（１回目の思考錯誤です）

コード: 全て選択

[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=最終実行速度比較が表示されます。]

　山本さまはどんなコードを記述したのか、神の領域ですね。

[omasu]

お世話になります。

　［ｈｉｄｅ＝説明文］本文［／ｈｉｄｅ］という記述にとりあえず対応しました。

チャレンジ（２回目の思考錯誤です）

※まだ最終形ではありません。
　{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=説明文]
　本文１
　本文２
[/hide]
[hide]
　本文１
　本文２
[/hide]

[イグトランス]

その問題について考えていました。そうしたら、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?}でも良いという記述を発見したので、今回からそうしています。

[omasu]

お世話になります。

　イグトランスさん導入ありがとうございます。m(_ w _)m

　そうですよね。
　｛ＴＥＸＴ１｝［ここをクリックすると内容を表示します。］と、
　｛ＴＥＸＴ１｝［ここをクリックすると非表示にします。］が、
　前後はどちらか迷いますが、通常の表記方法ですよね。

　イグトランスさんに示唆していただいたｐｈｐＢＢサイトの基本構造でもこの方式てす。
　ｐｈｐＢＢサイト　ＢＢコードのＳＰＯＩＬＥＲの記述マニュアルへジャンプ　（戻るボタンで戻ってこれます。）

　このｐｈｐＢＢサイトのコードを製表すると以下になります。 [ここをクリックすると内容が表示されます]

　※早速、取り込みしました。

　このコードをｏｍａｓｕ流にアレンジすると以下になります。 [ここをクリックすると内容が表示されます]

　※これにより、ＢＢｃｏｄｅ登録時のトークンエラーは発生しなくなりました。

　ＢＢｃｏｄｅの作成領域はイグトランスさんに提起していただいた｛ＴＥＸＴ１？｝を使いました。

コード: 全て選択

[hide={TEXT1?}]{TEXT2}[/hide]

　ヘルプライン領域は以下にしました。

コード: 全て選択

表示・非表示を切り替えます。[hide]本文[/hide] または [hide=説明文]本文[/hide]

追伸：｛ＴＥＸＴ１｝の入力がなければ［ここをクリックすると内容を表示します。］を表示して、
　　　入力があれば｛ＴＥＸＴ１｝を表示にするのは今後の課題とします。

　　　※｛ＴＥＸＴ１｝がＮＵＬＬであれば｛ＴＥＸＴ１｝に”［ここをクリックすると内容を表示します。］”を代入できれば、
　　　　解決するのですが・・・

よろしくお願いします。

追伸２：参考ですが、［class="codebox"］についてｐｈｐＢＢ内部を調べてみました。
　　　　フォルダ名［phpBB3\styles\prosilver\theme］
　　　　ファイル名［colours.css］
　　　　

このファイルの中に以下の記述がありました。 [ここをクリックすると内容が表示されます]

コード: 全て選択

<div class="codebox">
を
<div style="background-color: #FFFFFF; border:1px solid #C9D2D8;">
にしても一応動作しました。※ボーダーが機能しないので記述を変更しました。

<div・・・>の行の前に<br>改行が欲しいな、とも思いました。

　

[omasu]

お世話になります。

　表示・非表示機能の構築ですが、
　｛ＴＥＸＴ１｝　［ここをクリックすると内容を表示します。］と、
　｛ＴＥＸＴ１｝　［ここをクリックすると非表示にします。］＋本文を、
　最終形としたいと思います。

　思考錯誤して試験をしてきましたが、上記の表現が最もわかりやすいと感じました。

［ＢＢｃｏｄｅ作成］領域です。

コード: 全て選択

[hide={TEXT1?}]{TEXT2}[/hide]

［Ｈｔｎｌ表現］領域は２点を思考錯誤しました。
　

一つ目のコードは以下になります。 [ここをクリックすると内容が表示されます]

　

二つ目のコードは以下になります。 [ここをクリックすると内容が表示されます]

　
一つ目のほうが解りやすいと思いましたが、
ロジックとしては、二つめのほうが良いと感じたので、
二つめを採用することにしました。

ヘルプライン領域は以下にしました。

コード: 全て選択

表示・非表示を切り替えます。[hide]本文[/hide] または [hide=説明文]本文[/hide]

イグトランスさん、大変お世話になりました。

omasuBB掲示板での表示・非表示機能です。