はじめに 

誰にでもレポート・文書・資料・ブログの記事・SNSの投稿・ネット掲示板への書き込みなどの作成で、頻繁に使う定型文があると思います。
そういったワードを予測変換等で打ち込むのも良いですが
ほんの少しのタイピングでも面倒で面倒で仕方ない時は
このPrivate Word Stockにワードをストックしておいて、必要な時はクリック一回でコピーできるようにしてみてはいかがですか?
ビジネスや趣味など使用するワードのシーンによって使い分けできるようにカテゴリ別にワードを登録することができます。
登録したワードはCSVファイルとしてダウンロードもできます。

こちらからどうぞ→Private Word Stock



使い方

  • 右下の青いボタンをクリックして入力フォームを表示し
    追加したいワードを入力、追加したいカテゴリを選択して
    登録ボタンをクリックすれば新規登録の完了です。

  • 改行入力をすれば、一気に複数のワードを登録できます。

  • 登録したワードは、カテゴリごとに表示されます。
    セレクトボックスで表示したいワードのカテゴリを選択してください。

  • 各ワードの右のアイコンをクリックすると、クリップボードにコピーできます。
    左のアイコンをクリックすると、削除されます。


  • さらに、登録したワードは、セレクトボックスの左下の青いアイコンをクリックすると、CSVファイルとしてダウンロードできます。

  • カテゴリを新規登録するには
    カテゴリと書かれている場所の右にあるプラス(+)ボタンを押して、入力フォームを出し、追加したいカテゴリ名を入力して、登録ボタンをクリックします。

  • カテゴリを削除するには、セレクトボックスの右下のアイコンをクリックしてください。
    なお、そのカテゴリに追加されているワードごと削除されてしまうので、ご注意ください。

  • リセットしてデフォルトの状態に戻したいときは、画面右下の紫のボタンを押してください。

  • ちなみに、デフォルトではあいさつのカテゴリが登録されています。

使用した技術

React.js

今回もTypeScriptを使用しました。
もう慣れてきました。
状態管理との合わせ技で、一部localStorageを使いました。

Dexie.js

世界忍耐時計に引き続き今回もindexedDBを使いたかったので使用しました。
日本語の記事があまり無いので英文の公式ドキュメントを読みながら試行錯誤しました。

styled-components

もうこれなしでスタイリングが出来ないほど使い勝手が良いので愛着が湧いています。
今回は後述のMaterial UIと併用しました

Material UI

全体的なスタイルはstyled-componentsに任せて、アイコンやボタンの要所要所でMaterial UIという感じで使い分けました。
特に便利だったのがTooltipでした。カーソルを合わせると表示しきれなかった全文やアイコンの説明が出てくるのが気に入りました。


まとめ

この年(2024年)も6月の後半あたりから暑さが酷く、少し体調を崩しながらでしたがどうにか作り終えました。
YEN$CONVERSIONの時に体験しましたが、猛暑のなかで開発を進めるのはきついです(もちろんエアコンは点けてるけど何となく精神的に)。
ちなみにこのWebアプリの拡張機能版もあるので、そちらも良ければチェックしてみてください。

プロフィール

プロフィール画像

syab-syab

制作したWebアプリやChrome拡張機能の紹介や趣味のことなどを記事にして公開しています。

このブログを検索

注目の投稿

Webアプリ・拡張機能まとめ

QooQ