WEB原稿用紙エディタをリリースしました!

2022年11月16日水曜日

HTML react

t f B! P L

WEB原稿用紙エディタ

WEB原稿用紙エディタという、ブラウザだけで原稿用紙に文章が書けるツールを作った。

サイトにアクセスして直ぐに書き始められ、エディタに入力した内容を即座にプレビューに反映して確認できます。さらにプレビューした原稿用紙の内容を印刷もできます。

簡易的な原稿の執筆や、夏休みの読書感想文の下書きに使ってみましょう。

特徴

1) 横書きで書いた文章を即座にプレビュー!

原稿用紙の見た目のまま、縦書きで入力できるワードやアプリもあるが、PCやスマホでは横書きの方が正直入力しやすいであろう。このWEB原稿用紙エディタでは、入力は画面左のエディタで横書きし、リアルタイムに原稿用紙の見た目でプレビューできる方式としています。

2)文字の装飾ができる

太字、斜体の切り替え、文字色の変更ができます。(意外とこれが出来るアプリが少ない)

enter image description here

3)印刷可能

プレビューに表示された原稿用紙の内容を、プリントアウトできます。

印刷プレビュー画面

スマートフォン対応

スマートフォンの場合、エディタとプレビュー切り替えながら文章が入力可能です。

enter image description here

使い方

以下のURLにアクセス!

https://gkedit.sukerou.com/

左側のエディタに文章を入力すると、右側の原稿用紙にプレビューが反映されます。

enter image description here

文字の太字、斜体や、文字色を変更する場合は、画面左上のツールバーのボタンから操作します。

enter image description here

印刷をする場合は「プリント」ボタンをクリックします。別ウィンドウが開いて、ブラウザ標準の印刷ダイアログの機能で原稿用紙の内容を印刷できます。

enter image description here

今後の展望

今は、その場で入力された文章を原稿用紙に出力する機能しか備えてない。

今後は、クラウド等に保存する機能などを検討したい。あと行末禁止文字の制御とか、枠線の色を変える機能とか。

ちなみに、この「WEB原稿用紙エディタ」は、React + TypeScriptで作られている。

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