お絵かき掲示板の入力フォームにautocomplete属性を設定

http://pbbs.sakura.ne.jp/に設置しているお絵かき掲示板のコメント欄の入力フォームにautocomplete属性を設定しました。

Chromeのパスワード保存機能に対応させるためです。

autocomplete属性 お絵かき掲示板autocomplete属性 お絵かき掲示板

右、BBSNote。左、relm。

autocomplete属性を設定したので、名前+パスワードで保存できるようになりました。

これまでは、URL+パスワードでした。
URLを変更するとその組み合わせて再度パスワードを記憶…というおかしな事になっていました。

POTI-board、は題名+パスワードで、題名を書き換えるたびにパスワードを記憶していました。

<input type="text" name="name" class="post_input_text" autocomplete="username">

名前のところにautocomplete="username"といれただけですが…。

autocomplete属性 お絵かき掲示板

こちらも、名前+パスワードで記憶できるようになりました。

autocomplete属性 お絵かき掲示板

続きから描く時にも名前を選択すればパスワードが入ります。

input 要素 - HTML | MDN

username
new-password: 新しいパスワード (例: アカウントの新規作成やパスワード変更のとき)
current-password

他の絵板と同じパスワードが入っても問題ないはずなので、記憶したいパスワードはcurrent-password、自動的に入力されると困る記事番号+パスワードはnew-password。
フォームのオートコンプリートを無効にするには - Web セキュリティ | MDN

パスワードフィールドのオートフィルを抑止したい場合、autocomplete="new-password" を指定するべきです。ただし、この機能はどのブラウザでもまだ実装されていません。
どのブラウザでもまだ実装されていないとありますが、Chrome64はautocomplete="new-password"で対応可能でした。

Chromeには有効な設定だったのですが、IE11でパスワードを記憶させるとPOTI-boardでは題名+パスワードの組み合わせに…。
Firefoxは…何が変わったのかよくわかりませんでした。
posted by さとぴあ at 2018/02/15 01:22 | Web制作

POTI-board用テンプレート PINK を配布します。

Chrome、FirefoxともにJavaのサポートを終了。
Windows10のアクセサリに入っているIE11を使えば、とりあえずJavaを使う事ができますが…。

描くたびにJavaのセキュリティの警告…。

これでは、しぃちゃんお絵描き掲示板PaintBBSはすたれてしまう、と思ったら…。
GitHub - funige/neo: PaintBBS NEO

お絵描きしぃ掲示板 PaintBBS ((C)2000-2004しぃちゃん) をhtml5化するプロジェクトです。
Flashやhtml5のお絵描きサイトはいっぱいあるんだけど、そうじゃないんだ。
おじさんは昔のjavaアプレットそっくりの環境が欲しいんだ。
かなりの再現度です。

HTML5ですから、Chromeでお絵かきできます。

PaintBBS NEOは、既存のお絵かき掲示板に組み込む事が可能なので、BBSNote、relm、らくがきひろばでも使えるのですが…。
新規設置をするなら、POTI-boardがいいのかなぁ…と思います。

BBSNoteはPerl5.12以上では動作しない、relmは管理パスワードがURLに出るので、リファラを返す設定で使うと…。

しかし、POTI-boardにも問題があります。
php7では動作しない、と思ったら…。
POTI-board改とテンプレートシリーズ

Punyu NetのPOTI-boardを、php7で使えるように改造したものです。 使いやすさの観点から1.33のベータ版ではなく安定版の1.32から作りました。
さくらのレンタルサーバの一番安いライトプランで、phpのバージョンを7.1にして動作確認。

今のところ問題ありません。

でも、レス送信時のコメント欄の位置が、と思ったら…。
ドラ☆クロウ! - オリジナルイラスト中心よろずサイト -

POTI-boardテンプレート Cool Solid
POTI-board v1.32以降向けのテンプレートです。
SakaQさん作のMONO WHITEを元にHTML5とCSS3で大幅にアレンジしました。
BBSNoteのスキンsiberiaの作者れいさんzero(配布サイト)の、POTI-board版siberiaのデザインを取り入れているのでBBSNoteと見た目が近い。

コメント欄はスレッドの下。

これをベースにすれば、BBSNoteに近いテンプレートを作る事ができると思いました。

作ってみました。

POTI-board テンプレート PINKPOTI-board テンプレート PINK

