テキスト変換ツール①ー概要

WordPressにHTMLサイトを埋め込んでツール集を作っていきたく、試しにテキスト変換ツールを作ってみました。

半角変換や連続スペース削除の機能がありますが、これは普段仕事でPDFにメカ図面をもらい、そこから機器の型式をコピーすると、なぜか全角英数で、しかも文字間に全角スペースがはいっているので、変換して使いたいと思ったからです。

今思えば完全には対応できてませんが、今後更新していきます。

今回は最初に方針や仕様を決めて作っていきました。

方針

1. HTMLはVueを使う
2. VueはCDSでインポートする
3. CSSは自分で書く
4. Javascriptの部分はTypescriptで作成し変換する
5. テキスト処理はメソッドチェーンを使う
6. テスト駆動で進めていく
7. npmプロジェクトを作る
8. Gitで管理する。

仕様

1. 入力ボックスに入力したら、変換後の文字列が出力ボックス行く
2. 入力制限は特にしない
3. ラジオスイッチで選択
   • 無し
   • 全角→半角
   • 半角→全角
4. チェックボックスで選択した処理をする。
   • 連続スペース削除
5. ラジオスイッチで選択
   • 無し
   • 大文字→小文字
   • 小文字→大文字
   • キャメルケース( camelCase )  ex) currentUserItem
   • パスカルケース( PascalCase ) ex) CurrentUserItem
   • スネークケース( snake_case ) ex) current_user_item
6. 入力ボックスにテキストが入ったら右上に×ボタンが表示され、それを押すとクリアする。　（未実装）
7. 変換ボタンは置かない代わりに、入力したときや、チェックボックス、ラジオボタンの状態が変わったときに変換する
8. クリップボードから貼り付けボタンを設置し、ボタンを押すとクリップボードから　（未実装）
9. 出力ボックスにコピーボタンを配置し、クリップボードへコピーする　（未実装）
10. レスポンシブル対応。PCは横並び、モバイルは縦並び

まだ、実装できてないことが多いですが、徐々に更新していきます。

ワイヤーフレーム

ワイヤーフレームはdraw.ioで書いてみました。