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で「しぃペインター」で検索すると上位に出てきます。
でも、Javaの有償化とか…Macで唯一の頼りだったSafariがJavaの対応を終了したり…。
おそらくもう使う事ができなくなって終わりだろう…と思っていました。
ところが、CheerpJ Applet RunnerというChromeのプラグインを使えば、動作するらしい…。
以下はお絵かき掲示板Art.netのテキスト掲示版のそとさんの書き込みを抜粋したものです。
SetEnvIfNoCase Request_URI \.jar$ no-gzip dont-vary

と、記入した.htaccessファイルを作成して、
relmフォルダに配置することで動きました。(Apache2.2)
<script>
function cheerpJLoad() {
var jEnabled = navigator.javaEnabled();
if(!jEnabled){
var sN = document.createElement("script");
sN.src = "https://cjrtnc.leaningtech.com/latest/loader.js";
var s0 = document.getElementsByTagName("script")[0];
s0.parentNode.insertBefore(sN, s0);
sN.addEventListener("load", function(){ cheerpjInit(); }, false);
}
}
window.addEventListener("load", function() { cheerpJLoad(); }, false);
</script>
今後も必要になるので転載させていただきました。
ということは、今後も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のログファイルを解析する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

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

POTI-boardのエンコードをutf-8に固定

potiboard.phpの80行目付近のswitch文をコメントアウトして、utf-8にするところまでは、運営している絵板サイトでもやっていました…。
//switch(CHARSET_OUT){
// case 1 : $charset="EUC-JP";break;
// case 2 : $charset="Shift_JIS";break;
// case 3 : $charset="ISO-2022-JP";break;
// case 4 : $charset="UTF-8";break;
// default : $charset=CHARSET_OUT;
//}
define('CHARSET_HTML', "UTF-8");
でも、確かconfig.phpの
define('CHARSET_OUT', '4');
define('CHARSET_IN', '4');
を4以外に変更すると、問題が起きたような…。
思っていたよりも、面倒な作業だと思ったので、途中でやめていたのですが…。
GitHub - sakots/poti-kai: POTI-board, the oekaki BBS

[2018/08/22] v1.44.3 lot.180822【仕様変更】 文字コードをUTF-8に固定
utf-8固定になりました。

POTI-board

define('CHARSET_OUT', '2');
2:Shift_JISにすると文字化け…。
この設定はまだ生きているようです。

POTI-board

define('CHARSET_IN', '2');
2:Shift_JISにすると投稿できなくなりました。
この設定もまだ生きているようです。

POTI-board

$charsetが未定義になっているような気がしたので、echo $charset;
すると、CHARSET_IN、CHARSET_OUTそれぞれの値がレス返信モードの時に表示されました。
$charsetが4にならないと、期待した動作にならないようです。

対処。

POTI-board

define('CHARSET_CONVERT', '0');
という事は、 if(CHARSET_CONVERT) return $str; のif文は必要ないのでコメントアウト。続くswitch文も無効にして、utf-8に固定。

potiboard.php内の、CHARSET_OUTと、CHARSET_INを4に置換。

config.phpで設定を変更しても無効になる事を確認するため、
設定項目そのものをコメントアウト。

数時間テストしてみましたが…これで問題ないようです。
お絵かき掲示板交流サイトで使っているPOTI-boardに導入しました。

文字エンコードの設定項目がなくても、utf-8で正常動作するようになった…と本人は思っていますが…。
本人以外のほうが気が付きやすいのがバグですから、おかしな動作をしているようでしたら教えてください。

この仕様は、POTI-board改 v1.44.4 lot.180825に反映されました。

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

お絵かき掲示板交流サイトのSSL/TLS対応作業を行いました

お絵かき掲示板 SSLお絵かき掲示板 SSL

google Chrome。
左、保護されていません、右、保護された通信。

お絵かき掲示板 SSLお絵かき掲示板 SSL

Firefox。
左、この接続は安全ではありません、右、警告表示なし。

https;// なのに、 http:// の画像がまぎれこんでいると混在表示コンテンツになり、すりかえられた画像の可能性があるという警告がでますが、秀丸エディタのgrepして置換で処理。

アクセスログのための1pxの画像を、 http:// から、// に書き換えて、https:// でも、http:// でも対応できるようにしました。
何ページ分あっても、同じタグの書き換えなので、grepして置換すれば数秒で終わります。

