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

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


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

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


↑
セルの幅に合わせて画像が小さくなる筈なのに…。
横スクロールバーがでてしまいました。

max-width: 100%;

が効かないようです。

width: 100%;

にすると…。


↑
横スクロールバーはでなくなりましたが、元のサイズより大きく表示されてしまう画像が…。

max-width: 212px;

にすると…。


↑
問題ないようです。

解像度が低い時は

width: 100%;

でも、元の画像より大きくならないし

max-width: 212px;

のように書く時は、CSS3で解像度別にセルの幅を決めてから、画像の最大幅を指定するようにすれば…。

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

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

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


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


↑

max-width: 100%;

を

width: 100%;

に書き換えて対応しました。

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

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

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

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


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


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


↑
borderが完全に重なるように修正しました。

margin: 0 -1px -1px 0;

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

最初からこうすれば良かったのですが…。

【CSS】tableのborderが一部だけ太くなるのを回避する

このあたりの記事をななめ読みして…。


↑
右と、下の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枚の新着画像を見る事もできます。


↑
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のレス先検索

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が解消されました。


↑
左、$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を使うのチェックのあるテンプレート。

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

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