最近よく見かける「てがろぐ」設置してみた

ここ数年、個人サイトを巡っているとちょくちょく「てがろぐ」ってやつを目にするなぁと思っていた。で、面白そうだったのでついに自分でも設置してみた。ちょっとしたブログとか、Twitterっぽい感じの見た目で使えたりするCGIらしい。

↓公式サイト(にしし ふぁくとりー/お手軽マイクロブログCGI「てがろぐ」)

お手軽マイクロブログCGI「てがろぐ」:スキン式で複数ユーザ対応
スキン式で複数ユーザ認証機能のあるマイクロブログ的なフリーCGI「てがろぐ」の公式配布サイト。備忘録・メモ帳・日記・チャットツールなどとしてのほか、「自分専用Twitter」などマイクロブログツールとしても活用可能な、お手軽メモ掲示板フリーCGIです。ハッシュタグ機能、自動バックアップ機能なども搭載。わずか8ファイルを...

設置方法は、てがろぐ全ファイルをフォルダごとサーバーにアップロードして、パーミッションを指定通りに設定するだけ。本当にお手軽。本当にこれだけで、もう自分のてがろぐページにアクセスできるようになってしまった。早い。あっという間。ちなみに、公式サイトでいろんなサーバーごとの設置の仕方の説明を書いてくれている。めっちゃ親切。

まあ、といってもあくまでそのままアップロードしただけなので、表示はデフォルトである。本番はここからだ。HTMLやらCSSやらをいじって自分好みのデザインにしていくのが大変なんだ。でも、これまた親切なことに最初からいろんなスキンを収録してくれてるおかげで、複数の中から好きなデザインを選ぶことができる。手厚い。てがろぐ、サービスが手厚い。無料で手軽でここまで便利なもの、そうそうない。

こちら私のてがろぐ(Twitterっぽいスキン)↓

オタクの呟き[265件] - 二次元を生きたい
現実から逃げたい社会人 奏音が運営する個人サイト

記事にするほど長文にはならないようなやつを投げるのにちょうどよさそう。普通にTwitterで呟いてもいいんだけど、てがろぐで投稿していけばかなり検索しやすそうなのがいいなって思った。あと自分のサイトだからネタバレとかあんまり考慮しなくていい気がするし。ちなみに長文用にブログっぽいスキンも別ページに適用している。サイト名からトップページにいけるよ。

せっかくなので、創作・同人サイト制作支援サイト「do」さんで配布されている、いいねボタンとかもつけてみたり。

個人サイト向けいいねボタン・改 配布ページ | do - 創作・同人サイト制作支援サイト

それから、デフォルトでLightboxが実装されてるんだけど、スマホで考えると複数画像のときはスワイプできるといいなって思ったので「baguetteBox.js」に変更してみた(Lightboxにはスワイプ機能がない)。

GitHub - feimosi/baguetteBox.js: Simple and easy to use lightbox script written in pure JavaScript
:zap: Simple and easy to use lightbox script written in pure JavaScript - GitHub - feimosi/baguetteBox.js: Simple and easy to use lightbox script written in pur...

zipフォルダをダウンロードして、中に入っている「dist」フォルダをサーバーにアップロード。てがろぐの設定画面でJavaScriptとCSSのファイルの位置を指定して、skin-cover.htmlのhead部分に

<script type="text/javascript">
    window.onload = function() {
         baguetteBox.run('.onelogcontent');
    };
</script>


を入力したらなんかうまくいった。デフォルトのLightboxよりいい感じの見た目になる。画像をけっこう投稿するなら、こういうのを導入するといいかも。
※下の方に追記あり

Twitterがそう簡単にサービスを終了することはないだろうけど、なんかごたごたしてるっぽいのは事実だし、いざというときに移住できる場所を用意しとくのはいいんじゃないかと思う。お手軽だしデザインも自由にできるし、むしろTwitterより住み心地がよくなってしまうかもしれない。

【2023.02.23 追記】
てがろぐ設置手順メモ(Windows)

公式の説明がめちゃくちゃ膨大でそこで怯む人もいると思うので簡単に書いとく。

事前準備
○サーバーを契約しておく
・特にこだわりがなければてがろぐ公式サイトの「CGIの簡単セットアップ手順」のところに書かれているサーバーから選ぶといいかも
・値段、データ容量、サービス内容を調べて自分に合ったものを選択
○ファイル転送ソフトをダウンロードしておく
・サーバーにアクセスするために必要
・ファイルアップロード機能を持ってるサーバーなら必ずしも必要ないけど、あると便利
・「FileZilla」使いやすいよ

セットアップ
①公式サイトから最新版のzipファイル(完全構成)をダウンロード
・てがろぐTOPの「CGIのダウンロード」のところ

②ダウンロードしたファイルを解凍
・右クリック→全て展開

③解凍したフォルダをそのままサーバーにアップロード
・サーバーのアップロード機能か、ダウンロードしておいたファイル転送ソフトを使用
・「FileZilla」なら転送形式自動でファイルをドラッグアンドドロップするだけ
(前もって接続設定は必要。サーバーを契約したときにFTP接続の情報はもらえるはずなので、それに従って接続先を入力する)
・アップロードする場所はどこでもいいと思うけど、WordPressを使ってる場合は配下のディレクトリにはいれない方がいい模様(私もWordPressを使ってるので、配下ではなく同階層にアップロードしてみた。同じドメインで問題なく動いてる)
・アップロード場所↓
「ドメイン名」か「public_html」フォルダ配下(サーバーによって違う)
 ー tegalog ← ここ
 ー wp-admin ← WordPress
 ー wp-content ← WordPress
 ー wp-includes ← WordPress

