てがろぐ - Fumy Otegaru Memo Logger -

「続きを読む」ボタンを開いたあとの「畳む」ボタンを上に置きたいという要望を出していた者です。
今回Ver4.6.1.から<details>での折り畳み機能が実装されたことで実現できました。
いつもサポートしていただいている感謝のお気持ちも兼ねて、ささやかながら投げ銭させていただきました。いつもありがとうございます。

No.5187で質問をした者です。
確認が遅れまして申し訳ありません。ご回答ありがとうございます！
ご指摘いただいた通り、Perlのバージョンが5.8.9になっておりました。
既に対応版をリリースしていただいているとのことでしたので、5.8.9環境のままでバージョンアップを試してみた所無事に4.6にバージョンアップすることが出来ました。動作対象外と言われてもおかしくない所、ご対応いただきましてありがとうございます…！

Perlを古いバージョンのまま使用するのも問題がありそうですし、改めて「標準のPerl[推奨]」に設定を変更しておきました。
この度は本当にありがとうございました。

5197です。

>>5199
>>5200
お返事ありがとうございます（まとめてで申し訳ございません）。

5197の説明があまりうまくなくて申し訳ございません。
親カテゴリpictの子カテゴリとして、A,B,Cがあるとします。
このときスキンで[INCLUDE:pict] と記載したら
◎A
カテゴリAのサイトマップやスキンで設定しているサムネ等
◎B
カテゴリAのサイトマップやスキンで設定しているサムネ等
◎C
カテゴリAのサイトマップやスキンで設定しているサムネ等

…という風に『pictカテゴリに属するものがごちゃまぜで表示されるのではなく』、『親カテゴリ（pict）の下にある子カテゴリごとに表示する』ようなイメージです。
確かににししさんが疑問に抱かれているとおり、スキンに[INCLUDE:pict] を記載する必要はあります。
しかし今後カテゴリが増えたとしても子カテゴリごとに分けて表示をするイメージですので新たにカテゴリを増やしたとしてもその分追加して表示されるイメージです（伝わりにくかったら申し訳ございません）。
随時埋め込み用のURLを記載する必要はありません。

新着投稿リストについてなのですが、通常の更新履歴の部分で現在使用しております（日付・タイトル・カテゴリ）。それとは別で特定のカテゴリの日付のみを表示したいのです。
その日付を表示する箇所がメニューのところでして（ info pict 落書き（MM/DD）のように）。
 [[LATESTLIST:CAT(カテゴリID)]]では通常の更新履歴で使っているタイトル・カテゴリの部分が余分だと感じます。
[[INFO:LATESTPOSTDATE]]はカテゴリ表示が出来ず、またYYYY/MM/DDあるいはMM/DDだけで良いので時間の部分が余分だと感じております。
 [[LATESTLIST:CAT(カテゴリID)]]の所に掲載される項目について『今のところ、スキン側では指定できません（将来対応予定）。』とあるので将来を待つしかと思いました。
また『カテゴリ限定のパラメータを付けたURLにJavaScriptでアクセスして合成する』ですが、新たにスキンを作れば確かに可能だとはおもいます。
ただこれは個人の感じ方なのですが、新たにスキンを作成することも、それの管理をするのも少し手間だなと感じてとっかかりにくいところがあります（勿論個人の意見なので、苦に感じない人もおりますし、なるべく簡単にしたいなと強く思っておりますので…）。

なるほど、標準で搭載してしまうと機能拡張をしたい人へのハードルがあがることやカスタマイズが却って難しくなるデメリットがあったのですね。その部分については確かにそうだと思いました。
それなら確かにこのままの方が長い目で見たときに良いのだろうなと思います。

ご質問とご提案と考えを教えていただきありがとうございました。
もしも他に「こういうアプローチの仕方があるよ」等ありましたら教えていただければとても嬉しいです。

カテゴリA+下げる投稿はカテゴリ限定でのみ表示したい
カテゴリB+下げる投稿はカテゴリ限定、日時指定、検索結果に表示したい

この場合ってなにかいじれば可能でしょうか……？

Ver 4.6.1の折り畳み記法で毎回ラベルを入れなければいけないのが面倒だから隠す記法と同じように使いたいな…と思って要望を書きに来たら、既に>>5192さんが同じ内容を投稿されてる上にもう新しいβ版で反映されていて驚きました。私も早速Ver 4.6.2にアップデートしました。5192さんとは別人ですがありがとうございます！

