お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。) RSSフィード

てがろぐ - Fumy Otegaru Memo Logger -

2025年5月22日(木) 13:27:07〔2日前〕 更新

( 5016

■フリースペース: 編集

ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン:標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキンてがろぐCGIの配布ページに戻る

■日付検索:

■全文検索:

or 管理画面へ

先頭固定(←ここの文字列も自由に変更可能。非表示にも設定可能)

情報 〔197文字〕 編集

No.1773 by NO IMAGE にしし 〔0秒前〕

テスト投稿はご自由にどうぞ。ご質問やご要望もお気軽にどうぞー。ただの呟き等もご自由にどうぞ~。(返信は遅くなることがありますので気長にお待ち頂ければ幸いです。) ※ツイートやWebページ等の外部コンテンツを紹介する場合は、本人による投稿なのか、第三者による紹介なのかの明記をお願い致します。
🤔てがろぐヘルプ群セットアップ方法使い方・設定方法カスタマイズ方法FAQ・豆知識
開発放言

雑記 〔119文字〕 編集

No.2352 by NO IMAGE にしし 〔0秒前〕

開発進捗状況報告サイトでフォロー頂くと、てがろぐCGIの最新β版や正式版の公開時にメールで連絡を受け取ることもできますので、ぜひご活用下さい。(╹◡╹)ノ
フォロー数が増えると、私の開発モチベーションが向上するメリットもあります。(笑)

2025年5月 この範囲を時系列順で読む この範囲をファイルに出力する

回答/返信 〔1090文字〕 編集

No.5188 by NO IMAGE にしし 〔2日前〕

目が乾くので眼科で目薬と飲み薬をもらってきました。
しっかり、まばたきしましょう。(>_<) (O_O) (>_<) (O_O) (>_<) (O_O) (>_<) (O_O)

🥞Re:5187◆おっと、さくらインターネットでも500エラーが出てしまいますか。
以下の2点を教えて頂けますでしょうか。

➊Perlのバージョンは何でしょうか?
てがろぐ管理画面HOMEで、Perlのバージョンを知る方法
下図の黄色矢印の先に見える「Perl v5.16.3」のような値を教えて下さい。
PerlVerNum-OnConfigHome.png
もしくは、サーバのコントロールパネル等で確認しても良いです。さくらインターネットの場合は、コントロールパネル左端のメニューで[スクリプト設定]→[言語バージョン設定]を見ると出てきます。

➋同一サーバ内に新しいディレクトリを作成して、てがろぐVer 4.6.xをそこに新規セットアップした場合でも、500エラーになりますか?
なる場合:
サーバのエラーログを見せて頂けるとありがたいです。
500エラーが出た直後に、サーバのエラーログ画面を表示すると、下端付近にtegalog.cgi関連のエラーが記録されていると思います。その内容を教えて下さい。(ここに書いて下さっても良いですし、メールで送って下さっても良いです。)

※サーバのエラーログは、以下の手順で閲覧できます。
さくらインターネットのコントロールパネルにログインして、左端のメニューから[サーバーステータス]→[アクセスログ]とたどり、「エラーログ」という区画にある「本日のエラーログ」ボタンを押すと、下図のような画面になります。
SakuraServerErrorLog.png

ここには、直近に発生したエラーが1000件まで表示されています。(最新のデータは下端)
ここで、もし右端にスクロールバーが見えている場合は下端までスクロールして下さい。
おそらくその最下行あたりに、tegalog.cgiかfumycts.pl関連で何らかのエラーが出ていると思います。(※複数行ある可能性があります。)
それをコピーして教えて下さい。

※どれなのか判別できない場合は、丸ごとメール等で送って下さっても良いです。
※先にエラーを発生させないとログに出てこない点にご注意下さい。コントロールパネルを表示させた後にエラーを出した場合は、この画面に見える「更新」ボタンを押して下さい。

ならない場合:
(今メインでお使いになっている方の)てがろぐ設置ディレクトリにある tegalog.ini ファイルをメールで送って頂けると何らかの調査ができます。

〔568文字〕 編集

No.5187 by Icon of sakura さくら 〔2日前〕

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

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

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

〔771文字〕 編集

No.5186 by NO IMAGE にしし 〔2日前〕

シューアイスを食べようかな……どうしようかな……と迷って、腹の脂肪具合と相談して、とりあえず見送りました。_(: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」の部分を修正すれば良いです。

〔325文字〕 編集

No.5185 by Icon of misaki みさき 〔3日前〕

投稿時間から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に変更する)とかでも実装できそうかなと思いました
実際のコードは書いてないのであくまでも考えてみただけですが……

回答/返信 〔1611文字〕 編集

No.5184 by NO IMAGE にしし 〔3日前〕

昼食はそうめん。🧊🧊🧊

🧊Re:5181◆なるほど、新たな視点をどうもありがとうございます! 投稿からの経過時間に応じて表示を変えるという発想はありませんでした。今のところ経過時間に応じて表示/非表示が切り替わるような機能はないのですが、[[DATE:~]]記法に『投稿からの経過秒数』を得られるようなオプションを加えてみましょうかね? そうすると、JavaScriptを使って簡単に経過時間が判別できるので、JavaScriptで表示/非表示を切り替えられるでしょうし。

《補足》現状でもJavaScriptで実現できなくはない話
なお、現状でも、JavaScriptで const $pastTimeStr = "[[DATE:A]]"; のように書くと、変数 $pastTimeStr には「5秒前」や「10分前」や「3時間前」や「2日前」のような文字列が入ります。

事前に、てがろぐ管理画面の[設定]→[ページの表示]→【経過時間(相対時間)の表記】で、『1時間以上 24 時間未満なら「時間」で表示』のように、24時間を超えると「日」単位で表示されるように設定を変更しておけば、24時間が経過した時点で「2日前」という表示になります。
とすると、この変数$pastTimeStrの中に「秒」か「分」か「時間」という漢字が含まれていなければ、投稿から24時間以上が経過していると判断できます。

これを使って、(例えば相対時間表記の部分に <span id="pastTime[[POSTID]]">[[DATE:(A)]]</span> のような感じで、その要素を特定できる何らかのid名を割り振っておけば)JavaScriptで表示/非表示を切り替えることはできそうに思います。

(追記) ➡もっと良い方法を No.5185 さんが提示して下さいましたので、それを実現するソースを No.5186 に書きましたからそちらをご覧下さい。

🧊Re:5182◆そうですね。Skebサイトに久しぶりにアクセスしたとき、ほんの数秒間くらいだけ『繰り返し表示される場合はCookieを有効にしてください』のような表示が出ますよね。なので、Skebのページをまともに閲覧するには、Cookieを使ったセッション確認的なものが必須なんだと思います。(つまり、Cookieを受け入れる仕組みを持ったユーザエージェント以外でアクセスすると中身が見えない。)
Skebは、利用規約でプログラムによる自動アクセスを禁止していますが、単に禁止と言うだけではなくて、技術的にもアクセスを拒否する仕組みを用意しているということでしょうね。

そもそも、人間がブラウザでアクセスしても、Skebのページって「JavaScript前提」になっているんですよね。HTMLソースを表示させても、Skebページ内に見えている日本語文字が出てきません。^^;
なので、Skebは「Cookieを受け入れた上で、JavaScriptが実行できる環境」(要するに一般的なブラウザ)からのアクセスしか受け付けない実装になっているのではないかと思います。

……とはいえ、Twitter Cardっぽい情報の欠片みたいなのはHTMLソースに含まれていますから、Skeb側が認めたSNS等からOGPを参照された場合には正しく情報を返すような仕組みが(Skeb側に)用意されているのかもしれません。

任意のWebサイトからSkebのOGPを読んでリンクカードを作るのは、たぶん諦めるほかないのではないかな……と思います。(もしかしたらSkeb側が何かAPIを用意しているかもしれないのですが、軽く探してみた限りでは見つけられませんでした。もし何か公式情報があるようでしたら教えて下さい。)

〔5文字〕 編集

No.5183 by Icon of admin あどみ 〔3日前〕

あいうえお

〔49文字〕 編集

No.5182 by Icon of admin あどみ 〔3日前〕

tesuto
(Loading...)...

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

〔252文字〕 編集

No.5181 by Icon of admin あどみ 〔4日前〕

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

〔335文字〕 編集

No.5180 by Icon of admin あどみ 〔6日前〕

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

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

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

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

回答/返信 〔490文字〕 編集

No.5179 by NO IMAGE にしし 〔6日前〕

朝食はサンドイッチ。🥪🥪🥪

🥪Re:5178◆おっしゃるとおり、30MBというのは「サーバへのアップロード時の連続通信を切る閾値」でしかなく「扱えるサイズの上限」というわけではありません。なので、FTP等の別手段でUPした場合は、30MBを超えていても(てがろぐ側が扱う上では)問題はありません。その画像を [PICT:~]で表示させても問題ありませんし、画像管理画面に出しても問題はありません。

仕様上の上限があるのは、●CGI側の処理がサーバに負荷を掛けすぎていると解釈されないようにするため、●誤って巨大なファイルをUPしてしまわないため、●未知の不具合で莫大なファイルがUPされてしまうようなケースがあった場合の被害を軽減するため、などが理由ですが、その閾値を30MBに設定しているのは「まあ、それくらいを超えるファイルをUPする需要はないだろう」という予想からでしかありません。(^_^;) よほどそれでは不足するようなら見直しも考えます。(プログラムの起動時点で上限を固定しておく必要があるので、設定画面等でユーザが自由に変更できるようには作れないので。)

質問/要望 〔489文字〕 編集

No.5178 by Icon of sakura さくら 〔6日前〕

平素より大変お世話になっております。
素敵なツールの開発に継続的な改良、本当にありがとうございます。
自分好みにカスタマイズ可能でマイペースにつぶやき・メモを残せる理想のミニブログとして愛用させていただいています。

当方、てがろぐにてイラストを投稿することがありますが、投稿に失敗することが度々ありました。
そこでユーザー側で設定可能な画像の容量上限とは別にCGI側にて設定されている「強制的にHTTP接続を切る仕様上のデータサイズの上限」は30MBとの記載を見つけ、投稿に失敗したすべての画像がこのサイズを超過していたためおそらくこの仕様に引っかかったものと思います。
質問ですが、例えばFTPでサイズ上限を超過するメディアファイルをアップロードの上でてがろぐの投稿から [PICT:メディアファイルのパス]とした場合てがろぐの動作に支障はありませんでしょうか?
記載を読む限り30MBはサーバーとの通信を切る上限サイズでてがろぐで扱えるデータサイズの上限ではないと読み取れますが、CGIの仕様には疎いため念の為質問をさせて頂きました。(それ以前に上限に収まるように事前に調整すべきとは思います…)

#質問

回答/返信 〔2632文字〕 編集

No.5177 by NO IMAGE にしし 〔7日前〕

昼食のパスタでおなかいっぱい。ぐっふぅ。_(┐「ε:)_

🍝Re:5176◆詳細な背景情報をありがとうございます。よく分かりました。日付欄の常時表示ができるような設定も、ToDoリストには含めておきます。
300件もの移行作業を手動でとは頑張りましたね。^^;

以下は、今後や同様のことをしようとされている方々に向けた余談のようなものです。参考までに記します。

エクスポート機能がなかったとのことですが、エクスポート機能がなくても表示ページのHTMLをローカルにファイルとして保存することは可能ですから、私なら以下のような「データ変換のための使い捨てプログラム」をChatAIに作ってもらって実行します。
ローカルにある複数のHTMLファイルから情報を抽出して、別のブログツールに結合するためのデータを作るプログラムをPHPで書こうとしています。どのようなソースコードを書けば良いか教えて下さい。
以下の手順での処理が必要です。

1. サブディレクトリ OldBlog にあるすべてのHTMLファイルから以下の情報を抽出する。

(a) ページタイトル : title要素の中身を取得。
(b) 投稿日時 : <span class="postdate">~</span>の中身を取得。
(c) 本文 : <div class="post">~</div>の中身を取得。

2. 投稿日時を整形する。

元データの投稿日時は「 2025年5月17日(土) 12時18分 」のような日本語形式で書かれています。これを YYYY/MM/DD hh:mm:ss 形式に整形します。西暦は必ず4桁で、それ以外はすべて必ず2桁にする必要があります。

3. 本文を整形する。

本文として取得した内容にHTMLタグが含まれている場合は、改行以外のHTMLタグをすべて削除します。
また、改行タグはすべて <br /> に統一します。
改行コードもすべて削除して、データが1行になるようにします。

4. 移行先ブログツール用のデータを生成する

手順1~3で用意したデータを1件ずつ、以下のような1行のデータに変換します。

   <log><date>日付</date><id>連番</id><user>admin</user><cat></cat><flag></flag><comment>本文</comment></log>

「日付」部分には、2で作成した YYYY/MM/DD hh:mm:ss 形式の日付を入れます。
「連番」部分には、半角数値で 10001 から始まる番号を入れます。
「本文」部分には、3で整形した文字列を入れます。
それ以外の文字列は上記のまま使います。畳む

上記のプロンプトを使ってChatGPTに生成してもらった結果が https://chatgpt.com/share/6828044f-0eec-800b-bdcc-9269... です。
元ページの構造に応じて指示は変える必要がありますから、このまま使えるわけではありませんけども。(元データとして書いた内容がテキトーなので動作確認はしていませんが(しようがありませんから)。生成されたcleanHtmlBody関数の中で若干無駄なことをしている気もしますが、まあ概ね問題なさそうな気がします。^^; 元データがHTMLの文法に正確には従っていない場合は「DOMDocumentを使わずに、正規表現で抽出して下さい」的な指示を加える必要はあるかもしれませんけども。)

こういう感じで、『元HTMLソースから情報を抽出して、てがろぐのデータ形式に変換する』プログラムを用意すれば、自力で1つ1つ移行するよりも楽に済みます。(生成されたデータを、既存の tegalog.xml にペーストするだけで済みます。※もちろん、うまくいかなかった場合に備えて元の tegalog.xml ファイルはバックアップ保存しておいて下さい。)

ここでは、元データがローカルにHTMLファイルとして存在していることを前提にしています。
この手のプログラムに「ネット上から情報を取ってくる処理」自体を含めてはいけません。試行錯誤する過程で毎回ネットから情報を取ってきてしまうと、サーバに無駄な負荷がかかるからです(時間もかかりますし)。
データさえローカルに保存してあればいくらでも試行錯誤できますから、「ネットからデータを取ってくる処理」と「取ってきたデータを加工する処理」は分ける方が望ましいでしょう。

「ネットからデータを取ってくる処理」は、数が少なければ自力で(ブラウザで当該ページを表示させて [Ctrl]+[S] を押すとかで)保存しても良いでしょうし、それ用の使い捨てプログラムを別途用意しても良いでしょう。
(※ただし、そのようなプログラムを他人のサイトに対して実行すると、凄まじく迷惑なスクレイピングプログラムになりますので、自分に100%の使用権があるサーバに対してだけ実行して下さい。共用サーバの場合は「1件のURLにアクセスするたびに、数秒間の待機時間を設ける」的な緩和措置を含める方が望ましいです。)

プログラミング言語にはここではPHPを使いましたが、もちろん(ローカルで実行できる言語なら)何でも都合の良いものを指定すれば良いです。
自身が読んで理解できない言語だと実行するのは安全とは限りませんし細かな調整が利きませんから、理解できる言語が望ましいですね。
「プログラミング言語は何もわからん……」という場合にはまあ使えませんが。^^;(なので、これは何かしらプログラミング言語が分かる人向けの話です。)

「AIにプログラムを生成してもらうのではなく、AIに直接データを整形してもらえば……?」という意見もあるかもしれませんが、作業量が多いとAIは割と手を抜くので、数百件ものデータを処理させると(本当に正確に移行したのかどうか)確認するのが面倒なので、「整形のためのプログラム」を生成するに留める方が確実だと思っています。少なくとも今のところは。^^;
AIそのものをローカルで実行できるようになれば、何もかもをAIに任せる選択も採りやすくなるかもしれませんけどもね。(いくらでも試行錯誤できる点で。)
畳む

〔636文字〕 編集

No.5176 by Icon of admin あどみ 〔8日前〕

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

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

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

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

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

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

回答/返信 〔193文字〕 編集

No.5175 by NO IMAGE にしし 〔8日前〕

マルゲリータを食べました。🍕🍕🍕

🍕Re:5174◆ご要望をありがとうございます。他ツールからたくさんの投稿をインポートする場合、データファイル(tegalog.xml)を直接編集する方法もありますが、それよりも投稿画面から1つずつ日時を指定して投稿する方が楽ですか?

〔268文字〕 編集

No.5174 by Icon of admin あどみ 〔10日前〕

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

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

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

〔36文字〕 編集

No.5173 by Icon of admin あどみ 〔12日前〕

test
折り畳みテスト
テストだよ。
だよ。
だよ。
だよ。

〔141文字〕 編集

No.5172 by Icon of sakura さくら 〔12日前〕

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

アップデート✨ 〔384文字〕 編集

No.5171 by NO IMAGE にしし 〔13日前〕

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

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

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

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

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

〔401文字〕 編集

No.5170 by NO IMAGE にしし 〔13日前〕

details要素+summary要素で実現される「折り畳む」機能を搭載した Ver 4.6.1β(未配布)の動作テスト。
折り畳み
折り畳み表示のテスト
こんな感じで見えます。

ラベルはその都度指定します
もちろん、1投稿内にいくつでも書けます。
入れ子にもできます
ただし、details要素はspan要素等のインライン要素の内側に書くとHTMLの文法的に正しくなくなるため、そのように文字装飾を書いてしまうと直前のCSSが意図通りに適用されなくなる問題がある点に注意が必要です。

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

〔131文字〕 編集

No.5169 by Icon of admin あどみ 〔15日前〕

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

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

回答/返信 〔2158文字〕 編集

No.5168 by NO IMAGE にしし 〔15日前〕

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

🥐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=600LimitFreq=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要素の内側には書けないので、文字装飾の入れ子構造によっては文法的に正しくなくなる懸念があるので実装は見送っていたのですけども、まあ「分かっている人だけが使ってくれれば良い」と考えることもできますしね……。)