さくらのブログはSSLに対応していませんが画像はhttps://でも呼び出す事ができるので、RSSからブログの画像を取得するphpを書き換えました。
<?php
//SSL対応 http:を取り除く
$image = $item->thumbnail;
$image = ltrim($image, "http:");
?>
PHP: ltrim - Manual

ltrim − 文字列の最初から空白 (もしくはその他の文字) を取り除く
ltrimで、画像のURLからhttp:を取り除きました。

何もかもスムーズにいく…と思ったのですが…。
TLS 1.0/1.1無効化のメンテナンスによる影響 – さくらのサポート情報

通信の安全性を確保するため、 「弊社レンタルサーバで運営されているお客様のウェブページ」
における「TLS1.0/1.1」による暗号化通信を無効化いたします。
.htaccessでリダイレクトをかけたところ、Mac OS10.6、Windows XPで投稿している方がアクセス不能に…。
リダイレクトをかけるのをやめました。

https://から、sを取ってもらい、http:// で掲示板を使ってもらう事に…。
でも、Windows7以降ならTLS1.2に対応したブラウザを使う事ができるから何も意識しなくても大丈夫…と思ったら、コメントの投稿時に「〜を待機しています」が長く続き「このページは動作していません」が頻発。

20回に一回の割合で画面がかたまってしまいました。
〜を待機していますが長時間続きエラーになる時は | 気軽にお絵かき | お絵かき掲示板交流サイト

