てがろぐ - Fumy Otegaru Memo Logger -

test

折り畳みテスト

テストだよ。
だよ。
だよ。
だよ。

Ver 4.6.1βアップデートしました。details＋summary要素の折り畳み機能実装嬉しいです！従来の[H:～]記法のボタンと同じような見た目になるCSSを追加して使ってみました。開閉アニメーションのjavascriptなども試してみようと思います。ありがとうございます！

開発進捗状況報告サイトで、てがろぐ Ver 4.6.1(β版)の配布を開始しました。ご自由にダウンロードしてご活用頂けます。お試し頂ければ幸いです。主に以下の点を搭載しています。

🆕 Ver 4.6.1βの更新点(概要)：
《▼新機能》
●指定範囲を(details＋summary要素で)折り畳んだ状態で表示する装飾記法 [O:ラベル:～] を追加。

《▼不具合修正》
❎検索語のハイライト機能を有効にしている状況で、全文検索で使う検索語の中に「半角の英数記号1文字だけの検索語」が含まれているときに、「続きを読む」機能や「OGPカード型リンク」の表示機能が使えなくなる不具合を修正。

詳しい使い方などは、上記の開発進捗状況報告ページの記事をご覧下さい。

🍘SNSでのアナウンス：
Mastodon(Pawoo)
Bluesky
Twitter：

（ツイート埋め込み処理中...）Twitterで見る

details要素＋summary要素で実現される「折り畳む」機能を搭載した Ver 4.6.1β(未配布)の動作テスト。

折り畳み

折り畳み表示のテスト
こんな感じで見えます。

ラベルはその都度指定します

もちろん、1投稿内にいくつでも書けます。

入れ子にもできます

ただし、details要素はspan要素等のインライン要素の内側に書くとHTMLの文法的に正しくなくなるため、そのように文字装飾を書いてしまうと直前のCSSが意図通りに適用されなくなる問題がある点に注意が必要です。

JavaScriptなしで動作する点も良いですね。装飾はCSS次第で好きなようにできます。
ここの動作試験場では、標準スキンにしか(まだ)CSSを用意していません。が、details要素＋summary要素はHTMLだけで動作しますから、CSSがなくても（単に装飾がないだけで）動作はします。

>>5168
修正ありがとうございます！お疲れ様です。
1行単位のフリースペース、私はあると助かります！

それと現在特定の自由装飾をjsでdetails+summayに変換して隠す機能の代わりに使ってるので、もし公式で実装されるとすごくすごく嬉しいです！！！

そういえば最近、クロワッサンを食べていないな……。🥐🥐🥐

🥐Re:5161◆ご要望の背景説明をありがとうございます。ご要望としては記録しておきますが、「最初の画面に任意の案内文を表示する機能」と「ログインフォームの下部に任意の案内文を表示する機能」の2つが既にある状況で、さらに上にも表示できるようにする機能を用意するのは、よほど需要がない限りはToDoリストの前方には来ないと思いますので、案内文面をどうにか工夫してご対処頂くのが現実的だろうと思います。

🥐Re:5162◆英数字1文字の検索でカード型リンクが表示されなくなる問題は（こちらのローカルにある版では）修正しましたので、次のバージョンでは解決します。公開までもうしばらくお待ち下さい。◆No.5150の詳細説明もありがとうございます。もしかして、下記のような「1行単位のフリースペース」的なものが別途存在したら便利でしょうかね？
sakura:さくら
tomoyo:ともよ
……のように登録しておくと、[[FREELINE:sakura]]の記述で「さくら」が出力されるような。既存のフリースペースを名前付きに改修するのはちょっと困難なのですが、短いリンクリストの掲載にフリースペースを使われているケースがちらほらありますので、そういうのに活用できる（1行単位で完結する）自由入力欄もあると便利なのかな……とちょっと考えてはいました（まだ何も予定はしていないのですけども）。そうすると、
link1name:ほげほげ
link1url:https://www.example.com/
link2name:ひげひげ
link2url:https://www.example.org/
のように書くだけで、リンクリストとして掲載できるようにスキンを作っておくこともできるかな……とか。まあ、この方法だと総数が可変長にはなりませんけども。^^;

