Webデザイナーの実装

[sthairno]

XMLのホットリロード機能を実装しているので、ブラウザでXMLファイルを開いてリアルタイム編集をしたい

• 参考
  • Craft.js (https://craft.js.org/)
  • GrapeJS (https://grapesjs.com/)

[sthairno]

In progress 🏃‍♂️‍➡️

https://x.com/telyaino/status/1851899615848862203

[sthairno]

機能

• XMLデータのインポート/エクスポート (上)
  • C++ライブラリ側との相互連携
• 共有ボタン (上)
  • これまでのSiv3Dがそうだったように、サンプルコード(URL)を開いてすぐに手元で試せるように
• クイック編集ボタン,ドラッグ&ドロップ (左,中央)
  • UI構築の必要最低限の機能を左と中央に集約させる
  • HTMLやフレックスボックスの初心者でも理解しやすくするため、用語は使わずアイコンで表現
  • 適当にボタンを押してみながら、画面の変化を見て理解できるように
• 自動保存 (Chrome系ブラウザのみ)
  • ホットリロード機能との組み合わせで、デザイナーでの変更がすぐにSiv3Dに反映されるように

使用技術

• React
• Craft.js

[sthairno]

GitHubにパブリックリポジトリとして公開済み
https://github.com/sthairno/flexlayout-designer/

WebサイトはGitHub Pagesにデプロイ中
https://sthairno.github.io/flexlayout-designer/