ab.com コミュニティ

ActiveBasicを通したコミュニケーション
現在時刻 - 2024年3月29日(金) 03:07

全ての表示時間は UTC+09:00 です




新しいトピックを投稿する  トピックへ返信する  [ 24 件の記事 ]  ページ移動 1つ前へ 1 2
作成者 メッセージ
投稿記事Posted: 2018年12月23日(日) 10:25 
オフライン

登録日時: 2005年9月02日(金) 22:15
記事: 96
お世話になります。

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

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

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

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

 

_________________


通報する
ページトップ
投稿記事Posted: 2019年1月06日(日) 00:38 
オフライン

登録日時: 2005年5月31日(火) 17:59
記事: 899
お住まい: 東京都
返事まで時間が開きましてすみません。もう少し改良が必要だと考えていて、その準備をしていました。
  • class="codebox"を削除。現在使用中のphpBBスタイルでは、これに対応するCSSの指定が特になかったため。
  • クリック部分のメッセージを単に「ここをクリックすると内容が表示されます。」と「ここをクリックすると非表示にします。」のみに変更。
  • 表示・非表示の切り替えの実装方法をCSSのdisplayプロパティからHTMLのhidden属性に変更。
  • 切り換え部分のメッセージの書き換え処理に使用するプロパティをinnerHTMLからtextContentに変更。
  • 表示・非表示の状態をaria-expanded属性で明示。
今回、最後のaria-expandedを追加しました。それ以外は前回の時点で変更しました。


通報する
ページトップ
投稿記事Posted: 2019年1月06日(日) 13:31 
オフライン

登録日時: 2005年9月02日(金) 22:15
記事: 96
お世話になります。

 omasuはphpBBのフォーラム原文から何とか改修し、
 [SPOILER]を[hide]にするのが精一杯だったのですが、
 それを進化させてしまうなんて、すごいですね!

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

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

以下がphpBB原文コードとomasuのコード、イグトランスさんのコードです。
比べて見るとすごい事が解ります。

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


omasuが原文をもとに改修したコードです


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


これなら[hide=説明文]{text}[/hide]の記述改修が可能かな?
と思ってしまいました。

なお[hide]タグ内の{text}は、
[hide={text1}]{text2}[/hide]というように、
番号付けができるので、試行錯誤してみます。
 

_________________


通報する
ページトップ
投稿記事Posted: 2019年1月07日(月) 00:11 
オフライン

登録日時: 2005年5月31日(火) 17:59
記事: 899
お住まい: 東京都
引用:
※class="codebox"は非表示エリアを網掛けする機能の様です。
そうなんです。omasuさんの掲示板のように、phpBBのスタイル次第ではそうなるようです。このフォーラムでもそうしたほうがいいとは思うのですが、そこまで対処できていません(将来なんとかするかも)。以前のhideも現状のように修飾がない表示だったと記憶しているので、最低限以前と同じ状態の再現はできているだろうと思っています。
引用:
これなら[hide=説明文]{text}[/hide]の記述改修が可能かな?
と思ってしまいました。

なお[hide]タグ内の{text}は、
[hide={text1}]{text2}[/hide]というように、
番号付けができるので、試行錯誤してみます。
これについて調べていました。どうやら
コード:
[hide]{TEXT}[/hide]
コード:
[hide={TEXT1;optional}]{TEXT2}[/hide]
とすると、説明文が有っても無くてもOKになるようです。


通報する
ページトップ
投稿記事Posted: 2019年1月07日(月) 21:15 
オフライン

登録日時: 2005年9月02日(金) 22:15
記事: 96
お世話になります。

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

早速チャレンジ(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=最終実行速度比較が表示されます。]
 山本さまはどんなコードを記述したのか、神の領域ですね。

_________________


通報する
ページトップ
投稿記事Posted: 2019年1月12日(土) 22:46 
オフライン

登録日時: 2005年9月02日(金) 22:15
記事: 96
お世話になります。

 [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]

_________________


最後に編集したユーザー omasu [ 2019年1月25日(金) 14:54 ], 累計 2 回

通報する
ページトップ
投稿記事Posted: 2019年1月21日(月) 01:09 
オフライン

登録日時: 2005年5月31日(火) 17:59
記事: 899
お住まい: 東京都
その問題について考えていました。そうしたら、TEXT1は常に表示するするので、
コード:
<a onclick="…"><span>ここをクリックすると内容を表示します。</span>{TEXT1}</a>
として、<span>ここをクリックすると内容を表示します。</span>の部分だけをJavaScriptで制御すれば良いことに気付きました。

ただ、そのことに気付いたのはtextContentの書き換えを完全にやめる(テキストをすべてHTMLで記述しておき、JavaScriptではhidden属性の制御に徹する)方式で実装した後だったので、結局この方式で、フォーラムに適用しました。
また、phpBBがBBCode処理に使っているライブラリの説明Custom BBCode syntax - s9e\TextFormatterを読んだところ、{TEXT1;optional}は{TEXT1?}でも良いという記述を発見したので、今回からそうしています。


通報する
ページトップ
投稿記事Posted: 2019年1月21日(月) 19:29 
オフライン

登録日時: 2005年9月02日(金) 22:15
記事: 96
お世話になります。

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

 そうですよね。
 {TEXT1}[ここをクリックすると内容を表示します。]と、
 {TEXT1}[ここをクリックすると非表示にします。]が、
 前後はどちらか迷いますが、通常の表記方法ですよね。

 イグトランスさんに示唆していただいたphpBBサイトの基本構造でもこの方式てす。
 phpBBサイト BBコードのSPOILERの記述マニュアルへジャンプ (戻るボタンで戻ってこれます。)


 ※早速、取り込みしました。  ※これにより、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]
    
コード:
<div class="codebox">
を
<div style="background-color: #FFFFFF; border:1px solid #C9D2D8;">
にしても一応動作しました。※ボーダーが機能しないので記述を変更しました。

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

_________________


通報する
ページトップ
投稿記事Posted: 2019年1月25日(金) 00:26 
オフライン

登録日時: 2005年9月02日(金) 22:15
記事: 96
お世話になります。

 表示・非表示機能の構築ですが、
 {TEXT1} [ここをクリックすると内容を表示します。]と、
 {TEXT1} [ここをクリックすると非表示にします。]+本文を、
 最終形としたいと思います。

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

[BBcode作成]領域です。
コード:
[hide={TEXT1?}]{TEXT2}[/hide]
[Htnl表現]領域は2点を思考錯誤しました。
     
一つ目のほうが解りやすいと思いましたが、
ロジックとしては、二つめのほうが良いと感じたので、
二つめを採用することにしました。

ヘルプライン領域は以下にしました。
コード:
表示・非表示を切り替えます。[hide]本文[/hide] または [hide=説明文]本文[/hide]
イグトランスさん、大変お世話になりました。

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

_________________


通報する
ページトップ
期間内表示:  ソート  
新しいトピックを投稿する  トピックへ返信する  [ 24 件の記事 ]  ページ移動 1つ前へ 1 2

全ての表示時間は UTC+09:00 です


オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[10人]


トピック投稿:  可
返信投稿:  可
記事編集: 不可
記事削除: 不可
ファイル添付: 不可

検索:
ページ移動:  
Powered by phpBB® Forum Software © phpBB Limited
Japanese translation principally by ocean