PaintBBS NEO開発スレ

1 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/26(月) 21:12 del

funige氏が開発しているJS版PaintBBS のいろいろ雑談するスレ
ソースはココ
https://github.com/funige/neo
使うだけならzip拾ってきて展開すれば使える

スレッド作成失敗すると画像がありませんになるけど
アプリの問題ではないので失敗しても泣かない

開発にはNode.jsとかelectronとかとjavascript知識が必要

2 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/26(月) 21:17 del

開発環境はこの辺とか参考にして作成可能
https://ics.media/tutorial-electron
http://qiita.com/YoungjaeKwon/items/9a51dcc45533b2c52955

electronの最新バージョンは1.4.1なのでその辺注意

3 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/26(月) 21:46 del

分かっている不具合・要望

スレ立て失敗してもNeoに画像は残るが再送信できないし、全消し以外の操作ができない
ウインドウサイズを小さくして、スクロールして描き込むと違う位置に描かれる（見ている座標ではなく絶対座標で描画がされる）
マウスポインタの位置と描画される位置がずれる（neo-win32-x64\resources\app\index.js の196行目、205行目あたりを調整すればずらせる）

4 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/27(火) 12:24 del

>No.739233
お絵かきの部分はifutabaの手書きの部分を拾ってきて適当に作ったのですが
次のバージョンでfladditさんのJSPainterをベースに全面的に書き直してますので
プルリクエストは次回以降でお願いします
もちろんフォークして分岐バージョンを作るのは全然okです

5 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/27(火) 19:22 del

初回起動時は書き込めるけど2回目以降が投稿ボタン押してから先に進まない

6 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/27(火) 21:47 del

index.js 106行目で　deactivate()　してるので
157行目 } の次の行作って
activate();
を入れてやればそのまま続きを描いてもいいし、消してもいい

7 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/28(水) 01:55 del

スマホからなら書込めるかテスト

8 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/28(水) 01:55 del

スマホからなら書込めるかテスト

9 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/28(水) 01:56 del

スマホからなら書込めるかテスト

10 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/28(水) 02:00 del

今度は消し方がわからない……

11 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/28(水) 09:14 del

削除は無さげ
普通にスレ立てしただけなので…

12 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/28(水) 22:40 del

新版も一応動きますね
レイヤーとかアンドウ・リドウ、再送信、スクロール、ペン幅、色変更あたり
うちからは相変わらず画像が見つからないけど

13 名前：名無しさん＠お腹いっぱい。 投稿日：2016/09/29(木) 18:00 del

レイヤー使える！
色も変えられるようになってる！
いいぞベイベー！

でもやっぱり画像行方不明になる

14 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/02(日) 04:34 del

ペンサイズはスライダーの方が使いやすかった

15 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/02(日) 20:58 del

αチャンネル付きのレイヤー結合は
let ctx = layers[i].getContext('2d');
let imgd = ctx.getImageData(0, 0, width, height);
assert(imgd.width == width && imgd.height == height);
として得たイメージデータimgdに対し、
imgd.data[]で画素の値に直アクセスできるからそれで合成すれば逝ける
キャンバス2枚の合成をしたいんなら、3枚重ねて一番下は"rgba(255, 255, 255, 255)"で塗っとく
ソースはそのうちgithubにうpる

16 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/02(日) 21:08 del

ちなインターネットで世界中を探し回ったが、
現行HTML5の仕様ではマウスキャプチャーが正しく出来ないっぽいので、
<キャンバス>.addEventListener('touchend', this); // (1)
の他に
document.addEventListener('touchend', this);　// (2)
とでもしといて、(2)に飛んできたtouchendのイベントを強制的にキャンバスの
イベントハンドラに与えて直呼びすでば逝ける
（確実に'touchend'イベントが通知される

17 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/03(月) 00:10 del

開発者さんにありがとうカキコ

18 名前：v0.3アップロードしました 投稿日：2016/10/04(火) 20:19 del

借り物のコードばかりで
作ってる本人がいちばんよく分かってないような気もしますが
だいぶcanvasの使い方理解してきました
……
半角板はうちの環境だと書き込むのかなり大変なので
議論とかしててもあんまり参加できないと思います
ごめんなさい

19 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/05(水) 20:21 del

>>18
オリジナルのPaintBBSは、ペンサイズが8px以下のときは
ペンサイズの丸をポインタ位置に描画しないようにしていますが、
見づらいのでNEOでもそういう風にして欲しいです・・・！
応援してます・・・！(・∀・)

20 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/06(木) 15:15 del

