『てがろぐ』を使い始めました！
先日『てがろぐ』というCGIの存在を知り、「面白そう！」ということで早速使い始めることにしました。
設置も簡単でカスタマイズも楽しく、色々弄って一通り形にできたので早速ページを公開しています。
今回はてがろぐを使い始めた経緯やカスタマイズの過程など、備忘録として書いていこうと思います。
てがろぐを始めたきっかけ
最近MastodonのFedibird鯖にアカウントを作って利用し始めたのですが、フォロイーさんが『てがろぐ』について書かれたブログ記事の紹介をしていました。
「何だこれ！面白そう！」
ということで早速サイトに設置してみることに。
CGI自体はこちらのデータベースを作る時に設置・利用していたので取っ付きやすかったです。データベースの方は利用するまでに設定やらデータの登録やら色々ありましたが、『てがろぐ』では簡単に設置ができるようになっているのと、公式の説明ページが充実しているのでかなりスムーズに利用できました。
ソフトの更新が現在も行われているのも良いですね。機能追加・不具合修正も積極的に行われているので安心して利用できます。スキン配布されてる方もいるので気に入ったスキンを探すのも楽しいです。
『てがろぐ』を利用しようと思った理由はそれだけじゃなくて…
最近ツイッターの色んな問題(特にサードパーティサービスの全面禁止問題)があって「ツイッターで投稿していた内容はいずれ見れなくなるかも…」という不安があったんですね。
実際愛用していたツイセーブも使えなくなっちゃって、過去ログが気軽に読めなくなってしまいました。ツイッターはプレイ日記も兼ねていたので、これはかなり落ち込みましたね…
(ツイッターの過去ログ検索機能がしっかりしていれば問題なかったのですが…)
『てがろぐ』はデータを自鯖に置いておけるのはもちろん、投稿後に内容を自由に編集できるので誤字脱字が気になっちゃう私みたいな人にはピッタリでした！ｗ
編集できるのは投稿内容だけでなく、ページのHTMLやCSS周りも割りと自由に弄れるので、CSS等の知識があれば私のてがろぐのように『自サイトと同じようなレイアウトにする』ということもできます。
一番「始めよう！」と思ったきっかけは、この「やりがいのありそうなカスタマイズ要素」かも…ｗ
てがろぐの設置
早速設置作業を行ったわけですが、作業手順については特に書くことがないですｗ
というのも公式の案内が本当に親切なんですよね。
有名どころのレンタルサーバー別に導入方法が書いてあるので、それまでサイト作成していた人ならすんなり設置できるんじゃないかなと思います。
ちなみに私の場合は「ロリポップのエコノミープラン」でしたが、問題なく設置できました。(動作サーバの例にちゃんと載っていますしね)
導入はできたので、次はスキンを適用させます。
私の場合はシンプルに使ってみたかったのと、てがろぐのページ構成がどの様になっているか把握しておきたかったので、先ずはこちらのサイト様のスキンを利用させていただきました。
内部データはxmlファイルで管理
投稿内容のデータは「tegalog.xml」というファイルに保存されています。
テキストエディタで中を見てみると、1行毎に『日付・ID(投稿番号)・ユーザー名・カテゴリー・フラグ※・投稿内容』が登録されているのがわかります。
※フラグは非表示投稿などに使う要素…かな？
つまりこの内容を変更すれば投稿内容が修正されるということです。何ならここに直接行を追加してサイトに反映させることも可能。ただその場合は入力規則に則って登録しないとエラーになると思うので注意が必要です。
この投稿データはID順ではなくファイルの上の行から順に表示されています。日付データの数値も表示順には関係ないようです。
※てがろぐβ版4.0.1にて、CGI側でデータの並び替え・IDの振り直しが可能になりました。
私はツイッターに投稿していた過去のスクリーンショット画像をアップロードするために、日付修正(過去の日時で投稿)しながらアップロードしています。一通りアップロードし終わったらβ版の機能「投稿日時順に並び替える」で並び替え。すると今年以前に投稿していたかのような形で表示させることができます。
サイトの更新履歴のページも、この「xmlファイルの修正」で移行することができました。他サイトで投稿してたものを(擬似的にですが)引っ越しできるのは本当にありがたいです。
CSSで自サイトに合わせる
先程紹介したスキンはシンプルなデザインになっているので、ブラウザのF12キー(開発モード)を使ってサイトのHTML構成やclass名を把握させていただきました。
後は自サイトのデザインに合うようにCSSを追加・上書きしていきます。この辺はかなり試行錯誤したので書くのが難しいですね…😅
気になる方は私のてがろぐページのソースを覗いてみてください。
「style.css」はサイト全体の基礎CSSファイルで、その下の「custom_tegalog.css」はてがろぐページ用のCSSです。
CSSを書き込んでいく際は、「自分で新しく設定したclass名」と「元々てがろぐで指定されているclass名」が見分けがつくようにしておいた方がいいと思います。どれがどれだか分からなくなるので(経験談)
【2023/06/21 21:20 追記】
カスタマイズ方法について少し詳しく書いた記事をアップしました。
ギャラリーモードも使ってみる
私のサイトのてがろぐは「スクリーンショット置き場」として利用することにしました。せっかくなので画像だけ並べられるモード(Galleryモード)も実装することに。
てがろぐには「スキン機能」があるので、複数のスキンを用意して専用のリンクを貼れば表示方法を切り替えたかのように見せることができます。
画像は投稿の最初の1枚だけ表示・本文はほぼ省略して画像が見やすくなるようにしてみました。
あとてがろぐには最初から「Lightbox」という機能が用意されているのですが、代わりにスワイプで画像切替ができる「baguetteBox.js」を導入しました。
一番最初に「てがろぐを始めたきっかけ」で紹介したサイト様でも導入されていたので、そちらを参考にしています。
スワイプできる範囲をclass名で指定するのですが、私の場合は記事個別ではなく記事全体を囲う形で指定してみました。(class名 baguetteBox_run で設定)
こうすることで記事を飛び越えて画像閲覧ができるので、Galleryモードや過去ログを眺めるときには便利かなーと。
更新履歴をトップベージに埋め込みたい
ここまででレイアウトと投稿内容が整ったので運用としては十分なのですが、ここから更に「サイトトップページに更新履歴の内容を一部掲載する」というのを実装しました。
今まではツイッターの更新情報発信用アカウントのTLをウィジェットで埋め込んでいましたが、その代用です。
仕様としては、
- 更新履歴ページの最新投稿4件だけ表示
- 文字数が多い時は省略記号を表示
という感じ。
てがろぐはRSSフィードの出力ができるので、それをPHPで読み込んで出力するだけです。
PHPのコードはこちらのサイト様のものを利用させていただきました。
RSSフィードは更新履歴全体を出力するものと、最新投稿4件だけを出力するもの2つを用意しています。てがろぐには「RSSフィード用スキン」があるので、切り替えという形で複数用意できるんです。本当に多機能！
完成！
これでひとまず完成です！ カスタマイズが楽しいのでこれからもっと魔改造するかもしれませんがｗ
一応投稿フォームは管理人(私)がログインしている時だけ表示するようにしています。
投稿する際迷わないように、使わない機能は極力非表示にしてあります。色んなところに手が届く、すごいCGIだなぁと感心しきりでした。
最後に
久しぶりにサイト弄りに火がついて、何日間かずっと弄りまくってましたw 自分の思う通りのページが出来上がると満足感・達成感がありますね！
せっかく設置したので、どんどん活用していこうと思います！
