てがろぐ - Fumy Otegaru Memo Logger -

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

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

or 管理画面へ

タグ「🌱豆知識」を含む投稿[52件]

ケーキも食べたいのだけど、そろそろプリンも食べたい気がする。問題は、どちらもないことなんだけど。(´・ω・`)

🍮Re:2404◆バージョンアップありがとうございます。新機能がお役に立ったようで嬉しいです。ちなみにですが、URL上で同種のクエリパラメータをカンマ記号で区切るのはGoogleも推奨していました。
🍮Re:2405◆ハッシュタグやカテゴリが付けられていれば、後から見直す際に見逃さずに済む、というくらいのことなので、新規投稿をそのときに見逃すことは(少なくとも今の投稿頻度なら)ありませんのでご安心下さい。(╹◡╹)
🍮Re:2406◆絵文字の見え方は閲覧者の環境によって異なるのですが、Twitterではその差異を吸収するためなのか、独自の画像に変換して絵文字を見せているのですよね。そのスクリプトはオープンに公開されていますので、これを使うとTwitterと同じ絵文字(画像)で表示できます。 #🌱豆知識
🍮Re:2407◆てがろぐCGIの前身になった「Fumy News Clipper」もそうなんですが、CGIって2000年代に作られたものが多いですよね。当時の文字コードはSHIFT-JISが使われることが多かったので、絵文字が使えないCGIが多かったと言えますね。最近はUTF-8を使わない理由がないので、最近に1から書かれたCGIならたいてい使用可能だろうと思います。
🍮Re:2408◆一応はUnicodeの説明でも「📛」はName Badgeという名称で説明されてはいるのですけども、これをName Badgeと言われて納得できる文化圏って日本しかないですよね。(笑)
🍮Re:2409◆参考になったようで良かったです。ご活用頂ければ幸いです。(╹◡╹)ノ

バニラ最中アイスは食べました。

by nishishi. <764文字> 編集

てがろぐ FAQ・豆知識ページを作りました!
https://www.nishishi.com/cgi/tegalog/faq/

ここで公開してきた #🌱豆知識 とか、トラブルシューティング関連情報とか、その他よく頂いたご質問等をまとめた新解説ページです。覗いてみて下さい。

20210530200159-sakura.jpg

ほぼ5月(の、てがろぐ開発用時間)は、このページの作成に費やしました。その辺の話はこちら
ねむい。_(:3」∠)_

by nishishi. <202文字> 編集

JavaScriptを使ってリンク先URLを動的に編集する手もあります。(先程の続き)

🌽Re:2158◆補足ですが、複数のスキンを並行して利用しているなど、「適用中のスキン名を維持したリンクを出力する必要がある場合もある」なら、>>2159 で示したように『一時適用中のスキンを維持できるリンクを出力する』項目のチェックを外す方法だと困りますね。その際は、JavaScriptを使って動的にURLを書き換える方法があります。要はリンク先URLの中からスキンを指定している記述(例では skin=skin-twitter )を削除できれば良いのですから、HTMLソースの中で『SSIで埋め込んだ部分』よりも(重要)に以下のようなJavaScriptソースを書いておくと良いです。
<script>
var targets = document.querySelectorAll("a");
targets.forEach(function(oneTarget) {
   var oldHref = oneTarget.getAttribute('href');
   var newHref = oldHref.replace('skin=skin-twitter', '');
   oneTarget.setAttribute('href', newHref);
});
</script>

このJavaScriptが実行されると、ページ内のすべてのa要素にあるhref属性値の中から「skin=skin-twitter」の文字列が削除されます。その結果、スキン指定を無視してデフォルトスキンで表示されるリンクになります。スキン名の部分(赤色文字)は適宜書き換えて下さい。#🌱豆知識

🌽補足1:
なお、すべてのa要素を対象にするのはちょっと無駄な処理が多いのではないか? と思われる場合には、上記ソースの2行目を、以下のように「class名で対象を限定する記述」に書き換えると良いです。
●ハッシュタグリンクだけを対象にする場合:var targets = document.querySelectorAll(".taglink");
●指定No.へのリンクだけを対象にする場合:var targets = document.querySelectorAll(".postidlink");

🌽補足2:
もしくは、SSIで埋め込んでいる領域を例えば<div class="umekomi">~</div>で囲んでいるなら、この範囲に含まれるa要素だけを対象にするよう以下のように書く方法もあります。
var targets = document.querySelectorAll(".umekomi a");
この方がすべてのリンクを1行で対象にできて、分かりやすくて楽な気もします。

🍿蛇足:
補足というか蛇足ですが、もし「別のスキンを適用した状態」にリンクを書き換えたいなら、5行目のoldHref.replace('skin=skin-twitter', '');部分を、oldHref.replace('skin=skin-twitter', 'skin=skin-sakuratan');のように書き換えれば、skin-sakuratanが適用されたリンクに差し替わります。

by nishishi. 回答/返信 <1405文字> 編集

朝食は食パン。

🍨Re:2158◆下図の黄色矢印部分のように、『一時適用中のスキンを維持できるリンクを出力する』のチェックを外すと、適用中のスキンを維持しないリンクが出力されるため、「埋め込み用のスキンが適用された状態のリンク」が出力されてしまうのを避けられます。同時に、『本文中のテキストリンクを絶対URI(フルパス)で出力する』にチェックを入れておくと、SSIで埋め込んでいるディレクトリの違いによってテキストリンクのリンクパスが正しくなくなるのを防げます。
20210519120831-admin.png
2019年にブログに書いた「てがろぐCGIが出力した最新の1件を任意の場所にSSIで埋め込む方法」の初版では現在の最新バージョンに存在する種々の対策方法についての説明が足りていなかったので、先日書き足しておきました。この記事の見出し「SSIを使って、てがろぐCGIが出力する最新の1件だけを埋め込む」以降を再度ご覧頂ければ幸いです。(注: >>2160 に続きます。)
SSIで埋め込んでいる領域で画像が正しく表示されない場合は、下図の水色矢印部分にもチェックを入れると良いです。
20210509194033-admin.png
#🌱豆知識

🍨Re:2157◆トウモロコシあったぁぁぁ!*・゜゚・*:.。..。.:*・'(*゚▽゚*)'・*:.。. .。.:*・゜゚・*🌽🌽🌽🌽🌽🌽
🍨Re:2156◆ありがたい限りです。ご活用頂いているところが見えると、開発のモチベーション維持に絶大な効果があります。(╹◡╹)

昼食は焼き飯。

by nishishi. 回答/返信 <629文字> 編集

気力が、足りない。_(┐「ε:)_

🍵Re:2111◆サーバを移行する際には、基本的には tegalog.cgi の存在する場所にあるすべてのフォルダとファイルをまとめて移動すれば良いです。もし移動するファイル数を最小限にしたい等の事情がある場合は、おっしゃるファイル群に加えて psif.cgi(=パスワード・セッションID格納ファイル)もコピーして下さい。psif.cgiファイルをコピーしないと、全ユーザのパスワードが未設定に戻った状態で稼働してしまいますのでご注意下さい。

※psif.cgiファイルには、全ユーザのパスワードがハッシュ化されて保存されています。ハッシュ化というのは「元には戻せない暗号化」のような仕組みなので、ファイルの中身を覗いてもパスワード自体は分かりません(元のパスワード文字列に復元する技術的な方法が存在しません)。しかし、パスワードの正誤判定には必要です。

なお、psif.cgiファイルにはセッション情報(=ログイン状態)も保存されているのですが、ログイン状態は「ドメインに対するCookie」で維持されていますので、別ドメインに移動させるとログイン状態は解除されます。(※サーバを移動してもドメインが変わらなければセッションは維持できますが。)
その際、管理画面の下部に灰色で小さく表示されている「現在のログイン件数」は、(psif.cgiファイルで管理されているため)仮に『前のサーバで3件のログインがある状態』で新サーバに移行すると、『本来は誰もログインしていないのに、ログイン件数が3件ある』と認識されてしまいます。その状態でも動作に支障はありませんが、その表示に不都合を感じられるようでしたら、一度『全員を強制ログアウト』を実行して、ログイン件数を0にリセットしてからお使い頂くと良いです。#🌱豆知識

🍵Re:2110◆サポートありがとうございます。(╹◡╹) おっしゃるとおりです。
🍵Re:2109◆仕様上の上限はありません。何万文字でも投稿可能です。(参考:No.160)
🍵Re:2108◆いろはにほへとちりぬるを(続きは覚えていない)

睡眠も、足りない。_(:3」∠)_

by nishishi. 回答/返信 <920文字> 編集

🍩スキンHTML内でコメントアウトする際の#🌱豆知識:

スキンをカスタマイズする際に、例えば [[hogehoge]] という記述を一時的に無効化しようと考えて <!-- [[hogehoge]] --> のように書きたくなるケースがあると思うのですが、これはお勧めできません

なぜかというと、 [[hogehoge]] の箇所に実際に挿入されるHTMLソースの中にもHTMLのコメント記法が含まれている場合があるからです。例えば [[hogehoge]]] の箇所は <div class="hagehage"><!-- ▼ここは○○です --><a href="higehige">ふげふげ</a></div> のように出力されていることがあります。

このとき、スキンHTMLに <!-- [[hogehoge]] --> と書いてしまうと、実際には <!-- <div class="hagehage"><!-- ▼ここは○○です --><a href="higehige">ふげふげ</a></div> --> と出力されてしまいます。

HTMLの文法では、コメントは入れ子構造にできない仕様なので、最初に「-->」が現れたところでコメントアウトが終わってしまいます。つまり、上記だと、最後の「-->」ではなく、半ばの「-->」でコメントが終わったとブラウザは判断してしまいます。

その結果、HTMLタグの開閉が一致しなくなってレイアウトが崩れてしまいます。普通は、中途半端に何かが表示されていればコメントアウトがおかしいことに気付くでしょう。しかし、てがろぐの各種記法には「ある状況でしか中身が挿入されない」という記法がいくつかあります。そういうものをコメントアウトしていると、『状況によっては何も表示されないために、コメントアウトが中途半端なことに気付かない』というケースがあり得ます。その場合、ある特定の条件が成立している場合にだけ表示が崩れる、ということになってしまいます。

なので、[[hogehoge]] 等の記法をコメントアウトしたい場合は、例えば
<!-- {{hogehoge}} --> ←カッコの種類を変える
<!-- //hogehoge// --> ←カッコを別の記号にする
<!-- [[ hogehoge ]] --> ←カッコと英字の間に空白を入れる

……のようにするとか、何か余計な文字を加えるか削るかして、てがろぐCGI側が展開しないような書き方に修正することをお勧め致します。

※てがろぐ側の出力内容にもHTMLのコメント記法を使ってコメントを含めてあるのは、『最終的な出力ソース(=ブラウザのソース表示機能を使って見えるHTMLソース)を参考にして、装飾のためのCSSを考える際に、「そこが何のための出力なのか」を示すことで考えやすくするため』です。(たいていは)
畳む

by nishishi. <1223文字> 編集

カテゴリをアイコンで表示したい場合 #🌱豆知識

所属カテゴリの名称を表示する代わりに、カテゴリを表すアイコンを表示したい場合は、例えば以下のような方法があります。

▼方法1:(今のところ一番お勧めな方法)
以前に No.1881 で紹介しましたので、そちらをご参照下さい。

🍘🍘🍘🍫🍫🍫🍪🍪🍪
▼方法2:簡単な(分かりやすい)方法(ただし、1投稿に1カテゴリしか設定しない前提)
内側スキンに、以下のようなimg要素を書きます。
<img src="/imagepath/[[CATEGORYIDS:IFEMPTY:nocat]].png" alt="[[CATEGORYNAMES]]">
すると、実際には以下のような出力になります。

●カテゴリ info (情報)に属する場合: <img src="/imagepath/info.png" alt="情報">
●カテゴリ diary (日記)に属する場合: <img src="/imagepath/diary.png" alt="日記">
●どのカテゴリにも属さない場合: <img src="/imagepath/nocat.png" alt="(※)">

なので、 info.png とか diary.png とか nocat.png とかのファイル名で適当な場所(上記の場合は/imagepath/)に画像ファイルを用意しておけば、それが表示されます。
ただ、この場合は、1つの投稿に複数のカテゴリが設定されている場合にはうまくいきません。(例えば、infoカテゴリと diaryカテゴリの両方に属している場合用に「info diary.png」を用意するなど、あらゆるパターンを用意していれば話は別ですが。^^; ※[[CATEGORYIDS:IFEMPTY:xxx]]を使う場合、カテゴリIDの区切りは常に半角スペースになります。なので、半角スペースを含むファイル名の画像が必要になります。詳しくは、解説ページの「カテゴリ関連要素」項目をご参照下さい。

(※)の部分にどう表示されるかは、管理画面の[設定]→[ページの表示]→【カテゴリの表示】→「カテゴリ名として表示する内容」項目の設定次第です。デフォルト設定では、何も表示されません。

🍘🍘🍘🍫🍫🍫🍪🍪🍪
▼方法3:(何らかの事情で方法1が使えない場合。複数カテゴリでも(一応は)動作に問題はない)
内側スキンに、以下のようなspan要素を書いておきます。
<span class="caticon"><span class="[[CATEGORYIDS:IFEMPTY:empty]]">[[CATEGORYNAMES]]</span></span>
すると、実際には以下のような出力になります。

●カテゴリ info (情報)に属する場合: <span class="caticon"><span class="info">情報</span></span>
●カテゴリ diary (日記)に属する場合: <span class="caticon"><span class="diary">日記</span></span>
●カテゴリ info と diary に属する場合: <span class="caticon"><span class="info diary">情報,日記</span></span>
●どのカテゴリにも属さない場合: <span class="caticon"><span class="empty">(※)</span></span>

上記の場合は、1つの投稿に複数のカテゴリが設定されていてもおかしくはなりません。
その上で、例えば以下のようにCSSを書いておきます。
/* アイコンサイズ等の共通装飾 */
.caticon span {
   display: inline-block; /* インラインブロック化 */
   width: 32px; /* アイコンの横幅 */
   height: 32px; /* アイコンの高さ */
   background-size: contain; /* 背景画像を描画面積に合わせる */
   text-indent: -9999px; /* テキストを非表示にする */
}
.caticon .info { background-image: url("info.png"); }  /* info用画像 */
.caticon .diary { background-image: url("diary.png"); } /* diary用画像 */
.caticon .empty { background-image: url("empty.png"); } /* なし用画像 */

要するに、背景画像としてアイコン画像を指定しています。

この場合、1投稿に複数のカテゴリが設定されている場合は、どれか1つ(たぶん後に記述されているアイコン)だけが表示されるので、所属カテゴリ全部のアイコンを並べられるわけではありません。しかし、少なくともおかしな出力にはならないので、表示は可能でしょう。
なので、アイコン表示とは別に [[CATEGORYLINKS]] も記述しておいて、カテゴリの名称がテキストで列挙される空間も併せて用意しておく方が良いでしょうね。

🍘🍘🍘🍫🍫🍫🍪🍪🍪
以上、カテゴリをアイコンで表示する方法3つでした。
もしかしたら、もっと良い方法が他にあるかもしれませんけども。

とはいえ、何か公式に「カテゴリをアイコンで表示する」仕組みを用意した方が良いかもしれませんね。一応、方法1で問題ないのではないかとは思うのですが、CSSを自力で書く必要があるのがちょっと大変かもしれませんし……。
[[CATEGORYICONLINKS]]みたいな感じで、アイコン出力前提のHTMLを挿入できると良いですかね。
出力は、<img src="info.png" alt="情報"><img src="diary.png" alt="日記">……みたいな感じで、カテゴリの数だけ列挙されるような。

何かご要望あればお気軽にお知らせ下さい。(╹◡╹)ノ
畳む

by nishishi. 情報 <2616文字> 編集

そういえばまったくアナウンスしていなかったのですが、もしバージョンアップ後の投稿時にCGIの設置ドメインとは異なる場所からデータが送信されましたというエラーが出てしまって投稿できない場合で、https://~ で始まるURLをお使いの場合は、最新のβ版(Ver 3.1.5)にバージョンアップしてみて下さい。現在の正式版ではまだ対処できていないのですが、最新β版では、httpsとhttpとの差だけで別サーバだと認識されてしまう問題を解決してありますので、そのエラーは出なくなるはずです。#🌱豆知識

by nishishi. <250文字> 編集

ガトーショコラもモンブランも捨てがたいと思ったのだが、ショコラモンブランなるケーキもあるのか。🎂

🎂Re:1880◆カテゴリが1つも選択されていない場合に何を出力するかは、管理画面の[設定]→[ページの表示]→【カテゴリの表示】→[1投稿にカテゴリが1つも設定されていない場合]欄で設定できますが、これでは対処できない問題でしょうか?◆カテゴリへのリンクをアイコンにしたい場合は、次の方法ではいかがでしょうか。まず内側スキンには、[[CATEGORYLINKS]] と書いておきます。すると、そこで出力されるHTMLは以下のようなカテゴリリンク(の列挙)になりますので、<a href="?cat=カテゴリID" class="categorylink">カテゴリ名</a>このa要素を、CSSで.categorylink[href*="カテゴリID"] { ~装飾~ }のように装飾すると良いかもしれません。例えば、.categorylink[href*="sakuratan"] { ~装飾~ } のように書くと、『class名が「categorylink」であり、href属性値に「sakuratan」という文字列が含まれる要素だけ』を対象にして装飾できます(属性セレクタ)。なので、各カテゴリIDごとの装飾をあらかじめ用意してbackground-imageプロパティなどを使って画像を指定(もしくは::after疑似要素で画像を指定するなど)すると、カテゴリが複数個あってもカテゴリ1つ1つを別個の画像として列挙できる気がします。◆カテゴリの並び順は、カテゴリツリーを上から順番に眺めた並び順(=投稿欄の下部に表示される「区分」ボタンでリストアップされているカテゴリの掲載順)と同じハズです。なので、カテゴリ管理画面から掲載順序を調整することで、各投稿に挿入されるカテゴリの並びも調整できます。……というわけで、どんな感じでしょう? #🌱豆知識

とりあえず夕飯を食べたのでケーキ欲は治まってきました。ぐふー。(夕飯にケーキを食べたわけではありません。)
🎂🎂🎂🍰🍰🍰

by nishishi. 回答/返信 <890文字> 編集

いつの間にか、もう大晦日……。

🍰Re:1872◆ご要望をありがとうございます。たしかに、電話番号(tel://~)やメールアドレス(mailto://~)へのリンクの需要もありそうですね。これは将来のバージョン(たぶん次のバージョン)で実装できると思います。しばらくお待ち下さい。

🍰Re:1871◆そうです。お望みの限定条件を表すURLの末尾に、ご自身で「&mode=rss」を加えたURLをリンク先として掲載して下さい。その方法なら、お好きな条件に限定されたRSSフィードを提供できます。No.1869の機能も早めに実装したいと思っています。

🍰Re:1870◆文字を大きく掲載する装飾機能はデフォルトでは用意していませんが、各装飾に対するCSSはご自身でどのようにでもカスタマイズできますので、例えば『強調装飾では文字を大きく掲載する』というようなCSSを書いておけば、文字を大きく掲載できます。『強調』に対する装飾は .decorationE { ~装飾内容~ } というCSSで指定できますので、例えば .decorationE { font-size: 1.25em; } のようにCSSを書いておくと、『強調』を指定した対象の文字は1.25倍の大きさで表示されます。『強調』と『太字』がほぼ同じような用途の機能として重複していますから、片方を「大きくする」用途に変えても不都合は少ないかなと思いますが、どうでしょう? #🌱豆知識

🍰Re:1867◆ご愛用頂ければ幸いです。カスタマイズ解説ページも頑張って書きましたので(笑)、ご活用頂ければ嬉しいです。(╹◡╹)ノ

by nishishi. 回答/返信 <695文字> 編集

食べ過ぎは良くない……。腹八分で止めておかなければ……。

🍨Re:1865◆特定のカテゴリだけをRSSフィードにすることも可能です。例えばこのURLは、カテゴリ「アップデート✨」の投稿に限定したRSSフィードになります。てがろぐCGIでは、今のURLの末尾に「&mode=rss」と加えれば、今見ている内容(=限定条件)をそのままRSSフィードにできます。なので、任意の単語の検索結果すらもRSSフィードにすることもできます。もちろん、カテゴリの他にハッシュタグでもRSSフィードにできます。ある特定の種類の投稿だけをRSSでお知らせしたい場合などにご活用下さい。 #🌱豆知識

🍨Re:1864◆見つけて下さってありがとうございます。ご活用頂ければ幸いです。Perlはずいぶんと下火になってしまいましたね。このCGIも、前身になったCGIが存在したのでPerlで書いていますが、もし今1からソースを書くならPerlではなくPHPを使ったと思います。(^_^;)

🍨Re:1863◆バージョンアップありがとうございます!
🍨Re:1862◆メリークリスマした!

by nishishi. 回答/返信 <484文字> 編集

ここの先頭固定部分はデモ用にずっと残しておくべきか、どうしようかな……。デモには良いけども、最新の投稿がぱっと目に入ってこない問題もありそうな。

🍮Re:1858◆デフォルトではLightbox用の属性が出力されますが、管理画面の[設定]→[ページの表示]→[投稿本文の表示/画像]欄にある「属性」欄(下図)をお使いのスクリプト用に書き換えれば、Lightbox以外の画像拡大スクリプトをお使い頂けますのでお試し下さい。
20201223135423-admin.png #🌱豆知識

🍮Re:1857◆バージョンアップありがとうございます。最新版を使って頂けていると開発意欲が維持できてありがたいです。(笑)
🍮Re:1856◆ご活用下さってありがとうございます。お役に立てば幸いです。

by nishishi. 回答/返信 <323文字> 編集

自サイトに自力でCGIを設置する際のメリットはいろいろありますが、「データファイルを直接弄れる」という点も大きなメリットだと思います。例えば今2,000件くらいの投稿があるとして、そのうち所々で消したい投稿が合計800個くらいある場合、Web上からいちいち削除していたら激しく手間ですが、データファイル(tegalog.xml)をテキストエディタで開けば、1行=1投稿で記録されていますから、ざっと上から眺めて消したい投稿の行だけを消していけば、あっという間に整理できます。こういうのはTwitterのような(他社のWeb上で提供されている)Webサービスではできないメリットでしょうね。また、大量の投稿があって、内容によって2つのCGIに分割したくなった場合でも、データファイルをコピーしてから直接編集して分ければ簡単です。 #🌱豆知識

テキストエディタは、UTF-8コード(BOMなし)が扱えるものなら何でも大丈夫ですが、特にこだわりがなければEmEditorをお勧めしております。有償ソフトですが、機能制限ありの無償版として使うこともできます。

by nishishi. <477文字> 編集

アスキーモードで転送するFTPソフトが使えなくなった等の事情で、てがろぐCGIのバージョンアップを断念していた方がいらっしゃったら、「Ver 3.0.0以降ならアスキーモードで転送できなくても大丈夫(な可能性が高い)」と教えて差し上げてくだしあ。#🌱豆知識

by nishishi. <128文字> 編集

ドーナツを食べようかな……と思っていたのだけども、やめた。
ちょっと、お腹の脂肪を減らした方が良いよな……というような感じの理由で。

🍩Re:1777◆カテゴリをツリー形態ではなく横にずらっと並べるには、CSSを書くだけで実現できます。基本は、ul要素とli要素に対して「display:inline;」を指定することで、リスト形態ではなくインライン形態に表示させる装飾を書くことです。例えば、以下のように書くと横に並びます。#🌱豆知識
.cattree {
  display: inline;    /* インラインに表示する */
}
.cattree li {
  list-style-type: none;    /* リストの先頭記号を消す */
  display: inline;    /* インラインに表示する */
}

実際に使う際には、余白量も調整した方が良いと思いますが。なお、カウント数値を消すには.cattree .num { display:none; }と書くと消せます。

この辺のカスタマイズ方法は、カスタマイズ方法ページ内の、カテゴリツリーの装飾方法に記載していますのでご参照下さい。カテゴリの第1階層だけを横方向に並べる方法や、カウント数値を消す方法などについては、さらにカテゴリの第1階層だけを表示させる方法に掲載しています。ご参照頂ければ幸いです。

by nishishi. 回答/返信 <609文字> 編集

ウェブサーバにロリポップをお使いの場合で、サーバ基本情報にある「サーバ番号」が ecoxxx、litxxx、stdxxx、spdxxx、entxxx のどれかに該当する場合は、
てがろぐ本体(tegalog.cgi)をテキストエディタで開いて、1行目にある記述を
#! /usr/local/bin/perl
のように修正する必要があります。

どうやら、ロリポップでは Perl 5.30 を使うサーバの場合、Perlのパスは上記のように「 /usr/local/bin/perl 」と指定しないと動作しない仕様のようですから。デフォルトのままの「 /usr/bin/perl 」では 500 Internal Server Error になってしまいます。比較的新しいサーバでは上記のような仕様になっているっぽいですね。#🌱豆知識

by nishishi. <367文字> 編集

ハッシュタグ機能を使う設定にしている場合(※標準設定ではそうなっています)、半角「#」記号に続けて何かを書くとハッシュタグだと認識されます。CSSの配色など #ccffcc のような文字列をハッシュタグだと認識されずに書きたい場合には、「#」の代わりに数値文字参照で「&#35;」と書くと良いです。すると、画面上では「#」と表示されるものの、ソース(実データ)ではあくまでも「&#35;」になるので、ハッシュタグだとは認識されずに済みます。 #🌱豆知識

by nishishi. <226文字> 編集

投稿欄への入力が終わってからキー操作だけで「投稿する」ボタンを押したい場合は、[Tab]→[Enter] の順に押すのがお勧めです。すると、マウスを使わずに投稿できます。(※最初の[Tab]キーでフォーカスが「投稿する」ボタンへ移動し、次の[Enter]キーでボタンを押下できるため。) #🌱豆知識(再掲)

by nishishi. <153文字> 編集

YouTubeのURLの前に[YouTube]というラベルを置くと動画を直接埋め込める機能があるのですが、URLの中程にある「watch?」の直後に「v=」が存在するURLでないと認識されない仕様がありました。Ver 2.6.0ではそこを修正して、「watch?」の直後が「v=」ではないURLでも動画として埋め込めるようになっています。Ver 2.6.0は近日中に配布開始できる予定です。(プログラムは既にFixしていますが、ドキュメントをまだ書いていないので……。)#🌱豆知識

▼「watch?」の直後に「v=」があるURL: watch?v=AMJkpT1UlgA&feature=youtu.be


▼「watch?」の直後に「v=」がないURL: watch?reload=9&v=AMJkpT1UlgA&feature=youtu.be


従来のバージョンをお使いで、「何故か動画が埋め込めない」という場合には、上記の後者のようなURLになっていないかご確認下さい。前者のようなURLなら従来のバージョンでも動画として埋め込めます。

by nishishi. <475文字> 編集

そろそろ退院1ヶ月。てがろぐCGIの開発も再開させたいのだけど、それ以前に何を作りかけていたのかを思い出すところから始めないと……。とりあえず、カレンダーの前後移動ナビを出力する機能とかだったかな……。どこまで何を作ったらVer 2.6.0としてリリースするつもりだったのかも思い出さないといけない。(^_^;;;

iPhoneなどのiOSでは、テキスト入力欄内の文字サイズが16px未満のとき、テキスト入力欄にカーソルが入ると、画面全体が自動的にズームします。その結果、ページ全体が微妙に横スクロールするようになったり、ページの文字サイズ全体が拡大されたりして見えます。(てがろぐ標準スキンだと、すべてそうなります。) そのような自動ズームを防ぐには、テキスト入力欄の文字サイズを16px以上にすれば良いので、例えば textarea { font-size: 16px; } のようにCSSを書いて入力文字サイズを16pxにする方法があります。#🌱豆知識

つい最近この事実に気付いたので、次のバージョン以後に添付するスキン(のCSS)には、この記述を加えておこうかな……と検討中。

by nishishi. <495文字> 編集

URLを自動でリンクにする設定にしていると https://www.nishishi.com/ のようにURLを書くだけでリンクになるわけですが、ある特定の箇所だけはリンクにしたくない場合もあるでしょう。その場合は、https:// の8文字の中のどれか1つを数値文字参照の書き方に変えると良いです。
例えば、&#104; と書けばウェブ上では「h」に見えるので https://www.nishishi.com/ のようにリンクにならずに記述できます。 &#58; と書けばウェブ上では「:」に見えるので https://www.nishishi.com/ のようにリンクにならずに記述できます。要は https:// の全部がそのまま(見たままの)英字・記号で書かれていない限りリンクにはなりませんので。 #🌱豆知識

返信:
🍘Re:1522◆お気に召したようで嬉しいです。ご活用頂ければ幸いです。(^_^)
🍘Re:1521◆気付いて下さってありがとうございます。(^_^) 新バージョンのアナウンスはどうするのが最も望ましいのでしょうかね……。^^;

by nishishi. 回答/返信 <481文字> 編集

ギャラリーモード内でも、特定ユーザに限定して表示したり、特定ハッシュタグに限定して表示したりできます。
バリエーションの例は以下のような感じです。#🌱豆知識
ギャラリー(デフォルトの表示) : tegalog.cgi?mode=gallery
ギャラリー(ユーザIDを限定) : tegalog.cgi?mode=gallery&userid=ユーザID
ギャラリー(ハッシュタグ限定) : tegalog.cgi?mode=gallery&tag=ハッシュタグ
ギャラリー(日付の範囲を限定) : tegalog.cgi?mode=gallery&date=日付
ギャラリー(任意の単語で検索) : tegalog.cgi?mode=gallery&q=検索語

by nishishi. <337文字> 編集

拡大画像が表示される際に、ぐいーんと枠が広がるアニメーションが嫌で「Lightbox以外のスクリプトを使いたい」と思われる方もいらっしゃるかも知れませんが、わざわざ別のスクリプトに変更しなくても、Lightboxのオプションを以下のように指定するだけで、ぐいーんと広がったり、ふわっと切り替わったりするアニメーション効果をOFFにして、一瞬で拡大画像を表示することもできます。#🌱豆知識

具体的には、外側スキン(skin-cover.html)内の末尾に記述してある [[JS:LIGHTBOX:JQ]] の記述よりも下側に(重要)、以下のHTMLソース(JavaScript)を書きます。
<script>
lightbox.option({
   'fadeDuration': 0, /* 描画枠の描画アニメーション時間を0ミリ秒にする(デフォルトは600) */
   'imageFadeDuration': 0, /* 画像の読み込み時のアニメーション時間を0ミリ秒にする(デフォルトは600) */
   'resizeDuration': 0 /* 描画枠のサイズ変更時のアニメーション時間を0ミリ秒にする(デフォルトは700) */
})
</script>

上記では、fadeDuration、imageFadeDuration、resizeDurationの3項目の値をすべて0にしています。これはアニメーションにかける時間をミリ秒で指定するオプションなので、0を指定するとアニメーション効果をOFFにできます。「アニメーション効果は欲しいが、もっと素早く動いて欲しい」という場合には、デフォルト秒数よりも短い時間を指定すれば良いでしょう。
なお、複数のオプションを記述する際は、上記のように半角カンマ記号「,」で区切ります。このとき、最後の項目の後にはカンマ記号を打たないように注意して下さい。

ちなみに、ナビゲーション関連のオプションには例えば以下のような項目もあります。
<script>
lightbox.option({
   'alwaysShowNavOnTouchDevices': true, /* モバイル端末では左右の移動矢印を常時表示する */
   'showImageNumberLabel': false /* 画像の番号を表示しない */
})
</script>

Lightboxは、PC上では画像の上にマウスを載せると、次の画像や前の画像へ移動するための矢印アイコンが画像の左右に表示されます。しかし、マウスのないモバイル端末では表示されません。このalwaysShowNavOnTouchDevicesオプションの値を「true」にすると、モバイル端末(タッチデバイス)では、左右の矢印が常時表示されるようになります。(複数の画像がある場合のみ)
また、Lightboxでは拡大画像の左下に「Image 1 of 20」のような感じで、いま何番目の画像を表示しているのかが案内されます。showImageNumberLabelオプションの値をfalseにすれば、これを非表示にできます。畳む


上記のような書式で指定できるLightboxのオプションは、Lightbox公式サイトに表形式で書かれています。
https://lokeshdhakar.com/projects/lightbox2/#options

by nishishi. <1467文字> 編集

『画像の投稿処理自体はエラーなく完了するのに、表示だけがされない(画像ファイル名だけがリンクの形で見えている)』という場合は、ほぼ間違いなく、imagesディレクトリのパーミッションの設定を 766 にしてしまっていることが原因です。SuEXECという安全な仕組みが有効なサーバ(さくらインターネットやロリポップなどもそうです)では、サブディレクトリのパーミッションはデフォルトのまま(755など)で構いません。ここで、766 にしてしまうと、そのサブディレクトリに格納されたあらゆるファイルは(安全のために)表示されなくなります。 #🌱豆知識 ➡No.1218

by nishishi. <281文字> 編集

埋め込み合成用のスキンを使った表示結果を、SSIを使って他ページに合成している場合に、ハッシュタグリンクなど『本文中のテキストリンク』のリンク先が(相対パスで出力されるために)リンク切れになってしまう問題が従来のバージョンにありましたが、Ver 2.5.0 からは下記の設定項目にチェックを入れておくと、絶対URIで出力されるようになるため、リンク切れにならずに済みます。
SSI等で他ページに合成している方々は、お試し下さい。 #🌱豆知識
20200211164447-admin.png

以下、返信です。
🍪Re:1509◆気に入って下さったようで嬉しいです。(^_^)
🍪Re:1508◆投稿数が増えてくると、複数の単語や条件で検索したい機会も増えますよね。ご活用頂ければ幸いです。コーヒーありがとうございました。開発の合間のカフェイン補充に使わせて頂きます。m(_ _)m🥤
🍪Re:1507◆早々のバージョンアップをありがとうございます。(╹◡╹)ノ

何か無性にクッキー的な物を食べたい。🍪🍪🍪

by nishishi. 回答/返信 <432文字> 編集

最近はさすがにXHTMLでウェブサイトを作っている方々は少なくなったと思うのですが、昔からウェブサイトを運営なさっている場合には、XHTMLで書かれている場合もあるでしょうね。てがろぐの出力を既存のサイトデザインと合わせるために、てがろぐ用スキンを(既存サイトのHTMLソースを流用する形で)作ることも多いと思います。てがろぐスキンをXHTMLで書こうとした際に、ソースの1行目をXML宣言( <?xml version="1.0" …… のような感じ)で書き始めてしまうと、HTML用ヘッダではなくXML用ヘッダを出力してしまう仕様なので、うまくウェブページとして表示されません。スキンはHTML5で書くのが望ましいですが、どうしてもXHTMLにしたい場合はXML宣言を省略するか、または1行目に適当なコメント <!-- Sakuratan moe --> などを書いておけば良いです。 #🌱豆知識

※ただ、検索窓等の出力が(XHTML仕様ではなく)HTML仕様なので、XHTMLで書こうとしても正しいXHTML文書にはなりません。代表的なブラウザは問題なく表示してくれるとは思いますが。スキンはHTML5で記述されるのが望ましいです。

by nishishi. <520文字> 編集

No.1353に関連して。 #🌱豆知識
QUICKPOSTから投稿した場合は、一見すると管理画面にはアクセスしていないように感じられますが、内部ではアクセスしています。なので、(管理画面を一切見ていなくても)投稿するだけでもログイン情報(セッション期限)は更新されています。ですから、ログイン状態を維持する期限よりも短い頻度で投稿を続けていれば、永久にログアウトすることはありません。

※もちろん、全員を強制ログアウトする機能が使われたり、CGIの識別文字列が変更された場合には、その時点で(全員が)ログアウトされますが。

by nishishi. <263文字> 編集

ページ末のCopyright表記等で、1997-2020 のような感じで西暦を入れたい場合、外側スキン内に [[INFO:LASTUPDATE:Y]] と書いておくと、最終更新日の西暦(数字4桁)だけが挿入されます。最新西暦を手動で書き換えたり、JavaScriptを使って入れたりする手間を掛けなくても簡単に表示できます。 #🌱豆知識

by nishishi. <168文字> 編集

ハッシュタグ一覧で、該当件数を表示したくない場合は、CSSだけで簡単に消せます。#🌱豆知識

ハッシュタグ一覧を出力すると、タグ名に続いて該当件数が括弧付きで表示されます。このとき、タグ名のリンクには class="taglink" という属性が付加されており、それに続く該当件数には class="num" という属性が付加されています。なので、CSSで以下のように記述すると、この該当件数を非表示にして、タグ名だけをずらっと並べられます。
.taglink + .num { display: none; }
上記のCSSは、「taglink」というclass名が付いている要素の隣にある「num」というclass名が付いている要素を非表示にする、という意味になります。

※単に .num だけを対象にすると、他にもいろいろ消えてしまうのでご注意下さい。(^_^;)

by nishishi. <387文字> 編集

イラストの公開用途にお使いの場合で、TwitterなどにURLを掲載したときに画像のサムネイルが大きく表示されて欲しい場合には、OGPの設定画面で大画像が表示されるよう設定できますのでお試し下さい。#🌱豆知識

管理画面の[設定]ボタン→[補助出力]タブ→[OGP+Twitter Cardの出力]項目内の下部にある「twitter:card」欄で、「summary_large_image (大画像)」という方を選択しておくと、常に大きな画像で表示されるようになります。デフォルトでは「summary (小画像)」が選択されているので、Twitterでは「左側に小さなサムネイル+右側に概要(抜粋)文章」というような枠で表示されます。

なお、OGPの記述はSNS側でキャッシュされるため、一度でも表示を試したURLの場合は、てがろぐ側の設定を変えてもすぐには表示に反映されません。その場合は、Twitterが公式に用意しているCard validatorでURLを入力してプレビューさせると表示を確認できます。(ついでにキャッシュも更新されるかもしれません。)

20191222162041-tomoyo.png
(上図は、小さなサムネイルが表示される場合でのプレビュー例。)

※てがろぐを従来のバージョンからお使いの場合は、外側スキン内に [[OGP]] の記述を含めておかない限り、どのように設定してもOGPは一切出力されませんのでご注意下さい。^^; 詳しくは、リリースノートNo.22をどうぞ。

by nishishi. <631文字> 編集

DASHBOARD

■全文検索:

複合検索窓に切り替える

■複合検索:

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

■日付検索:

■カレンダー:

2021年10月
12
3456789
10111213141516
17181920212223
24252627282930
31

■最近の投稿:

■フリースペース:

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

編集

▼現在の表示条件での投稿総数:

52件

▼最後に投稿または編集した日時:

2021年10月17日(日) 20:32:51

RSSフィード

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