>半角板はうちの環境だと書き込むのかなり大変なので

かといって、4つある双葉絵板でも一番LOG容量の少ないSQLで
文字レスばかりの意見交換されてもなんだかなー
（そういう意味で半角板に専用スレを立てたとだと思ったわけだが）

半角板が使いにくいならLOG1000件のSQLでなく、LOG4000件のお絵かき板とか2000件の落板・落裏にでも行ってもらいたい

21 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/06(木) 18:50 del

意見交換してるのが肝心の絵描きさんなんだが…
うんこちんこのラクガキが投下されてるSQLでログがなんだとかどうでもよくない？

22 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/06(木) 19:12 del

>>21
俺もそう思うけど触れない方が良い

23 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/08(土) 09:07 del

レスし難いから聞き役に徹するよ、てだけで他所でやれとは言っていないでしょ？
ただの要望ならここに書いて、どうしても回答が必要な場合には絵描いてSQLの方に投稿すればいいんでないか？

24 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/09(日) 10:22 del

SQLで細かいこと書いとくと、スレが流れた時全部消えちゃう
だからここたてたわけで
そもそも自分自身半角だろうがSQLだろうが数回書き込むを試さないと書けないから急ぎならあっち
あっちで書いたことをまとめるのをこっちという感じでよろしく

25 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/09(日) 13:19 del

ですよね〜
描いて試すのはお絵かき板、レスコメントはこっちにお願いしたいわ〜

26 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/10(月) 17:57 del

更新でペンタッチがスムーズになって描き味だいぶ良くなった
消しゴムどこ？

27 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/10(月) 21:35 del

初代NEOをいまだに弄ってる…
ペンのアンチエイリアスを切りたいけどどうしたらいいんだろう

28 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/11(火) 21:46 del

v0.4.0 ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!!1
これ、ツール類が少ないだけで、その他の部分は
PaintBBSクローンとしてほぼ完成じゃないのかな・・・？！

個人的にマウスポインタが指の形になってしまうのが気になったので、
neo.css : 9行目
　　cursor: pointer;　→　cursor: auto
これでほぼ文句なしです・・・

29 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/12(水) 03:14 del

開発者さんが書き込めないってことはバージョンアップ通知されないのね

30 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/12(水) 03:34 del

>>27
新しいの使ったほうがいろいろ捗るよ
かなり別物になってる

31 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/13(木) 04:33 del