タブレット。
iPadとiPad ProをChromeでエミュレート。

POTI-board テンプレート PINKPOTI-board テンプレート PINKPOTI-board テンプレート PINK

スマートフォン。
Galaxy S5、iPhone8をChromeでエミュレート。

配布したくなったので、配布します。

画像アップロードができない仕様。
お絵かき掲示板として使いたいという方向けのテンプレートです。

管理画面からの画像アップロードには対応しています。
設置方法、注意事項はreadmeにまとめておきました。

たまに、readmeを読まない方がいますが、読まないといろいろと…。

キャンバスサイズを選択式にしましたが、
セレクトボックスを貼り付けあるだけなので、変更するにはテンプレートを…。

そのあたりの事も、書いてありますので目を通していただけたらと思います。

POTI-board用テンプレート PINK 設置サンプル

設置サンプル。
POTI-board用テンプレート PINK
pink180216.zip

テンプレートのダウンロードはこちらから。
posted by さとぴあ at 2018/02/03 00:15 | Web制作

BBSNote8.0にPaintBBS NEOを組み込む

HTML5版 PaintBBS NEO 起動画面
以下はBBSNote8.0b19でHTML5版のPaintBBS NEOを使うための設定方法です。

何かのお役に立てればと思いながら書いていますが、この記事を参考にした事によりトラブルが起きても何もしてあげる事ができません。
私はなんら責任を負いません。無保証です。

BBSNoteb8.0はPerlのバージョンが5.12以上の場合動作しません。

いまのところ、さくらのレンタルサーバではPerlのバージョンを5.8.9、5.10.1に切り替える事ができるため動作します。しかし、いつ使えなくなってもおかしくありません。
以下はそれでも、NEO化したいという方向けの情報です。

BBSNoteは配布が終了していて、再配布も禁止されているため新規に入手する事ができません。
作業する前にバックアップを取り、さらに、動作確認のためのテスト用の掲示板を別途設置します。

テスト用の掲示板を設置して問題がないことを確認してから実際に使う掲示板に転送すれば、すでに動作しているお絵かき掲示板をトラブルに巻き込む事なく作業をすすめる事ができます。

NEOを使えるようにする。

GitHub - funige/neo: PaintBBS NEO

から必要なファイルをダウンロードしてヘッダに2行追加します。
neo/README.md at master ・ funige/neo ・ GitHub

1. 基本的には<head>に2行追加するだけです

<head>
<link rel="stylesheet" href="neo.css" type="text/css" />
<script src="neo.js" charset="UTF-8"></script>
...
</head>

neo.jsとneo.cssの2つのファイルを/dist からダウンロードしてください。
最新版のPaintBBS-x.x.x.(css|js)とneo.(css|js)は同じものです。
問題はどこに追加するかですが、Javaのしぃペインターも使いたいのであれば、PaintBBSの設定のところに追加するのが適当だと思います。

paint.cgiの

#=== ★ ShiPaintBBS の設定 ===================================================

以下の箇所に2行追加します。
#-------< ヘッダ内テキスト >--------------------------------------------------
'TxtHead' => <<_TXT_
<link rel="stylesheet" href="PaintBBS-1.2.3.css" type="text/css" />
<script src="PaintBBS-1.2.3.js" charset="UTF-8"></script>
_TXT_
_TXT_を消すと500エラーになるため注意が必要です。

PaintBBS-1.2.3.css
PaintBBS-1.2.3.js

上記の2つのファイルがbbsnote.cgiと同じディレクトリに転送されていることを想定しています。

転送したファイルの名称が

neo.css
neo.js

の場合は、ファイル名をそれに合わせます。

PaintBBS-1.2.3.js

という記述は特定のバージョンのNEOを動作させるためのものです。
<link rel="stylesheet" href="neo.css" type="text/css" />
<script src="neo.js" charset="UTF-8"></script>
としておいて、
バージョンアップしたら

neo.css
neo.js

を上書きする形でも運用できます。

まとめると、paint.cgiのShiPaintBBS の設定のヘッダ内テキストに2行追加して、指定したファイル名と同じファイルをbbsnote.cgiと同じディレクトリに転送するだけです。

PaintBBSを選択した時にはHTML5のPaintBBS NEOが起動し、しぃペインター選択を選択した時にはJavaのしぃペインターが起動します。

