POTI-boardのログファイルの上限を2MBに

ぷち的ココロ♪

総レス数がまだ2800を超えた程度なのに、親記事のナンバーの低いスレが消えてしまっていました。
親記事ナンバー+5000レスをスレの消える寿命に設定するにはどうしたらいいのでしょうか?

スクリプトをちょっと見ただけなので間違いかもしれませんが
バッファに1000000byte読み込む処理があったので
logファイルの上限がおそらく約1Mbyteだと思います。
その上限を超えたので2800でレスが消えたのではないでしょうか
POTI-boardのログファイルの上限の1000000byteは15年前に設定されたものです。
パソコンに搭載されているメモリはこの15年で…。
今ではメモリ4GB…それでも少ないという時代になりましたが、15年前はハードディスクが8GBだったり…。
2倍の2MBに拡張しても問題なさそうな気がしたので、2倍の2000000byte…だと2MB以下になってしまうので該当箇所を
$buf=fread($fp,2097152);
$buf=fread($tp,2097152);
に書き換えました。
5MBのログに書き込み処理を行うと、2MBになる事を確認しました。

お絵かき掲示板交流サイトで使っているPOTI-boardのログの上限は5MBですが動作が重くなるようならログをリセットして運用するつもりです。
配布するスクリプトも5MB…だと、無料のサーバなどで問題がでるかもしれませんし、動作が重くなるかもしれません。
2倍の2MBならという判断です。

お絵かき掲示板 POTI-board Notice削減お絵かき掲示板 POTI-board Notice削減
if(isset($savepng)){
$dat['savetypes'].= "<option value='PNG'".$savepng.">PNG</option>\n";
}
if(isset($savejpeg)){
$dat['savetypes'].= "<option value='JPEG'".$savejpeg.">JPEG</option>\n";
}
保存形式をAUTO、PNG、JPEGから選択するテンプレートは今はほとんど使われていません。NEOでは何を選択してもPNGになるのであまり意味がありません。しかし、しぃペインターでは有効な設定なので、テンプレートに選択項目が無くてもNoticeが出ないように書き直しました。

お絵かき掲示板 POTI-board Notice削減お絵かき掲示板 POTI-board Notice削減
// if(!$com&&!@is_file($dest)) error(MSG008,$dest);

if(!$com&&!@is_file($dest)) error(MSG008);
画像が無い事を確認してエラー画面を表示しているのに、画像に関する処理をしようとしてNoticeがでていたので書き直しました。
<!--(// しぃで反映されない上にお絵かき画面でパレット変更できるのでコメント化
パレット<select name=palette><option value="" selected> デフォルト</option>
{$palette}
</select>
)-->
v1.32の MONO WHITEでコメントアウトされ、そのほかのテンプレートでも使用されていない機能でNoticeがでていたので、
//v1.32のMONO WHITEでコメントアウト、対応テンプレートが無いパレット選択用データ(selectタグ用option配列)
// $lines = file(PALETTEFILE);
// foreach ( $lines as $line ) {
// $line=preg_replace("/[\t\r\n]/","",$line);
// list($pid,$pname,) = explode(",", $line);
//if(isset($palette)){
// $dat['palette'] .= '<option value="'.$pid.'">'.CleanStr($pname)."</option>\n";
//}
// }
該当箇所をコメントアウトしました。

お絵かき掲示板 POTI-board Notice削減お絵かき掲示板 POTI-board Notice削減
if(isset($textonly) && $textonly){//画像なしの時
$upfile=$upfile_name=$pictmp=$picfile="";
if(!isset($resto)){$resto="";}
}
画像アップロード画面で、画像なしにチェックを入れた時に、Noticeが発生していたので、textonlyの時は画像に関する変数を空文字に。
また、変数が定義されていてtrueの時は…という処理をifの入れ子にしていましたが&&でつなぐだけで良かったので書き直しました。

お絵かき、レスでお絵かき、画像アップロード、レス画像アップロード、文字だけ…。
数時間テストしましたがとりあえずNoticeなし。
ただし、設置時にできる[1]を削除しないとNoticeが出ます。
ログの形式が[1]だけ異なっている事が原因なので、それを修正できればでなくなる筈なのですが…。
そして、管理画面で記事を削除するとNoticeが発生…。
2行程度ですが…。

