てがろぐ - Fumy Otegaru Memo Logger -

解決しました！お騒がせいたしました。

画像アップロード時にフラグやキャプション付与したいという改造関係の話でございます。

続きを読む以前お話ししていた画像アップロード時にフラグやキャプションを付与しようとChatGPTに尋ねつつ作成しているのですがうまくいきません。

複数画像投稿することや、<image>～</image>の部分をPHPで記載しxmlを更新することはできたのですが、フラグ及びキャプションについては最新の物しか付与されませんでした。
投稿直後のindex.xmlを確認するとフラグもキャプションもどちらもについて記載されていますが、実際の記事や画像管理画面では最新のものにしか付与されていませんでした。

お尋ねしたいことは以下の２点です。
①省略形のタグ（例：<user/>）ではなく、開閉タグ（<user></user>）で統一すべきでしょうか？（開閉タグでしたときはフラグもキャプションもつきませんでしたが…）
②外部からindex.xmlを正しく更新し、情報が保持される方法があればお教えいただけますでしょうか？
③こちらのふわっとした認識でございますが、整形後（正式な方法でアップロードor画像管理画面を開いた後）のxmlと同じ記載方法（順序）であれば整形されても上書きされないと思っているのですが、あっておりますでしょうか？また、記載方法については改行や空白も含むのでしょうか？

お忙しいところ大変恐縮です。
お手すきの際にお教えいただければ幸いでございます。
よろしくお願いいたします。
畳む

まさかこんなにお早く[[ONEPICT:1]]周りの機能を追加していただけるとは思っておりませんでした！[[ONEPICT:1:IMG]]だけで諸々の情報を含んだimgを出力できるのもシンプルで助かります。

Ver 4.6.3βをさっそく試しております。おかげさまでやりたかったスキンの形が実現できました。お忙しい中本当にありがとうございます。配布を始めたらこちらで紹介させていただくかもしれません。

>>5243 ありがとうございます。CSSは盲点でした…やってみます！

🆕 Ver 4.6.3βの更新点(概要)：
《▼新機能》
●投稿内のn番目の画像を出力する [[ONEPICT:n]] 記法に、細かなオプション記法を追加。
《▼仕様改善》
●.htaccessの影響で管理画面上からは過去バックアップのダウンロードが阻まれる問題を解消。

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

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

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

🥪Re:5242◆リンクを画像に変えたいだけなら、CSSで実現できます。
例えば、外側スキンに <div class="backlink">[[FREE:HOMELINK]]</div> のように書いているとします。
すると、実際には <div class="backlink"><a href="設定されたリンク先">設定されたラベル</a></div> というHTMLが出力されますね。
このリンクテキストを例えば back.png という画像に置き換えるには、以下のようなCSSを使えば可能です。