④パーミッションを設定する
・「FileZilla」を使う場合は、対象のファイルを右クリック→パーミッションの設定をクリックで変更画面がでるので、属性値の部分をてがろぐ公式に書いてる通りの数値にする

⑤アクセス
・「https://フォルダをアップロードした場所/tegalog(フォルダ名変えてたらここもそれに変える)/tegalog.cgi」をブラウザに入力してアクセス

アクセスさえできれば設置は正常に完了しているので、後は設定をいじったりhtmlやcssをいじったりして好きなようにするだけ

エラーになったとき
○「500 Internal Server Error」が出る場合
・tegalog.cgiのソース1行目を書き換える必要あり(設置サーバーによって違うので、サーバー側の公式からCGI設置についての説明を探す)
・cgiファイルはデフォルトでは開かれるプログラムが紐づいてないはずなので、何かしらのテキストエディタを準備しといてそれで開く(究極的にはメモ帳でもいいけど、自分が使いやすいものを一つ用意しとくと便利)
○「404 Not Found」
・URLミス
○「403 Forbidden」
・URLミス
・パーミッション設定ミス
○その他エラー
・パーミッション設定ミス
・何らかのCMS配下のディレクトリにアップロードしている
・cgiファイルとplファイルの改行コードがおかしい(中身を編集してないなら「バイナリモード」、編集してるなら「アスキーモード(テキストモード)」でアップロードしなおす)

スキンの使い方
○デフォルトを使う場合
・そのままでOK
○ダウンロードしたときに収録されているスキンを使う場合
・「skin-○○」フォルダに入ってる「skin-cover.html」と「skin-onelog.html」をコピーして、そのスキンフォルダの外側(tegalogフォルダ直下)でペーストして上書きする
○他サイトで配布されているスキンを使う場合
・配布サイトの指示に従う
(基本は配布ファイルをサーバーにアップロードするだけと思われる)
(ソースの修正が必要になる場合もある)

説明どおりにやってるのにどうしてもうまくいかない!
というときは、思い切って誰かに聞いてみるのもいいと思う。こういうのを設置する人はだいたい皆、同志が増えるの大歓迎って思ってるからね。喜んで教えてくれるよ。

個人サイトはいいぞ~
もっと増えろ~(笑)


【2023.04.06 追記】
てがろぐの使い方がだいぶわかってきたので、もう一個てがろぐをアップロードして二次創作用のサイトに組み込んでみた。夢小説とかイラストとか投稿して展示している。

いろんな使い方ができて楽しいな。

「てがろぐ」の最新投稿をWordPressに埋め込んでみた
てがろぐの最新の1件をSSIで埋め込む方法が公式で紹介されている。 個人サイトのトップページにてがろぐの最新投稿を表示……めっちゃいいな。やりたいぞこれ。と思ったのだがしかしぶっちゃけSSIってよくわからない。 というわけでちょっと力技な方...

【2023.07.16 追記】
baguetteBoxについて質問もらったので、自分がやった設定をもうちょっとちゃんと書いとく。
①上記リンクのGithubからCode > Download ZIP
②zipフォルダを解凍、中にあるdistフォルダを取り出す
③distフォルダの中身を「baguetteBox.css」「baguetteBox.js」だけにする
④distフォルダをサーバーにアップロード
⑤てがろぐのシステム設定の【画像拡大スクリプトの選択】で「他のスクリプトを使う」を選択
⑥JavaScriptのURLとCSSのURLを入力
 例)tegalog配下にdistフォルダを置いた場合

○○はドメイン(てがろぐをアップロードした場所にもよるけど)

⑦てがろぐの「skin-cover.html」の<head></head>内にscriptを入力

<script type="text/javascript">
	window.onload = function() {
 		baguetteBox.run('.onelogcontent');
	};
</script>

このとき、3行目の’.onelogcontent’の部分に、baguetteBoxで表示させたい画像が入っているクラスを入力する。てがろぐの「skin-onelog.html」で、本文[[COMMENT]]が入ってくるところ。私はこの[[COMMENT]]を<div class=”onelogcontent”>で括っているので、「baguetteBox.run(‘.onelogcontent’);」としている。つまりここでクラス指定しているから、てがろぐの「ページの表示」設定の【投稿本文の表示/画像】で「画像リンクに独自のclass属性値を追加」する必要は特にない。

これで画像がbaguetteBoxで表示されるようになるはず。パスもスクリプトもちゃんと書いてるのに駄目ってときは、もしかしたらブラウザにキャッシュが残っている可能性があるので、キャッシュ削除して更新すると案外ちゃんと表示されたりする。場合もあるかもしれない。

てがろぐの個別鍵に無限の可能性を感じる
てがろぐVer4.1.0が公開され、ついに個別鍵が実装された。 二ヶ月くらい前に開発者様が「てがろぐ追加検討機能」のアンケートを取っていたが、そこでダントツの人気を誇っていたのが個別鍵機能だったわけだ。なんか、個人サイト全盛期を駆け抜けてき...