>個人的にはキャンバスサイズ変える方法がわかればもう完璧。
neo\neo\assets\paitner.js の 122行で
Neo.Painter.prototype._initCanvas = function(div, width, height) {
このwidth,heightで初期化してるっぽくて、これは77行の
Neo.Painter.prototype.build = function(div, width, height)
で呼ばれる
これを遡るとneo\neo\neo.js の 10行あたりの
Neo.config でベタ打ちしてるから今のところ固定サイズっぽい
既存のしいぺだと、applet呼び出す前にキャンバスサイズ決めて呼び出してるけど
index.html にサイズ指定タグ付けて、後から変えられるようにしてもいいような気もする
キャンバスサイズ縮小したらはみ出た部分消えちゃうはずだけど、今のしいぺってなんか変な動作してたような？

32 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/13(木) 20:05 del

だいぶ良くなりましたね〜
こっちの環境では、長時間描いてるると、マスク／逆マスクが
全く効かなくなることがあったので報告。
ふたばの絵板ではもともと機能してなかったけど、Ctrl+Zでアンドゥ
Pでペンツール、Eで消しゴムツールとか、ショートカットキーが効くと
だいぶ描きやすくなってありがたいな〜と思いました

33 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/17(月) 22:30 del

サイズは全ツール共通じゃなくてペンは1px、消しゴムは4pxみたいな感じで使いわけできたらなぁ…って

34 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/18(火) 23:02 del

SQLみてるとJAVAと比べて線が滲んでるように見える気が…
気のせいかもしれないけど

35 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/19(水) 19:43 del

元々のしいぺの仕様がわからないのでしようがないにゃあ状態
win64環境なので、すでにjavaapplet動かず確認できないけど
サイドバー部分って以下の循環でいいんだっけ？

1.ペン種
鉛筆＞水彩＞テキスト
2.トーン
トーン＞ぼかし＞覆い焼＞焼き込み
3.領域選択
四角＞線四角＞楕円＞線楕円
4.コピー
コピー＞レイヤ結合＞角取＞左右反転＞上下反転＞傾け
5.消しペン
消しペン＞消し四角＞全消し
6.手書き
手書き＞直線＞ベジエ曲線
7.マスク
通常＞逆マスク＞加算＞逆加算

36 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/19(水) 19:55 del

みりど氏のindex.htmlに記述があったのでサイドバー部分はこれでよさげ
自己解決

37 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/19(水) 21:30 del

neo0.4 消しペンに対してマスク/逆マスクが効いてないですね

38 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/19(水) 21:38 del

neo0.4 もう一点
塗りつぶしが左下から停止位置までで一度止まってるのとやっぱりマスクが効いてないような
例えばマスク赤指定してから青で適当に描いたとこに、上から緑で塗れちゃう

39 名前：Ｑ｀ワ´Ｑ 投稿日：2016/10/22(土) 23:06 del

PaintBBSのショートカットキーの仕様は、
pbbs222_8に同梱されているoekaki.htmlに記述がある。
http://
hp.vector.co.jp/authors/VA016309/paintbbs/file/pbbs222_8.zip

40 名前：Ｑ｀ワ´Ｑ 投稿日：2016/10/22(土) 23:07 del

PaintBBSのショートカットキーの仕様は、
pbbs222_8に同梱されているoekaki.htmlに記述がある。

hp.vector.co.jp/authors/VA016309/paintbbs/file/pbbs222_8.zip

41 名前：Ｑ｀ワ´Ｑ 投稿日：2016/10/22(土) 23:08 del

連投になってもうた

42 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/23(日) 23:35 del

バージョンｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
v0.4.5 ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

43 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/24(月) 16:59 del

noe0.4.5
>>37 のバグ修正済みなの確認しました
>>38 の塗りつぶし自体は直ってますが、マスク/逆マスクは効いてないですね
本当はコーディング手伝えるといいんだけど…

44 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/24(月) 21:46 del

スポイト使った時に、ペン先の色は変わるけど選択中パレットの色は変わらないのは元々こういう仕様だっけ？
消しペンなど3種、レイヤ結合など3種の動作確認問題なさそうです

45 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/24(月) 22:03 del

縦横指定したときにどちらも50-500で制限されてる？
neoのコードで制限してないように見えるからふたばの仕様っぽいかな

46 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/25(火) 15:08 del

ふたばのapplet呼び出しスクリプト使わずに
以前のneoみたいに
画像送りつけてからスレ立てスクリプト呼べば自分でキャンバスサイズ決めることができるけど、
ふたば側に投稿サイズ上限があるから
1000x1000ぐらいまで描けるようにするならneo側で管理したほうがよさそう

47 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/26(水) 01:08 del

SQLに縦3万px投稿しようとした人いるけど
ふたばに迷惑をかけるんじゃないぞ
NEO自体がハッキング行為みたいなもんなんだし
下手したらNEO作者がふたば管理人に訴えられるぞ

48 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/26(水) 11:34 del

>NEO自体がハッキング行為みたいなもの
…だよな、やっぱ
しばらく前にスマホから絵板アプリ抜きでgifファイル投稿した人いたけど、
外部からの制御って意味じゃ似たような行為
そのへんを運営の側からどう判断されるかって問題はないのかね

49 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/26(水) 15:45 del

いや2000kbまで手t書いてあるんだからそれ以下なら投稿できなきゃダメだろ
できるかどうか試してみたのをハッキングとか頭おかいしいんじゃないの？

50 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/26(水) 17:08 del

他の板と違って任意の画像をうp出来ない＆字スレ不可の仕様の板に
無理やり押し込んでいるわけだが

51 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/26(水) 19:50 del

全然無理やりじゃないし

52 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/26(水) 22:11 del

みりどの方とかバグでとんでもないことにならないよう祈るばかり…
ループで画像送り続けちゃうとかねｗ

53 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/27(木) 18:29 del

いずれはNEOをベースにして、Javaペイントチャットサーバーと同等の
Node.js版NEOチャットが開発されれいくといいなあ・・・

54 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/28(金) 00:22 del

サーバー側のセッション管理手段を提供すれば
現行お絵かき掲示板と同等以上の連投阻止は実現できる
例えば（描画開始日時＋サーバー側のみ知る秘密キー）をハッシュ化し、
投稿に際してはハッシュとセットにすることを義務付けるとか、
さらにCHAPTAとか追加して投稿者を人間に限定できたら最強

みたいな>52

55 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/30(日) 19:23 del

mirido版 PNG0.04 バグ出し
0.03からあったけど、マスク・逆マスクのとき黒のみ描画済み線の幅が変わる（これが0.03本文での厳密なxorではないってやつかも）
（再現性 みづらいので適当に線幅変えて線引いて、マスク＞逆マスクとトグルすると黒だけ引いた線の太さが変わる。ベージュや緑などでは起きない）
やり直し・元に戻すが効かないのは0.03からだっけ？
SHIFT・CTRLとかのキー取得状態がマウス右クリックと同時だとおかしい様子(ずっとスポイトをCTRL+右クリックで操作してたので今回も治ってないように見えた）
CTRL左クリックでスポイトしてマスクのところクリック、だとその後も正常に動作するけど
CTRL右クリックでスポイトするとCTRL押しっぱなしになってる。マスクはトグルできなくなり、左クリックのすべてCTRLが押されてしまう
レイヤーはバッチリ動いてる様子

56 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/30(日) 19:34 del

上記右クリック＋SHIFTもSHIFT押しっぱなしになってるの確認
道理で右クリックでスポイト使うとおかしくなる…
適当に左クリック同時押しするとキー押下状態が上書きされて解除される
（再現 右クリック＋CTRLでスポイト使って、そのまま左クリックで描画すると
CTRL押しっぱなしなのでスポイトが実行される
左クリック＋CTRLでスポイト使うか、左クリック＋SHIFTで直線ツール出すと、
押しっぱなし状態が上書きされて普通に描けるようになる）

57 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/30(日) 21:05 del

これ >>55 electronから動かすと再現しない…
javascriptの実装側の問題？
ちなみにfirefoxとchromeでは再現した

58 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/30(日) 22:00 del

>>55 じゃない >>56 だ、CTRL+右クリックでCTRL押しっぱなしになるやつ

59 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/30(日) 23:53 del

めいど ＞∀＜ ﾉ ！

>消しペンのカーソルが四角
遊び心ですじゃ(ｷﾘ
（本当は素で四角だと思い込んで作った…orz

>やり直し・元に戻すが効かないのは0.03からだっけ？
やり直し・元に戻すはこれから入れまする、
これと画面の拡大縮小が描画機能実装の最後の山場になるかと、
いや漏れの脳内では完成しているんですが；

>マスク・逆マスクのとき黒のみ描画済み線の幅が変わる
画面に引かれている黒色線の幅がマスク→逆マスク切替で一斉に変わる現象だとすると、報告の現象は再現できておりません…
一方、「厳密なxorではないってやつかも」と仰せの現象は別途確認されておりまして、
マスク・逆マスクとは無関係に、線幅2以上にする→黒色選択→キャンバスの白色領域をクリック→クリック解除、
で黒丸のサイズが変化するように見えるという現象で、これは円形カーソル絡み（似非xorその他）なので一応対策しました。
（本当はカーソルを2色以上で構成したいがそこまでは省略

60 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/30(日) 23:55 del

（続き）
>CTRL押しっぱなしなのでスポイトが実行される
これは再現しました@FireFox。
現象としては、特殊キー押下＋右クリックの後、特殊キーを離してもイベントリスナに'keyup'イベントが上がってこない…！
コンテキストメニュー絡みかと思い、コンテキストメニューを無効にしても変わらず。
（正確には、単なる右クリックに対してはコンテキストメニューを無効化できたが、
　「特殊キー+右クリック」だとどうしてもコンテキストメニューが出てくる。このケースの無効化方法は不明。
コンテキストメニューのせいでないとしたら、
document.addEventListener('keyup', this);
式のイベントリスナ登録ではブラウザの仕様 or バグにひっかかるのか？
ようわからんが、とりあえず右クリック固有の問題、ということでアプリ側で場合分けして暫定対策すた、
（詳細はdevelopブランチのログ参照

61 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/31(月) 13:29 del

>>59
お疲れ様です

>画面に引かれている黒色線の幅がマスク→逆マスク切替で一斉に変わる現象
以下再現
1px dotを打つ、ブラウザのサイズ拡大で拡大して2dotぐらいに見えるようにする
マスクだと3dotぐらい、逆マスクだと1dotに見える

画面拡大してると、左上のサンプル黒四角が膨らんだり縮んだりして見えると思います
通常だともやもやしてる部分（スクリプトで塗られてグラデーションかかったdot）が
マスクだと黒、逆マスクだと白に変わってるような（他の色では起きない）
firefox、electronどちらでも再現します
funige版neoでは起きないのでマスクのかけ方なのかも？

62 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/31(月) 18:45 del

>特殊キーを離してもイベントリスナに'keyup'イベントが上がってこない…！
そりゃバグる…
と思ったけどこれもfunige版だと
右クリックはスポイト固定で、CTRL（またはALT）＋左クリックはスポイト
右クリック＋特殊キー実行後も特殊キー押下が残らず、そのまま左クリックで描画できるという
この辺はfuige版は右クリック時は特殊キー無視することで回避してるのかもしれない

63 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/31(月) 21:43 del

そして、暫定対策ブランチに更新したら再現しないので回避できてる様子
四角塗りと四角線の正常動作確認

64 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/31(月) 22:42 del

>>61
レス�dクス、
ようやく再現できて正体がつきとめれて原因がわかったなう

■ 原因
結論から言うと、
この現象を起こしているのはブラウザのレンダラーの仕業で、
表示の際にやっているにすぎず、キャンバス上の画素データは変化していない。
（画面の下に出ているレイヤー合成画像では膨張・縮小が起きないことから裏付けられる。

また、この現象は黒色だから起きるのではなくて、マスク色だったら何色でも起きる
例： 赤色パレットを選択した状態でマスクツールをCTRL+クリックする
　→マスク色が赤色になる。ここで>>61の再現手順をやると、赤色が膨らんだり縮んだりする

なぜNext Generationだけで起きるのかというのはマスク/逆マスクの実現に、
Next Generationが複数レイヤーを使うから。

現象が出るブラウザのレンダラーは、重なったレイヤーを
ピクセル等倍以外の拡大率でレンダリングするとき、レイヤー個別にアンチエリアスをかけたものを
ユーザーから見て奥から順に重ねて行ってるっぽい（そう考えると全て辻褄が合う

■ 解決策
そのうちNext Generationにズーム機能を入れるので、
そうしたらブラウザの拡大機能に頼る必要は無くなり、
現象を目にすることはなくなるのでそれをもって解決としたい
（この現象はブラウザがピクセル等倍表示である限り現れない。

65 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/31(月) 22:51 del

>>62
document.addEventListener()によるイベントリスナの登録方法には
呼んで欲しい関数を直接登録する方法と、thisを登録する方法の2通りがあって、
NEOは多分前者、Next Generationは専ら後者を使っているので(>>60)、
それもなんか影響しているかも…

66 名前：名無しさん＠お腹いっぱい。 投稿日：2016/10/31(月) 23:21 del

>>64
なるほどなるほどー面白いなぁ
そして、デバッガ使えるようでないと突っ込んだ調査できないんだなというのが分かって来た…

67 名前：sage 投稿日：2016/11/03(木) 05:39 del

>>66
デバッガならIE、FireFox、Chromeにはもともと付いているらしく、
ブラウザのユーザーなら誰でもデバッガが使えるようになっているっぽい
IEならF12、FireFoxとChromeはSHIFT+CTRL+Iでデバッガの画面が開く

デバッガといっても、一番活躍するのは「コンソール」画面でprintデバッグだったりする…
（2番目はブレークポイントで止めて、スタックトレースを見る。3番目は無い…！

凝った統合環境は全く不要。Javascript初心者だが1ヶ月触ってAtomエディタとブラウザで十分逝ける、という結論に達した

68 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/03(木) 05:44 del

つかいつもふたばちゃんを覗くのだけに使っていたブラウザに
こんな結構なプログラミングツールがタダで備え付けだったとは
全くびっくりだ

69 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/03(木) 17:03 del

>>67
adblock方面使うならタグ要素調べるのは必要不可欠なので
要素を調査からデバッガ開けて中見るのはやってるけど、
ステップ実行あたりの操作しらないので、イベント起こすのができなくてね…

70 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/03(木) 17:25 del

funige版0.5
>>38 >>43 の消しペンにマスク・逆マスクが効いてるの確認
修正完了ですね、お疲れ様です

71 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/03(木) 22:47 del

飽きてきちゃったかー…ｗ

72 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/04(金) 19:43 del

>>71 無能だからって無意味に僻むことはない
君みたいなやつでも何かの役に立つことはある

73 名前：71 投稿日：2016/11/05(土) 08:56 del

>>72
ど、どうしたの急に…？
俺なんかマズイこと言ったか…？
作者さんに頑張って欲しいけど開発続けてると飽きてくるよねーと同調したつもりだったんだが

74 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/05(土) 14:06 del

同調してるつもりだったのかーw

75 名前：funige 投稿日：2016/11/05(土) 20:20 del

すみません
俺が「飽きた」とか泣き言書くから誤解を招くのだな

飽きたというか忙しくなっちゃったので
本当はアニメーションのpchフォーマットを解析して再生できるようにしたかったんだけど
ふたばで使ってない機能は無視することにして早く終わらせたいと思ってます

76 名前：71 投稿日：2016/11/06(日) 05:52 del

>>75
いやいやいや Σ(゜゜;
オレが言葉足らずなだけです、色んなところで頻繁に誤解されるし

話変わって最近知ったんですが
各種ブラウザってFLASH対応打ち切る方向らしいですね
虹裏とかの手書き機能ってFLASHらしいのであちらも将来危ぶまれるのか…
お絵かき掲示板でも一時JAVAapの代わりにFLASHをなんて話もありましたがNEOはHTML5でヨカッタ

77 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/06(日) 19:12 del

mirido版0.05 動作確認
・初期画面まで元に戻らない・元に戻してからやり直しても最後の描画まで戻らないことがある
（初期画面で1pxの線を引く、ペン幅変えてもう一本引く、元に戻す数回押しても初期画面まで戻らない。先にペン幅変えると再現しない）
・右クリック+特殊キーがちゃんと動く（CTRL,SHFTのみ）

ブラウザ拡大はelectronで確認したところ、
・下画面へのコピーは動いてる（CTRL＋左右クリックはスポイトのみ効かない）
・SHIFT＋左右クリックはどちらも動く
・やり直しがきかなくなって、元に戻す動作になることがある(再現困難）

78 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/07(月) 21:39 del

mirido版0.05
塗りつぶし変
山描いて、下塗りつぶそうとしたらちゃんと塗りつぶせない
適当に描いてサンプル上げてみる

79 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/07(月) 21:42 del

そもそも投稿できなかった…
要素を調査で submit(document.getElementByID('taget').value)；から進まない

80 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/12(土) 23:42 del

今週はｽｹﾞｰ忙しかった（←言い訳

>>77
動作確認ｽﾏﾝｽ;
Undo/Redo機能の履歴データの管理アルゴリズムがまずかったので指摘の現象は直しましたが、
他にもいろいろ問題があったので直し中、

これメモリ消費を気にしないやり方（描画ストローク毎にキャンバスの全レイヤー内容と可視属性）を
保存するやり方だったら単純なのだけど、アニメーションファイル対応とかも見越したときに、
(描画キャンバスのスナップショット(キーフレーム)＋引き続く描画ストローク(差分))という方式したく、
そうしたらハマった；
描画ストロークによる差分というのは思ったより扱いが難しいデータで、ストロークと描画効果だけでなくて
そのときのレイヤーの可視状態とマスクツールの状態（マスク/逆マスク and マスク色）もセットで復元しないと
正しい復元にならないというﾁｮｰ難物だった；；
しかしもうすぐ終わる…あと30分ぐらいで完成できるのでわないか（希望的観測

>>79
投稿できない件は、ひょっとして、もしかしたらだけど、html5_experimentの"package.json"で
neo/html5_experimentの"package.json"を上書きしてたりしませんか、

81 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/13(日) 01:05 del

とりあえず完全版のつもりのUndo/Redo機能のやつをdevelopブランチにうpすた、
ユーザーはレイヤー表示/非表示、マスクツール切替、マスク色変更の
1描画ストローク毎の完璧な「元に戻す」と「やり直し」を目の当たりにするであろう、
いや知らんけど…

今週は多分ここまででV0.05 alphaをリリースして終わると思う
もう寝るﾉｼ

82 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/21(月) 01:27 del

Next Generationの方ですが、Undo/Redo搭載バージョンのV0.051 alphaをリリースしますた！
https://github.com/mirido/html5_experiment
https://github.com/mirido/neo
Undo/Redoが（多分）完動バージョン
どうだUndoの動作が速くなつただらう、

またそれとは別に、コピーツールを追加したやつをdevelopブランチにうpしますた！！
https://github.com/mirido/html5_experiment/tree/develop

このPNG版コピーツールは、
(1) 矩形範囲選択でコピー後、ポインティングデバイスのドラッグでペースト位置を調整し、
(2) 離したらペースト、
というPaintBBSと同じ操作仕様を基本としつつも、
漏れによる、漏れの満足のための下記仕様追加変更が行われております。
　1. コピー元の透明画素はペースト時にも透明画素として扱う。
　2.（連続ペースト機能） SHIFTキー押下しつつ(2)の操作を行った場合は、
　　 引き続くドラックでさらにペーストできる。回数無制限。
　3.（ペーストキャンセル機能）SHIFT+ALTキーを押下しつつ(2)の操作を行った場合は
　　ペーストをキャンセルし、引き続くドラッグで再トライできる。
　4.（こだわりのGUI）キビキビ動く半透明でｶｺｲｲガイド表示…！

遊んでみてね！

なおdevelopブランチ版の方のは、
Chrome or Electronにてブラウザによる拡大表示時の諸問題も対策済みでつ。

83 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/28(月) 01:02 del

スレ立てたり動作確認とかしてたけども、ここしばらく立て込んでて追えてないのです…

84 名前：名無しさん＠お腹いっぱい。 投稿日：2016/11/28(月) 22:04 del

どんまいｗｗｗｗｗｗｗｗｗｗｗ

85 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/02(金) 21:32 del

funige版0.6ですが
直線、トーン、傾け、楕円とかよさそうです
しんどいのは…まぁぼちぼちやりましょう

初期画面のデフォルト色はA255のみでBGの白が透過してるのだと思うけど、
スポイトすると白に見えても、この色（初期画面色）でマスクかけられないのは
そういうものなのかな…

86 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/02(金) 21:54 del

つづけてmirido版 0.05a
Undo/Redo動いてるの確認
Redoしたときにレイヤー合成が動作一つ遅れて実行されてるっぽいのはこれは仕様通りでいいの？
例えば、線3本引いて、3回Undo
Redo 1回目は一本目が上のみ、Redo 2回目は二本目の線が絵に引かれて、下画面には一本目の線まで合成
というふうに動作してる

>>85 の初期画面色マスクは同じ動作するからこれ（初期画面スポイトしたときマスク指定色が白で表示される）
はそういうものなのか…
自分でも何が問題かよくわかってない感じがする…

スポイトでとれるのは全レイヤ重ねた結果の色だから、初期画面色スポイトすると白が取れる
これでマスクすると白でマスク、塗れば白
初期画面自体は色がないからマスクがかからない（透過色にはマスクかけられない）から問題ない…そうか問題ないのか
字に書いてようやく動作が理解できた…気がする…

87 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/02(金) 22:21 del

>>77 の塗りつぶしも正常に動いてる
さらに mirido版 0.06
普段絵を描いてないのでよくわからなかったけども、
0.05aではA100とかで上のレイヤに描いてもα値が無視されて上書きされてるので
αブレンドってこういうことかと納得
ここのしぃぺ自体が古いからその辺が実装されてなかったんじゃないかな…

そして変なの発見
左上の塗りつぶし丸3個と、中央の同心円、黒四角が消せない
レイヤ切り替えても、ペンでも、消しゴムでも、塗りつぶして消しゴムかけても元に戻る…

88 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/02(金) 22:48 del

全体に消しゴムかけた状態で投稿しようとすると動作しない
今回 gitの使い方忘れたので、html_experimentのフォルダごと消して
git pull、git checkout developしてるので他のソース混入はしてないです
firefox 64bit リリース版50.0もdeveloper 52.0a2も投稿できず

そして発見、消しゴムのペン幅を変えて、
消しゴム以外のツール（パレット以外、鉛筆・四角など）を触り、消しゴムに戻るとペン先が初期値に戻される
パレット上では変わってないのでパレットを触るなどすると見た目通りの幅に戻る
この時、運がいいと塗りつぶし丸とかのサンプルグラフィックが消せることがある（再現しづらい）

さらに、レイヤ0/1に描いた線を、レイヤ1/0の消しゴム・消し四角で消せる
どっちに描いても別レイヤから消せるのでレイヤ番号見失ってるような感じ
これがサンプル画像消せない原因かも

89 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/02(金) 22:56 del

そういうわけで、どっちのレイヤーからも消せるので
レイヤー間でコピーできてるかは確認できませんのだ

ついでにEdgeで動作するの確認して状態同じだったけど
RGB一つでも動かすとでサンプルが消せるようになって
レイヤの切り替えできる…ある意味興味深い…
その時はレイヤを区別して消せる（firefoxでも確認）

90 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/02(金) 23:02 del

コピーの使い方間違ってた
消しペンで消す＞消せないのが残った状態 ＞RGB触る ＞全部消せる
ここまででレイヤーがまともになったとして全画面透明なので
レイヤー０に何か描く ＞コピー で移動できる
レイヤー間コピーだと思いこんでたorz
コピーの正常動作確認…

91 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/03(土) 01:47 del

もちついて；；；；
RGBをちょこっと動かすまで全般的に機能不全なのはそのうち直しまする
今のところはRGBをちょこっと動かしてから使ってﾎｽｲ、ｽﾏﾝorz

RGBをちょこっと動かしてからなら次の2点以外はそこそこ逝けてるんじゃないかな…
・α値（A）のスライダを0にすると、他のツールに切り替えるまでの間描画の線が繋がる
・半透明描画後にUndoしてRedoしたとしばらく反応が返ってこないことがある

■ 投稿できない件について
package.jsonの手当てをしない現行バッチファイルは当てにしないでくだされ
説明不足で申し訳ﾅｽorz

↓↓↓ここを開くと表示されるreadmeの「使い方」にしたがってみてみてちょんまげ…
https://github.com/mirido/neo/tree/master/html5_experiment

92 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/03(土) 18:33 del

まず投稿のほうから試すと
>ここを開くと表示されるreadmeの「使い方」にしたがってみてみてちょんまげ…
一旦、node_modules を消して（rm -r）
npm install request --save
して、firefoxで開いてダメなのですよ

A値関連もう一件
パレットで色を選ぶ ＞ A値0 ＞前に選択した色になる
最初だとデフォルト黒なので分かりにくいけど、何度か色変えてA0にするとはっきりする
パレット変更（RGBもA値変更も）A0の時だけ効いてない？
この前に線を引いていればその終点から線がつながるのも再現
そして、線じゃなく点だと最後にA0にした時以降の点が直線でつながりながら、点を打つたびに上塗りされる
パレット変えるたびに一度A0以外にしてからA0にすれば大丈夫
ただしA0にすると何度でも再現する

最後にA0にして以降、点だと上塗りされるのは
色変える（いったんA0、A255以外にして何か描く） ＞ A0にする ＞ いくつか点をうつ（全部直線でつながるけど）
で何イッテルのかわかると思う、線になると上塗り動作は切れてしまう
これグラデーションに使えそう

半透明ごちゃごちゃ描くとUndo自体が重いのは、処理が重そうな感じ…

93 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/03(土) 22:42 del

>>92
A0にできてしまうというのがそもそも問題でなので、そこはそれ。
A0にすると意味的には「透明」になってしまい描画ツールとしては無意味だし、
実装上も半透明前提のロジックに「透明」データを突っ込むことになるので問題が生じる
で、PaintBBSでもA1が下限だというオチ（なので直そうと思えばすぐ直るが、今週はちょっち時間が無かった；

■ 投稿できない件について(2)
> npm install request --save
> して、firefoxで開いてダメなのですよ

というのは、下記起動方法をやっていないのでは…
https://github.com/mirido/neo/tree/master/html5_experiment
>起動
>
> 当サブフォルダ"html5_experiment"でコマンドウィンドウを開いて
> $ electron .
> とする。

electron .[Enter]とする！

94 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/04(日) 10:04 del

で、>>91の問題を直したやつをdevelopブランチに上げますた、
A値は1を下限としますた
Undoが遅いことがある件は、実際遅かったので直しますた、
詳細は長くなるのでご興味のある向きはgitでログとかコードの変更箇所の差分をﾄﾞｿﾞｰ

※ GUIでgitを操るツールとしてはTortoise Gitがﾏｼﾞお勧め

95 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/04(日) 11:27 del

>electron .[Enter]とする！
それ、windowがないってエラーがでるんすよ

ReferenceError: window is not defined
at Object.<anonymous> (H:\user\cygwin64\home\tkuroda\mirido\html5_experiment\index.js:33:1)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at loadApplicationPackage (C:\Users\tkuroda\AppData\Roaming\npm\node_modules\electron\dist\resources\default_app.asar\main.js:288:12)
at Object.<anonymous> (C:\Users\tkuroda\AppData\Roaming\npm\node_modules\electron\dist\resources\default_app.asar\main.js:330:5)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)

96 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/04(日) 12:56 del

ってうちの環境の問題じゃん…
なんでfunige版は動くからjs周辺が入れ方変なのか

97 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/04(日) 14:33 del

mirido版 ってひょっとしてneo派生のほうの話だったのか
ずっとhtml5_experimentのほうで評価してた…
neo/html5_experiment でelectron . すれば動くし投稿もできるっ…

98 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/07(水) 02:18 del

neo-win32-x64　exe050
RGBのRが動かせない
win7

99 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/08(木) 13:35 del

neoもver0.7まで来たか
頑張ってますな

100 名前：名無しさん＠お腹いっぱい。 投稿日：2016/12/09(金) 18:24 del

みりど版はどこで拾えるん？置き場どこー？

名前： E-mail（省略可）：

read.php ver1.00 modify(2005/11/10)