フレームセットを使った古い日記のHTMLを書き直しました

↑
<frameset>で左にメニュー、右にコンテンツ…。
画像は横幅360pxで表示するスマートフォンをエミュレートしたものです。
googleのモバイルユーザビリティテストでモバイルフレンドリーではないと出てしまいます。
仕方がないので、モバイル端末の時は左側のメニューページにリダイレクトがかかるようにしていましたが…。

Google ウェブマスター向け公式ブログ: モバイル ファースト インデックスを開始します

モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。

コンテンツではなく、メニューだけインデックスされるようになりました。


↑
だったら、<iframe src=""></iframe>、つまりインラインフレームを使ってPCで表示する時は左右分割フレームのようにして、スマートフォンの時はメニューが上に移動するようにすれば…。
HTML5で<frameset>タグが廃止されたのはおそらく、代わりに<iframe src=""></iframe>を使えという事なんだろうな…と思いました。

ところが、CPU使用率が100%になり、「このページは応答していません」になってしまいます。
インラインフレームで長い縦スクロールは…想定されている操作ではないのかもしれません。

PCでも負荷が高くなってブラウザが固まる…となると、モバイル端末ではさらに…。

書き直す事にしました。


↑
左のメニューの位置を固定したので、スクロールするのは右側のコンテンツだけ。
まるで左右分割フレームのようになりました。

しかし、この書き方では…。
すべてのページに左側のメニューが必要です。
フレームを使っていたのは、それが面倒だったからなのですが…。

秀丸エディタのgrepして置換を使ってどうにかしました。


↑
スマートフォンの時は、メニュー上、コンテンツが下、どちらもスクロールするように。

/*疑似フレーム*/

.menu {
width: 218px;
margin: 18px 0 0 16px;
position: fixed;
top: 0;
}
.content {
width: calc(100% - 258px);
position: absolute;
left: 250px;
margin: 8px 0 0 0;
}

左メニューの幅は8+18+218=242です。最初の8pxはbodyのデフォルトのマージンです。
右側のコンテンツは、左から250pxの位置から…。
250-242=8px分の余白を確保するためです。
右側のコンテンツの幅は 100%-258px 。100%-250pxにすると、右側の余白が0になるので、8px分幅を狭くしました。


↑
ChromeでiPadをエミュレート。コンテンツの左右に8px分の余白。


↑
文字フォントがMS P ゴシックだったので、メイリオに変更して見た目を近代化…。

レガシーなタグがまだたくさん残っていますが、どうにか…。

らくがき絵日記

今回作業したページはこちら。

POTI-boardのエラーを減らすために 1のログの書式の見直し

POTI-board改のエラーを根絶できた…と思っていたのですが…。


↑
続きから描く時に番号を1にするとWarningが出ました。

if(file_exists(IMG_DIR.$ctim.$cext)){//画像が無い時は処理しない
$dat['picfile'] = IMG_DIR.$ctim.$cext;
$size = getimagesize($dat['picfile']);
中略
}

file_exists()で、画像が無い時は処理しないようにした筈…。

var_dump(IMG_DIR.$ctim.$cext); //string(4) "src/"

あるのはディレクトリだけのようです…。

var_dump(file_exists(IMG_DIR.$ctim.$cext)); //bool(true)

画像が無い時はfalseの筈…。

PHP: file_exists - Manual

file_exists − ファイルまたはディレクトリが存在するかどうか調べる

src/というディレクトリが存在しているかどうか調べていた…ようです。

パターンを変えてみると…。

string(17) "src/1547552231446" bool(false)

falseになりました。
src/1547552231446というファイルは存在しないので…。

自動生成される1のログにタイムスタンプが入っていないので、ディレクトリがあるかどうかのチェックになり、ディレクトリがあるので画像がなくてもtrueになって処理続行。ディレクトリは画像ではないのでWarningがでる…。

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

設置時にできる[1]を編集すると、その後の書き込みでWarningが発生するので修正しました。

//文字列を整数に
$ltime = (int)$ltime;

(int)をつければエラーはでなくなるかもしれませんが、こちらも1のログにタイムスタンプが入っていない事が原因で発生していたWarningなので、この作業の時に1のログの書式を修正していれば良かったのですが…。

$time = time();
$tim = $time.substr(microtime(),2,3);
$testmes="1,".$now.",".DEF_NAME.",,".DEF_SUB.",".DEF_COM.",,,,,,,".$tim.",,,\n";

他のログ番号と同じ形式のタイムスタンプが1のログに入るように書き換えました。
(int)で整数にしなくても、Warningが発生しない事を確認しました。
続きから描くの番号を1にしてもWarningが発生しない事を確認しました。

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

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