〔989文字〕 編集

No.5167 by Icon of sakura さくら 〔15日前〕

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

〔2005文字〕 編集

No.5166 by Icon of sakura さくら 〔16日前〕

いつもてがろぐに大変お世話になってます。てがろぐ本体・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>タグに検索キーワードを含めないようにして頂くことはできませんでしょうか。

〔288文字〕 編集

No.5165 by Icon of admin あどみ 〔16日前〕

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

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

〔159文字〕 編集

No.5164 by Icon of admin あどみ 〔18日前〕

アップデートお疲れ様です。
新しい機能のカード型リンク、ずっと欲しかった機能なのでとても嬉しいです。ありがとうございます🙇
ラベルを省略しても使えるのがすごくありがたいです。OGPカードボタンからURLを入力するだけで使えるので、すぐ使えてとても便利です。
いつも更新ありがとうございます。これからもお世話になります🙏

〔209文字〕 編集

No.5163 by Icon of admin あどみ 〔18日前〕

にししさん、お久しぶりです。
以前IF文でカテゴリ別に『1ページあたりの表示投稿数』を替えられないかと質問した4671です。
先日はてがろぐのアップデートでカテゴリ別にスキン指定を実装してくださってありがとうございます。
無事に自分の作りたい仕様を作ることができました。
実装から時間が経ってしまいましたが、Amazonギフト券を贈りました。
ほんの少しですが使ってください。
これからもご活躍応援しています。#感謝

