Hi-packa (仮)

GitHub Pagesでデモを見る

Hi-packaは、シンプルなカードベースのアプリケーションを構築するためのプロトタイプツールです。 テキストオブジェクトやボタンを配置し、カード間の移動や簡単なスクリプト実行が可能です。

機能

• カードの作成、切り替え、削除
• テキストオブジェクトとボタンの配置、移動、リサイズ
• オブジェクトのプロパティ編集（テキスト、配置、ボーダーなど）
• ボタンクリック時のカードジャンプ機能
• ボタンクリック時のスクリプト実行機能（Magicワード有効時）
• アプリケーションのHTMLエクスポート機能
• 実行モードと編集モードの切り替え
• 多言語対応（英語、日本語）

セットアップ

1. リポジトリをクローンします:

   git clone https://github.com/Mitsuru-Tagami/Hi-packa.git
   cd Hi-packa

2. 依存関係をインストールします:

   npm install

実行方法

開発サーバーを起動します:

npm run dev

ブラウザで http://localhost:5173 (または表示されるURL) にアクセスしてください。

プロダクションビルドを作成します:

npm run build

dist フォルダにビルドされたファイルが生成されます。

プロジェクト構造

• src/main.ts: アプリケーションの主要ロジック
• src/style.css: アプリケーションのスタイル
• src/i18n/: 多言語化ファイル
• public/: 静的アセット

---

開発者向けメモ:

• esbuildのテンプレートリテラルに関する問題が発生した場合、文字列結合 (+) を使用してください。
• exportToHtml関数は、現在のスタックデータをHTMLファイルとしてエクスポートします。