にしし ふぁくとりー:西村文宏 個人サイト

Presented by Nishishi via Movable Type. Last Updated: 2019/10/01. 10:43:59.

てがろぐCGIが出力した最新の1件を任意の場所にSSIで埋め込む方法

短いコメント枠を、てがろぐCGIで生成

うちのサイトのHOMEページには「今日のひとこと」という呟き枠があります(下図)。
これまで長年ずっとHTML手打ちによる手動更新だったんですが、この区画を拙作のフリーCGI「てがろぐ」による生成に切り替えてみました。

にししふぁくとりーHOME

ウェブページ自体はHTMLソースをテキストエディタで編集して書いている、いわゆる「手打ち」のままですが、上図の「今日のひとこと」という部分だけは、SSI(Server Side Include)機能を使って「てがろぐCGIが生成した最新1件の内容」を呼び出す方法で埋め込むように作り替えました。

せっかく呟き連投に適したCGI「てがろぐ」を自作したのだから、ということで。
この枠を、てがろぐCGIによる生成に切り替えたいなと以前から思っていたのでした。

▼投稿が手軽になるのはもちろん、過去ログの蓄積も楽になるメリットがある

この「今日のひとこと」枠をてがろぐ化したのは、更新を楽にするためというよりも、過去ログを残しやすくするためです。

さほど頻繁に更新するわけでもなかったため、HTML手打ちでの更新作業自体は特に問題なかったんですが、過去ログを蓄積できない点をちょっと残念に思っていました。いや、残そうと思えばいくらでも残せるんですが、更新の度にログも書き換えるのはちょっと面倒だったので。
てがろぐ化することで、何もしなくても新規投稿するだけで過去ログが残るようになって楽になりました。
ちょっと嬉しいです。^^;

てがろぐCGIに過去ログが蓄積していく

このように、「てがろぐCGIによる最新の1件だけの出力を、特定のウェブページ内部に埋め込む方法」として、ウェブサーバ側のSSI機能を使って実現する手順の一例を以下にご紹介しておきます。

目次:

  1. 過去ログ表示用のデフォルトスキンと、最新1件の埋め込み専用スキンを作成
  2. てがろぐCGIで最新の1件だけを簡潔に表示するスキンを作る
  3. SSIを使って、てがろぐCGIが出力する最新の1件だけを埋め込む
  4. 埋め込む部分にも挿入されるPowered-by表記を削除(非表示に)したい場合


過去ログ表示用のデフォルトスキンと、最新1件の埋め込み専用スキンを作成

この方法では、てがろぐ用のスキンを2種類使います。

てがろぐでは、パラメータなしでアクセスすれば設定したスキンで表示されますが、パラメータに「?skin=スキン名」を加えるとそのスキンを使って表示されます。
この仕様を利用することで、複数のスキンを同時に使い分けられるわけです。

過去ログ表示用のスキンは何でも自由に作れば良いだけですから、以下では「埋め込み表示用のスキン」をどう作るのかと、そのスキンを適用した表示結果をどうやって既存のHTMLに埋め込むのかを解説します。

てがろぐCGIで最新の1件だけを簡潔に表示するスキンを作る

てがろぐのスキンには、「外側スキン」(skin-cover.html)と「内側スキン」(skin-onelog.html)の2種類があり、スキンとして成立させるにはその両方が同時に必要です。

通常は、1ページ内に何件の投稿を表示させるのかは「てがろぐ」の管理画面で設定しますが、スキン側に直接件数を埋め込んで指定することもできます。その場合は、スキン側に書かれた件数の方が優先される仕様になっています。なので、「最新の1件だけを表示するスキン」というのが作れます。

私の場合は、以下のようにスキンのソースを書きました。

▼外側スキン (skin-cover.html)

以下の5行だけです。
<p class="hitokoto-body">
   [[TEGALOG:1]]
   <span class="hitokoto-poweredby">[[VERSION]]</span>
</p>
<p class="hitokoto-log"><a href="/path/to/tegalog.cgi">過去ログ&raquo;</a></p>
  • [[TEGALOG:1]] の部分に、最新の投稿1件だけが入ります。(2件にしたい場合は「1」の部分を「2」に書き換えれば良いです。)
  • [[VERSION]] の部分には「Powered-by表記」が入ります。この記述がないと、意図しないHTMLでPowered-by表記が強制挿入されてしまいますので注意して下さい。(後述)
  • ※「過去ログ」部分のリンク先は、tegalog.cgiへパラメータなしでアクセスするURLです。

スキン内に最低限必要な記述は、上記の前2点だけです。あとは好きなように書けます。

▼内側スキン (skin-onelog.html)

