ab.com コミュニティ

ActiveBasicを通したコミュニケーション
現在時刻 - 2019年1月19日(土) 04:36

All times are UTC+09:00




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

登録日時: 2005年9月02日(金) 22:15
記事: 94
住所: 静岡県焼津市
お世話になります。

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

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

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

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

 


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

登録日時: 2005年5月31日(火) 17:59
記事: 898
住所: 東京都
返事まで時間が開きましてすみません。もう少し改良が必要だと考えていて、その準備をしていました。
  • 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
記事: 94
住所: 静岡県焼津市
お世話になります。

 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
記事: 898
住所: 東京都
引用:
※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
記事: 94
住所: 静岡県焼津市
お世話になります。

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

早速チャレンジ(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
記事: 94
住所: 静岡県焼津市
お世話になります。

 [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]
今回の改修に伴う試験用の記述です。

今回の改修に伴う試験用のコードです。
コード:
[hide=説明文]
 本文1
 本文2
[/hide]
[hide]
 本文1
 本文2
[/hide]


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

All times are UTC+09:00


オンラインデータ

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


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

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