.backlink a {
  display: inline-block;
  width: 100px;                     /* 画像の幅に合わせて調整 */
  height: 30px;                     /* 画像の高さに合わせて調整 */
  background-image: url('back.png');/* 見せたい画像 */
  background-size: contain;      
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
この方法なら、HTMLは何も変えずに、CSSだけでテキストリンクを画像リンクに変更できます。
（他には、JavaScriptで innerText をimg要素に置き換える手もありますけども。）

要望になりますが、[[FREE:HOMELINK]]内のURLだけを抽出する抽出する要素はありませんか？ヘルプを見ても該当する要素がないようであるため、なければ要望としてHOMELINKのURLだけを指定できる要素を追加していただけると助かります。
（よくホームページへのリンクに画像を利用するためです。ALT要素のために「リンクラベル」も単独で指定できると助かります）

ご紹介頂いたページでは対処法に「投稿時だけWAFをoffにして投稿後に戻す」などがありましたが、最終的にcssのdecoで数ピクセルの空白を作ったものをorの左右に配置し、「a or b」ではなく「aorb」として認識されるようにして（？）回避することにしました。

サーバーの仕様になってしまうと素人には全くわからないので、とても助かりました。いつも丁寧なご対応ありがとうございます。

🥪Re:5237◆なるほど、画像の縦横サイズ情報が必要なギャラリー系ライブラリもあるんですねえ。次のβ版は、準備がとてもうまくいけば、今日の夜に公開できるかもしれません。うまくいけば、の話ですけども。^^;
なお、てがろぐで画像の縦横サイズが自動取得できるのは、JPEG、GIF、PNGと一部のSVGだけなので、WebP等をご使用の場合は、画像情報の編集画面で手動登録しておかない限り縦横サイズは出てきませんのでご注意下さい。

🥪Re:5238◆特に予定はありません。文章を複数のページに分割したい場合は、単純に複数の投稿に分割すれば良いのではないかと思います。複数投稿を1つにまとめる機能としては、カテゴリ機能やハッシュタグ機能がありますし、 >>5170,5123,5097 などのように任意の投稿No.を連結表示する機能もありますし。もしお一人でお使いの場合は「特定の投稿者だけの投稿を閲覧する機能」も「第2のカテゴリ」的に使えます。「他の投稿に絶対に登場しない単語」を含ませることで、全文検索結果へのリンクを使って任意の投稿をまとめることもできるでしょう。

🥪Re:5239◆お使いのサーバのWAF（Wab Application Firewall）が原因です。「or」という単語はSQLで論理演算子として頻繁に登場するので『SQLインジェクション攻撃パターン』と誤解されてブロックされるケースがあります。「or」という単語自体は英文には極めて頻繁に出てくると思いますから、いくらなんでもWAFの条件判定が厳しすぎると（個人的には）思うのですが、サーバ側(WAF側)がそういう判断をしている以上、（そのサーバ上で稼働しているに過ぎないCGI側では）どうしようもないのです。WAF機能をOFFにすれば解決しますが、WAFを有効にしたままどうにかなさりたい場合は、レンタルサーバへ苦情を入れて頂くほかなさそうに思います。

※ここまで厳しい条件で判定させると、ユーザ側がWAFをOFFにしようと思う動機になりやすいので、レンタルサーバ側はもうちょっとWAFの条件を緩める方が総合的には安全を維持できると思うのですけどもね……。

なお、「or」と書くだけで『SQLインジェクション攻撃パターン』だと誤解されてしまう詳細については、Perplexityによる説明 をご覧下さい。回答文章の上部に見える「ソース」リンクを押すと、情報元のWebページも閲覧できます。（※Perplexityのアカウントをお持ちではない場合、初回アクセス時にサインインを求められるかも知れませんが、何もせずに「閉じる」を押せば閲覧できます。）

質問なのですが、自分のてがろぐで「or」という単語を入力して投稿しようとすると403エラーが出てしまうのですが、これは何が原因なのでしょうか？

要望というほどではないのですが、ひとつの投稿内において、長文を複数のページに分割できる機能（小説投稿サイトのページ分割機能のような）の実装予定はございますでしょうか？

特に画像のwidthとheightを出してくれるのが嬉しいです。
この本体画像サイズが取得できると事前に画像サイズの定義が必要になるギャラリー系のライブラリ（具体的にはPhotoswipe）を導入することができるようになります。

https://photoswipe.com/

フラグ自体も取得できるとのことでギャラリースキンの実装が色々簡単になると予想できるので、本当にこのアップデートが使えるようになるのが楽しみです。

🥐Re:5230◆投稿1枚目の画像が「原寸画像へのリンクにならず、キャプションも付かず、ただimg要素だけで出力される記法」を新たに用意しました。また、「指定画像のフラグだけを得る記法」も用意しました。次のβ版からお使い頂けますので、もうしばらくお待ち下さい。

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

Bluesky Pawoo

例えば、[[ONEPICT:1:VALUE:CLASS]] と書くと、1枚目の画像のフラグだけが出力されますので、<span class="[[ONEPICT:1:VALUE:CLASS]]">～</span> のような感じで書くと、画像のフラグだけを使って何か装飾したりできそうな気がします。

🥐Re:5233◆そうですね。そのスクリプトは、てがろぐ側の画像UP機能を経由せずに（新規投稿前に）画像をUPする仕様ですから、そこから画像インデックスも書き換えられれば、新規投稿前にNSFWフラグを付けることもできます。
🥐Re:5234◆サポートありがとうございます！(╹◡╹)ﾉ
🥐Re:5235◆WAFをOFFにすると解決はしますが、WAFをOFFにするのはあまり望ましくないのですよね。てがろぐにはCodePenを埋め込む機能がありますので、JavaScriptソースを掲載する用途なら、CodePenに書いて埋め込む方が（特にソースが長い場合には）便利かもしれません。文法に従って色分け表示もされますし。

CodePenを埋め込んだ例

こんな感じで埋め込めます。

ただし、この機能はデフォルトでOFFなので、使いたい場合は設定を事前にONにして頂く必要がありますが。

>>5234さんのおっしゃる通りでした！！
WAFの設定でした。
ありがとうございます。お騒がせいたしました。

サーバの設定をみてみると良いかもです〜見当違いだったらごめんなさい！

お返事ありがとうございます。
>>5232のような流れで処理されているのですね。
全然システム的なことが詳しくなくて見当違いなことをお話していたら恐縮なのですが
『「てがろぐ側の画像UP機能を使わずに、独自に画像をUPして画像インデックスを更新する」と言う処理が必要そう』、とのことでしたが
てきとーのーと様の『てがろぐでD＆Dまたはコピペで画像投稿するやつV2 』を使用したらいけるといいなとおもいました。
実際にChatGPTに聞いてみると可能とのことでしたのでチャレンジしてみようと思います（ChatGPTは割と頻繁にいい加減なことを言いますが。。）

以下別件です。
セキュリティレベルをJavascriptでも可能なものにしたのですが、てがろぐで備忘録としてエスケープ文字を用いてコード（VueやJavascript）を記載し投稿しようとしたら404がでてしまいます（ロリポップのサーバーです）。
CSSはエスケープ文字で記載できたのですが、Javascriptについてはどうしようもないことなのでしょうか？

🥐Re:5228◆投稿と同時に画像もUPする場合、内部では以下のような動作をしています。

1. 画像をアップロードする。
2. フラグを立てる必要がある場合はフラグを立てる。→この時点で画像インデックスファイル(index.xml)が更新される。
3. 実際にアップロードされたファイル名から、画像挿入用記法（[PICT:～]）を作って本文の指定位置(※設定で選択できます)に追記する。
4. 投稿本文をデータファイル(tegalog.xml)に追加する。

さらに、投稿直後にHOMEを表示するよう設定されているなら（※デフォルトではそう設定されています）、以下に続きます。

5. 本文を表示する。

なので、「投稿と同時に実行されるJavaScript」等を使って画像インデックスファイル(index.xml)を書き換える場合、上記の「2より後」かつ「5より前」のタイミングで書き換えられれば望みのフラグを「5」の時点で反映させることは可能です。……が、現実的にはそんなタイミングを狙うのは無理だと思いますので、不可能でしょうね。^^;
新規投稿時に画像のメタデータをどうにかしたい場合は、「新規投稿されるよりも前の段階でindex.xmlを書き換えておく」みたいな手順でないと無理だと思います。（つまり、「てがろぐ側の画像UP機能を使わずに、独自に画像をUPして画像インデックスを更新する」のような処理が必要そうに思います。）

🥐Re:5230◆スキン配布ありがとうございます。てがろぐがお役に立っているようで嬉しいです。(╹◡╹)ﾉ 残念ながら、指定画像のフラグだけを得る記法はありません。……が、自力で画像表示用のimg要素を組み立てられるように、フラグとかサイズとかも取得できる記法も用意する方が良いかもしれませんね。ちょっと何か考えてみます。気長にお待ち頂ければ幸いです。

🥐Re:5231◆独自で検索窓を作った場合でも、てがろぐ側の検索機能を使って検索するなら（＝URLに ?q=検索語 を付ける形のURLにアクセスさせるよう検索フォームを作るなら）検索結果にも「下げる」投稿は表示されます。（※『設定方法：下げた投稿が表示される状況を選択する方法』の説明にある「全文検索時」項目がONに設定されているなら、ですが。）
てがろぐ側の検索機能を使わずに、何らかの方法で投稿を絞り込んで表示しようとなさっている場合は、その方法を具体的に説明して頂かないと何とも答えようがありません。いろんな方法がありそうに思いますので。
（ついでに、なぜ標準の [[SEARCHBOX]]等ではダメなのかも教えて頂けると、今後の参考になってありがたいです。）

下げた投稿はHTMLには出力されないため一致しても表示することができず、方法が分からないのですが…

質問です。
[[GETURL:PICT:1]]で画像を配置したい場所があり、その画像にNSFWフラグがついていれば、imgのclass名に「nsfw」が出力されるようにしたいです。そういった書き方はありますでしょうか？

そういった書き方が無いようでしたら、ギャラリーモードと同じようにサイトマップモードでも、[[ONEPICT:1]]で画像を配置するときに「原寸画像へのリンク無し」設定が可能になると嬉しいです。こちらはもし可能であれば…という要望になってしまい申し訳ありません。

配置したい場所というのはサイトマップモード用のskin-onelog.htmlで、各投稿の画像を一つだけ表示したいと思っています。ギャラリーモードではなくサイトマップモードを使う理由は、投稿内の画像の有無にかかわらず一覧にしたいからです。どうぞよろしくお願いいたします。

ご教示ありがとうございます、リンクを張る方向でで試してみます。
まだやり始めたばかりですが、たくさん機能があって楽しいです！使いこなせるように頑張りますね！

できるかどうかわからないんですが、投稿画面から画像を添付して投稿するときにindex.xmlを書き加える処理をedit.jsでしたとしてもてがろぐの元々の機能でフラグ部分を書き換えられてしまいそうですよね…
うーん、何か良い手がないか考えてみます…

🌭Re:5226◆鍵入力窓を任意の位置に挿入した場合は、「その鍵入力窓があった位置（＝『見えている区画』と『隠されていた区画』との境界位置）」にアンカーが挿入されます。この仕様を利用すると、その「5000文字ほど書いた後」の位置にジャンプするなり、見た目を変えるなり、何らかの対処ができるでしょう。
（例えば、<a href="#HiddenPoint">隠されていた部分の先頭にジャンプ</a>みたいなリンクを用意しておくような。）
詳しくは、カスタマイズ方法ページの『正しい鍵が入力された後、鍵入力フォームのあった位置に挿入されるアンカーのHTML』項目をご覧下さい。

5000文字ほど書いた後の文章を鍵付きにしたいのですが、1行目に戻ってしまうのでまた読み直さなければいけなくなり四苦八苦しています。
設定かスキン、記事で何か必要な記述があるのでしょうか。ご教示いただけたら幸いです。

#質問

🌭Re:5224◆文章投稿と同時に画像をUPする場合、その投稿が「下書き」や「鍵付き」に指定されていれば、画像にも自動的に「一覧外」フラグが付くという仕様はありますが、それ以外では画像情報の編集画面から設定するしかありません。
画像に対するフラグ等の情報は、画像インデックスファイル（＝画像保存用ディレクトリ内に自動生成される index.xml ファイル）に記録されています。このファイルを編集すると、複数の画像に対するフラグを一括変更できるので便利な場面もあるかもしれません。
➡ 詳しくは、豆知識・FAQページの「大量の画像キャプションを一括設定(編集)したい場合は、XMLデータを直接編集すると楽かもしれない」項目をご覧下さい。

このフラグってどこで管理されているのでしょうか？

🥞Re:5222◆てがろぐの自動バックアップ機能は、常に「直前の状態」をバックアップしますので、「しまった！上書きしたかも!?」と思った瞬間にバックアップをダウンロードすると、上書き前のデータが手に入ります。ただ、残念ながら、次に何かを投稿（または編集）してしまうとバックアップも上書きされてしまいますけども。^^;

🥞Re:5221◆元の質問は分かりませんが、たぶん完璧な回答になっていると思いますので特に何も補足することはないと思うんですが、私が自分のてがろぐで使っているパンくずリストは以下のような逆向きのアプローチなので参考までに記します。

スキン側：
～ <a href="/">[[FREE:TITLE:MAIN]]</a> <span class="pankuzuAdd">[[SITUATION]]</span>
CSS：
.pankuzuAdd:empty {
   display: none;
}
.pankuzuAdd::before {
   content: '> ';
}

SITUATIONに何もない場合、出力されるHTMLは <span class="pankuzuAdd"></span> のような空要素になるので、その場合には :empty疑似クラスでこの要素を消すことで、「>」を見えなくしています。
No.5222さんのは「必要な状況で追加されるように書く」アプローチで、上記の私のは「不要な状況で消えるように書く」アプローチですね。もちろん、どちらでも良いと思います。

🥞Re:5220◆当初はあまり意味がある機能だとは思っていなかったのですけども、実際に実装してみると、確かにボタンの位置が動かない方が便利だな……と思いました。(笑) ご活用下さい～。(╹◡╹)ﾉ

もしそうだとしたら質問された方へお詫び申し上げます。大変失礼しました。

１）外側スキンの[[SITUATION:HTML]]の部分をパンくずリスト風に
<div class="breadcrumb">
   <span class="homelink">[[FREE:HOMELINK]]</span><!-- フリースペースで設定した「ページのフッタ部分に表示するリンク」・不要なら削除 -->
   <a href="[[HOME:URL]]">[[FREE:TITLE:MAIN]]</a><!-- てがろぐのトップへのリンク -->
   [[SITUATION:HTML]]
</div>
css（簡易）
.breadcrumb .situation {
   display: inline;
}
.breadcrumb > *:not(:last-child)::after {
content: '>';
}
でいかがでしょうか

２）“全件”の数を取得したい
トップ（何も選択しない場合）に表示される記事総数をJavascriptで取得して表示する方法です。
フリースペースに（スキンに直接書いてもいいです）
<span class="soukensu">総記事数：[[INFO:TARGETPOSTS]]</span>
<div id="result"></div>
javascript
<script>
fetch('./') // 同一ドメイン内の別ページ
.then(response => response.text())
.then(html => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const targetElement = doc.querySelector('.soukensu');

  if (targetElement) {
    document.getElementById('result').innerHTML = targetElement.outerHTML;
  } else {
    console.warn('指定のクラスが見つかりませんでした');
  }
})
.catch(error => {
  console.error('取得エラー:', error);
});
</script>
css
.soukensu { display: none; }
#result .soukensu { display: block; }