以下の2行だけです。日付と本文だけしか表示しないため、たった2行で済みます。
<span class="date">[[DATE:Y/M/D]]</span>
<span class="body">[[COMMENT]]</span>
  • [[DATE:Y/M/D]] の部分には2019/08/29の形式で日付が入ります。「Y/M/D」の部分は指定の書式で書き換えることで、曜日や時刻など様々な情報を挿入できますので、詳しくはマニュアルの日付形式の書き方部分をご参照下さい。
  • [[COMMENT]] の部分には本文がそのまま入ります。オプションを指定すると、最大文字数を指定したり、プレーンテキスト化したりいろいろできますので、詳しくはマニュアルをご参照下さい。

とてもシンプルに埋め込むだけなので、スキンは上記だけです。

▼埋め込み用スキンの読み出し方

上記で作成したスキンを、てがろぐCGIの存在するディレクトリに、例えば umekomi というディレクトリ名でアップロードしたなら、このスキンを使って表示するには以下のようなURLを指定します。
tegalog.cgi?skin=umekomi

埋め込み用のスキンですから、単独で表示させても意味がありませんが、単独で表示させると上記のリンク先のようになります。

※てがろぐには、スキンに名称を付ける機能はありません。スキンを格納したディレクトリ名がそのまま事実上のスキン名になります。

あとは、この「埋め込み用スキンを適用して表示した結果」を、任意のHTML内に埋め込めば良いだけです。

SSIを使って、てがろぐCGIが出力する最新の1件だけを埋め込む

SSI(Server Side Include)機能を使って、「最新1件の埋め込み専用スキン」の出力結果を埋め込めば良いだけです。
SSIの書き方はサーバによって微妙にことなるかもしれませんが、例えばさくらインターネットでは以下のように書けば埋め込めます。

<!--#include virtual="/path/to/tegalog.cgi?skin=umekomi" -->

SSIが有効になっているか、またはHTMLファイルの拡張子が.shtmlになっていれば、上記の記述で(このソースの記述位置に) /path/to/tegalog.cgi?skin=umekomi の表示内容がそのまま埋め込まれます。

このとき、CGIの位置は(URLではなく)ウェブサーバのルートディレクトリから書く必要がありますので注意して下さい。
サーバによっては相対パスで書いても良いかもしれませんが、さくらインターネットでは絶対パスで書く必要があります。
(その点については、別途記事「さくらインターネットでSSIを使う際、include virtualは絶対パスでの記述が必須」をご覧下さい。^^;)

▼リンクや画像を含める場合の注意

埋め込む内容がテキストデータだけなら何も気にしなくて良いのですが、リンクや画像を含めた本文を表示する場合には、ちょっと注意が必要な場合があります。
例えば、埋め込む本文に以下のような内容を表示させたい場合です。

  • てがろぐ動作に関連するリンク
  • てがろぐ上で直接投稿した画像

そうしないと、リンクや画像が(SSIでの呼び出し元の位置を基準にした)相対パスで出力されてしまうため、リンクが切れたり、画像が表示できなかったりするためです。

この設定は、管理画面の「設定」→「システム設定」ページ内にある『フルパス設定』枠で設定できます。
ここで、下図のように「固定」を選択して、絶対URIを固定しておく必要があります。

てがろぐ設定→システム設定→フルパス設定

このとき、絶対URIのテキスト入力欄(上図)には、tegalog.cgiを指し示す正しいフルパスを記述して下さい。
デフォルトで入力されているパスで正しければラジオボタンを切り替えるだけで済みますが、必ずしもデフォルトの入力内容が正しいとは限りませんので、念のために確認して下さい。

埋め込む部分にも挿入されるPowered-by表記を削除(非表示に)したい場合

私の場合は、CGIの宣伝も兼ねて「Powered by てがろぐ」の表記をそのまま埋め込んであります。
しかし、たいていの場合、このような狭い空間に埋め込む用途では、Powered-by表記は省略したいでしょう。
その場合は、Powered-by表記を削除して使えるライセンスをご取得頂く選択肢があります。(^_^)
すると、狭い空間に埋め込む場合に、Powered-by表記が邪魔になることもありません。

※ライセンスの取得方法は、OPENにはアナウンスしていませんが、ご興味がおありならお気軽にメールでお問い合わせ下さい。
案内をお送り致します。

ライセンスをご取得頂いた場合は、その他のページでもどこでも、すべてのPowered-by表記が一括して非表示になります。
※注:管理画面などに見える著作権表記は消えません(消せません)のでご注意下さい。

▼SSIを使わずに似たようなことをする方法

てがろぐCGIはRSSフィードを出力できるので、RSSの情報を読んでウェブ上に表示する類いのJavaScriptなどを併用することで、最新の1件を埋め込むこともできます。
今のところ、RSSフィードの出力内容の自由度が低いので使えない場合もありますが、今後のバージョンではRSSフィード周りの機能も拡充します。
Ver 2.3.0以降では、RSSフィード用のスキンを使うことで、自由な構成のRSSフィードを出力できる仕様になっています。(2019/10/01追記)

というわけで、てがろぐCGIを既存のHTMLソース内に埋め込んで表示させる方法の解説でした。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

--- 当サイト内を検索 ---