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

設置しているお絵かき掲示板のコメント欄の入力フォームに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は…何が変わったのかよくわかりませんでした。

P.S
この記事には後日談があります。

Chrome68 オートフィルを抑止したいだけなのに新規パスワード生成メニューが出る

Chrome68から、autocomplete="new-password"が指定されている箇所をクリックすると新規パスワード生成メニューがでるようになりました。
パスワードを記憶しないようにするための工夫のつもりでしたが、この記事の通りに設定してもうまくいかないかもしれません。

あさりよしとお作品の女性キャラ

posted by さとぴあ at 2018/02/07 21:20 | あさりよしとお

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
pink181031.zip

テンプレートのダウンロードはこちらから。