2023年8月 この範囲を時系列順で読む この範囲をファイルに出力する
開発進捗状況報告サイトで、てがろぐ Ver 4.0.4(β版)の配布を開始しました。ご自由にダウンロードしてご活用頂けます。お試し頂ければ幸いです。主に以下の点を搭載しています。
🆕 Ver 4.0.4βの更新点(概要)：
《▼新機能》
●カスタム絵文字機能。
●日付境界バーの出力状況を選択できる設定オプション。
《▼仕様改善》
●既存画像の挿入記法で、多バイト文字が使われたファイル名も許容する設定を追加。
●カテゴリツリーを構成するli要素にも、カテゴリIDをベースにしたclass名を付加。
●本文中に含まれるコロン記号が数値文字参照「:」として出力される問題(仕様)を修正。
《▼不具合修正》
❎適用スキンを維持するためのリンク自動調整仕様でlink要素に対して不要な調整を加えてしまう不具合を修正。
詳しい使い方などは、上記の開発進捗状況報告ページの記事をご覧下さい。
Mastodonでのアナウンス：Pawoo
🆕 Ver 4.0.4βの更新点(概要)：
《▼新機能》
●カスタム絵文字機能。
●日付境界バーの出力状況を選択できる設定オプション。
《▼仕様改善》
●既存画像の挿入記法で、多バイト文字が使われたファイル名も許容する設定を追加。
●カテゴリツリーを構成するli要素にも、カテゴリIDをベースにしたclass名を付加。
●本文中に含まれるコロン記号が数値文字参照「:」として出力される問題(仕様)を修正。
《▼不具合修正》
❎適用スキンを維持するためのリンク自動調整仕様でlink要素に対して不要な調整を加えてしまう不具合を修正。
詳しい使い方などは、上記の開発進捗状況報告ページの記事をご覧下さい。
（ツイート埋め込み処理中...）Twitterで見る
Mastodonでのアナウンス：Pawoo
あいうえお
8月！
>> もしかして、プログラミングに費やした時間よりも、ヘルプドキュメントを書く方に多くの時間が掛かっているのでは……。
原稿本文は書き上げたけど、そこから印刷原稿を作成する方が時間が掛かって、締め切りギリギリになって冷や汗かくのと同じことかなって思いました。
(そして入稿後に、印刷所から原稿不備で連絡が来るまでがワンセット。)
原稿本文は書き上げたけど、そこから印刷原稿を作成する方が時間が掛かって、締め切りギリギリになって冷や汗かくのと同じことかなって思いました。
(そして入稿後に、印刷所から原稿不備で連絡が来るまでがワンセット。)
2023年7月 この範囲を時系列順で読む この範囲をファイルに出力する
スイカたべたーい！
カスタム絵文字楽しいですね。公開楽しみにしてます！
Twitterで見る デモモードで動作しています。ここでは、作者であるnishishiアカウント以外のツイートの埋め込みはできません。テキストリンクとして掲載は可能ですが、ツイート主が拡散を希望していない可能性がある点にもご配慮下さい。
配布作業お疲れ様です。ちょっと試してみましたが、ハッシュタグにカスタム絵文字は使えないみたいですね。
カスタム絵文字はこのように
リンクテキスト内に含めることもできます。
Re:3875◆うへへ。(笑)
リンクテキスト内に含めることもできます。Re:3875◆うへへ。(笑)
ログインの名前、今更ながらにししさんの趣味全開なんだと気がつきました
これからヘルプドキュメントを書いて、配布用のパッケージを作って、たぶん明日には Ver 4.0.4β として公開できる予定でいます。たぶん。
カスタム絵文字サンプル。
[:takoyaki:] で が表示されます。実体は、カスタム絵文字ディレクトリにある takoyaki.svg
[:takoyaki2:] で
が表示されます。
[:takoyaki3:] で が表示されます。
デフォルト設定では、高さ 2em で表示されますが、自力でCSSを書けば好きなサイズで表示できます。カスタム絵文字の名称(takoyaki等)がそのままclass名にもなっているので、絵文字によって表示サイズを変化させるようCSSを事前に書いておくこともできます。例えば [:takoyaki:] なら、ce-takoyaki というclass名がimg要素に付加されて出力されます。（ce は Custom Emoji の略です。）
[:aoringo:] 
[:blueberry:] 
[:pineapple:] [:suika:]
[:f-1:] 
[:f-2:] 
[:f-3:]
[:takoyaki:] で
が表示されます。実体は、カスタム絵文字ディレクトリにある takoyaki.svg[:takoyaki2:] で
が表示されます。[:takoyaki3:] で
が表示されます。デフォルト設定では、高さ 2em で表示されますが、自力でCSSを書けば好きなサイズで表示できます。カスタム絵文字の名称(takoyaki等)がそのままclass名にもなっているので、絵文字によって表示サイズを変化させるようCSSを事前に書いておくこともできます。例えば [:takoyaki:] なら、ce-takoyaki というclass名がimg要素に付加されて出力されます。（ce は Custom Emoji の略です。）
[:aoringo:] [:blueberry:] [:pineapple:] [:suika:][:f-1:] [:f-2:] [:f-3:]
Misskeyのようにカスタム絵文字を掲載できるようになった Ver 4.0.4β(未配布) の動作テスト。
ヒャッハー！ たこ焼き並べ放題だぜーッ！
※これらのたこ焼きは、こちらで配布されているSVG素材を使わせて頂きました。(感謝)
ヒャッハー！ たこ焼き並べ放題だぜーッ！
※これらのたこ焼きは、
こちらで配布されているSVG素材を使わせて頂きました。(感謝)
🍵Re:3870◆長いバージョンのたこやき↓
>>3868 たこ焼き可愛い💖
>>3858
自分も>>3863を参考にしたんですけど、ルビ置換スクリプトを使ってるのでシェアします。
以下をskin-cover.html内に書き込んでください。
<script src="jqueryのURL"></script>
<script>
$(function(){
$('.onelogbox').each(function() {
$(this).html(
$(this).html()
/* 青空文庫、なろうほか（なろうの半角括弧・全角括弧は非対応） */
.replace(/[\|｜](.+?)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>')
.replace(/[\|｜]《(.+?)》/g, '《$1》')
/* pixiv */
.replace(/\[\[rb:(.*?) > (.*?)\]\]/gs, '<ruby>$1<rt>$2</rt></ruby>')
/* アルファポリス */
.replace(/#(.+?)__(.+?)__#/g, '<ruby>$1<rt>$2</rt></ruby>')
);
});
});
</script>
これで、
「｜ルビ対象《るびるび》」全角縦棒＋二重山括弧
「|ルビ対象《るびるび》」半角縦棒＋二重山括弧
にルビがつきます。
二重山括弧の直前に縦棒で二重山括弧がそのまま表示されます。「｜《これはそのまま》」
開始の全角縦棒・半角縦棒の省略は対応していません。
自分で使っててトラブルはないんですけど何か間違ってたらごめんなさい～～
追記
URL以降が省略されてしまうのでjqueryのURLを抜きました。以下のURLを「jqueryのURL」の部分に書き込んでください。
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jq...
自分も>>3863を参考にしたんですけど、ルビ置換スクリプトを使ってるのでシェアします。
以下をskin-cover.html内に書き込んでください。
<script src="jqueryのURL"></script>
<script>
$(function(){
$('.onelogbox').each(function() {
$(this).html(
$(this).html()
/* 青空文庫、なろうほか（なろうの半角括弧・全角括弧は非対応） */
.replace(/[\|｜](.+?)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>')
.replace(/[\|｜]《(.+?)》/g, '《$1》')
/* pixiv */
.replace(/\[\[rb:(.*?) > (.*?)\]\]/gs, '<ruby>$1<rt>$2</rt></ruby>')
/* アルファポリス */
.replace(/#(.+?)__(.+?)__#/g, '<ruby>$1<rt>$2</rt></ruby>')
);
});
});
</script>
これで、
「｜ルビ対象《るびるび》」全角縦棒＋二重山括弧
「|ルビ対象《るびるび》」半角縦棒＋二重山括弧
にルビがつきます。
二重山括弧の直前に縦棒で二重山括弧がそのまま表示されます。「｜《これはそのまま》」
開始の全角縦棒・半角縦棒の省略は対応していません。
自分で使っててトラブルはないんですけど何か間違ってたらごめんなさい～～
追記
URL以降が省略されてしまうのでjqueryのURLを抜きました。以下のURLを「jqueryのURL」の部分に書き込んでください。
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jq...
てがろぐのYouTube埋め込み機能だと、ショート動画は埋め込められないということに気付きました。そのうち対応させますが、今の時点でも以下のように共有用URLを書き換えるとショート動画でも埋め込めます。#🌱豆知識
- 埋め込みたいショート動画の共有用URLが https://www.youtube.com/shorts/7ME7Dv1RFUk?feature=share のとき、このURLから 7ME7Dv1RFUk の部分だけを抜き出します。
- その抜き出した文字列を https://www.youtube.com/watch?v= の後に続けて記載します。つまり、https://www.youtube.com/watch?v=7ME7Dv1RFUk のようなURLを作ります。
- そのURLを使って埋め込みます。
昼食はピザ。🍕🍕🍕
ところてんも食べました。
🍕Re:3862◆ルビの変換もいろいろ需要があるようですね。
🍕Re:3863◆これなら2行目の'article'を.onelogbodyとかに書き換えるだけで、てがろぐ上でもそのまま使えそうですね。
🍕Re:3864◆了解しました。次のバージョンで、その仕様を採用して出力するようにします。
🍕Re:3865◆さすがにドメインが x.com に変わっても twitter.com からリダイレクトはされ続けるだろうとは思うのですけども、でもまあ、イーロン・マスクは何するか分かりませんしね……。まあ、もしドメインが変更になった場合には、「埋め込みのリンク先がtwitter.comで書かれていてもx.comに変更して出力する」のような機能は作ります。イーロンが、外部サイトへのツイートの埋め込み機能を廃止したりしなければ良いのですけどね……。^^;
ところてんも食べました。
🍕Re:3862◆ルビの変換もいろいろ需要があるようですね。
🍕Re:3863◆これなら2行目の'article'を.onelogbodyとかに書き換えるだけで、てがろぐ上でもそのまま使えそうですね。
🍕Re:3864◆了解しました。次のバージョンで、その仕様を採用して出力するようにします。
🍕Re:3865◆さすがにドメインが x.com に変わっても twitter.com からリダイレクトはされ続けるだろうとは思うのですけども、でもまあ、イーロン・マスクは何するか分かりませんしね……。まあ、もしドメインが変更になった場合には、「埋め込みのリンク先がtwitter.comで書かれていてもx.comに変更して出力する」のような機能は作ります。イーロンが、外部サイトへのツイートの埋め込み機能を廃止したりしなければ良いのですけどね……。^^;
abcdefg
TwitterがXになるとのことですけど、それに伴ってURLが変わるという予想をしている方もいるみたいです。てがろぐのTwitter埋め込みも使えなくなったらと思うとちょっと心配です。まあ今の段階ではまだ何もわからないですけど……
🍉Re:3861
css調整の際に、liにもclassがあるととっても助かります……！
ご提案の内容で問題ありません！
実装されると嬉しく思います。
css調整の際に、liにもclassがあるととっても助かります……！
ご提案の内容で問題ありません！
実装されると嬉しく思います。
わたしもどこかで見た気がする。。。確かいろいろなサイトの記法に対応していたはず。
これは検索したらみつけたやつ
各種小説投稿サイトのルビ記法をJavaScriptで実現する - Qiita
https://qiita.com/8amjp/items/d7c46d9dee0da4d530ef
これは検索したらみつけたやつ
各種小説投稿サイトのルビ記法をJavaScriptで実現する - Qiita
https://qiita.com/8amjp/items/d7c46d9dee0da4d530ef
>>3859
↓pixivのルビ記法しか見つけられませんでしたが、これですかね
pixiv記法のままルビタグへ変換するJavaScript
https://ofuse.me/e/26443
そういえば、それ系の処理を以前にどなたかがJavaScriptで実現なさっていませんでしたっけね……？
↓pixivのルビ記法しか見つけられませんでしたが、これですかね
pixiv記法のままルビタグへ変換するJavaScript
https://ofuse.me/e/26443
🍧Re:3860◆ああ、確かに現状では li要素に対しては何のclass名も付加されていないですね。カテゴリツリーを構成するli要素も、例えば <li class="catbranch cat-info"> みたいな感じでclass名を割り振るようにした方が良いですかね？（※catbranch は共通のclass名、cat-info は「infoカテゴリ」固有のclass名）
（※CSSの :has()擬似クラス があらゆるブラウザで使用可能なら、これを使って li:has(.cat-info) みたいに書けば、「cat-infoクラスが含まれているli要素」だけを対象に装飾はできるのですけどもね。残念ながらFirefoxがまだです。）
（※CSSの :has()擬似クラス があらゆるブラウザで使用可能なら、これを使って li:has(.cat-info) みたいに書けば、「cat-infoクラスが含まれているli要素」だけを対象に装飾はできるのですけどもね。残念ながらFirefoxがまだです。）
てがろぐ、とっても便利で本当に感謝です！
[[CATEGORY:TREE]] についてお伺いしたいのですが、各 li にカテゴリIDをクラスとして付与することはできるでしょうか？
[[CATEGORY:TREE]] についてお伺いしたいのですが、各 li にカテゴリIDをクラスとして付与することはできるでしょうか？
🍧Re:3858◆そういえば、それ系の処理を以前にどなたかがJavaScriptで実現なさっていませんでしたっけね……？ 各種小説投稿サイトフォーマットで書いたルビ記法を解釈して動的にルビとして表示するようにするスクリプトを（（当初は）てがろぐスキンに加える用途として）お作りになっていたのをどこかで目撃したような気がするのですが。気のせいだったかな……？ てがろぐを小説公開用途にお使いの方々も多いようですから、既に稼働しているスクリプトもありそうな気もしますけども。
稼働しているCGIのソースを修正すると、おっしゃるとおりバージョンアップの度に書き換える必要が出てきて面倒ですね。ユーザ指定の文字列を正規表現として解釈して装飾記法に変換できるような設定と動作を加えるのは、（セキュリティ面の配慮も含めると特に）なかなか大変そうなので、JavaScriptで済むならJavaScriptでご対応頂けるとありがたいです。
稼働しているCGIのソースを修正すると、おっしゃるとおりバージョンアップの度に書き換える必要が出てきて面倒ですね。ユーザ指定の文字列を正規表現として解釈して装飾記法に変換できるような設定と動作を加えるのは、（セキュリティ面の配慮も含めると特に）なかなか大変そうなので、JavaScriptで済むならJavaScriptでご対応頂けるとありがたいです。
この度、てがろぐを導入させていただきました。
さっそく要望なのですが、独自の装飾記法を追加できる設定があると嬉しいです。
たとえばルビを「[R:漢字:ひらがな]」ではなく「｜漢字《ひらがな》」で書けるようにしたりできるように……
まあcomdecorate関数内に（自己責任で勝手に）
$ts =~ s/[|｜]([^|｜\n]+?)《(.+?)》/<ruby>$1<rp>(<\/rp><rt>$2<\/rt><rp>)<\/rp><\/ruby>/g;
などと足してしまってもいいのですが……アップデートのたびに本体を弄りなおすのもどうかというのもあるので。
さっそく要望なのですが、独自の装飾記法を追加できる設定があると嬉しいです。
たとえばルビを「[R:漢字:ひらがな]」ではなく「｜漢字《ひらがな》」で書けるようにしたりできるように……
まあcomdecorate関数内に（自己責任で勝手に）
$ts =~ s/[|｜]([^|｜\n]+?)《(.+?)》/<ruby>$1<rp>(<\/rp><rt>$2<\/rt><rp>)<\/rp><\/ruby>/g;
などと足してしまってもいいのですが……アップデートのたびに本体を弄りなおすのもどうかというのもあるので。
🍭Re:3854
ご回答ありがとうございます！
対処法について、確認させていただきました。
JavaScript変数で記述する方法を試してみます。
お早いご返信、誠にありがとうございました！
ご回答ありがとうございます！
対処法について、確認させていただきました。
JavaScript変数で記述する方法を試してみます。
お早いご返信、誠にありがとうございました！
かき氷を買ってきました。🍧🍧🍧
🍧Re:3854◆下記のⒶではなくⒷの順序で書くと、少なくとも引用符内が『半角スペースで終わる』ことは避けられます。
この半角スペースは、てがろぐが生成しているわけではなく、スキンHTMLソースに直接書かれているものですから、てがろぐ側ではどうにもできないのです。HTMLの文法的には半角スペースがいくつ入っていても問題はないので、そのままお使い頂けば良いと思うのですが、どうしても気になる場合は、以下の対処法もあります。
🍧Re:3855◆有用なTipsをどうもありがとうございます！
🍧Re:3854◆下記のⒶではなくⒷの順序で書くと、少なくとも引用符内が『半角スペースで終わる』ことは避けられます。
- Ⓐ<div class="onelogbox [[CATEGORYIDS:IFEMPTY:hogehoge]] [[POSTSTATUS]]">
- Ⓑ<div class="onelogbox [[POSTSTATUS]] [[CATEGORYIDS:IFEMPTY:hogehoge]]">
この半角スペースは、てがろぐが生成しているわけではなく、スキンHTMLソースに直接書かれているものですから、てがろぐ側ではどうにもできないのです。HTMLの文法的には半角スペースがいくつ入っていても問題はないので、そのままお使い頂けば良いと思うのですが、どうしても気になる場合は、以下の対処法もあります。
- let pstatus = "[[POSTSTATUS]]"; のようにJavaScriptで変数に入れてから、値がある場合だけclass属性値に合成するようスクリプトを書く。
- <div class="onelogbox"><div class="[[CATEGORYIDS:IFEMPTY:hogehoge]]"><div class="[[POSTSTATUS]]"> のように、div要素を分割する。
🍧Re:3855◆有用なTipsをどうもありがとうございます！
いつもてがろぐに大変お世話になってます。
投稿記事の単独表示時にページタイトル(title要素、htmlのtitleタグの中身)へ記事タイトルや投稿本文の一部を入れる方法は以前>>3293さんがjQueryで実現されてましたが、自サイト用にjQueryを使わないJavaScriptで同じようなものを作ったのでお裾分けします。
外側スキンhtmlの最後の方にある遅延読み込みスクリプト群に下記ソースを貼り付けるか、<script>～</script>の中身だけをjsファイルとして保存して遅延読み込みスクリプト群の所から呼び出せば動くはずです。
私のサイトおよびローカル環境の公式スキンで動作確認済みですが、書き方が間違ってる等のツッコミがありましたらお教え下さると幸いです。
ブログタイプスキン向け(本文1行目をタイトルとして入力している、[[COMMENT:TITLE]]系の記法を使っているという環境向け)
標準スキンや昔のツイッターっぽいスキンなど、ブログタイプ以外のスキン向け(Twitterのように、投稿本文の冒頭部分から指定文字数をtitle要素に入れる)
document.querySelector('.●●●')の部分はhtml内のクラス名であれば何でも指定できます。
たとえば私のサイトの場合、投稿記事本文の1行目じゃない部分に強調装飾記法をつけて記事タイトル代わりの表示をしているのですが、decorationEクラスを指定すれば本文内の位置に関係なく強調装飾している部分だけがページタイトルに入ります。(1記事内に1回以上強調装飾を使っていないという条件はつきますが…。)
投稿記事の単独表示時にページタイトル(title要素、htmlのtitleタグの中身)へ記事タイトルや投稿本文の一部を入れる方法は以前>>3293さんがjQueryで実現されてましたが、自サイト用にjQueryを使わないJavaScriptで同じようなものを作ったのでお裾分けします。
外側スキンhtmlの最後の方にある遅延読み込みスクリプト群に下記ソースを貼り付けるか、<script>～</script>の中身だけをjsファイルとして保存して遅延読み込みスクリプト群の所から呼び出せば動くはずです。
私のサイトおよびローカル環境の公式スキンで動作確認済みですが、書き方が間違ってる等のツッコミがありましたらお教え下さると幸いです。
ブログタイプスキン向け(本文1行目をタイトルとして入力している、[[COMMENT:TITLE]]系の記法を使っているという環境向け)
<script>畳む
window.addEventListener('load', function() {
let nowurl = location.href; //現在のURL
let singleurl = nowurl.indexOf('postid='); //記事単独表示かをURL内からpostid=の有無で判別
//postid=がURLに含まれる場合のみ実行
if( singleurl != -1){
let Basetitle = document.title; //元のページタイトルを変数に入れておく
let ArticleTitleget = document.querySelector('.logtitle'); //logtitleクラスのhtml要素を取得
let ArticleTitle = ArticleTitleget.innerText; //logtitleクラスのテキストだけ取得
document.title = Basetitle + ' - ' + ArticleTitle; //ページタイトルを元のタイトル、半角スペースとハイフン、記事タイトルを連結させたものにする
}
});
</script>
標準スキンや昔のツイッターっぽいスキンなど、ブログタイプ以外のスキン向け(Twitterのように、投稿本文の冒頭部分から指定文字数をtitle要素に入れる)
<script>畳む
window.addEventListener('load', function() {
let nowurl = location.href; //現在のURL
let singleurl = nowurl.indexOf('postid='); //記事単独表示かをURL内からpostid=の有無で判別
//postid=がURLに含まれる場合のみ実行
if( singleurl != -1){
let Basetitle = document.title; //元のページタイトルを変数に入れておく
let ArticleTitleget = document.querySelector('.comment'); //commentクラスのhtml要素を取得
let ArticleTitle1 = ArticleTitleget.innerText; //commentクラスのテキストだけ取得
let textcount = 30; //ここで本文から切り出す文字数を指定
let ArticleTitle = ArticleTitle1.substring(0, textcount); //0の部分を変えると切り出し開始位置を変更可能
document.title = Basetitle + ' - ' + ArticleTitle; //ページタイトルを元のタイトル、半角スペースとハイフン、記事タイトルを連結させたものにする
}
});
</script>
document.querySelector('.●●●')の部分はhtml内のクラス名であれば何でも指定できます。
たとえば私のサイトの場合、投稿記事本文の1行目じゃない部分に強調装飾記法をつけて記事タイトル代わりの表示をしているのですが、decorationEクラスを指定すれば本文内の位置に関係なく強調装飾している部分だけがページタイトルに入ります。(1記事内に1回以上強調装飾を使っていないという条件はつきますが…。)
