![見出し画像](https://assets.st-note.com/production/uploads/images/109531447/rectangle_large_type_2_a4fc2989cd79d187821409d38d6a6fe3.png?width=1200)
お絵かき掲示板PHPスクリプト Petit Note 更新履歴 2022年1月-2023年6月
無料で使えるお絵かき掲示板のPHPスクリプトを開発しています。
前回のまとめが1年半前で、それっきりPetit Noteに関する記事を書いていませんでしたが、開発は毎日続けていました。
GitHubのリポジトリのリリースノートは書いていたので、なにもここで記事にしなくても…と思ったりもしましたが、なかなかPetit Noteの存在を知ってもらう事ができないのが現状です。
そもそも、「お絵かき掲示板ってまだあるの?」というTweetがTwitterにはたくさんあって…。いや、Googleで検索してくれたらいいのにと。
変更点を画像付きでまとめてみました。
興味を持っていただけるようでしたら幸いです。
無料のスクリプトですので、使ってもらう事ができるできない、ただそれだけなのですが…。
前後のスレッドをサムネイルで表示
![](https://assets.st-note.com/img/1688044623020-IpdxhIq0FX.png?width=1200)
個別スレッドの表示画面から、前後のスレッドに移動できるようになりました。
これまでは、個別スレッドからの戻り先は掲示板トップだけでした。
新アプリklecksが使えるようになりました。
![](https://assets.st-note.com/img/1688044961618-z5YkIHZo8g.png?width=1200)
新アプリ、klecksに対応しました。
![](https://assets.st-note.com/img/1688045023689-ptzhL4WBln.png?width=1200)
Klecksのレイヤー情報はPhotoshop形式のPSDファイルに保存されます。
そのPSDファイルをダウンロードする機能を追加しました。
ダウンロードしたPSDファイルはクリスタ他PSDが開けるアプリで再編集できます。
また、PSDファイルをアップロードしてKlecksで開く事もできます。
スクロールすると出てくる上に戻るボタン
![](https://assets.st-note.com/img/1688045228503-S8Vc8x8A4u.png)
スクロールするとでてくる上に戻るボタンを追加しました。
アップロード画像の差し換え機能を追加
![](https://assets.st-note.com/production/uploads/images/109530929/picture_pc_211e9a4de6638021539ab70562781573.gif?width=1200)
アップロード画像の差し換え機能を追加しました。
イラストに塗り残しが見つかった時等に修正版と差し換える事ができます。
完全に別の画像に差し換える事もできます。
閲覧注意機能を追加
![](https://assets.st-note.com/production/uploads/images/109531165/picture_pc_2fb7193bde009bfa367d72c320be27a8.gif?width=1200)
閲覧注意画像にぼかしをかける機能を追加しました。
画像のポップアップ表示
![](https://assets.st-note.com/production/uploads/images/109531324/picture_pc_64641b9a306b4f0a719c0bb81469bc71.gif?width=1200)
サムネイルをタップすると別タブで開いていた画像がポップアップ表示されるようになりました。
PaintBBS NEOのアニメファイルPCHから幅と高さを取得する事ができるようになりました。
![](https://assets.st-note.com/production/uploads/images/109532445/picture_pc_eacdb7e4791e4eaf21d88221dbaeab63.gif?width=1200)
PaintBBS NEOのPCHファイルをアップロードして、NEOのキャンバスに動画を読み込む時に、ファイルの中身を確認して正しいキャンバスサイズを取得できるようになりました。
これまでは元の画像の幅と高さを手動で入力する必要がありました。
PaintBBS NEOでコピー、レイヤー結合などキャンバス周辺を含む操作で画面が上下に動かないようにする工夫。
![](https://assets.st-note.com/production/uploads/images/109532616/picture_pc_b17dc6b71a3a9ea13a59f3102429b388.gif)
モバイル端末やPCでペンタブレットを使用する時に、意図せず画面が上下に動いてしまう問題がありました。
そのため、上下に動かなくするJavaScriptを追加しました。
しかし、幅が狭い端末の場合は紫の網目のところを掴んで動くようにしないと操作不能に陥る事があります。
この問題を解決するため、上下に動くべき時は動き、動くべきではない時には動かなくなるようにJavaScriptを調整しました。
動画を表示するしないを選択可能に
![](https://assets.st-note.com/img/1688046965950-AbPidRRWJo.png)
描いた手順を再生する機能は便利ですが、描いた手順を見られたくないという人もいます。
しかし、動画の記録そのものを止めてしまうと続きを描く時にレイヤー情報が失われてしまいます。
そこで、動画は記録して、動画を表示する/表示しないを選択できるようにしました。
スレッドを閉じる前に事前に知らせる機能を追加しました。
![](https://assets.st-note.com/img/1688047127367-5fypM6WIc3.png)
突然スレッドが閉じてしまって予測できないという意見があったため、スレッドを閉じる前に、あと何件の投稿で閉じるのか、あと何日で閉じるのかを知らせる機能を追加しました。
検索機能を追加
![](https://assets.st-note.com/production/uploads/images/109533416/picture_pc_84497b6bdb771477dfec8a37f63e2d87.gif?width=1200)
記事の本文題名、作者名の検索ができるようになりました。
画像、コメント+画像の二種類の画面で検索できます。
続きを描く→新規投稿の時に「同じスレッドに投稿する」にチェックをいれると同じスレッドに投稿できるようになりました。
![](https://assets.st-note.com/production/uploads/images/109533657/picture_pc_101a80a97e4eb5035c4fe6beae114343.gif)
新規投稿時に「同じスレッドに投稿する」にチェックをいれると同じスレッドに投稿できるようになりました。
これまでは新規投稿すると新規スレッドができていました。
合作の時にスレッドがたくさん必要になる問題を解決する事ができました。
スレッドの最初の記事を削除してもスレッドが削除されないようにしました。
![](https://assets.st-note.com/img/1688047956239-g1kNRU2VWV.png?width=1200)
スレッドの最初の記事を削除してもスレッドは削除されず「この記事はありません」に入れ替わるようにしました。
スレッドを立てた人が記事を削除するとそこに投稿された他の人の画像やコメントも消えてしまう問題が解決しました。
エラー表示を非同期通信で
![](https://assets.st-note.com/production/uploads/images/109534589/picture_pc_9f8fe443589c5c6248b53d4cf97dde2c.gif?width=1200)
これまではエラーが発生するとエラーページに画面が切り替わりそこから戻る操作が必要でした。
WAFに誤検知されにくいformDataを使ったPaintBBS NEO v1.6.0に対応
先行的に独自に改造していたformDataを使ったPaintBBS NEOの改造部分を開発元にマージしていただく事ができました。
WAFというセキュリティ機能がNEOの投稿を攻撃と判断して投稿に失敗する問題が解決しました。
![](https://assets.st-note.com/img/1688048547364-Dkk4VJRZfx.png)
閲覧注意画像を「隠す/隠さない」を閲覧者が設定できるように。
![](https://assets.st-note.com/production/uploads/images/109535108/picture_pc_bcd79841b05aea3fedce9cadd4bc340f.gif)
管理者権限で閲覧注意に設定を変更した場合、画像にぼかしが入るため、「この投稿を見てくれる人はいない」と受け止められてしまう事があります。
そこで、閲覧注意に設定された画像でもぼかしがかからない状態で閲覧したい人は閲覧注意画像を「隠さない」を選択する事で、そのまま表示する事ができるようにしました。
閲覧注意に設定されていても、そのまま見てもいい人は、「隠さない」に設定すればぼかしがかかりません。
「隠す」に設定すれば閲覧注意画像にぼかしが入ります。
ペイントアプリ tegaki.js に対応
![](https://assets.st-note.com/production/uploads/images/109535489/picture_pc_7c6c250028f0383f93f5b185305dd67d.gif?width=1200)
対応方法がわからず、1年かけて調べていたtegaki.jsに対応しました。
描画アニメの記録と再生もできます。
この続きの2023年6月から2025年1月の更新履歴もまとめましたので、よろしくお願いします。
お絵かき掲示板PHPスクリプト Petit Note
ここ1年半の更新のうち、画像付きでわかりやすく説明できる更新をまとめてみました。
Petit Noteはどなたでも無償で利用できます。
改造・再配布もできます。
ほぼ転送するだけで設置が完了する鬼のように設置が簡単なお絵かき掲示板のPHPスクリプトです。
日記モードに設定して、簡易ブログのように使う事もできます。
もし興味をもっていただけるようでしたら、無料のレンタルサーバでも動きますのでよろしくお願いします。
お絵かき掲示板交流サイト Petit Note
お絵かき掲示板Petit Noteは、お絵かき掲示板PHPスクリプトPetit Noteを使ったオエビの交流サイトです。
懐かしい「しぃPaintBBS NEO」、Photoshopライクな「ChickenPaint」、高機能な「Klecks」、ベーシックでわかりやすい「Tegaki」、4種類のペイントアプリが使えます。
![](https://assets.st-note.com/img/1688049990651-49Ou4JByB1.png)
![](https://assets.st-note.com/img/1688050082277-TX9XN4CoPY.png?width=1200)
![](https://assets.st-note.com/img/1688050109739-xiVRNmovEZ.png?width=1200)
![](https://assets.st-note.com/img/1688050145812-q9whXJRjNf.png?width=1200)
お絵かき掲示板交流サイトPetit Noteへの投稿をぜひよろしくお願いします。
「お絵かき掲示板」「おえび」「オエビ」「お絵描きBBS」「PaintBBS」等のキーワードでGoogle検索すれば見つけられると思います。