Java版のPaintBBSと共存させる事もできますが、書き直す箇所が多くなるため割愛します。

ここから先は、ちょっと難しい設定になります。

PaintBBS NEOで投稿できるのはPNG形式だけです。
BBSNote8.0はPNG形式の画像から続きを描く事ができません。

つまり、NEOで投稿した画像からは続きを描く事ができません。

それでは不便なのでPNG形式の画像から続きを描けるようにします。

paint.cgi
3751行付近の
$fmt_png = 1 if($Data{ ImageSrc } =~ /\.png$/);
$ok_image = 1 if($Data{ ImageSrc } =~ /\.png$/);
に書き換えます。
これだけでは続きから描くためのリンクが出てこないので、skin.cgiの続き表示関係の該当箇所を
$Data{ImageSrc} =~ /\.(jpg|gif|png)$/i) &&
とします。

JPEGでもGIFでもPNGでも続きから描くリンクが出るようになります。

PaintBBS NEOが使えてPNGから続きを描く事ができるBBSNoteのお絵かき掲示板。

気軽にお絵かき PaintBBS/しぃペインター
posted by さとぴあ at 2018/01/05 16:46 | Web制作

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

<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をエミュレート。

スマートフォンに対応させたお絵かき掲示板はこちら。
posted by さとぴあ at 2017/12/12 20:57 | Web制作

「るくるく」「カールビンソン」あさりよしとお作品の女性キャラ

反逆の赤ずきん あさりよしとお短編集
反逆の赤ずきん あさりよしとお短編集

あさりよしとお短編集」収録、反逆の赤ずきん。

橋の下の超人 あさりよしとお短篇集 毒入り 錠剤篇橋の下の超人 あさりよしとお短篇集 毒入り 錠剤篇
橋の下の超人 あさりよしとお短篇集 毒入り 錠剤篇橋の下の超人 あさりよしとお短篇集 毒入り 錠剤篇

「あさりよしとお短篇集 毒入り<錠剤篇>」 収録、橋の下の超人。
Amazon / honto

コロナちゃん 宇宙家族カールビンソン

宇宙家族カールビンソン」のコロナちゃん。

ペロちゃん るくるくペロちゃん るくるく

るくるく」のペロちゃん。

1枚だけpooお絵かき、その1枚以外はJavaなしで描けるPaintBBS NEOのお絵かき掲示板で。
posted by さとぴあ at 2017/11/06 00:18 | あさりよしとお

スク水ミャアちゃん

スク水のミャアちゃん
スク水のミャアちゃん。
何も見ないで描くとこんな感じの猫山さんになります。
Painterのリアル水彩で水彩風に。
50%の縮小表示で描いていて100%にしてみたら線が二重三重で手直し…。
小さめのサイズで描いたほうが線を整える作業の手間がかからなくていいのかも。
まぁ…難しいです。

ミャアちゃんラブワールド―吾妻ひでおイラスト集 (1983年) (Best hit series) Amazon
posted by さとぴあ at 2017/10/07 00:50 | 吾妻ひでお

003 フランソワーズ

003 フランソワーズ
「サイボーグ009」の003、フランソワーズ。
8月にpixivに投稿。でも、線がラフすぎるからブログに載せるのはどうしようかな?
PainterのRIFファイルが残っていたので線を整えて…。でも、ラフの線を整理するのっていつも同じ作業。
自動着色のAIが登場している位なので、ラフ、ペン入れのAIがあってもおかしくない。
すでにあるという噂も…。
そして、色の調整を繰り返、結果的にどんな色で塗りたかったのかよくわからなくなりました。
原作のフランソワーズより若いかも…。

サイボーグ009 Amazon / honto
posted by さとぴあ at 2017/10/04 10:58 | 二次創作

荒野の蒸気娘

荒野の蒸気娘 アリス
設定上の姿はかわいい女の子…でも実態は巨大ロボ。
なので、水浴びのシーンも巨大ロボが水浴びしてるだけ…。
要脳内補完。
うーん、ひねくれてる…。

あさりよしとお(著)「荒野の蒸気娘」Amazon / honto
posted by さとぴあ at 2017/10/04 10:23 | あさりよしとお

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ポンドの福音
posted by さとぴあ at 2017/10/01 22:57 | Web制作