この変更は、POTI-board改 v1.45.5 lot.181129に反映されました。

お絵かき掲示板はこちら。

POTI-boardのエラーを減らすために 動画再生編

PaintBBS NEOが動画の記録と再生に対応したので、絵板に動画へのリンクが増えて来ました。

動画を見ようとしてクリックすると…。

POTI-board お絵かき掲示板の改造

動画ファイルが存在しないというWarningが発生する事例が何件が…。
リロードしても動画ファイルは見当たらないまま…。

POTI-boardの動画再生のurlは画像のファイル名と紐付けられているので、続きから描いて画像のファイル名が変われば動画のurlも変わってしまいます。

つまり、掲示版を開いて動画のリンクをクリックしたタイミングによっては動画のファイルが無いかもしれません。
Google検索結果から動画のリンクを開いた時にも、動画がなくてWarningが発生していました。
if(file_exists($pchfile)){//動画が差し換えられていた時
$datasize = filesize($pchfile);
$size = getimagesize($picfile);
if(!$sp) $sp = PCH_SPEED;
$picw = $size[0];
$pich = $size[1];
$w = $picw;
$h = $pich + 26;
if($w < 200){$w = 200;}
if($h < 226){$h = 226;}
}
else{
$w=$h=$picw=$pich=$datasize="";
}
file_existsでファイルの存在を確認してから処理するようにしました。

POTI-board お絵かき掲示板の改造
動画が無い時は表示しないだけなのですが…。

POTI-board お絵かき掲示板の改造

.htaccessで、キャッシュの有効期限を過去にすればキャッシュされなくなるので問題ないのですが、投稿してもリロードしないと画面が更新されない、これはバグだ…と言われてしまったりもしているので、urlパラメータを追加してキャッシュを表示しないように。

さくらのブログの管理画面から記事を見るのリンクをクリックした時にurlのあとにつく、
?1542988451と同じ形式のurlパラメータです。
投稿するたびに変化するurlパラメータで、ブラウザに別のurlと認識させて、キャッシュを表示しないようにします。
<Files ~ "\.html?$">
<IfModule mod_headers.c>
Header set Pragma no-cache
Header set Cache-Control no-cache
Header set Expires "Thu, 01 Dec 1994 16:00:00 GMT"
</IfModule>
</Files>
.htaccessの使い方がわかっている方なら、これをコピペしてPOTI-boardのフォルダに入れるだけでHTMLファイルをキャッシュしないようにする事ができます。
サーバによってはうまくいかない場合もあるようですがさくらのレンタルサーバはこの設定で問題ありませんでした。
.htaccessでキャッシュの有効期限を過去にしたほうが、見た目もスマートだし掲示版を開いた時にキャッシュが表示される事もありません。
.htaccessで設定できない場合には有効かもしれない機能の追加…でした。

この変更は、POTI-board改 v1.45.3 lot.181122に反映されました。

お絵かき掲示板はこちら。

POTI-boardのエラーを減らすために 設置直後のNotice編

お絵かき掲示板交流サイトに4種類の掲示版を設置していましたが、PaintBBS NEOの描画アニメに対応できて、TwitterやFacebookに投稿した画像を表示できる仕組みも利用できるのはPOTI-boardだけだったので、6つの絵板をすべてPOTI-boardにしました。

そうなると…。
お絵かき掲示板の改造で注力するべきは、POTI-board…という事でNoticeを減らすための作業をすすめる事に。
前回の作業で、大量のNoticeはでなくなった筈だったのですが…。

POTI-board お絵かき掲示板の改造

