Watanabebashi/WB-ToonTools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Watanabebashi:2a2b24d11a8b4941c1a58e4b2e5b40c47dd720f1
Branches Tags
Watanabebashi:main
...
compare: Watanabebashi:main
Branches Tags
Watanabebashi:main

4 Commits
2a2b24d11a ... main

Author SHA1 Message Date
furu04
7569ff6930 技術スタックを追加 2025-11-17 17:38:25 +09:00
furu04
3b1792df01 README.md を更新 2025-11-17 08:34:49 +00:00
furu04
fc1f04fa12 \URL追加，旧ディレクトリ名修正 2025-11-17 17:33:33 +09:00
furu04
7c58848869 README.mdを追加し，index.htmlではTwitterをx.comに変更 2025-11-17 17:30:11 +09:00
2 changed files with 58 additions and 4 deletions
Expand all files Collapse all files

56
README.md
View File

@@ -1,2 +1,56 @@
# WB-ToonTools 渡辺橋のJSON → TOON 変換ツール
## 概要
このツールは、JSON形式のデータをTOON形式に変換するためのウェブアプリケーションです。
すべての変換はブラウザ内で完結し、入力されたデータがサーバーに送信されることはありません。
## 主な機能
- **JSONからTOONへの変換**: 入力されたJSONデータをTOON形式に変換します。
- **クライアントサイド処理**: サーバーにデータを送信することなく、ブラウザ上で安全に変換処理を行います。
- **クリップボードへのコピー**: 変換結果を簡単にコピーできます。
- **UIのクリア**: 入力と出力エリアを一度にクリアできます。
## 技術スタック
- HTML, CSS, JavaScript
- CSSフレームワークはBootstrapを使用
- JSONからTOONへの変換で公式の[@toon-format/toon](https://github.com/toon-format/toon)ライブラリを使用
## 使い方
1. Webページを開きます。
2. 左側の「JSON入力エリア」に、変換したいJSONデータを貼り付けます。
3. 「変換」ボタンをクリックします。
4. 右側の「TOON出力エリア」に変換結果が表示されます。
5. 「コピー」ボタンで結果をクリップボードにコピーできます。
## ローカルでの実行方法
1. リポジトリをクローンします。
```bash
git clone https://git.watanabebashi.net/Watanabebashi/WB-ToonTools
cd WB-ToonTools
```
2. 依存関係をインストールします。
```bash
npm install
```
3. 開発用サーバーを起動します。
```bash
npx http-server
```
4. ブラウザで `http://127.0.0.1:8080` にアクセスします。
## 開発予定の機能
- TOON形式からJSON形式への逆変換
- 入力されたJSON/TOONの構文ハイライト
- CSV等の形式への対応
- 節約トークン数の表示
## ライセンス
このプロジェクトは [AGPLv3](https://www.gnu.org/licenses/agpl-3.0.html) の下でライセンスされています。
© 2025 Watanabebashi Alpha

6
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to TOON Converter</title> <title>渡辺橋のJSON → TOON 変換ツール</title>
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
<style> <style>
.io-box { .io-box {
@@ -11,7 +11,7 @@
overflow-y: auto; overflow-y: auto;
} }
</style> </style>
</head> </head>て
<body> <body>
<div class="container mt-4"> <div class="container mt-4">
@@ -88,7 +88,7 @@
const pageTitle = encodeURIComponent(document.title); const pageTitle = encodeURIComponent(document.title);
const twitterShare = document.getElementById('shareTwitter'); const twitterShare = document.getElementById('shareTwitter');
twitterShare.href = `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`; twitterShare.href = `https://x.com/intent/post?url=${pageUrl}&text=${pageTitle}`;
const facebookShare = document.getElementById('shareFacebook'); const facebookShare = document.getElementById('shareFacebook');
facebookShare.href = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`; facebookShare.href = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;