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で描いてるのが現状なのですけれどね…。

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

Cannot modify header information の原因を突き止める

php.iniを
display_errors=on
error_reporting = E_ERROR | E_WARNING | E_PARSE
にして、Warningは表示するけれど、Noticeは表示しないように設定し、以下のようにページが切り替わる秒数を15秒に書き換えて確認しました。
$str = "<html><head><META HTTP-EQUIV=\"refresh\" content=\"15;URL=".PHP_SELF2."\">\n";
1秒で切り替わる設定のままだと何が表示されているのかわからない…。

POTI-board Warning

コメントを送信した直後の「画面を切り替えます」の時に表示されるエラーメッセージ。
Cannot modify header informationが6箇所。

POTI-board Warning

投稿直後に表示されるWarning。

POTI-board WarningPOTI-board Warning

POTI-boardのエラーを減らすために 数値以外の値編: STP^3の、数値が入るべきところに文字列が入っていた問題を解消すると…。Warningがでなくなりました。

POTI-boardのエラーを減らすために header編: STP^3を書いた時は、もしかしたら…という感じだったのですが、
Warning: Cannot modify header information
が出ていた原因は、phpのエラーメッセージがheaderより先に出力されていたから…だったようです。

Cannot modify header informationが出る原因を一生懸命調べても解決しなかったのに、きれいにエラーが消えたので思わず笑ってしまいました。

一箇所気になるところがあるといえばあるのですが…。さくらのレンタルサーバのphp7.1で確認した限りでは…POTI-board改のWarningはこれで解消されたような…気がします。