概要
過去に作った拍手CGI「Shell拍手」をPythonで書き直したものです。
↑このようにインラインフレームで別のボタン用HTMLファイルを表示しています。(赤枠は分かりやすくするためのものです)
↑拍手のログファイルはこのようになります。
手打ちのHTMLページに設置することを想定していますが、サイトエンジン(Wordpressなど)であれば投稿のテンプレートにタグを貼り付けると全ての投稿に設置されるようになるはずです。
元祖Web拍手との違い
- 拍手1回目からコメントが送付できます。
- 閲覧用ウェブページはなく、拍手の回数やコメントはFTPファイルマネージャ等でログファイルを閲覧する形で行います。
(最後にブラウザで閲覧するための裏技を紹介しています) - 拍手を設置したURLがログに入るため、複数ページに設置した際どのページで拍手が送られたかがわかります。
(押した人のブラウザでJavascriptが動作していない場合はNoLocationと記載されます) - 欠点としてCGI(Python3)なので設置するべきものがいろいろあることと、お礼画面がインラインフレーム内でしか表示できず地味になりがちなところです。(デザインの編集は可能です)
Shell拍手からの変更
- 型を扱えるようになったため動作が安定しています(たぶん)。
- コメント入力欄での改行・記号制限がなくなりました。
- 閲覧用のHTMLファイルは作らなくなりました(素っ気ないログデータのみになります)。
前身であるShell拍手については こちら。
ご注意と改変や配布等について
事前に仮のテスト用のフォルダやファイルを用意するなどして十分に動作を検証してから本番環境に移行してください。
このプログラムは1つのファイルを作って書き込みし続けるだけのものですが、これによって起きた問題については責任を負わないものとします。
言語としてはHTMLとCSSとPythonでできているので、それらが使えればお礼画面を派手にしたりボタンの種類(定型文ボタンなど)を追加したりと様々な改変を行うことができます。
基本的にはこれらのファイルをそのまま再配布しても、改良したものを配布しても問題ありません。
実装
cgi という名前のフォルダを作成し、その中に
clap.cgi(プログラム)
clap.html(拍手ボタン表示用)
をダウンロードして保存してください。(右クリック→名前をつけてリンクを保存)
お礼画面のデザインはCGIファイル内、拍手ボタンのデザインはHTMLファイルの方で行えます。
権限
プログラムであるclap.cgiには実行権限が必要で、ログファイルを生成するためにフォルダ自体にも権限が必要です。
使っているサーバによって設定方法(記述だったり選択型だったり)が違うので、なんとなく以下と同じ感じになるよう設定します。
cgiフォルダ:実行(777/rwxrwxrwx)
clap.cgi:所有者のみ実行読み書き(700/rwx------)
clap.html:読み取り(644/rw-r--r--)
clapdata:所有者のみ読み書き(640/rw-r-----)(新規作成時)
配置用タグ
<iframe src="cgi/clap.html" name="clapframe"> [inline frame] </iframe>
これを設置したいHTMLページの好きなところに貼り付けます。
イメージ:
装飾用のborder設定が入ってる……
エラーなど
拍手ボタンが表示されない、インラインフレーム内で404エラーが起きている
clap.htmlが、タグの配置されたhtmlファイルの位置から見つけられていません。フォルダ階層が違うページ(http://0xconfig.net/page/post.htmlなど)に拍手を設置する場合、配置用タグのsrc欄を「../cgi/clap.html」にする必要があります。
ただしフォルダの階層が何段にもなっている場合は階層の数だけ「../」をつけてください。
例▶ http://0xconfig.net/page/sketch/post.html に設置する場合↓
<iframe src="../../cgi/clap.html" name="clapframe"> [inline frame] </iframe>
HTMLのメタタグ<base href="../">で階層基準を変えることでも解決できますが、画像URLなども変わってしまうため注意してください。
ボタンを押すと「ファイルが見つかりません」系のエラー
clap.htmlがclap.cgiを呼び出すことに失敗しています。こちらは↑のような「../」を足したりする必要はないのですが、clap.htmlとclap.cgiは同じ場所に置いておく必要があります。
ボタンを押すとソースコード(#!/bin/python3から始まる文章)が出てしまう
httpサーバのないローカル環境で実行しているとこうなります。
ボタンを押すと500 Internal Server Error
エラー内容がざっくりしすぎてハッキリ分からない場合がほとんどですが、大体は権限がらみです。
- clap.cgiの権限不足(実行できなかった)
- clapdataまたはcgiフォルダの権限不足(実行はできるがログファイルの新規作成・書き込みができなかった)
- clap.cgiの文字化け関連
- サーバがPython3に対応していない、Python3のライブラリが入っていない、CGIの設置場所に指定がある
3についてですが、お礼画面デザインの変更で変な記号を出力させようとすると記号によってはエラーが起こるようなので、グラフィカルにしたい場合は画像を使うことをおすすめします。
(作ってる初期にReturnに回る矢印記号「↺」をつけていたらエラーばかり出ていました)
4についてはサーバの規約によって様々で、そもそも「cgi-bin」などの規定のフォルダ以外での実行が許可されていなかったり、無料のプランでは実行機能がついていなかったり、対応言語にPythonが入っていない、Pythonのライブラリが用意されていない、などがあります。
3に限ってはいずれの場合もサーバの運営会社によるもので我々にはどうしようもない事なのですが、ファイルそれぞれの権限を確認してもまだエラーが起きる場合は、使っているサーバの仕様一覧などを確認してみてください。
FTPログインなしにブラウザでログデータを確認できるようにする
この方法は「FTPログインしなくても見られる状態にして」「あなたにしか分からないURL」で閲覧しているだけなので、総当たりでアクセス試行されたり検索エンジンに検出されるなどでURLがバレると他人に読まれてしまう可能性があります。
clap.cgi
21行目あたりのログファイル名「clapdata」を任意の英数文字列に変更します。(例:abcde1234567890)
file = "clapdata"
↓
file = "abcde1234567890"
それからFTPマネージャ等を使い、生成されたclapdataの権限を「所持者のみ読み書き(600/rw-------)」から「その他の読み取りも許可(644/rw-r--r--)」に設定します。
この画面はPCManFM+curlftpfsによるものです
閲覧
ブラウザで[サイトのドメイン部分]/cgi/[変更したファイル名]でアクセスします。
例:
https://0xconfig.net/cgi/abcde1234567890
(403画面はお使いのサーバによって見た目が違います)
権限を変更する前は 403エラーだったのが、
中身が見えるようになります。ブラウザによっては文字化けするので、その時はブラウザ側のプラグイン等で対処してください。