まだログが20行存在していないのに過去の20行の二重投稿をチェックしようとしてNoticeが発生。
// 連続・二重投稿チェック (v1.32:仕様変更)
if($countline >= 21){//存在する行数のみチェック
$chkline=20;
}
else{
$chkline=$countline-1;
}
// for($i=0;$i<20;$i++){
for($i=0;$i<$chkline;$i++){
ログファイルが何行あるのかチェックして存在する行の数だけループするように書き換えました。

POTI-board お絵かき掲示板の改造

二重投稿のチェックが有効で、かつNoticeが出ない事を確認。
設置時にできる[1]のログの書式が他のものとは異なるため、[1]が残っているとNoticeが2行発生しますが、画面が埋まるほどのNoticeが発生する訳ではないので、許容範囲…ですね。

POTI-board お絵かき掲示板の改造

まだログが200行存在していないのに、過去の200行の画像重複をチェックしようとしてNoticeが発生。
// アップロード処理
if(isset($dest)){//未定義エラー対策
$countline=(count($line));
if($countline >= 201){//存在する行数のみチェック
$chkline=200;
}
else{
$chkline=$countline-1;
}
if($dest&&@file_exists($dest)){
// for($i=0;$i<200;$i++){ //画像重複チェック
for($i=0;$i<$chkline;$i++){ //画像重複チェック
こちらも、ログファイルが何行あるのかチェックして存在する行の数だけループするように書き換えました。

POTI-board お絵かき掲示板の改造

画像重複のチェックが有効で、かつNoticeが出ない事を確認しました。
// if($tree[$i]==""){
//空文字ではなく未定義になっている
if(!isset($tree[$i])){
また、カタログモードの時に、Noticeが発生していたのでしらべてみたら、空文字ではなく、未定義になっていたので書き直しました。

この変更は、POTI-board改 v1.45.3 lot.181122に反映されました。

お絵かき掲示板はこちら。

POTI-boardのメタタグにリンクのタグが入ると表示されてしまう

POTI-board メタタグにリンクのタグ

上のほうに、https://pbbs.sakura.ne.jp/のURLがでてしまっていますが…。
<meta property="og:description" content="<a href="https://pbbs.sakura.ne.jp/" target="_blank">https://pbbs.sakura.ne.jp/</a>">
のようのように、og:descriptionにリンクのタグが入るとこうなります。
コメントを表示するための変数からタグを除去して、別な変数として設定する事にしました。
//メタタグに使うコメントから
//タグを除去
$descriptioncom=strip_tags($com);

// 親記事格納
$dat['oya'][$oya] = compact('src','srcname','size','painttime','pch','continue','thumb','imgsrc','w','h','no','sub','name','now','com','descriptioncom','limit','skipres','resub','url','email','id','updatemark','trip','tab','fontcolor');
// 変数クリア
unset($src,$srcname,$size,$painttime,$pch,$continue,$thumb,$imgsrc,$w,$h,$no,$sub,$name,$now,$com,$descriptioncom,$limit,$skipres,$resub,$url,$email);
タグを除去したあと、テンプレートで別な変数として使えるようにしないといけないので、変数の一覧も変更しました。
<!--{each oya}-->
<meta property="og:description" content="{$oya/descriptioncom}" />
<!--{/each}-->
のように書けばスレッドの親のコメントからタグを除去したものをテンプレートに使う事ができるようになります。
使用例。
<!--SNS-->
<!--{def sharebutton}-->
<!--{each oya}-->
<meta name="Description" content="{$oya/descriptioncom}">

<meta name="twitter:card" content="summary" />
<meta property="og:title" content="[{$oya/no}] {$oya/sub} by {$oya/name} - {$title}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{$rooturl}{$self}?res={$oya/no}" />
<!--{def oya/src}-->
<meta property="og:image" content="{$rooturl}{$oya/imgsrc}" />
<!--{/def}-->
<meta property="og:site_name" content="" />
<meta property="og:description" content="{$oya/descriptioncom}" />
<!--{/each}-->
<!--{/def}-->

<!--/SNS-->

POTI-board用テンプレート PINK を配布します。: STP^3

配布しているテンプレートはこの変数に対応しています。
タグを除去した親のコメントをTwitterカードに表示できるようになります。
このSNS用のメタタグは、config.phpでシェアボタンを使う設定しないと出てきません。
積極的にお絵かき掲示板の存在をアピールしたい人もいればひっそりと描きたい人もいる筈なので切り替えられるようにしておきました。

この変更は、POTI-board改v1.45.2 lot.181110に反映されました。

お絵かき掲示板はこちら。

POTI-boardでしぃペインターを使う時の幅と高さを変更

お絵かき掲示板交流サイトは、Googleで「しぃペインター」で検索すると上位に出てきます。
でもMacで唯一の頼りだったSafariがJavaの対応を終了したり…。
おそらくもう使う事ができなくなって終わりだろう…と思っていました。

ところが、CheerpJ Applet RunnerというChromeのプラグインを使えば、動作するらしい…。
初期状態ではCheerpJが動作しないサーバでも、.htaccess に
SetEnvIfNoCase Request_URI \.jar$ no-gzip dont-vary
と記述すれば動く…という情報も。

ということは、今後もJavaアプレットが動くかもしれない…という事ですね。
POTI-boardでしぃペインターを使ってみると…。

CheerpJでしぃペインター

レイヤーやテクスチャなどのパレットがキャンバスを覆ってしまいます。
窓ボタンを押せば全画面表示になりますが動的パレットを使う事ができません。
BBSNoteには、アプレットフィットボタンがあるので横幅をモニターに合わせる事ができるのですが…。

しぃペインターの時の幅と高さをPaintBBSとは違う値に設定して調整する事にしました。
// $w = $picw + 150;
if(!$useneo && $shi){
$w = $picw + 465;//しぃぺの時の幅
$h = $pich + 120;//しぃぺの時の高さ
}
else{
$w = $picw + 150;//PaintBBSの時の幅
$h = $pich + 170;//PaintBBSの時の高さ
}

CheerpJでしぃペインター CheerpJでしぃペインター

しぃペインターのパレットを快適に使うには、最低でもこれだけの幅は必要…と判断しました。
また、しぃペインターではアプレットの高さをやや低めに設定しないと、投稿ボタンがキャンバスより上の位置になるためボタンを押しにくくなってしまいます。
そのあたりも考慮しました。

この変更は、POTI-board改v1.45.2 lot.181110に反映されました。

お絵かき掲示板はこちら。

POTI-boardのエラーを減らすためにE_NOTICE削減編

Noticeが投稿時に300行以上発生していたので修正しました。
また、設置時にできる[1]を編集すると、その後の書き込みでWarningが発生するので修正しました。

数値にNULLが入るので、(int)で処理

[1]を編集すると、連続投稿の時間を計算している箇所にNULLが入りWarningが発生するので…。
//文字列を整数に
$ltime = (int)$ltime;
if(RENZOKU && $time - $ltime < RENZOKU){error(MSG020,$dest);}
if(RENZOKU2 && $time - $ltime < RENZOKU2 && $upfile_name){error(MSG021,$dest);}

数値にNULLが入るので、(int)で処理

空文字だったところがint(0)になりました。

Warningが出ていますが、var_dump()で変数を確認すると出る箇所なので仕方がありません。通常の使用では発生しません。

投稿時に大量のNoticeが発生するのを修正投稿時に大量のNoticeが発生するのを修正

投稿時に大量のNoticeが発生。
ログがあまり多くなかった時にはあまり気にならなかったのですが、運営中のレス数が1600件ほどあるPOTI-boardではレスを送信するたびに300行以上のNoticeが発生しました。
// レス記事一括格納
if(isset($rres)){//未定義エラー対策
$dat['oya'][$oya]['res'] = $rres[$oya];
}

レスがついていないスレッドの数だけエラーが出るので、未定義の場合は処理しないように書き直しました。
その他、画像アップロードの時と、お絵かきの投稿の時と、文字だけの投稿の時に、それぞれ未定義になる変数が存在していたので空文字を入れるようにしました。
//未定義エラー対策
if(isset($picfile)){//お絵かきの時
$upfile=$upfile_name="";
if(!isset($resto)){$resto="";}//レスではなかった時
}
elseif(isset($upfile)){//画像アップロードの時
$pictmp=$picfile="";
if(!isset($resto)){$resto="";}
}
else{//文字だけの時
$upfile=$upfile_name=$pictmp=$picfile="";
if(!isset($resto)){$resto="";}
}
regist($name,$email,$sub,$com,$url,$pwd,$upfile,$upfile_name,$resto,$pictmp,$picfile);

htmltemplate.incの79行目で発生するNoticeも投稿時にくりかえし出てきます。
まず、var_dump()で変数の内容を確認。

投稿時に大量のNoticeが発生するのを修正
//未定義エラー対策
if(isset($match[1])){
$ind=$this->getIndex($match[1],$multilabels);
}
else{
$ind=$this->getIndex("",$multilabels);
}
($match[1]))が未定義の時は、代わりに空文字が入るようにしました。
この変更を行っても$indに入る文字列は同じである事を確認しました。

気を使った点…。
変数に空文字を入れて対処した事で動作がおかしくなっていないか?
画像アップロードに必要な変数に空文字が入れば画像がありませんとなるし、お絵かきの投稿の時に必要な変数に空文字が入ればやはり画像がありませんになってしまいます。

新規スレッドに画像アップロード、お絵かき、文字だけの投稿。
レスで画像アップロード、お絵かき、文字だけの投稿。
続きから描く、動画表示。
ひととおりテストして、運営している絵板サイトにも導入してトラブルが起きていない事を確認したので、公開版の候補にする事にしました。
それから…。
salt パラメータは必須ではありませんが、これを省略すると crypt() が作るハッシュが弱いものになってしまいます。 PHP 5.6 以降は、このパラメータを省略した場合に E_NOTICE が発生するようになりました。
time()をsaltに使い差し換え時の動作に問題がないことを確認しました。
//差し換え時の認識コード追加
if($type=='rep'){
// $repcode = substr(crypt(md5($no.getenv("REMOTE_ADDR").$pwd.date("Ymd", time()))),-8);
$repcode = substr(crypt(md5($no.getenv("REMOTE_ADDR").$pwd.date("Ymd", time())),time()),-8);
この変更は、POTI-board改v1.45.2 lot.181110に反映されました。

お絵かき掲示板はこちら。

POTI-boardのエラーを減らすために htmltemplate.inc編

potiboard.phpに
ini_set( 'error_reporting', E_ALL );
を追加して、すべてのエラーを表示するように設定。
E_DEPRECATEDレベルのエラーが大量に発生しているのを確認しました。
POTI-boardで使っているhtmltemplate.incに問題があるようです。

POTI-board htmltemplate.inc php7 E_DEPRECATED
PHP: PHP 7.0.x で推奨されなくなる機能 - Manual

PHP 4 形式のコンストラクタ
非 static メソッドに対する static 呼び出し
将来のバージョンでは動作しなくなるので今のうちに警告…という事ですね。
PHP 4 形式のコンストラクタ (クラス名と同じ名前のメソッドを定義するもの) が非推奨
__construct() メソッドを実装していれば、この警告は発生しません。
該当する箇所は…。

POTI-board htmltemplate.inc php7 E_DEPRECATED
class StandardParser extends TemplateParser{
// function StandardParser(){
function __construct(){
class htmltemplate{
private $parser;
// the constructor
// private function htmltemplate(){
private function __construct(){
の2箇所でした。
static 宣言されていないメソッドに対する static 呼び出しが非推奨となりました。 将来的には削除される見込みです。
それなら…static 宣言すれば、という事で、

POTI-board htmltemplate.inc php7 E_DEPRECATED
public static function add($tag){
// This method is obsolete.Use addTag() instead.
$inst=&htmltemplate::getInstance();
$inst->parser->add($tag);
}
POTI-board htmltemplate.inc php7 E_DEPRECATED POTI-board htmltemplate.inc php7 E_DEPRECATED

左、htmltemplate.inc書き直し前、右、書き直し後。
とりあえず、エラーがでなくなるところまで何とか。
PHP 5からPHP 7へ移行する際に気を付けるべきポイント (1/4):CodeZine(コードジン)

staticメソッドとして宣言したメソッドをインスタンスメソッドとして実行するにはワーニングなどが表示されないようですが、こちらも良いコードとは言えませんので、もしそのようなコードがあればこの機会に対応することをおすすめします。

インスタンスを使っているのに静的というのはおかしいという事なのでしょうね…。
staticなプロパティの使いどころ - PHPで翻訳三昧

PHP5からは、static を指定したプロパティは
インスタンス化しなくてもアクセス出来るよう変わりました。

php5ではもっと簡単にわかりやすく書ける…みたいです。

GitHub - sakots/poti-kai: POTI-board, the oekaki BBSサ骨さんによるオープンソースプロジェクトです。
phpのプログラムを書き慣れている方なら、おそらくhtmltemplate.incの問題の箇所を修正できると思います…。

どこが問題なのか、コメント行にも書いておきましたのでよろしくお願いいたします。

この変更はPOTI-board改 v1.45.0 lot.180922に反映されました。

お絵かき掲示板はこちら。

POTI-boardのログファイルを解析するphp

phpでお絵かき掲示板の最新画像を表示: STP^3のphpで呼び出した画像を元に、POTI-boardのログファイルを開いて、その画像の該当スレッドへのリンクと、タイトル、作者名を呼び出すphpの改良版です。

運営しているお絵かき掲示板では、レスでお絵かきを許可する設定にしていないので、ここまでする必要は無かったのですが、レスでお絵かきを使っていても、正確に該当スレッドへのリンクになるようにしておきたかったので工夫してみました。

プログラムの最初の行にコメントアウトしたファイル名がならんでいますが、本来はphpで呼び出すところを手動で入力してみて期待した動作になるかどうかテストをしたあとです。

設置しているPOTI-boardによって、この画像ファイルのURLや番号は変わりますので、このプログラムをそのまま設置しても動作しません。
使う場合は、入れ替えるべき箇所を入れ替える必要があります。
<?php
//画像のパスとファイル名
$imgno = 'poti/src/OB1529126099132.png';
//$imgno = 'poti/src/OB1532687964328.png';
//$imgno = 'poti/src/OB1515724311525.png';
//$imgno = 'poti/src/OB1516791076735.png';
//$imgno = 'poti/src/1525238233707.png';
//13桁のUNIX timeにする
$imgno = substr($imgno, -17,-4);
$fp = fopen("poti/img.cgi", "r"); //ログファイルの場所
while ($line = fgets($fp)) {
//ログファイルの書式から変数を取得
list($no,$now,$name,$email,$sub,$com,$url,
$host,$pwd,$ext,$w,$h,$time,$chk,$ptime,$fcolor) = explode(",", $line);
//KASIRAで指定した文字列を取り除く
//OBを取って13桁のUNIX timeにする
// $time = ltrim($time, 'OB');
//後ろから13桁のほうが確実なので書き直した
$time = substr($time, -13);
//取得したファイル名の
//13桁のUNIX time
//と$timeが同じならスレッドの番号は$no?
if ($time == $imgno){
$resno = $no;
break;
}
}
//レス画像かもしれないので、tree.logを見に行く
fclose($fp);
$fp = fopen("poti/tree.log", "r"); //ログファイルの場所
while ($line = fgets($fp)) {
//ログファイルの書式から変数を取得
$tree = explode(",", $line);//コンマ区切り形式のログの解析
$i=0;
$a=mb_substr_count("$line", ",")+1; //レスの数
//コンマ区切りなのでコンマの数+1。
while ($i < $a) {//0からレスの数までループ
if(rtrim($tree[$i], "\n")==$resno){
$resno=rtrim($tree[0], "\n");//スレッドの番号は$tree[0]
$count_end=true;//カウント終了
break;
}
if($count_end){break;}//レス先が見つかったのでbreak
echo "$i</br>";//確認用、実際には使わない。
$i++;
}
}

fclose($fp);
//掲示板のレス送信画面にリンク
echo '<a href="poti/potiboard.php?res='.$resno.'">掲示板</a></br>';
//タイトルを表示
echo "$sub</br>";
//投稿者名を表示
echo "$name</br>";
?>
なんども、無限ループになって青ざめましたが、なんとかここまで。レスの数だけループして番号を探すようにしたので、無駄にループする事がなく、またループの数が足りないという事もおそらく起きない…と思います。
$i=0;
$a=mb_substr_count("$line", ",")+1; //レスの数
//コンマ区切りなのでコンマの数+1。
while ($i < $a) {//0からレスの数までループ

何度も失敗しながらやっとここまでたどり付いた問題の箇所。
ループ文の中でループしているので、ループの条件を明確にしないと無限ループになりかねない、簡単そうでおそろしい箇所でした。

お絵かき掲示板のログ処理 php

テストプログラムなので、実行結果はあじけないこんな感じの画面です。
縦にならんでいる数字は、tree.logを読み込んだ回数です。ここが1とか2とか3ならサーバにそれほど負荷がかからないと思いますが、1000とか5000になると負荷がかかりすぎてプログラムが終了したり、高負荷になってサーバの制限がかかるかもしれません。
間近の画像を呼び出しているだけなら、それほど高い負荷にはならないはずですが、管理画面でリソースのチェックをして大丈夫かどうか確認したほうがいいのかもしれません。

プログラムを書ける人なら、こんなサンプルプログラムは必要ないのかもしれないし、書けない人には意味がわからないかもしれない。
さらにPOTI-boardのログを別のphpで使うプログラムなので、絵板を設置をするだけなら関係ない。
そんな、お絵かき掲示板をいくつも設置しているサイトのトップページに使う事を想定したプログラムですが、せっかく書いたので、サーバから消す前にブログにまとめておこうと思いました。

お絵かき掲示板はこちら。

javaScriptでURIエンコードしてaタグのテキストリンクを作る

お絵かき掲示板にツイートボタンをつけました。
アイキャッチ画像が投稿したイラストになるのは、今のところPOTI-boardだけで、その他の掲示板は、固定されたOGPイメージの表示になりますが、お絵かき掲示板の個別スレッドのリンクを観てもらう事はできます。

以下は、お絵かき掲示板にツイートボタンを設置するために試行錯誤した記録です。ツイートボタンのカスタマイズ方法を探している方はこんな記事を読む暇があったら
ツイートボタンのカスタマイズまとめ。 - freefielder.jp
にいますぐ移動する事をおすすめします。(ダメじゃん
twitterのツイートボタンを作るためのリンクshareとintent/tweet

ツイートボタンをaタグで作成するための基本的な情報…なのですが、URIエンコード済みである事が前提なので、テキストがShiftjisだと文字化けします。

urlの途中に、&が入っていると正しく動作しません。Bracketsの右クリック拡張のURIエンコードを使えば対応できる場合もありますが…。

また、人から見るとURIエンコードされたURLは、文字化けした文字列になるので可読性がよくありません。
seesaaブログに「twitterにつぶやくボタン」を簡単に設置する方法 | kira-ism
URIエンコードができて、aタグでリンク。文字化けしないしURLに&が入っていてもURIエンコードされているので機能します。
<a href="javascript:window.location='https://twitter.com/intent/tweet?status='+encodeURIComponent('No.$LOGNO $TITLE by $NAME #お絵かき掲示板')+' '+encodeURIComponent('https://pbbs.sakura.ne.jp/cgi/relm/relm.cgi?mode=res&no=$LOGNO')+' (via @satopian)';" onclick="window.open(this.href, 'relmtweet$LOGNO', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow" class="twitter-link">
<span class="icon-twitter"></span>tweet</a>
ところが…ブラウザ側の問題なのか
href属性値にスクリプトは書けません(といっておく)
という事なのか、IE11とSafariでは動作しない事がわかりました。

ツイートボタンのカスタマイズ Javascript

javascript:window.locationで始まるリンクは動作しない?
ChromeとFirefoxでは動作するので、もしかするとレガシーなブラウザでは動作しないだけなのかもしれないのですが…。

URIエンコードをして、それをaタグのリンクにするには…。

URIエンコードはできるか?
できる。
それを文字列とつなげたら?
動かない。

文字列と変数を一緒に書く方法がわからなかったので、文字列も変数にして、変数+変数+変数のようにしてみました。
<script>
tweetmessage=encodeURIComponent('No.$LOGNO $TITLE by $NAME #お絵かき掲示板');
tweeturl=encodeURIComponent('https://pbbs.sakura.ne.jp/cgi/relm/relm.cgi?mode=res&no=$LOGNO');

//リンクのタグ
twlink1="<a target=\"_blank\" href=\"https://twitter.com/share?text=";
twlink2="&url=";
twlink3="&\""
twlink4="<span class=\"icon-twitter\"></span>tweet</a>"
tweettags=twlink1+tweetmessage+twlink2+tweeturl+twlink3+twlink4;

document.write(tweettags);
</script>

ツイートボタンのカスタマイズ Javascript

やった…動いた…と思ったのですが…。

ツイートボタンのカスタマイズ Javascript

左から1番めのようになりました。
twitterの鳥アイコンが2つならんでしまいます。

ツイートボタンのカスタマイズ Javascript

デベロッパーツールで問題の箇所を確認してみたりもしたのですが…。
なぜtwitterのアイコンが二重になるのか、さっぱり…。
<script>
(function(){
var url = encodeURIComponent('https://pbbs.sakura.ne.jp/cgi/relm/relm.cgi?mode=res&no=$LOGNO'); //ページURL。一応エンコード
var title = encodeURIComponent('No.$LOGNO $TITLE by $NAME #お絵かき掲示板'); //ページタイトル。同上。
document.write( '<a target="_blank" href="https://twitter.com/intent/tweet?&text=' + title + '&url=' + url + '"><span class="icon-twitter"></span>tweet</a> <a target="_blank" class="fb btn" href="http://www.facebook.com/share.php?u=' + url + '"><span class="icon-facebook2"></span>share</a>' );
})();
</script>

JavaScriptを使った原始的な方法ならばこんな感じ。ボタンを表示したい場所に以下のコードを書きます。を参考にして、書き換えたものですが99%コピペですね…。

functionとdocument.writeを組み合わせたらいいのかな…となんとなく思ってはいたのですが、そのものズバリの答え…でした。

Chrome、Firefox、IE11で動作する事を確認しました。
javaScriptが実行された結果HTMLに出力されるのはaタグのテキストリンクなので、facebookのシェアボタンにも使ってみました。

ツイートボタンのカスタマイズ Javascript

facebookのシェアのリンクも動作しているみたいです…。みたい…というのはfacebookのアカウントが無いので、おそらく動くはずの書き方をしただけだからです…。

ツイートボタンを設置したお絵かき掲示板はこちら。

Chrome68 オートフィルを抑止したいだけなのに新規パスワード生成メニューが出る

Chrome68で、
autocomplete="new-password"
が設定されたパスワード入力欄をクリックすると…。

0827_001.png

Chromeが生成したパスワードをおすすめします…というメッセージ。
これまでは、オートフィルを抑止するだけで、右クリックするとChromeで記憶しているパスワードを呼び出す事ができたのですが…。
新規パスワードなのに記憶したパスワードを使う?という判断をするようになったようです。
フォームの自動補完を無効にするには - ウェブセキュリティ | MDN

他人のパスワードを指定するようなユーザー管理ページを定義していて、パスワード欄のオートフィルを抑止したい場合は、 autocomplete="new-password" を使用することができます。ただし、この機能はまだ Firefox に実装されていません。

この記事を参考にして、autocomplete="new-password"を使っていたのですが、元の記事も加筆されていて、他人のパスワードを指定するような時…となっていますね。

POTI-boardの編集・削除用のメンテナンス欄は数字+パスワードなのですが…。

0827_002.png

数字のところに、ユーザー名=名前がオートフィルで入ってしまって…。
ここは数字なのだから、明確にこの入力欄には数字しか入らないようにできないのかな…と思って検索してみたら…。HTML5には、input type="number" が…。
<input type="number" min="1" name="del[]" autocomplete="off" class="edit_number">

無指定だとマイナスの数字も入ってしまうので、最小値を1に設定しました。

0827_003.png

数字の入力欄をクリックすると、ユーザー名として記憶されている名前がでてきますが、全角文字なので数字の入力欄には入らない。パスワードは記事の投稿時に記憶したものが入るので、編集・削除の時に困らない。
とりあえずは…これで何とか。

もしかしたら、もっといい方法があるのかもしれないのですが…。

POTI-board用テンプレート PINK を配布します。: STP^3

配布しているテンプレートも修正してバージョンアップしておきました。