🥐Re:5163◆いろいろ方法を試して下さってありがとうございました。そういった試行錯誤の過程が見られたからこそ、専用機能の実装を考えられた面もありますので、とてもありがたいです。Amazonギフト券もどうもありがとうございました！(╹◡╹)ﾉ

🥐Re:5164◆お役に立っているようで嬉しいです～。^^

🥐Re:5165◆お役立ちサイトなので、不届きなBotによるスクレイピングも多いのではないかと想像します。もしサーバ負荷が高まっていることが522エラーの要因になっているようなら、既にお使いなら良いのですけども、高頻度アクセス制限機能（迷惑Bot対策機能）がありますので、シビアな設定でお使いになるとサーバ負荷を多少は軽減できると思います。（※Durationの値が大きい方がペナルティ時間を長くできます。私の「今日のひとこと」では、今はDuration=600・LimitFreq=10を設定してあります。） 【追記】ああ、そうか。Cloudflareということは、CDNをお使いですかね？ もしそうだとしたら、この機能は併用できませんね。(^_^:) CDNから配信される場合は、アクセス元のIPアドレスが常に同じになりますので、IPベースではブロックできませんから。

🥐Re:5165◆情報をどうもありがとうございます！ たしかに、「全文検索時でも隠す機能を有効にする」がONのとき、半角英数字1文字だけを検索すると、続きを読む関連のJavaScriptの実行も妨げられてしまいますね。こちらのローカルにあるプログラムは修正しましたので、次のバージョンでは解消します。お知らせ下さってありがとうございました！
🥐Re:5166◆自己解決ありがとうございます。[Ctrl]＋[U]等で閲覧できるソースの方をご覧頂くと分かりますが、「続きを読む」ボタンのa要素にはURLは含まれていません。通常のページ内リンクと同様に、単に <a href="#readmore" ～ > のようになっているだけです。リンクの上にマウスポインタを載せてリンク先を確認するとURLが見えますが、それはブラウザ側が自動的に補完しているだけです。ただ、てがろぐ側の設定もいろいろありますので、もしかしたらURLが出力されるような状況もあるのかもしれませんが(^_^;)。もし本当にURLが出力されているようでしたら教えて下さい。そうでないなら、原因は別のところにありそうな気がします。（とはいえ、まさしく正攻法で自己解決なさっていますから、問題ないわけですけども。）

指定範囲を隠す機能を、現状の「a要素＋JavaScript」ではなく、「details＋summary要素」で出力できるオプションも用意した方が良いのかな、という気もします。（details要素はspan要素の内側には書けないので、文字装飾の入れ子構造によっては文法的に正しくなくなる懸念があるので実装は見送っていたのですけども、まあ「分かっている人だけが使ってくれれば良い」と考えることもできますしね……。）

5166です。たびたびすみません…。
5166後半の「画像拡張子で検索をした時に、続きを読むボタンを押すと画像拡大スクリプトが動作してしまう」件は、<a>タグのリンク先URLの末尾が画像の拡張子かどうかを先にjavascriptで判定してから画像拡大スクリプトを実行するようにしたら自己解決できました。お騒がせしました。
同じようなことをしたい方が他にいるかは不明ですが、一応解決方法を書いておきます。

続きを読む外側スキンに書く遅延読み込みスクリプト群を下記のコードにする。
baguetteBox.jsの動作除外用クラスに「uc-nomodal」を指定しています

<script src="baguetteBox.min.js"></script>
<script type="text/javascript">
window.onload = function() {
   // 画像拡張子の正規表現
   var imageExtensions = /\.(jpg|jpeg|png|gif|webp)$/i;
   // すべての `.comment` クラスを持つ `a` タグを取得
   var links = document.querySelectorAll('.comment a');

   // リンク先URL末尾が画像拡張子になっているリンクがあるかチェック
   var hasImageLinks = false;
      links.forEach(function(link) {
         if (imageExtensions.test(link.href)) {
            hasImageLinks = true;
         } else {
            // 末尾が画像拡張子じゃなければignoreClassで指定するものと同じ除外用クラスを追加
            link.classList.add('uc-nomodal');
         }
      });

   // リンク先URL末尾が画像拡張子の場合のみbaguetteBox.jsを実行、uc-nomodalクラスは除外
   if (hasImageLinks) {
      baguetteBox.run('.comment', {
         ignoreClass: 'uc-nomodal'
      });
   }
};
</script>畳む