〔603文字〕 編集

No.5162 by Icon of admin あどみ 〔18日前〕

5160
たしかに、自作スキンのCSSとかを確認している最中だったので適当な半角の英語1文字で検索してました……。ここでは「てがろぐ」で検索していたからなんともなかったんですね。スッキリしました!ありがとうございます。

あと5150の件ですが(書いたのは自分です)、フリースペース内には簡単な自己紹介?やお知らせ、細々とした部分(自分が書いてる内容をちょくちょく文言を変えたくなる気質?のため、ウェブ上からすぐ編集できるのが便利でいろいろ使ってるのです……)、ほかのてがろぐと共通して使うhtmlにそれぞれのディレクトリ名(tegalogとかmemoとか)をいれるために使ってます。[[FREESPACE:0]].cssみたいな感じで……。(前はヘッダ用フリースペースなどを使っていたのですが、ログイン画面かどこかでここの文言が出るのが気になってしまいすべてをフリースペースに書いています)
だいたい5個前後くらいですが、skin-coverに書くときに上から順にFREESPACE0→1みたいな感じで順番にしたい、しかしそうするとよく編集しがちな部分が(てがろぐから編集するほうの)フリースペースの下の方になってしまい編集がしづらい……ため、できたら好きな文字列にできたらなと思いました;わかりにくい文章ですいません……。