セキュリティ対策ソフトの影響によりgoogle Chromeなどで、「pbbs.sakura.ne.jpを待機しています」という表示が長く続き、「このページは動作していません」というエラーになる事があります。
一部のSSLサイト(「https://」で始まるWebページ)が表示できない | ESETサポート情報
軽いから使っていたNOD32アンチウイルスが原因でした…。
「SSL/TLSプロトコルフィルタリング」機能からChromeを除外したところ、Pawooで頻発していたトゥートボタンを押した時に固まる事がある問題も解決しました。

他にもESETのセキュリティ対策ソフトを使っている方がいる筈ですから、設定の変更をお願いしなければならなくなってしまいました…。

そして、SSLにしたら、検索順位が下がって表示できなくなってしまったコンテンツ…。
いつかは元に戻るのでは?と思いながら何度も検索。

思っていたより労力が必要でした…。

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

BBSNoteから<center>を除去する

BBSNote8.0b19は、Perl5.12以上では動作しません。
つまり、今改造してもほとんどのサーバで動作しません。
さくらのレンタルサーバではPerl5.10が使えるので、とりあえずなんとかなっていますが…。
BBSNote後継のComet1.0をダウンロードしておくべきでした。
CometはPerlのバージョンがあがっても動作しているようです…。

そんなBBSNoteのメンテナンスを行いました。
<center>と、<div align="center">を取り除く作業…。
tableを完全に撤去するのは困難だったので、tableにCSSを適用してみたり<div class="hoge"> </div>で囲んでみたり…。
BBSNote8.0b19  center タグ除去作業BBSNote8.0b19 center タグ除去作業

tableにtext-align: centerを適用した箇所もありますが、あくまでもテキストの中央寄せのためで、tableそのものは、margin: 0 auto。左右のmarginを自動でというセンタリング。
divをセンタリングする時と同じ。

BBSNote8.0b19 center タグ除去作業BBSNote8.0b19 center タグ除去作業

text-align: centerを適用したくない箇所のテキストまでセンタリングされてしまったので、そのtableの中のさらにtableはtext-align: leftになるように…。
<center>なら簡単に指定でるきのに、CSSの行数が増えて行く。
そして、とうとうbbsnote.cgi本体の改造…。

BBSNote8.0b19 center タグ除去作業

ここを変更したらどこが変わるのかわからないからそれっぽいところを一箇所ずつ変更してソースを確認…という総当たり方式で問題の箇所を見つけ出し、tableにclass名をつけました。
場合によっては、tdだったりtrだったり…。

BBSNote8.0b19 center タグ除去作業

そこまでやっても、W3Cチェックで出るエラー1245…。
今のWebの基準を作っているのはW3Cなのか、googleなのか…。
google Chrome、IE、Firefoxで意図通りの表示、使う上でなにか問題がある訳ではないのですが…。

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

IE11だけmax-width: 100%;が効かない

お絵かき掲示板BBSNoteのカタログモードのモバイル端末対応作業を行いました。

BBSNote カタログモード iPhone iPad ScreenshotBBSNote カタログモード iPhone iPad Screenshot

iPad、iPhoneをChromeでエミュレート。

モバイル端末で問題なく表示できればそれでいいのかもしれないのですが、IE11で横幅を狭くしてみると…。

BBSNote カタログモード IE11

セルの幅に合わせて画像が小さくなる筈なのに…。
横スクロールバーがでてしまいました。
max-width: 100%;
が効かないようです。
width: 100%;
にすると…。

BBSNote カタログモード IE11

横スクロールバーはでなくなりましたが、元のサイズより大きく表示されてしまう画像が…。
max-width: 212px;
にすると…。

BBSNote カタログモード IE11

問題ないようです。

解像度が低い時は
width: 100%;
でも、元の画像より大きくならないし
max-width: 212px;
のように書く時は、CSS3で解像度別にセルの幅を決めてから、画像の最大幅を指定するようにすれば…。

IEで横幅を狭くした時にも、期待通りの表示になるようにCSSを書き直しました。

IEのようなレガシーなブラウザは切ってしまえばいいのに…と言われそうですが、お絵かき掲示板なのでJavaが使えるのはIEだけという事情も。
HTML5のPaintBBS NEOをつかっている方がほとんどなので、Java対応も切ってしまってもいいのかもしれないのですが…。

そして、その他のページでも…。

お絵かき掲示板交流サイト IE11

IEで横幅を狭くしてみたら…。表示が崩れて…。

お絵かき掲示板交流サイト IE11

max-width: 100%;
width: 100%;
に書き換えて対応しました。

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

隣接する1pxのborderを重ねると1pxのborderになる

設置しているお絵かき掲示板のうちのひとつ、relmのカタログモードのモバイル対応作業を行いました。
テーブルタグ5列表示で、768pxのiPadで縮小がかかる状態でした…。

テーブルタグを撤去して、tdだったところをdivで囲って、borderで枠線をつけてみたら…。

お絵かき掲示板 relm カタログモードモバイル対応作業

枠線が多くて目にうるさいような…。

お絵かき掲示板 relm カタログモードモバイル対応作業

divをくっつければテーブルタグの時と同じ見た目に…と思いましたが、1pxのborderが隣接すると1pxのborderが2本並んでしまうので…。

お絵かき掲示板 relm カタログモードモバイル対応作業

borderが完全に重なるように修正しました。
margin: 0 -1px -1px 0;

右と下のmarginを-1px。
1pxのborderが2本あっても、完全に重なれば1pxのborderしか見えない筈なので…。

最初からこうすれば良かったのですが…。
【CSS】tableのborderが一部だけ太くなるのを回避する
このあたりの記事をななめ読みして…。

お絵かき掲示板 relm カタログモードモバイル対応作業

右と、下のborderを消して…。
.catalog div:nth-of-type(5n)

5の倍数の時は、右のborderを表示。
.catalog div:nth-last-of-type(-n+5)

後ろから5個なら下のborderを表示。
.catalog div:nth-last-of-type(1)

最後の1個なら右側にborderを表示。

そんなCSSを書いていました。
解像度別に、もし4列表示なら、もし2列表示なら、もし1列ならと何時間もかけて書きました。
divでボックスを2つ用意し、floatで横並びさせています。その2... - Yahoo!知恵袋

あれ?もっとスマートな方法があるんじゃ…と思いながら検索して見つけた記事。

参考なったのは、ベストアンサーではなくて、他の回答者の方のコメントでした。
同じ太さの線が重なって太くなるはずがないんですよ。
あ…。
無駄な作業をしていた事に気が付きました…。
しかし…。
何番目系の便利なCSSまとめ
でできる事を知るよい機会だったのかもしれません…。

お絵かき掲示板 カタログモード モバイル端末対応作業お絵かき掲示板 カタログモード モバイル端末対応作業

iPad、iPhoneをChromeでエミュレート。
カタログモードだけモバイルに対応していなかったのですが何とかなりました。

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

お絵かき掲示板交流サイトのトップページに新着画像を表示

お絵かき掲示板交流サイトのトップページを改装して6つの掲示板を1ページにまとめました。

また、6つのお絵かき掲示板を横断して新着画像を呼び出し12枚分を表示。
掲示板を開かなくても、12枚の新着画像を確認できるようになりました。
もっと見るのリンクをクリックすれば52枚の新着画像を見る事もできます。

Screenshot PC Laptoppbbs.sakura.ne.jp_(iPad)_428_800.pngScreenshot iPhone

PC、iPad、iPhoneをChromeでエミュレート。

PCではディスプレイの幅が無駄になり、iPadでは高さが無駄になっていましたが何とか…。
そして、新着画像をクリックするとそのイラストが投稿された掲示板の返信画面になるように…。
PHP: glob - Manual
マッチするファイル/ディレクトリを含む配列を返します。
ディレクトリ名からどの掲示板なのか、掲示板のプログラムの種類は何かを判定する事はできるとして…。
POTI-boardのログファイルは1スレッド1ファイル形式ではないし、ファイル名の数字は13桁のUNIX timeなのでファイル名からレス先のスレッドの番号を取得するには…。

ログファイルを開いて画像とスレッドの番号が一致したら、返信先のリンクを作る?
掲示板の外部から掲示板のログファイルを開くなんてとても…と思いましたが、あれ?POTI-boardの改造の時におぼえたログファイルの解析方法を使えばいいのでは?
となりました。
<?php
//画像の13桁の数字
$imgno = 1529126099132;
$fp = fopen("cgi/hoge/img.log", "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桁のUNIX time
//と$timeが同じならスレッドの番号は$no?
if ($time == $imgno){
$resno = $no;
break;
}
}
//レス画像かもしれないので、tree.logを見に行く
fclose($fp);
$fp = fopen("cgi/hoge/tree.log", "r"); //ログファイルの場所
while ($line = fgets($fp)) {
//ログファイルの書式から変数を取得
list($oya,,,) = explode(",", $line);
//スレッドの番号は$resnoが含まれている行の$oya
if (preg_match("/$resno/", "$line")) {
$resno =$oya;
}
break;
}
fclose($fp);
//掲示板のレス送信画面にリンク
echo '<a href="cgi/hoge/potiboard.php?res='.$resno.'">掲示板</a></br>';
//タイトルを表示
echo "$sub</br>";
//投稿者名を表示
echo "$name</br>";
?>
もし、レスでお絵かきを許可する設定にしていたら、ここまでやらないとレス先がどこなのかわからないと思いますが、幸い、レスでお絵かきする機能を使っていなかったので、tree.logの確認をする必要はありませんでした…。

BBSNote、relm、らくがきひろば、POTI-board、4種類、6つの掲示板のログファイルを開いて、レス先やイラストのタイトル、作者名まで取得する作業…。

一度に全部やるのは無理なので、掲示板のログの処理をするプログラムを先に書いておいて、動く事を確認してから組みこみました。

手間暇をかけて見やすいサイトにしたつもりです。
よろしければご利用ください。

スマートフォンやタブレット端末でも動作するPaintBBS NEOを6つの掲示板すべてに導入済みです。

Windows10だからお絵かき掲示板が使えないとか、Javaが動かないからお絵かき掲示板が使えないという問題を解決してくれる新しく作られたHTML5のペイントツールですが、見た目と操作性はしぃお絵かきです。

気軽にお絵かき PaintBBS/しぃペインター | お絵かき掲示板交流サイト

POTI-boardのエラーを減らすために $mode編

POTI-boardのエラーを減らすために書き直した箇所。
//未定義エラー対策
if (isset($mode)){
switch($mode){
case 'regist':

(長いので省略)

default:
if($res){
updatelog($res);
}else{
echo "<META HTTP-EQUIV=\"refresh\" content=\"0;URL=".PHP_SELF2."\">";
}
}
}
//default:で処理していた箇所
else {
if($res){
updatelog($res);
}else{
echo "<meta http-equiv=\"refresh\" content=\"0;URL=".PHP_SELF2."\">";
}
}
POTI-boardの警告エラー修正 - sidewalkcafe blog

switch($mode){}
の前に
if (isset($mode)){}
を入れて囲む
こちらの記事を参考にさせていただきました。
未定義の時に、レス送信モードが表示される形になっていたので未定義の時の動作をelseで。

switchのdefaultも、$modeが予期しない値になった時にindex.htmlへ移動させるために必要なので残しました。
$mode が予期しない値になるのはどんな時かというと…。例えば
potiboard.php?mode=hoge
のような時です。
hogeという値が入っているので未定義ではないけれど、switchのどのケースでもない、レス送信モードでもない、だからindex.htmlを表示となります。

この対策で、レス送信モードの時に大量にでていた$modeのNoticeが解消されました。

お絵かき掲示板 POTI-board Noticeお絵かき掲示板 POTI-board Notice

左、$modeのNotice、右、それが解消された画面。

それでもまだたくさんNoticeがでてしまっているのですが…ログファイルが蓄積されると、1行だけになるようです。

php7.2でWarningが出るので調べてみたところ、コンティニューできるかどうかの判定に関係ない記述だったのでコメントアウト。
/* コンティニュー前画面 */
function incontinue($no){
global $addinfo;

$lines = file(LOGFILE);
//コンティニューの処理に関わっていない
// $countline=count($line);
未定義エラーがでるので、初期化。
function init(){
//未定義変数エラー対策
$err='';
$chkfile=array(LOGFILE,TREEFILE);
if(!is_writable(realpath("./")))error("カレントディレクトリに書けません<br>");
それから…画面を切り替えますの文字がスマートフォンでは小さく表示されるのでviewportを設定しました。
header("Content-type: text/html; charset=".CHARSET_HTML);
$str = "<!DOCTYPE html>\n<html><head><META HTTP-EQUIV=\"refresh\" content=\"1;URL=".PHP_SELF2."\">\n";
//$str.= "<META HTTP-EQUIV=\"Content-type\" CONTENT=\"text/html; charset=".CHARSET_HTML."\"></head>\n";
$str.= "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0\">\n<meta charset=\"".CHARSET_HTML."\"></head>\n";
$str.= "<body>$mes 画面を切り替えます</body></html>";
echo charconvert($str,CHARSET_OUT);
}
本文必須の設定の時しか日本語がなければ拒絶が有効にならなくなっていたので、
GitHub - funige/neo: PaintBBS NEO
のsamplebbsの記述に合わせました。
//本文に日本語がなければ拒絶
if(strlen($com) > 0 && strlen($com) == mb_strlen($com,'utf8')) error(MSG035,$dest);
これらの修正はPOTI-board改 v1.43 lot.180713に反映されました。

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

POTI-boardのNEOを使うをチェックした時の動作を変更

POTI-board NEOを使う テンプレート

POTI-boardのNEOを使うのチェックのあるテンプレート。

NEOを使うのチェックを外すとしぃペインターが起動するようにテンプレートを改造してみたところ…。

POTI-board NEOを使う テンプレートPOTI-board NEOを使う テンプレート

横幅が…。PaintBBSのアプレットの幅では表示されず、しぃペインターの設定になってしまいました。
NEOを使うのチェックが入っていても、
<!--{def useneo}--><APPLET-DUMMY <!--{/def}-->
も有効にならないので、テンプレート側の問題なのかなぁ…と思って調べてみましたが、NEOを使うにチェックが入っている時のpotiboard.phpの処理の問題のようでした…。
// if($w < 500 && $shi){$w = 500;}
// if($h < 500 && $shi==2){$h = 500;}
//NEOを使う時はPaintBBSの設定
if($w < 500 && !$useneo && $shi){$w = 500;}
if($h < 500 && !$useneo && $shi==2){$h = 500;}
// if($shi==1){ $dat['normal'] = true; }
// elseif($shi==2){ $dat['pro'] = true; }
// else{ $dat['paintbbs'] = true; }
//NEOを使う時はPaintBBSの設定
if(!$useneo && $shi==1){ $dat['normal'] = true; }
elseif(!$useneo && $shi==2){ $dat['pro'] = true; }
else{ $dat['paintbbs'] = true; }
NEOを使うのチェックが入っている時はPaintBBSの設定になるように…。
あまり需要がなさそうな改造なので、運営している絵板に入れて終わりになりそうですが…。

PaintBBS NEOお絵かき掲示板

ここのPOTI-boardに組み込んで、NEOを使うのチェックを外すとしぃペインター標準版が起動して、描画アニメも記録できるようにしてみました。
無料のJavaがいつまで使えるのかよくわからないのですが、2020年でサポート終了だったような?
OpenJDKなら使える?
WindowsでJavaが使えるブラウザはIEだけで、Windows10にも一応入っているようですが…。
Javaが使えない環境でも、PaintBBS NEOはHTML5なので、タブレット端末やスマートフォンでも描く事ができます。

結局のところ、しぃペインターも使えるように設定してもみんなNEOで描いてるのが現状なのですけれどね…。

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