古い日記の過去ログにハンバーガーメニューをつけました

フレームセットを使った古い日記のHTMLを書き直しました: STP^3
この作業で、フレームを撤去しましたが…。
スマートフォンでアクセスすると記事本体の上にメニューが並んでしまって…。

やはりタップするとメニュー一覧が出てくる三本線のハンバーガーメニューが必要…という事で…。

らくがき絵日記 レスポンシブデザイン

PC。

らくがき絵日記 レスポンシブデザインらくがき絵日記 レスポンシブデザイン

スマートフォンの時は、ハンバーガーメニューのタップでメニューが開閉。
HTMLとCSSだけ!要素の表示・非表示を切り替える方法

CSSだけでできるんですね。
inputのタップする場所をlabelで決めて、チェックボックスは非表示。
チェックが入ったら表示してはずれたら表示しない。

【らくがき絵日記】の過去ログはこちら。
posted by さとぴあ at 2019/03/01 15:54 | Web制作

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

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

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

モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。
コンテンツではなく、メニューだけインデックスされるようになりました。

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

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

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

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

書き直す事にしました。

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

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

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

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

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

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

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

.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分幅を狭くしました。

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

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

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

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

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

らくがき絵日記

今回作業したページはこちら。
posted by さとぴあ at 2019/02/10 22:07 | Web制作

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

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

POTI-board 1のログの書式の見直し

続きから描く時に番号を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/というディレクトリが存在しているかどうか調べていた…ようです。

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

POTI-board 1のログの書式の見直し
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 に反映されました。

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

extract()の使用を全廃

poti-boardというPHPスクリプトをサイトに設置したいのですが、設置手順通... - Yahoo!知恵袋

このスクリプトはPHP5であるにも関わらず extract($_POST); extract($_GET); extract($_COOKIE); と、register_globals同等のことを自らやっているので、相変わらず脆弱性はあります。
extract($_POST); extract($_GET); extract($_COOKIE);による変数の取得をやめて、個別に変数を取得するようにしました。
POTI-board改 v1.50.0で対応ずみです。

残るはextract($_SERVER);でしたが…。
var_dump(count($_SERVER));で確認すると存在している配列の数47…。

変数として使っていれば配列のキーが変数名になっているはずなので1個ずつgrepで確認。
extract()を使っているのに、POSTかどうか調べているだけでした。
$REQUEST_METHOD = ( isset($_SERVER["REQUEST_METHOD"]) === true ) ? ($_SERVER["REQUEST_METHOD"]): "";
に書き直しました。

外部から取得する変数の取得方法を三項演算子に統一。
変数が未定義なら空文字列になるようになりました。
POTI-boardのエラーを減らすために $mode編: STP^3