かなり個人的なわがまま要望になってしまうのでもし可能であれば、で構いません!

〔196文字〕 編集

No.5161 by Icon of admin あどみ 〔19日前〕

5156です。
にししさん返信ありがとうございます!

とても個人的な感覚なので、気になるのは自分だけかもしれないのですが、下だと一瞬「フォームはあるけどパスワードがないな、もしかしてあらかじめ知ってる人しか入れないのかな?」と、気早な方は去っていってしまうような気がしてまして…😅

かなり細かいことだと自分でも思うので申し訳ないですし、他の方のもっと重要な要望を優先して頂いて構いません。

■日付一覧:

■カレンダー:

2025年5月
123
45678910
11121314151617
18192021222324
25262728293031

■最近の投稿:

■新着画像リスト:

全315個 (総容量 36.01MB)

■複合全文検索:

  • 投稿者名:
  • 投稿年月:
  • #タグ:
  • カテゴリ:
  • 出力順序:

ランダムに1件を見る / ギャラリーモードで表示 / 画像一覧モードで表示 / サイトマップモードで表示 / 時系列順で表示する

動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「ジャーナル(日誌)スキン」です。他に、 標準スキン昔のツイッターっぽいスキン(ブルー)昔のツイッターっぽいスキン(ピンク)付箋型スキンシンプル版スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンチャットタイプスキンがあります。
てがろぐCGIの配布・解説ページに戻る