AA作成用Webアプリ「Ahoge Editor」 開発スレ
1
名前:North Tail ◆kvYUSK2.S2[] 投稿日:2025/07/18(Fri) 18:08:34 ID:43600dfe
/: : : : `ヽ
/ :/,ニ、Y: : : Y_,, -- 、,
{: :{ (: : : :},、r''": : : : : : : : : : : "'' 、
弋:\>/: :,、r'": : : : : : : : : : : : : : ヽ
>/: :/: : : : : : : : : : : : : : : : : : : :\
, -''" /: : : /:/: :/: : : : : : /: : : : : :i: : : : : : ヽ
/ //\: :/:/: :/: :/: : : : ,/: : : : : : :| : : : ヘ: : ヘ はじめまして。
/ レ {:: : :`| i: :/ : /:i_/'´|: :i: : : : : :| : : : : |: : :| ブラウザ上でトレースAAを作成できるWebアプリ「AHoge Editor」を作ってます。
/ ノ|ヽ: : | |,イ: :/'"| :/ ̄'| :i|: : : : :∧--、_:|: : :| ttps://ahoge-editor.com
./ , -イ | \| ハ:| |/ _|:/|: : : : :| i : : : |: : :|
|/ |/: : :| : : \z====| ヘ!: : :/- ヘ : : i: : :! まだまだ開発途中ですが、
/: : :i^|: : : : | {::{:::}:::} ノ:/示气\:|: : | 感想や要望、バグ情報などをいただけると嬉しいです。
/: : :||: : : : |弋_ノ / {:{::}::} / : : : |
i: |: ::i人|: : : : | , , , ゝ-' ∥ : : : | ~現状でできること~
|: |: ::|: ::|: : : : | ' , , , ∥: : : : | ・1ドットずらす、矩形選択・挿入などのAA編集操作
iヘ|,: :| : |: : : : ト、 o /: : : : : :| ・画像化
V乂|: : : : |\ ' 、,_ イ| |: : : :|:|リ ・編集履歴の動画化(タイムラプス機能)
|: : : :|| "''-、√ ̄,.`'iノj人|、i: : |j!
_xヘ|ヘ: :|| /|__`'i〈 |-、 |: /
/ `.乂| \/ ミ'' 、`i 入_| \j/
f,x、_ \\〉⌒l | 〉
/ "''‐-、_ \`Y^l | / ヽ
| ヘ "''‐-、_ `' 、|// ∨ |
! ∨ "''‐-ヘ V. |',
ゝ ∨ O | | | |
/ 、 |/ | | /|
( \ | | | |
2
名前:North Tail ◆kvYUSK2.S2[] 投稿日:2025/07/18(Fri) 18:13:35 ID:43600dfe
弋_/::::::::::::::::::::::::::::::::::::::::::::::::::::::::::"''-、
__/:::::::::::::/:/:::::::::::::/::::::::/:::::::::::::::::::::::\
/,/\::::::/::::/:::::::::::::::::/::::::::/:::::::::::::::|::::::::::::::i
/ , |:::::::\|::::::|::::::::::::::::/:::::::/|:::::::::::::::::|:::::::::|::::|
. / / |:::::::::::::|::::::|:::|::::::/|:::::/ |::i:::::::::::/|:::::::::|::::|
/ レ |\:::\|::::::Ⅵ:::::|ー|''"| ̄|::|::::::::/`|‐--:|::::|
| __,xイ|::::::\:::|::::::::::乂;{ \{ - リ|:::::/ __|、:::::::|::::|
|/ |::::::::/^i::::::::::::| 行示弌 j/ 示弍\1:::| タイムラプス機能はこんな感じです。
|/:::::::{ |::::::::::::| |。f::::i。| |f:::i。|\|:::| ttps://x.com/i/status/1945988502182883563
/::::::::::乂i::::::::::::| 乂-;ク 辷;ク/::::::::!
. /::::::::::::::::::|::::::::::::| , , , , , , |:::::::::| この機能はAA作成技術を誰かに伝えたりするときに有用かなと思って作ってみました。
|:::::::::::::::::::|:::::::::::::| u ' /::::::::::| 現状ではまだ動作が重いので、あまり大きなAA作成には向かないかもしれません。
|:::|i:::::::::::::|::::::::::::::ト、_ cっ ,、イ::::::::::::!
乂||::::|、::::|::::|:::::::::| "''-/\≦::::/ |:::::::::/
>┴<Vヘ::::/リ\ f'´ ̄ユ、/|/! j/j/
/ ̄ ̄\`∨:: : : :\|  ̄] |^|\
| ⌒\ \\: : : : :| 〈ノ: |/| ∧
| \ ヘ,| \: : :| /: /V |
| \ \:| \/ // | |
∧ \ | / / | \|
3
名前:North Tail ◆kvYUSK2.S2[] 投稿日:2025/07/18(Fri) 18:14:40 ID:43600dfe
__///:::::/::::::/::::::::::ヘ:::::::::::::::::\
./ /::/:::/::::::::/::::::::|:::::::::::::::|::::::::::::::::::::ヘ
/ /\/:::/:::::::::i:::::::::::|:::|:::::::::::|:::::::::::::::::::::ム
/ .i\|:::::|::::/::::|:::1/|:::|:::::::::::|ヘ::::::::::::ヘ::::::!
/ ,x|\|:::::|:/:::1ム斗ー|:::|i::::::::::|斗-、_::::::|:::::| AA作成もプログラミングもまだまだ駆け出しなので……。
ムイ |\|:::::|:|::::ハ|乂{ __ヘ:|ヘ|:::::/ マ ト、::::|:::::| ほかに似たようなことをされている方の情報や、
|::::::|:::::|ハ::|x====zリ |:::/z=\z\|:::::| AA作成にはこういうテクニックがあるというような情報も
|::::::|::::::::::\{::f::::i。} j/ {:f:::i。} `/:::::::| 教えていただけると助かります。
|/:f'|:::::::::::::|弋_-ク 弋_-ク |:::::::::|
/::::ヘ|:::::::::::::| , , , , , , , i:::::::::| 更新速度はあまり速くはできないかもしれませんが、
|:::::::::|:::::::::::::| /::::::::::| よろしくお願いします。
|:::::::::|::|::::::::::|、 ` ' , イ::::::::::::|
|/|:::::|::|::::::::::|:::> 、__ , 、 <:::|:::::::::::::!
|! |::::|Ⅵ:::::::::|::/ \_ _/|:::::::::|::::::::::::i
乂{ ∨::/リ/ /^i /\ ∨j/リ|イ:::::/
,、-‐'"}ノ ヘ /\ ∨ /| /"'--|ノj/
4
名前:普通のやる夫さん[] 投稿日:2025/07/18(Fri) 18:15:38 ID:45085e12
使い方はどうすれば?
5
名前:North Tail ◆kvYUSK2.S2[] 投稿日:2025/07/18(Fri) 18:19:31 ID:43600dfe
/:::::::::::::::/:::::::::::::::::::::::::::::::::::::::::::\:::::::::::::/Y\
/:/::::::/::::::/:::/:::::::::ヘ::::::::::::::::ヘ::::::::::::::∨:::::/ /| \
/:/::::::/:::::/|::::|:::::::::::::i:::::::::::::::::::|::::::::::::::::i/:::/:::|\ i
i:::|::::__|__:/斗-t:::::::::::::ト、:::::::::::::::|::::::::::::::::|::::::::::/:| |
|:::|:::::::|::/ |::::|:::::|::::::ハ::"'ー--i::::::::::::::::|/:::/:::|、 |
|/|:::::∧|、,_-V:|\|::::/ー\\:::::|::::::::::::::::|::://| \ |
|ヘ::|~下"''示{ |::/ z≡=x\|::::::::::::::::|、:イ::::::| ヽ| >>4 あっ、そうですよね。すみません……。うっかりしていました。
|∧|:i. {::{::}。} j/ |::r:::、:::i\i::::::::::::::::| ):::|::::::| 一応 (´д`)Edit に寄せた作りにしたつもりですが、
|::::::::! 乂__ソ !::ヽ:'oj |::::::::::::::::|/::::|::::::| まったく何もないと困りますよね。
|:::::::::i ゝ- ' |::::::::::::::::|:::::::::::::ヘ また後でしっかりしたマニュアルも参照できるようにしようと思いますが、
|:::::::∧' ' ' ' , , , , |::::::::::::::::|::::::::::::::::| とりあえず軽く使える操作方法を書いてみます。
|::::::::::人 r‐-‐ 、 u |::::::::::::::::|::::::::::::::::|
|::ト,:::::::::|≧、, `-ー-' _,,、/:::::::::::::/|:::::|::::|::::|
ヘ| |::::;イ| r-ー>‐--ァt‐''" /イ::::::/}//|::/|::/|:/
∨ リ |: : : : : : : :/ } / |:::/ / "-/、|/ /
_r-/⌒\ _/ ヘ: ::/^ヽ,、_| /|/: : : : : : : : ̄\
_{ | しへ | /| ∧/ /'/ /^>‐,/: : : : : : : : : :,、r‐―〈
| しし' 〈⌒\ / | `'´ しし'/ 人\: : : : : : : / }
し'ヘ 入 | / |〈⌒\i `'´ |: : : : :/ / |
\ ( \ ( | ⌒\ \ | f´ ̄ ̄ /
6
名前:普通のやる夫さん[] 投稿日:2025/07/18(Fri) 18:21:27 ID:45085e12
ありがとうございます
7
名前:North Tail ◆kvYUSK2.S2[] 投稿日:2025/07/18(Fri) 18:34:29 ID:43600dfe
~AHoge Editor 使用例~
●トレース元画像の読み込み
(1) 上部メニュー「元画像」 → 「開く」
(2) Web上の画像ならURLをコピペして「開く」、
ローカルの画像なら「参照(ローカル)」から選択する
(3) 位置、角度などを調整する
(テキストボックスに直接入力するとレンジバーの範囲外の数値も使えます)
●AA作成
〇右側の文字パレットについて
・上部メニュー「設定」→「aalist読み込み」で (´д`)Edit のaalist を読み込むことができます。
〇矩形選択などについて
・上部メニュー「編集」の機能を利用できます。
・「矩形選択」をオンにすると「Ctrl + c」→「Ctrl + v」で矩形のコピペができます。
・「挿入/上書き」でペースト時の動作を変更できます。
〇そのほかにも上部メニュー「設定」→「(歯車マーク)設定」でエディタの見た目を変更できます。
○mlt ファイル操作
・左側列の「ファイル」 がmltにおけるmltファイル、「AA」がファイル内の個別のAAを表します。
・ドラッグで並び替え、ダブルクリックで名前の変更ができます。
●画像出力
・上部メニュー「画像出力」→「画像化」→「ダウンロード」でAAをPNG画像としてダウンロードできます。
●動画について
〇動画モード
・上部メニュー「動画出力」→「動画モード」をオンにすると、
編集エリアの文字入力ができない状態になります。
・メニュー内レンジバーを動かすと、編集履歴をさかのぼることができます。
・「動画化」→「ダウンロード」でGIF動画としてダウンロードできます。
・AAのサイズ、編集数によっては重くなることもあります。念のため「aaa形式」で保存してから行ってください。
●ファイルの保存・読み込み
・上部メニュー「ファイル」からおこなえます。
・「aaa形式」で保存しておくと、編集履歴も一緒に保存できます。
8
名前:North Tail ◆kvYUSK2.S2[] 投稿日:2025/07/18(Fri) 18:39:49 ID:43600dfe
~ブラウザに保持される情報~
・最後に編集していたAA
・aalist (aalist読み込み時)
・トレース元画像の倍率、位置等の設定情報
(シークレットモードなどの場合には保持されません)
9
名前:North Tail ◆kvYUSK2.S2[] 投稿日:2025/07/18(Fri) 18:43:49 ID:43600dfe
__///:::::/::::::/::::::::::ヘ:::::::::::::::::\
./ /::/:::/::::::::/::::::::|:::::::::::::::|::::::::::::::::::::ヘ
/ /\/:::/:::::::::i:::::::::::|:::|:::::::::::|:::::::::::::::::::::ム 追記:ショートカット
/ .i\|:::::|::::/::::|:::1/|:::|:::::::::::|ヘ::::::::::::ヘ::::::! 編集エリアで「Alt + ←」や「Alt + →」 で空白が並んでいる場合に
/ ,x|\|:::::|:/:::1ム斗ー|:::|i::::::::::|斗-、_::::::|:::::| 1ドットずらすことができます。
ムイ |\|:::::|:|::::ハ|乂{ __ヘ:|ヘ|:::::/ マ ト、::::|:::::|
|::::::|:::::|ハ::|x====zリ |:::/z=\z\|:::::|
|::::::|::::::::::\{::f::::i。} j/ {:f:::i。} `/:::::::|
|/:f'|:::::::::::::|弋_-ク 弋_-ク |:::::::::| >>6 とりあえずこのくらいでしょうか……。
/::::ヘ|:::::::::::::| , , , , , , , i:::::::::| 適当に文字列をがちゃがちゃっと入力していただいて、
|:::::::::|:::::::::::::| /::::::::::| 動画モードを試してみたり、一回ブラウザを閉じてもう一度開いてみたりすると
|:::::::::|::|::::::::::|、 ` ' , イ::::::::::::| よいかと思います。
|/|:::::|::|::::::::::|:::> 、__ , 、 <:::|:::::::::::::!
|! |::::|Ⅵ:::::::::|::/ \_ _/|:::::::::|::::::::::::i
乂{ ∨::/リ/ /^i /\ ∨j/リ|イ:::::/
,、-‐'"}ノ ヘ /\ ∨ /| /"'--|ノj/
10
名前:普通のやる夫さん[] 投稿日:2025/07/18(Fri) 19:07:02 ID:45085e12
わかりました
11
名前:North Tail ◆kvYUSK2.S2[] 投稿日:2025/07/18(Fri) 19:12:06 ID:43600dfe
__///:::::/::::::/::::::::::ヘ:::::::::::::::::\
./ /::/:::/::::::::/::::::::|:::::::::::::::|::::::::::::::::::::ヘ
/ /\/:::/:::::::::i:::::::::::|:::|:::::::::::|:::::::::::::::::::::ム
/ .i\|:::::|::::/::::|:::1/|:::|:::::::::::|ヘ::::::::::::ヘ::::::!
/ ,x|\|:::::|:/:::1ム斗ー|:::|i::::::::::|斗-、_::::::|:::::|
ムイ |\|:::::|:|::::ハ|乂{ __ヘ:|ヘ|:::::/ マ ト、::::|:::::| >>10 ご指摘いただきありがとうございます。助かります。
|::::::|:::::|ハ::|x====zリ |:::/z=\z\|:::::| 改良の余地は多いと思うので、のんびり見ていただけたらと思います。
|::::::|::::::::::\{::f::::i。} j/ {:f:::i。} `/:::::::|
|/:f'|:::::::::::::|弋_-ク 弋_-ク |:::::::::|
/::::ヘ|:::::::::::::| , , , , , , , i:::::::::|
|:::::::::|:::::::::::::| /::::::::::|
|:::::::::|::|::::::::::|、 ` ' , イ::::::::::::|
|/|:::::|::|::::::::::|:::> 、__ , 、 <:::|:::::::::::::!
|! |::::|Ⅵ:::::::::|::/ \_ _/|:::::::::|::::::::::::i
乂{ ∨::/リ/ /^i /\ ∨j/リ|イ:::::/
,、-‐'"}ノ ヘ /\ ∨ /| /"'--|ノj/
12
名前:普通のやる夫さん[sage] 投稿日:2025/07/18(Fri) 19:24:02 ID:81b5e10f
元画像の位置が良くて凄い見やすい
ただPC環境によると思うのですが、動作がちょっと重いですね。
スペースキーで空白を作り続けたり、逆にデリートキーで消し続けるとそれが顕著
13
名前:North Tail ◆kvYUSK2.S2[] 投稿日:2025/07/18(Fri) 19:58:14 ID:43600dfe
弋_/::::::::::::::::::::::::::::::::::::::::::::::::::::::::::"''-、
__/:::::::::::::/:/:::::::::::::/::::::::/:::::::::::::::::::::::\
/,/\::::::/::::/:::::::::::::::::/::::::::/:::::::::::::::|::::::::::::::i
/ , |:::::::\|::::::|::::::::::::::::/:::::::/|:::::::::::::::::|:::::::::|::::|
. / / |:::::::::::::|::::::|:::|::::::/|:::::/ |::i:::::::::::/|:::::::::|::::| >>12 すみません、遅くなりました。
/ レ |\:::\|::::::Ⅵ:::::|ー|''"| ̄|::|::::::::/`|‐--:|::::| ありがとうございます。早速試していただいたようで、うれしいです。
| __,xイ|::::::\:::|::::::::::乂;{ \{ - リ|:::::/ __|、:::::::|::::| 重さについては私も少し気になっていたので、教えていただけてよかったです。
|/ |::::::::/^i::::::::::::| 行示弌 j/ 示弍\1:::| 履歴を保持する処理と、連続するスペースを強調表示する処理がおそらく重いはずなので
|/:::::::{ |::::::::::::| |。f::::i。| |f:::i。|\|:::| なるべく軽くなるようにがんばりますが、機能自体のオンオフができてもいいのかもしれません。
/::::::::::乂i::::::::::::| 乂-;ク 辷;ク/::::::::! ちなみにどのくらいの大きさのAAで試していただいたのでしょうか?
. /::::::::::::::::::|::::::::::::| , , , , , , |:::::::::|
|:::::::::::::::::::|:::::::::::::| u ' /::::::::::|
|:::|i:::::::::::::|::::::::::::::ト、_ cっ ,、イ::::::::::::!
乂||::::|、::::|::::|:::::::::| "''-/\≦::::/ |:::::::::/
>┴<Vヘ::::/リ\ f'´ ̄ユ、/|/! j/j/
/ ̄ ̄\`∨:: : : :\|  ̄] |^|\
| ⌒\ \\: : : : :| 〈ノ: |/| ∧
| \ ヘ,| \: : :| /: /V |
| \ \:| \/ // | |
∧ \ | / / | \|
14
名前:普通のやる夫さん[sage] 投稿日:2025/07/18(Fri) 20:20:41 ID:81b5e10f
AAで試したわけではなく、ただ単純に画像を左画面に反映させて適当に操作していただけです。
なのでどのくらいの大きさと言われると返答に困るのですが、行数では47、8行くらいの大きさの画像です(形式はjpg)。
あと、全く話が変わって恐縮ですが、AA作成の際に左画面で反映される線色ですけど、
これ設定で固定できるようになると良いなと思います。 基本自分に合った色を見つけたら、あまり変えないと思うので。
15
名前:普通のやる夫さん[sage] 投稿日:2025/07/18(Fri) 20:23:49 ID:7b1928b9
おおー新しいAAエディターだ。凄い
それで開いてまず気になった点が一つ
平行記号である「∥」が斜めではなく縦のものになってるのですけど
もしかしてMSPゴシックではなくSaitamaarとかの互換フォントを使うようになってたりします?
おま環じゃなければ多分その辺かなーと…
16
名前:North Tail ◆kvYUSK2.S2[sage] 投稿日:2025/07/18(Fri) 20:41:28 ID:43600dfe
レスにAAは無いほうがスマホなどでは見やすいのでしょうか?
寂しくなったらまた付けます。
>>14 なるほど、ありがとうございます。
私は30行未満くらいのAAを作ることが多いのでそのくらいのサイズでテストしていたのですが、
次からは60行くらいまでのものも検討してみようと思います。
線の色ですが、これは本来ならブラウザにキャッシュされるようになっているはずでした……。
どこかの変更で反映されなくなってしまったのだと思います。直します。
もしくはよく使う色の登録みたいな機能があるといいのかもしれませんね。
>>15 試していただいてありがとうございます。
その通りです。フォントの優先度がMS Pゴシックよりも Saitamaar が優先されるようになっていました。
mac ではアップデートで既存のエディタが使えなくなった、という話を聞いたことも
モチベーションの一つだったので使わせていただいていますが、
こういうこともあるんですね……。すみません、直します。
17
名前:North Tail ◆kvYUSK2.S2[sage] 投稿日:2025/07/18(Fri) 20:51:51 ID:43600dfe
なるほど。線色などの元イラストの設定はテスト環境ではブラウザを閉じても問題なく保持されるのですが、
本番環境ではおかしな挙動になってるみたいですね……。
localStorage という機能を使っているのですが、思っていたよりも制限の強い機能だったようで
ブラウザで動かすのなら、設定をまとめて1つのファイルにして出力するようなことができた方がいいのかもしれません。
18
名前:普通のやる夫さん[sage] 投稿日:2025/07/18(Fri) 20:52:26 ID:81b5e10f
左右の画面の幅の大きさを変えようとすると、一番下の横のシークバーもつられて動いてしまうのも、少々気になります。
左画面は特に大型AAを作りたい人は、頻繁に動かしそうではあるかなと。
19
名前:North Tail ◆kvYUSK2.S2[sage] 投稿日:2025/07/18(Fri) 21:02:13 ID:43600dfe
>>18
なるほど。境界線に対して左側の枠内が一番右にスクロールするようになっている挙動のことですね。
枠の大きさを自由に変更できる仕組みというのがあまりなくて、これも自作しているのですが
確かにこれは不便な挙動ですね。おそらく解消できると思うので、直してみます。
ご指摘の箇所に加えて、大きなAAだとプレビューを別ページで大きく表示できるようにしておいた方が便利そうです。
20
名前:North Tail ◆kvYUSK2.S2[sage] 投稿日:2025/07/18(Fri) 21:07:08 ID:43600dfe
たくさん試していただいてありがとうございます。
課題もたくさん見つけていただき、思い切ってスレを立ててみてよかったと思います。
申し訳ありませんが、本日はこのあたりで退席しようと思います。
もし何か気づいたことがあれば、ぜひいつでも書き込んでください。
すぐに反映させることは難しいこともあるかもしれませんが、
ゆっくりでも改良していけたらと思っています。
よろしくお願いします。おやすみなさい。
21
名前:普通のやる夫さん[sage] 投稿日:2025/07/18(Fri) 21:08:59 ID:7b1928b9
>>16
素早いお答えありがとうございます
Saitamaarは「∥」の仕様だけがAA的に欠点なんですよね
それを除けばMS Pゴシックの代替フォントとして最高峰の完成度なのですが
とにかくお疲れ様です
22
名前:North Tail ◆kvYUSK2.S2[sage] 投稿日:2025/07/18(Fri) 21:18:20 ID:43600dfe
>>21
浅学ですみません。常識なのかもしれませんが、教えていただいてありがとうございます。
優先度を変えるのは多分すぐにできると思いますが、更新はもう少しお待ちください。
Saitamaar は良いフォントですね。Android でも試してみたのですが、
当たり前ですがWindows と同じ表示ができていて感動しました。
ありがとうございます。がんばりたいと思います。