アニメーション制作ツール(リアルタイム同期可能)
プロトタイプを作ったので、これを発展させたい
ターゲットユーザー: 初心者向け
機能：手描きアニメーション
プラットフォーム：webに接続できるデバイスならば動く
収益モデル：無料、身内で使う
フレームワークや言語：特に指定なし
設計：簡素で問題ない
今の機能
ペン
消しゴム（バグって画面が白くなる）
ペンのサイズ変更
フレーム移動
フレーム追加
フレーム削除
オニオンスキン
再生
停止
FPS変更
ファイル保存/読み込み: 作成したアニメーションをJSONなどで保存・読み込みできるようにする。
拡張したい機能
Undo/Redo機能: 誤操作を元に戻す機能。
レイヤー機能: 複数の描画層を重ねられるようにする。
描画ツールの拡充: 異なるブラシ形状、塗りつぶしツールなど。
プレビュー機能の強化: 再生時に背景色を変えたり、ループ再生設定など。
まずは消しゴムを正常に動くようにして、gifを保存できるようにしたい。
AIにコードの内容や意図を教えてもらいながらやる
フレームはjsの機能で配列でメモリに保管している どこまで保管可能か調べる
jsonで保存するときに形式がどうなるかを調べる
jsの機能が全然わからんので調べる
サーバーとして、github pagesをつかうのが良さそう 5GBまで無料
やってみる順番
1, 通信機能なしのお絵かきアプリを作る
windows
ipad
1. 各プラットフォーム間での通信を可能にする
2. クロスプラットフォームにする
3. 動画を作れるようにする
企画開発の流れ
websocket解説
redo undo
企画書みたいなものを作って複数人と共有したい
通信規格について知りたいときに見るべき
リアルタイムお絵描きアプリの実装 webtransport
ここのサイトでスマホでのシンプルな挙動を知れそう
apidogで通信をテストできそう
webへの接続はトンネリングツール ngrok localhost.run あたりがある これを使う
サーバの立て方
プラットフォームが複数あるので、windowsとiosに適応できるunityでやるべきか
unity 日本語の情報が多いのと、ライブラリが多そう
MDN web docsが非常に有益情報を載せている
システムと情報の流れを図にしたい
アニメーション制作ツールだと呼びづらいので名前を付けたい
進捗を公開していきたい 簡素なwebサイトとかで 阿部寛的な
セキュリティ的に危ない気もする
コスメティック田中がいい感じの現代化してるらしい
非同期
11/19
flaskは情報が少ないのでDjangoで開発したい
10/12
先にprogateでwebの知識をつける
このサイトも一通り見たい
web制作の勉強
いろんなサイトの紹介
freeCodeCamp
10/14
GitHubでファイル更新システムをつくる
chatgptで作った途中のプログラムを解釈する htmlとかcssとかから
方向性
それぞれのPCのローカル環境でwebアプリ開発のチュートリアルを一通りやってみる
dockerの導入を並行してやる
必要なもの
通信の規格 websocket socket.io
アニメーション描画のUI
アプリの分類についての知識 分かりやすかった
通信速度について
基本をwebアプリケーション(ブラウザ上で動く)としたときに、discordみたいに半分アプリにして速度が向上するのか
discordはPC上のアプリケーションにすることで通信が早そうに見える(PC側である程度処理を最適化している？)→キャッシュの保存が効くらしい→web上のキャッシュは弱い？
単純にバックグラウンド処理ができることが強い
PWAという方式
Djangoを使う
pythonの仮想環境を建てるのに異常に時間がかかってしまった
Djangoを仮想環境下に導入する
プロジェクト作成までいった 静的なサイトっぽい
どのデバイスからでも開発できる環境を作りたい
(気が早いが)複数人巻き込むのであれば、統一した環境で開発したい
実行環境をオンライン上で→導入にお金がかかる場合あり、レスポンス速度が微妙そう(google colabとか)
簡単なwebオンリーの開発であればweb IDEを使うのが良さそう
githubでソースコード共有はできそう
GitHub+Ubuntu+VS Codeの環境で使用可能なGitHub Codespaces 無料
上記環境で最終的にどうやって完成にするかがわからん
↑「VS Code はポート転送機能を備えているため、リモートサーバ上でコンパイルして Web サーバを起動したのち、そこに対してローカルの Web ブラウザなどから接続し、動作確認することができるようになっています」このページにわからんこと全部書いてある
最後にDockerに導入？→dockerの機能もある
この方針でいってみる
まずは導入→djangoの環境構築？
やっぱ60h/monthの制限は厳しい気がする
Dockerを使って仮想環境を共有するのが良さそう
コンテナの展開に２分くらいかかるのはあんまり嬉しくない
pcのスペックはギリギリ満たしているはず
仮想環境とwebのつながりが全然分からないので、まずは個別のwebの技術を見ていく
このチュートリアルで一回作ってみる？
→全然わからん やっぱDjangoに戻るか
参考になりそうなサイト
Webチャットアプリのだいぶ分かりやすい実装方法 これで行ってみる
django-channelsのチュートリアル
channelsで出てくるredisの説明
https://prod-files-secure.s3.us-west-2.amazonaws.com/a3606a82-2441-45ca-98c6-85403bd939e4/129656b9-ba5a-4f7f-837b-8729ee125b31/Untitled.png
https://prod-files-secure.s3.us-west-2.amazonaws.com/a3606a82-2441-45ca-98c6-85403bd939e4/fa72d091-a831-47da-b793-a6962aa80b40/Untitled.png
chatgptで何も考えず作れるかも
とりあえず、お絵描きソフトを複数人でアクセスできるようにしたい
ローカル環境はすぐに作れる
インターネット経由だとやや複雑な処理がいるぽい
おもしろい！
複数人の窓を表示すると楽しいかも
chatgpt様々すぎる
ngrokで共有は楽にできる
chatgptに聞いたらすでに同期アニメーションツールありそうだけど
流石に有料だから作る意味はあるはず
目標としては 無料で軽いツール
C:\Users\tanup\project\flask_drawing_app
仮想環境起動
venv\Scripts\activate
powershell
ngrok http 5000
AIにコードを生成してもらうとコードのどこが更新されたかわからなくなるので、GitHub等で履歴を確認できるようにしたい
7/12 レイヤーを分けたときに他のレイヤーを薄くした状態でストップ
ファーストステップ お絵かきソフト
<s>複数人で互いに入力が干渉しないようにする</s>
タブレット入力できるようにする
レイヤーを分ける あるレイヤーを消すときに他のレイヤーも消えてしまう
スポイト機能
キャンパスの拡大縮小
<s>ペンと消しゴムの種類</s>
後で入室した際に、既に描かれた線が描写されない問題
図形
トーン
文字入力
やり直し やり直し機能がうまくいかない 全消しになってしまう
<s>全部消す</s>
範囲選択
筆圧調整
なでなでポインター
保存
次にすること うごメモに近づける
複数ページ連番でかけるようにする
再生機能
再生速度
動画出力 GIFかなぁ
音楽を置く