//未定義エラー対策
if (isset($mode)){
switch($mode){
と書けば未定義エラーはでなくなると書きましたが…。
$modeが未定義にならなくなったので、isset()で確認する必要がなくなりました。
かなりの数のisset()を削減する事ができました。

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

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

php7.3のcompact()のエラーを修正

Notice、Warning、Deprecatedのエラーを少しずつ減らし…、ついにエラーのでないPOTI-boardができた…と思ったら、php7.3でcompact()のエラーがでてしまいました。

compact()に未定義変数が入るとNoticeが発生…。

compact()の手前でisset()で判定して空文字列にすればエラーはでなくなりますが、isset()だらけになるので、変数取得時のif文を見直す事に…。
if(USE_ANIME){
if(file_exists(PCH_DIR.$time.'.pch')){
$pch = $time.$ext;
}
elseif(file_exists(PCH_DIR.$time.'.spch')){
$pch = $time.$ext.'&amp;shi=1';
}
else{
$pch="";
}
}
else{
$pch="";
}
もしアニメを保存しない設定の時は、$pchを空文字列に。.pchファイルがなくて.spchファイルも無い時は、$pchを空文字列に。

値が入らない時は空文字列になるので、compact()に未定義変数が入るのを回避できます。
if文とelseを組み合わせれば未定義変数を減らす事ができるという基本的な事がやっとわかりました。

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

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

とある魔術の禁書目録 メジャーハート

とある魔術の禁書目録 心理定規 メジャーハート
お絵かき掲示板交流サイトでとある魔術の禁書目録の心理定規(メジャーハート)。

funige氏が開発したHTML5版しぃPaintBBS NEOはChrome、iPad、スマートフォンでも描けます。

HTML5+javaScriptなので、ブラウザだけで動作、Javaプラグインのインストールの必要がありません。
しかし、一度広まってしまったお絵かき掲示板はJavaで動くからもう終わりというという認識をあらためてもらうのはなかなか大変です。
見た目はJavaのPaintBBSでも、中身は最新のjavaScriptですと説明してまわなければならないのが現状です。

もう使う事ができないツールだと思われてしまったら、お絵かき掲示板を検索して探してもらいたくても、検索もしてもえなくて終わりです。

そこで考えたのが、Chromeでお絵かき掲示板が動いているスクリーンショットを投稿する。
さらに、Chromeでお絵かきした動画を投稿する。

【とある魔術の禁書目録】「禁書目録 心理定規」/「さとぴあ」のうごイラ [pixiv]

pixivやTwitterにも投稿しているんですけどね。
もう少しどうにか広める事はできないものなのか…。

とある魔術の禁書目録 心理定規 メジャーハート お絵かき掲示板描画アニメ

という事で試験的に、お絵かき掲示板の描画アニメをキャプチャした動画をブログに掲載してみる事にしました。

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

お絵かき掲示板簡単設置方法 2019年版

お絵かき掲示板交流サイトで使っているPOTI-board改の簡単設置方法です。

少し前にためしてみたけれど、うまく設置できなかったという方もぜひ…。

お絵かき掲示板簡単設置手順2019年版

POTI-board改をダウンロードします。

以前は、テンプレートが入っていない状態で配布していましたが、今はデフォルトスキンをはじめから入れています。
テンプレートが入っていないと掲示板が動作しないからです。

HTML5版しぃお絵かき掲示板PaintBBS NEOも最初から入っています。
ただし、最新バージョンではないかもしれません。
動作確認のために入れてあります。

お絵かき掲示板簡単設置手順2019年版

ダウンロードしたPOTI-board改のzipファイルを展開して…。

お絵かき掲示板簡単設置手順2019年版

FTPソフトで、php5.4〜php7.xが使えるレンタルサーバにアップロードします。

さくらのレンタルサーバの一番安いライトプランや、XREAの無料サーバでも動作します。

お絵かき掲示板簡単設置手順2019年版

ブラウザで設置したurlを開いて
potiboard.php
にアクセスすると、1、本文無しが表示されます。
投稿してみて問題がない事を確認します。

お絵かき掲示板簡単設置手順2019年版

FTP接続してパーミッションを確認すると、書き込みが必要なディレクトリは707、プログラムが書き換えるファイルは606になっています。
potiboard.phpが必要なディレクトリとファイルを作成してパーミッションを設定してくれます。

お絵かき掲示板簡単設置手順2019年版お絵かき掲示板簡単設置手順2019年版

2005年頃のマニュアルには、設置ディレクトリは777とありますが…。
777にするとサーバエラーになります。

パーミッションの設定を自分でしなければ、起きないトラブルです。

ここまで何も設定しなかったのは、動作する事を確かめるためです。
先にカスタマイズしてから転送したら動かなかったというケースも多いようです。

掲示板が動くことがわかったら
config.php
をutf-8対応のエディタで開き
//管理者パス
define('ADMIN_PASS', 'adminpass');
のadminpassとなっている箇所を、自分にしかわからないパスワードに書き換えます。

管理者パスがそのままだと誰でも記事を編集削除できる状態になるので危険です。
ここの書き換えは必須です。
//投稿サイズ(これ以上はサイズを縮小
define('MAX_W', '300'); //幅
define('MAX_H', '300'); //高さ
投稿した画像が大きく表示されない時は、ここの数値を変更します。
//強制サムネイル機能を使用する する:1 しない:0
define('FORCED_THUMB', '0');
それでも画像がサムネイルになる時は、1を0に変更します。
//タイトル(<title>とTOP)
define('TITLE', 'お絵かき掲示板');
掲示板のタイトルを変更します。
ここを変更してもトップページのタイトルが変わらない時は、管理モードからログ更新するか何でもいいので書いて投稿すれば反映されます。

POTI-boardはテンプレートを入れ替える事ができます。
PaintBBS NEOに対応したものに限ると…。

サ骨さんのテンプレートが4種類。
poti-kai-skins
黒鋼彗牙さんの
Cool Solid
Cool Solidから画像アップロード機能をなくし、BBSNoteに見た目を近づけた
PINK
があります。

お絵かき掲示板簡単設置手順2019年版
テンプレートを入れ替えたのに見た目が変わらない時は、ログ更新、または何でもいいので投稿してみてください。

PaintBBS NEOのバージョンアップに必要なファイルは、
neo/dist/
neo.css
neo.js
の2つです。
ダウンロードしたzipファイルを展開して取り出します。

お絵かき掲示板簡単設置手順2019年版
neo.cssとneo.jsの最新バージョンをpotiboard.phpと同じディレクトリに転送して上書きします。
最近のブラウザはキャッシュがなかなか消えないようです。
NEOのバージョンが上がらない時は、スーパーリロードしてみてください。

POTI-boardのエラーを減らすために 1のログファイルの書式編

POTI-boardの設置時にできる1のログファイルのコンマ数不足がが原因でNoticeが発生していたので…。
$testmes="1,".$now.",".DEF_NAME.",,".DEF_SUB.",".DEF_COM.",,,,,,,,,,\n";
コンマを8つ付け足しました。

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

これだけでていたNoticeが…。

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

でなくなりました。

記事を削除するとNoticeがでるので…。
for($i = 0; $i < $countline; $i++){
if($line[$i]){
list($no,,,,,,,$dhost,$pass,$ext,,,$tim,,) = explode(",",$line[$i]);

}
else{
$no=$dhost=$pass=$ext=$tim="";
}
$line[$i]が空文字の時には処理しないようにしました。

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

記事を削除した時に発生していたNoticeが…。

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

でなくなりました。

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

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

formの入れ子を回避する

<input>: 入力欄 (フォーム入力) 要素 | MDN

form 属性によって、入力欄を文書内のどこに置いても、文書内の他の場所にあるフォームと関連付けることができます。
formの入れ子になりそうなところは、早めにformのタグを閉じてformにidをつけて、inputにformのidを入れてやれば…。
<form id="foo" action="hoge" method="POST">
中略
</form>
<!--formのタグを閉じる-->
<!--別のformここから-->
<form action="fuga" method="POST">
中略
</form>
<!--別のformここまで-->
<!--最初のformのinput-->
<input form="foo" type="text">

id fooのformのinput。
ただしIE11では動作しないようです。

POTI-board改のテンプレート、POTI-board用テンプレート PINKの管理画面のセキュリティ対策のため、GETで管理者パスワードを取得していたテキストリンクをjavaScriptでPOSTに書き換えて、formの入れ子回避のためformにidを付けたのですが…。

やはりIE非対応…。
管理者が記事を削除するときに、Chrome・Firefox・Edgeを使えばすむ事なので、セキュリティリスクの回避を優先しました。

ブラウザのアドレスバーに管理者パスワードが表示されている状態で、著作表示のurlをクリックしたら…。
アクセスログに管理者パスワードが入ったurlが残るかもしれません。

noreferrerタグをいれてあるので、Chromeなら大丈夫かもしれないのですが…。IEはどうだったか…。
POTI-boardに限った問題ではなくて、relmにも同じ問題がありました。

テンプレートで対応できるのであれば、フタをしておいたほうがいいのでIE非対応でも…。

ゲストが投稿を編集・削除するときに使うメンテナンスフォームはIEでも問題なく動作するので、管理者が管理画面を操作する時にChrome・Firefox・Edgeを使えばすむことです。

formの入れ子を回避する

変更前のformタグの範囲。

formの入れ子を回避する

その中にjavaScriptを使ったform。

formの入れ子を回避する

formの入れ子になってしまうので、早めにformのタグを閉じて、idを付ける。

formの入れ子を回避する

inputにform属性を指定してformタグの範囲外から入力。
POTI-board用テンプレート PINK を配布します。: STP^3

セキュリティ対策済みのPOTI-board用テンプレート。

NEOを使うのチェックを外すとしぃペインター標準版が起動するテンプレートの配布も開始しましたので、よろしくお願いいたします。

Painter2019のインストーラーのバックアップ

Painter2019の体験版をダウンロードすると
CorelPainter2019.exe
というファイルが手元に残ります。
しかし、このファイルを実行するとプログラム本体のダウンロードがはじまる仕組みなので
CorelPainter2019.exe
をバックアップしてもあまり意味がありません。
CorelPainter2019.exe
を実行するとどうなるか…。画像はPainter2018のものですが2019でも同じです。

Painter2019のインストーラーPainter2019のインストーラー

すでにPainter2018の最新版がインストールされている状態で、2018の体験版をインストールしたので、何も変更されずにインストールウィザードが終了しました。

Painter2019のインストーラーPainter2019のインストーラー

C:\Users\ユーザーアカウント\AppData\Local\Temp\Painter\

にPainterのインストールに使うzipファイル
CorelPainter2018.zip
が残りました。このファイルがあれば、Painterをインストールできます。

Painter2019のインストーラー

Painter2019の修正パッチがを適用しましたが、修正パッチが手元に残りませんでした。
そこで、2019の体験版をダウンロードしてセットアップし、テンポラリーに残った
CorelPainter2019.zip
をバックアップしました。
おそらくこの体験版は、パッチをあてる必要がない修正されたバージョンだと思います。
CorelPainter2019.zip
のファイルサイズを比較して、ファイルサイズが違えばパッチ適用ずみのバージョンという判断です。

デジタルアート&ペイントソフト「Painter 2019」|ソースネクスト

Painter2019 Amazon
posted by さとぴあ at 2018/12/27 23:11 | Painter