お絵かき掲示板をスマートフォン対応にする

<meta name="viewport" content="width=device-width,initial-scale=1">

viewportを指定します。PC用の解像度で表示しなくなるので、文字が小さすぎて読めない、クリック可能な要素が近すぎるといった問題を回避する事ができます。
ビューポートを設定する  |  PageSpeed Insights  |  Google Developers

ビューポートは携帯端末でのウェブページの表示方法を制御します。ビューポートがない場合、携帯端末は一般的なデスクトップ画面の幅でページをレンダリングします。ビューポートを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。

お絵かき掲示板をスマートフォン対応にする

ブラウザの幅をせまくすると文字が縦並びになって読みにくいので…。

お絵かき掲示板をスマートフォン対応にする

ここからブラウザの幅をせまくすると…。

お絵かき掲示板をスマートフォン対応にする

コメントが画像の下に回り込むように設定。
<div class="message">
蒼の六郷の昴さん。
</div>

.messageの幅が200pxより小さくならないようにして、それよりブラウザの幅がせまい時はカラム落ちさせます。
.message {
min-width:200px;
display: table;
}

コメントの横幅が200pxより小さくならないように指定。
min-width:200px;だけではうまくいかないので、display: table;を使いました。

お絵かき掲示板をスマートフォン対応にする

ブラウザの横幅にあわせて画像を縮小。
img {
max-width: 100%;
height: auto;
}

お絵かき掲示板をスマートフォン対応にする

ChromeでiPhoneをエミュレート。

スマートフォンに対応させたお絵かき掲示板はこちら。

PaintBBS NEO

PaintBBSやしぃペインターは過去のものと思っている方も多いようですが、まだ終わっていません。
Chrome、FirefoxがJavaのサポートが終了しても、HTML5のPaintBBS NEOがある!
という事で、既存の掲示板にNEOを組み込む作業をこの間やっていました。
BBSNoteのNEO化は、しぃペインターはJava、PaintBBSはNEOという形でも構わないのであれば簡単です。paint.cgiのヘッダ内テキストの部分にNEOに対応させるために必要な2行を追加して、それに対応する2つのファイルをアップロードするだけ。
しかし、Java版のしぃPaintBBSとPaintBBS NEOを共存させるのは面倒で、ShiPaintBBSPNGの設定を利用してなんとか共存させました。
PaintBBSは投稿に失敗する事が多くなってきているので、PaintBBSはNEOだけでいいのかもしれません。

NEO化に成功したCGIは、BBSNote、藍珠CGI、らくがきひろばRelm

システムを弄るのは面白いのですが…。
絵を描く時間がなくなりました。

という事で、PaintBBS NEOのテスト投稿で描いたようなものばかりですが…。

スク水スク水女の子女の子吊りスカート吊りスカート

もうちょっと丁寧に描きましょうよと言われたような気がしたので「1ポンドの福音」のシスターを画面を拡大しながら描きました。
あれ、スペースを押すと手のひらツールになる!?
PaintBBSを何年も使ってきた筈なのに今頃気が付き…。

1ポンドの福音

phpでお絵かき掲示板の最新画像を表示

お絵かき掲示板の最新画像を呼び出して、トップページに表示させるphp。

BBSNoteなら、newimg.cgiで最新画像の呼び出しができますが、POTI-boardにはその機能がありません。
Pallet Townの最新画像呼び出し機能はChromeでは動作しません。
でも、BBSNoteがあるから問題ない…といいたいところですが、そのBBSNoteも、Perl 5.12.5、5.14.4では動作しなくなるのでいつまで使えるか。

さくらのレンタルサーバ Perl バージョン 選択画面

さくらのレンタルサーバのPerlのバージョン選択画面。

Perl 5.10.1までなら動作しますが、Perlのバージョンが上がるとテキストを書き込む事ができなくなるので、テキストを書き込まないと画像を投稿できない仕組みのBBSNoteでは画像だけの投稿もできなくなってしまいます。

別なお絵かき掲示板のプログラムを使う事になっても、運営している絵板サイトの最新イラストを表示する機能は使いたいので、phpで。

以下はPOTI-boardの最新画像と更新日時を表示するphp。

php/poti/src/
にある、拡張子が jpg あるいは png の最新画像を表示。
<!-- 最新画像 -->
<?php
//配列宣言
$arr = array();
//ディレクトリ内の画像ファイルを連想配列に格納
//キーにファイル名、値にタイムスタンプ
// php/poti/src/ の jpg あるいは png の最新画像
foreach(glob('php/poti/src/{*.jpg,*.png}', GLOB_BRACE) as $filename) {
$arr[$filename] = filemtime($filename);
}
//連想配列を値でソート
arsort($arr);
//上位1件を表示してbreak
$i = 0;
foreach($arr as $key => $value){
echo '<img src="'.$key.'" alt="最新画像"/>';
if($i >= 0){break;}
$i++;
}
?>
<!-- 更新日時 -->
<?php
//更新日時
// 出力例 17/08/01
echo date ("Y/m/d", filemtime('php/poti/index.html'));
?>
拡張子を.phpにしてサーバにアップロード。
表示されたHTML。
<!-- 最新画像 -->
<img src="php/poti/src/OB1495627852533.png" alt="最新画像"/><!-- 更新日時 -->
2017/08/22
サムネイルが作成されるお絵かき掲示板の場合は、
ファイル名の先頭の文字列を指定。

{IMG*.jpg,IMG*.png}
(ファイル名の先頭に IMG が付いていて 拡張子が jpg あるいは png )

練習用お絵かき掲示板 PaintBBS / しぃペインター

phpでディレクトリの最新画像を表示

RelmとPallet Townの最新画像と更新日時を表示。

参考にさせて頂いたサイト。

phpのscandirでの画像更新日時取得 - phpを使用しHPを作成している... - Yahoo!知恵袋
PHPのglob()がすっごい便利だった件 | IDEA*IDEA