私は折り畳み記法にjavascriptとcssで開閉状況に応じてラベルが変わるカスタマイズをしてます。
折り畳まれているボタンをクリックして展開するとボタンのラベルが「閉じる」に変化し、展開された領域を折り畳むとラベルが「続きを読む」などの展開前のものに戻ります。同じことをしたい人がいましたら参考までに。

外側スキンの遅延読み込みスクリプト群に追加

//折り畳み記法の部分に「閉じる」ラベルを追加
document.addEventListener("DOMContentLoaded", function() {
    // decorationO クラスを持つ details 要素を取得
    document.querySelectorAll("details.decorationO > summary").forEach(summary => {
        // 既に foldlabelClose がない場合のみ追加
        if (!summary.querySelector(".foldlabelClose")) {
            let closeSpan = document.createElement("span");
            closeSpan.className = "foldlabelClose";
            closeSpan.textContent = "閉じる";
            summary.appendChild(closeSpan);
        }
    });
});

スキン用cssに追加

/* 開いている状態の時に「続きを読む」を消す */
details[open] .foldlabel {
  display: none;
}

/* 閉じている状態の時に「閉じる」を消す */
details:not([open]) .foldlabelClose {
  display: none;
}

先月に公開した Ver 4.6.0 正式版の配布ZIPの中身も、古いPerl対応版に差し替えました。

No.5189に書いた通り、お使いのサーバにインストールされているPerlのバージョンが古い場合(Perl 5.10未満の場合)に限って、てがろぐCGIを Ver 4.6.0 にバージョンアップすると「500 Internal Server Error」になってしまう問題がありました。（※正確には Ver 4.5.3β～4.6.1βのバージョンで発生していました。）
Perlのバージョンを 5.10.x 以上にすることで正常稼働するようになりますが、他に稼働させているCGIの都合等でPerlのバージョンを上げられない場合のために、Perl 5.10未満でも正常稼働するよう修正しましたので、先程 Ver 4.6.0 のZIPも差し替えました。

先月から本日までの間に、TegUp等を使ってバージョンアップした結果「500 Internal Server Error」が出たのでバージョンダウンした、という方は、再度TegUp等でバージョンアップしてみて下さい。今は問題なくバージョンアップできるハズです。

※注意：既に Ver 4.6.x がエラーなく動作している方々は、何もする必要はありません。（差し替えたZIPに収録しているファイルは、問題箇所を書き換えただけで、機能面ではまったく同じですので。）

具体的な原因と対処の余談

具体的には、$value = Ⓐ // Ⓑ;という記述で「ⒶがundefだったらⒷを代入する」という意味になる『defined-or演算子』が Perl 5.10 から導入された書き方だったために、Perl 5.10未満ではエラーになっていたのでした。この書き方を使っていたのは1箇所だけでしたので、そこを $value = defined Ⓐ ? Ⓐ : Ⓑ のような、以前から使用可能な書き方に改めただけです。

>>5197

新着投稿リストの掲載対象をスキン側で限定する方法（掲載する対象を選択）
https://www.nishishi.com/cgi/tegalog/custom/#customize...
この方法ではいけませんか…？

こんにちわ。
>>5192の折畳ラベルについて書いた者です。
も、もうアップデートされてる！？とびっくりしました！
さっそくバージョンアップさせていただきました。
更に使いやすくなり、嬉しい限りです。
これからもてがろぐライフを楽しみたいと思います。
ありがとうございました！

続きを読む

てす

ラベル

折り畳まれる内容