上記2件を試したものを https://10prs.com/tegalog-cms/ で見ることができます（２.の件だけわかりやすいようCSSを適用していません、カテゴリ「sampleA」などを選んで該当箇所を見てみてください）
ご参考になれば幸いです。

お世話になっております。結構前にdetailsの折りたたみがほしい…と要望したことがあったのですが、とうとう実装されてて本当に嬉しいです。ありがとうございます！これからも活用させていただきます。

➡てがろぐ解説 notebook （使うには、Googleアカウントが必要だと思いますが、無料で使えます。）#🌱豆知識

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

Bluesky

ただ、これはヘルプの書き方や構造の問題もありそうですが、実際には解説は存在するのに「ない」と回答されることもありますので、（返ってきた解説自体は参考にできそうですが）「ない」と言われた場合には信用しないで、質問を変えるか、もしくは自力でWebをご覧下さい。(笑)
「こう質問したのに、適切な回答はなかった」みたいな情報があれば教えて下さい。もしかしたら、ヘルプドキュメントの改善の参考になるかもしれませんので。

※これは、リアルタイムにWebから情報を取ってくれるわけではなくて、ソース(資料)としてURLを指定した瞬間のHTMLソースからテキストデータを抽出して取り込む仕様っぽいので、（私が今後もメンテナンスをすれば別ですが）2025年6月3日時点のヘルプドキュメントを元にして回答されます。