![見出し画像](https://assets.st-note.com/production/uploads/images/64855119/rectangle_large_type_2_4d816c401ffdc6134257018837a9b596.png?width=1200)
お絵かき掲示板 Petit Note 開発日誌
PetitNoteの開発の進捗状況に関するツイート
新しいお絵かき掲示板、Petit Noteの開発の進捗状況をツイートしていました。
以下はその羅列です。
いまいちまとまっていないのですが記録として残しておきます。
現時点では忘れかけている作業内容があったりと、作者本人のためのメモとしても機能してくれそうです。
最初に1スレッド1ログファイル形式のテキスト掲示板を作り、そこにお絵かき掲示板の機能を追加しています。
スレッドとしてまとまっているツイート
スレッドとして比較的長く続いているツイートはこれです。
ここだけ追って頂くだけでも、だいたいの内容はつかめると思います。
日記モードで使っているのにレスでお絵かき返信ができてしまうのは困るという意見がでましたので、レスで画像アップロードとレスお絵かきができないようにする設定項目を作りました。
— さとぴあ (@satopian) October 5, 2021
Petit Note v0.8#PHP
#プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/F3Bn3mRLBb
Petit Noteの開発に関するツイート一覧
この一覧はちょっと読みにくいかもしれません。
興味があるところだけ拾い読みするのにはいいのかもしれませんが。
とりあえず記録のほとんどすべてですので、残しておきます。
左の掲示板が1日の作業で→右のように。#画像掲示板 #PHP #プログラミング初心者 #GitHub
— さとぴあ (@satopian) August 28, 2021
Petit-board(ぷちぼーど)https://t.co/V1ElyvzTE0 pic.twitter.com/0bZFpk0h0t
Petit-Noteの #お絵かき掲示板 化に成功。
— さとぴあ (@satopian) August 31, 2021
20年前のお絵かき掲示板と同じ方式です。
つまりコメント未記入の状態でポストされます。
動画や続きを描くは現時点ではありません。#PaintBBSNEO には対応できたので、次は #ChickenPaint です。#プログラミング初心者 https://t.co/JLGWoiUeJN pic.twitter.com/EhIJ7cX03T
作業開始から4日目。#お絵かき掲示板 らしくなりました。
— さとぴあ (@satopian) August 31, 2021
PaintBBS NEOとChickenPaintが使えます。
テンプレートエンジンは特になくても、HTMLファイルにPHPのコードを書いて別ファイルにすれば、あまり作業量は変わらないのかもしれないと思いました…。#プログラミング初心者 #PHP #掲示板 https://t.co/AU4ud6LoMV pic.twitter.com/XpKeis3ApR
#PetitNote 開発5日目。 使ったツールとキャンバスサイズのクッキーへの保存と読み込みをPHPで実装。
— さとぴあ (@satopian) September 1, 2021
静的HTMLを使うPOTI-boardではJavascriptによるCookieのロードが必要ですがPetitNoteはPHPファイルで表示しているのでその必要はありません。#プログラミング初心者 #PHP #掲示板 #お絵かき掲示板 https://t.co/mzWpTPvhnM pic.twitter.com/W4qSxjdzN2
掲示板開発作業6日目?
— さとぴあ (@satopian) September 3, 2021
合言葉が一致しないと投稿できなくする内輪機能を実装。
セッションが維持されていれば、合言葉の入力欄はでません。(ログイン状態)
画像アップロード機能を使う使わないの設定や、合言葉を使う使わないの設定項目もできました。#PHP #プログラミング初心者 #お絵かき掲示板 pic.twitter.com/Ksx8SWEmg3
プログラム本体、index.phpにはタグがありません。HTMLファイルはテンプレートとして外部化しています。
— さとぴあ (@satopian) September 3, 2021
テンプレートエンジンは使っていません。
各モードのHTML埋め込みのPHPファイルを各関数の最後でincludeしているだけです。#PHP #プログラミング初心者 #お絵かき掲示板 pic.twitter.com/tcNX0lgo29
掲示板作成開始からおよそ1週間。
— さとぴあ (@satopian) September 4, 2021
スマホで表示するとこんな感じです。#PHP #プログラミング初心者 #お絵かき掲示板 pic.twitter.com/ow1TkHUaxQ
日記モードを実装。スレ立ては管理者のみになります。合言葉認証はレスの制限もあるので、二重に表示されます。
— さとぴあ (@satopian) September 5, 2021
日記モードにログインすると、合言葉の認証も同時に完了します。
管理者以外がレスをつける時に必要なだけです。#プログラミング初心者 #PHP #お絵かき掲示板 pic.twitter.com/nbi7jFVG7A
ユーザーによる記事の削除、管理者による削除、日記モードのログイン・ログアウトは実装できたので、あとは
— さとぴあ (@satopian) September 7, 2021
描画アニメ再生機能と続きを描くですね。
でもそこまでやってもPOTI-boardがあれば良くね?になるかもしれない。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/sBmSxcQhF1
作業開始から8日目?
— さとぴあ (@satopian) September 7, 2021
描画アニメ再生の動作テストに成功。
このGIf動画が本当にはじめての成功。
今後の予定。続きを描くはやっぱり欲しい。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/fNCGavWoL3
作業開始から13日目?
— さとぴあ (@satopian) September 8, 2021
続きを描くためのポスト入力欄ができました。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 pic.twitter.com/nLDw8oPgMt
続きを描くでキャンバスにイラスト読込む事に成功。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 pic.twitter.com/QtJM5xfsBM
— さとぴあ (@satopian) September 8, 2021
#ChickenPaint のレイヤー情報を維持して続きを描くに対応。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #GIF動画 pic.twitter.com/wrxjplqRYD pic.twitter.com/N5bC1MhIMN
— さとぴあ (@satopian) September 8, 2021
何度copy()、rename()を試しても、src/ ディレクトリに画像が入らない。なんで?ただのコピーとリネームじゃん←ここで詰まって2時間が経過した。
— さとぴあ (@satopian) September 9, 2021
答え、移動したファイルを削除していた。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 pic.twitter.com/suYhoJsXRo
お絵かき掲示板には必須ともいえる、続きを描いて画像を差し換える機能を実装する事に成功しました。
— さとぴあ (@satopian) September 9, 2021
投稿先のスレッドが消えていたら新規投稿にする処理も追加。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/ewbRzdvrLa
新しいお絵かき掲示板の構想から開発までおよそ2週間が経過しました。
— さとぴあ (@satopian) September 10, 2021
続きを描く→画像差し換えに成功し、そして、レス表示件数にも対応しました。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/P7vNE4X3pA
削除ボタンを押したら即効で消える仕様を考え直し、本当にこの記事を削除しますか?という確認画面を出すようにするためのテスト。
— さとぴあ (@satopian) September 10, 2021
この実験ではレス返信画面のテンプレートを流用していますが削除専用に書き直せば問題なく動作すると思います。#PHP #プログラミング初心者 #お絵かき掲示板 #PetitNote pic.twitter.com/DuPEZt0WJM
削除前確認機能がやっと実装できました。こだわった点。削除処理が完了した時に処理前の画面にちゃんと帰ってくるように。
— さとぴあ (@satopian) September 11, 2021
トップページに戻ってしまうとどの画面で削除ボタンを押したのかわからなくなる。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/Ah7FNl2OTD
描画時間の記録と表示に対応。
— さとぴあ (@satopian) September 12, 2021
サムネイル作成機能を実装。サムネイルがある時はログファイルに記録して、ログを基準にサムネイルを表示するかどうか決める。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/Q7Ods5riQw
sha256を使ってipアドレスをハッシュ化しそこから8文字取得してIDを表示。
— さとぴあ (@satopian) September 13, 2021
指定日数を過ぎた古いスレッドの投稿フォームを閉じてさらにフォームを偽装して投稿を試みてもエラーする機能も実装。
ID保存分ログを拡張。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/YdP1hB0ocU
年齢による閲覧制限がある画像に、ぼかしをかけて、表示するかどうか確認するボタンを実装。
— さとぴあ (@satopian) September 14, 2021
この機能を使う使わないは、connfig.phpで設定。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/5sewFbaL7Y
カタログモードを実装。古いログファイルの一部がログ変換に失敗しているため一部の画像が表示されていませんが、バグではありません。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/0FTe5PfSFX
— さとぴあ (@satopian) September 15, 2021
削除モード時に「本当に削除しますか?」という確認画面を実装。
— さとぴあ (@satopian) September 16, 2021
編集モードとの画面の切り替え。編集画面そのものはこれから。ChromeとFirefoxでpasswordをusernameで管理するハックに成功usernameのinputをhiddenに。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/NyvKd2VpEU
同一ホストからの連続投稿をチェックしてエラーにする。
— さとぴあ (@satopian) September 18, 2021
時間でチェック。画像投稿の時はさらに長めの時間を指定してエラーにする。
数件分ログをさかのぼって調べて同じコメントの投稿の時はエラーにする。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote #GIF動画 pic.twitter.com/UnTLcVGB9T
ツイートボタンを実装。POTI-boardでは、スレッドの投稿者が作者という前提でbyさとぴあのように入れていましたが、雑談スレッドかもしれない用途はいろいろなので、とりあえず名前は出さないように…。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote #GIF動画 pic.twitter.com/G5P6H7lKzP
— さとぴあ (@satopian) September 20, 2021
#PHP #プログラミング初心者 #お絵かき掲示板 #PetitNote
— さとぴあ (@satopian) September 20, 2021
<!-- 説明文をforeachで -->
<?php if(!empty($descriptions)):?>
<div class="description">
<ul>
<?php foreach($descriptions as $description):?>
<li><?=h($description)?></li>
<?php endforeach;?>
</ul>
</div>
<?php endif;?> pic.twitter.com/KfyyZ3qWZ2
編集しても日付を変えない。管理者には認証マークを付けるまでできました。
— さとぴあ (@satopian) September 23, 2021
ただ、認証マークは、全員分あるといいですよね。
でもそれだとアカウント制に…。
掲示板にそこまで求めない方向…ですかね。
トリップ復活?#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/ZJiNVTaJ3P
←8月25日 9月25日→
— さとぴあ (@satopian) September 24, 2021
8月25日にスレッドの構造を作り、そこからログの仕様を拡張しながら、なんとかここまで。
掲示板の改造と保守だけじゃなくて、1から作れた…という。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/NN2VPi7lA5
PaintBBSの動画ファイルのアップロードに対応しました。
— さとぴあ (@satopian) September 30, 2021
管理者ログインの時のみ有効。ChickenPaintのchiファイルのアップロードにも同時対応。#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/JV4d5RiRe9
複数の掲示板を横断検索、新着表示できるイラスト投稿掲示板サイトを開設しました。https://t.co/SF6nsQB0c4#PHP #プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #レスポンシブデザイン #CSS3 #PetitNote pic.twitter.com/KGrcVrsMnf
— さとぴあ (@satopian) October 4, 2021
日記モードで使っているのにレスでお絵かき返信ができてしまうのは困るという意見がでましたので、レスで画像アップロードとレスお絵かきができないようにする設定項目を作りました。
— さとぴあ (@satopian) October 5, 2021
Petit Note v0.8#PHP
#プログラミング初心者 #プログラミング独学 #お絵かき掲示板 #PetitNote pic.twitter.com/F3Bn3mRLBb
お絵かき掲示板 PHPスクリプト Petit Note
どなたでも無料で使えるお絵かき掲示板のPHPスクリプトです。
ダウンロードはGitHubから
イラスト投稿サイト Petit Note
このお絵かき掲示板PHPスクリプトPetit Noteを使ったを使ったイラスト投稿サイトをオープンしました。
お絵かき投稿のみに限定する事も可能でしたが、お絵かき投稿しかできないサイトを運営していたので、画像アップロードもできるイラスト投稿サイトにしました。
投稿大歓迎ですので、どうぞよろしくお願い致します。
この記事が気に入ったらサポートをしてみませんか?