てがろぐにはいつもお世話になっています。
折り畳み（[O:～）機能なのですが、機能ボタンを使った時、隠す（[H:～）機能と同じくラベル入力なしでも挿入できるようにしてもらえると嬉しいです。
毎回ラベルを変える訳でもなくデフォルトで入るラベルで充分なので…
それなら隠す機能でいいのでは？と言われてしまいそうですが、これは私の都合でしかないのですが、てがろぐ外の自サイトで同じ折り畳みタグを多用しているので合わせたいのもありまして。
（ですのでてがろぐで折り畳み機能が追加されてめちゃくちゃ嬉しかったです！）
もし何か理由あってのラベル必須項目なら申し訳ないです。

>>5189
 No.5178の者です、お返事ありがとうございます。確認が遅れ大変失礼いたしました。
個人的には30MB以上のデータサイズでも対応できるようにして頂けるならありがたいのですが、サーバーへの負荷や操作ミスのリスクを考えると難しいところですね…
今後大きなサイズのイラストを投稿するときはFTPを利用するようにします。
お忙しい中お手数をおかけしました。

No.5181の日付についての質問をした者です。
無事にやりたかった動きになりました。にしし様、5185様、本当にありがとうございました！

てがろぐCGIを Ver 4.6.0 等にバージョンアップした結果として 500 Internal Server Error になる場合：
（※Ver 4.5.3β以降で発生します。）

もし、サーバのコントロールパネルからPerlのバージョンを切り替えられる場合で、切り替えても問題ないなら、Perl 5.10.x 以降のバージョンにして下さい。そうすると、正常稼働するようになります。
例えば、さくらインターネットのサーバなら下記の場所（コントロールパネル→スクリプト設定→言語バージョン設定）で切り替えられます。特に不都合がなければ『標準のPerl[推奨]』に切り替えると望ましいですが、最低でもPerl 5.10 以上にすれば問題ありません。

なお、他に稼働させているCGIの都合でPerlのバージョンを上げられない場合は、次に公開するてがろぐの新バージョンをお待ち下さい。こちらのローカルにあるソースでは、Perl 5.10.x 未満でエラーになる記述を修正しましたので、次のバージョンからは Perl 5.8.9 のような古いPerlでも正常稼働するようになります。

※Ver 4.5.3β以降で発生していた問題なので、この間に 4.5.3、4.5.4、4.5.5、4.5.6、4.5.7 のβ版を挟んでいたわけですが、全く報告がなかったことからして、β版をご試用の方々はみなさんわりと新しいバージョンをご使用ということなんでしょうね。(^_^;) 私もそういえば、Perl 5.8.9では動作確認をしていませんでした。

はじめまして。
自サイトの方で一言ツール＋簡易イラスト置き場として「てがログ」を利用させていただいている者です。PCからもスマホからも手軽に更新できるのが便利で凄く重宝しております。素敵なスクリプトをありがとうございます！

現在てがろぐ4.5を使用しているのですが、4.6へのアップデートを行うと500エラーが表示されるようになってしまいました。
Tegupでの自動バージョンアップ、最新版をサイトから落としてきてFTPソフトで上書きする方法の両方を試しましたがどちらも500エラーになります。Tegupでは正常にバージョンアップが完了しましたという表示が出たあと、サイトに戻るとエラー画面となります。
cgiやphp部分の改造は特に行っておらずスキンまわりを弄っているだけなのですが（外部から「いいねボタン・改」というスクリプトを引っ張ってきていますがスキンに表示を追加するのみの調整です）、500エラーが出る原因となりそうな箇所などもしありましたらご教授いただけますでしょうか。

下記が実際に設置しているURLとなります。お忙しい中恐縮ですが、どうぞよろしくお願いいたします。
（設置先はさくらインターネットになります）
https://blue-black.sakura.ne.jp/blue/tega/tegalog.cgi

シューアイスを食べようかな……どうしようかな……と迷って、腹の脂肪具合と相談して、とりあえず見送りました。_(:3」∠)_

🧊Re:5185◆おぉ、それはスマートなアルゴリズムですね！ たしかに、JavaScriptが解釈しやすい日付フォーマットでdata-属性に出力しておいて現在日時と比較する方法なら、てがろぐの現状の仕様だけで簡単に（任意の）経過時間が計算できますね。

というわけで、No.5181さんは、ぜひ以下の手順で試してみて下さい。
--- ▼Step①: ---
まず、内側スキンで相対時刻を掲載したい箇所に
<span data-published="[[DATE:Y-M-D]]T[[DATE:h:m:s]]">[[DATE:《A》]]</span>
……と書いておきます。
（※data-published属性値は ISO 8601 のローカル時刻形式「YYYY-MM-DDThh:mm:ss」になるようにしています。）

--- ▼Step②: ---
次に、外側スキンに『日時情報を比較して非表示にするJavaScript』を書きます。
具体的には、このリンク先で閲覧できるChatGPTとの一連の会話をご覧下さい。
この会話の最後に提示されているソース（全20行）をコピー＆ペーストして使って下さい。（注：最初のソースではなく最後のソースです。）
（なぜISO 8601フォーマットにしたのかの理由が会話の途中で分かります。^^;）
実際の動作テストはしていないのですが、JavaScriptソースを読んだ限りではいけそうな気がします。
なお、「24時間」の閾値を変更したい場合は、ソース中の if (diffHours >= 24) の「24」の部分を修正すれば良いです。

投稿時間から24時間以上経過した場合に非表示にするだけだったら
javascriptで内側スキンに日時を表示するspan要素に相対時間表示（[[DATE:A]]）を入れて、
span要素にdata属性でdata-publishedなどの中に[[DATE:Y/M/D W h:m]]などを与える

現在時刻をnew Dateで作った後data-publishedに与えた日時と比較して24時間(60*60*24=86400秒)以上だったら
style属性にdisplay:noneを付与する（または最初にnone属性を与えておいてblockに変更する）とかでも実装できそうかなと思いました
実際のコードは書いてないのであくまでも考えてみただけですが……

あいうえお

tesuto
(Loading...)...

SkebへのカードリンクがダメなのってSkeb側の仕様なんですかね……

検索して探したのですがなかなか見つからなかったので、こちらにて失礼します。経過時間(相対時間)表記機能について質問です。[[DATE:《A》]] を使ってn秒前やm分前という表示を24時間以内の時だけ表示させ、24時間を過ぎたら非表示にしたいのですが、この場合はどこを設定すればできますか？
経過時間の表記変更は設定の項目でできる事は分かったのですが、一定時間後に非表示にするなどの方法が探してもなかなか見つからなくこちらで質問させて頂きました。
お忙しいところ恐れ入りますが何卒よろしくお願い致します。

5174/5176です。要望、ご検討いただきありがとうございます。

また、余談とのことでしたが、具体的な対応策を詳細にご教示いただき、ありがとうございました。何度も読み返させていただきました。

少し前に、同じく手作業で1000件ほど、SNSの投稿データをてがろぐに移動させたことがあったものですから、300件くらいなら…と、感覚が麻痺してしまっていたような状態でした。
でも、やはり何かしら効率化は【できる】し、恐らく自分の勉強のために、【やるべき】でもあるのだなと猛省いたしました。ご想像のとおり、プログラミング言語やAIとは縁遠い人生でしたので、これを機にもう少し、勉強してみようと思います。

この度は色々とお時間を割いていただき、誠にありがとうございました。

5174です。ご返信痛み入ります。
先の投稿があまりにも言葉足らずだったなと反省しましたので、背景情報を補足させていただきます。

・今回やりたかったこと: 既にブログとして稼働中＆公開中のてがろぐに、よそのブログから過去の投稿(300件ほど)を移設する
・移設元のブログにはエクスポート機能がない

件数が多いため、当初は tegalog.xml を編集する方法を考えましたが、上記の条件から、

・既にあるファイルをさわって壊してしまう不安
・そもそも移設元ブログから加工しやすい形でデータを取ってこれないため、それなら不慣れなテキストエディタでこわごわデータを加工するより、移設元ブログの記事編集画面とてがろぐの投稿画面を横に並べて、1投稿ずつ日時・タイトル・本文をそれぞれコピペで移す方が不安もなく、恐らくスピードもはやい
・さらに、てがろぐの「投稿の一括調整」をかければ、日付順に並べ替えて再採番もできる＝やりたいことはブラウザ上で全てかなう

ということで、今回は手作業で移設作業を行いました。

かなり特殊なケースかと思いますし、私自身は今回の作業は既に完了済みのため、どうしても今すぐ必要というわけではないのですが、今後また似たような作業が発生したときに(現在、あらゆるSNSやブログの投稿を、てがろぐ一箇所に集約しようと画策中のため)、もし日時ボタンが常時表示できるようになっていたら作業スピードを上げられそうだと思い、要望として書かせていただきました。

日々お世話になっております。
要望なのですが、投稿の入力欄の「日時」ボタンも、設定で「最初から展開しておく(常時表示)」ができるようになりますと非常に有難いです。
具体的な理由としましては、他ブログ等の投稿を複数手作業でインポートする際、毎回日時ボタンを展開する手間が省けるためです。

さらに可能であれば、たとえば日時が「2025/5/14 0:00:00」だった場合、自動でゼロ埋めして「2025/05/14 00:00:00」として投稿できる(エラーで弾かれない)ようになると、より助かります。

ご検討よろしくお願いいたします。

test

折り畳みテスト

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

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

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

折り畳み

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

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

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

入れ子にもできます

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

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

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

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

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>畳む

いつもてがろぐに大変お世話になってます。てがろぐ本体・tegupともに最新版にアップデートしました。何でも簡単入力ボタン機能がすごく便利です！

にししさんが>>5160内の5158さんへのレスで書かれている「半角英数1文字だけで検索するとJavaScriptソースが崩れてしまう」件、「続きを読む」ボタンのソースにも同様の影響が出ているようです。設定で「全文検索時でも隠す機能を有効にする」にチェックがついていても、半角英数1文字だけで検索すると「続きを読む」装飾で隠されている部分が全て表示された状態になります。半角英数2文字や全角1文字で検索すると設定通りに隠す機能が有効になるので、半角英数1文字だけの時に起こります。


もう1つ、この検索結果で続きを読むボタンのソースが変わることに関連して要望です。

私は画像拡大スクリプトにbaguetteBox.js を使用しており、commentクラスを対象に画像拡大スクリプトを実行するようにしています。この環境だと、検索キーワードに画像の拡張子が含まれる場合に、続きを読むボタンと画像拡大表示用スクリプトが衝突してしまいます。

【再現手順】※てがろぐデフォルトスキンで再現確認済み

続きを読む①baguetteBox.jsの配布元 からダウンロードしたzipのdistフォルダにある、baguetteBox.min.jsとbaguetteBox.min.cssを、てがろぐと同じディレクトリにアップロード

②てがろぐデフォルトスキンをテキストエディタで開き
外側スキンの<head>内に
<link rel="stylesheet" href="baguetteBox.min.css">

外側スキンの遅延読み込みスクリプト群の
[[JS:LIGHTBOX:JQ]]
を消して
   <script src="baguetteBox.min.js"></script>
   <script type="text/javascript">
   // comment クラスの中の画像リンクだけをbaguetteBox.jsの実行対象にする
   window.addEventListener('load', function() {
      baguetteBox.run('.comment');
   });
   </script>
と書いてアップロード

③適当な画像と、続きを読むボタンを含む投稿をする(画像は「続きを読む」で隠される部分でなくてもよい)

④新着画像リストに表示されている小さい画像をクリックするか、全文検索窓から「.png」「.jpg」など、記事内に存在する画像の拡張子をドットつきで検索をする
※「png」「.pn」「.j」のように画像の拡張子として不完全な文字列ではダメ

⑤検索結果画面にある記事の「続きを読む」ボタンをクリックした瞬間にbaguetteBox.jsが作動するが、画像ファイルのリンクではないので存在しない画像を読み込もうとし続ける畳む

普通に記事を表示した時は続きを読むボタンをクリックしてもbaguetteBox.jsは作動しないのですが、画像の拡張子が含まれる検索結果画面で続きを読むボタンをクリックした時にだけこの現象が起こります。

続きを読むボタンの<a>タグのリンク先は現在のURLの末尾に「#readmore」が付与されたものになりますが、
検索結果画面だと

https://example.com/tegalog/tegalog.cgi?q=.png#readmore

となるため、続きを読むボタンのリンク先URLに含まれる拡張子部分にbaguetteBox.jsが反応してしまうようです。
一応baguetteBox.js側の機能として、ignoreClassで指定したクラスを拡大表示処理の対象から除外することはできます。

【例】
   baguetteBox.run('.comment',{
         ignoreClass:'readmorebutton'
            }
         );

ただ、このignoreClassは1つしか指定できないので、続きを読むボタン(readmorebutton)を除外指定してしまうと、別の除外したいクラスが指定できなくなってしまうのです…。AIにbaguetteBox.jsのソースを読ませてignoreClassを複数指定する方法などを質問して色々試してみたりもしたのですが、やはり1つしか指定できない仕様のようです。

ちょうどignoreClassで指定したいクラスが出来て動作確認をしていた際、新着画像をクリックして見ていた時に気付きました。続きを読むボタンの<a>タグに検索キーワードを含めないようにして頂くことはできませんでしょうか。

>>5160
5153,5159です、お返事ありがとうございます。上書きスタイルシートの処理について解説していただき、納得できました。
スキンの作り方を変えて対応しようと思います。

あとリンク先のCloudflareの522エラーすみません…🙇
ドメインをCloudflareに移管したらこのエラーが頻発するようになってしまって調べながら設定いじっているのですが解消できず私も困ってます😅
数分置いて再アクセスすれば見れることがほとんどですがストレスですよね。
使っているCMSとの相性もあるのかと乗り換えも検討してますがなかなか時間が取れずしばらくはこのままです…😥