定型文・コードをワンタップでコピーできるWebアプリ「こぴぺったり」を作ってみた（完全ローカル・サーバー送信ゼロ）
概要
今回は定型文・コードスニペット・メール返信テンプレートなどをフォルダで整理して、ワンタップでコピーできるWebアプリ「こぴぺったり」を作ったので紹介します。
このアプリの最大の特徴はサーバー送信ゼロ・データはすべて自分のブラウザ内だけで完結することです。
社外秘のメールテンプレートや業務用コマンド、個人情報を含む連絡先テンプレートなども、外部にアップロードされる心配なしに保管できます。
仕事中に同じ文面・同じコマンドを何度もコピペしている方は、「メモ帳と作業画面を行ったり来たりするの、地味に面倒くさい」と感じたことはないでしょうか。
自分は毎日感じてました（^^;
なので「フォルダで整理できて、検索もできて、ワンタップでコピーできる」アプリを自分で作ってしまうことにしました。
そこで完成したのが「こぴぺったり」です。
公開URLはこちら → copype.shinpinoshi.comhttps://copype.shinpinoshi.com/
ブラウザで開いてすぐ使えます。
（インストール不要、登録不要、無料）
この記事ではアプリの使い方など詳細を紹介していきます（^^!
それではやっていきましょう！
目次
こぴぺったりとは
「こぴぺったり」は、定型文・コードスニペット・メールテンプレート・コマンド集などを、フォルダ階層で整理してワンタップでコピーできるWebアプリです。
データはすべてブラウザのローカルストレージに保存されるので、サーバーには一切送信されません。
プライバシーが気になる業務メモや社内コマンド集の保管先としても安心して使えます。
作った経緯
自分はSEとして仕事をしてく上で下記のような悩みがありました（- -
- メール返信のたびに「お世話になっております」テンプレを別ファイルから探してコピーしている
- 開発で使う
git commitメッセージやdocker ps -aなどのコマンドを毎回打ち直している - ChatGPTに投げるプロンプトを Word ファイルから引っ張ってきている
- スマホで定型文を送りたいときに、メモアプリで長押し→全選択→コピーで疲弊している
- 業務メモをクラウドサービスに置きたくないけど、ローカルのメモ帳だと整理しにくい
こういった「コピペのためのコピペ作業」が積もると1日30分くらい消えている感覚があったんですよね。
30分は馬鹿にならないのでアプリを作った感じです！
「こぴぺったり」を使用するメリット
- データはブラウザのローカルストレージのみ。サーバー送信ゼロで社外秘テキストも安心
- フォルダで整理できる（仕事 / プライベート / 開発、など）
- ワンタップで本文をクリップボードにコピー
- PWA対応でスマホのホーム画面に追加可能。オフラインでも動く
こういった要件を満たしたい場合に使用可能です。
特にローカルストレージの機能は苦労しましたが、作成できました！
エクスポートやインポートも手動ですが可能なので、
もしブラウザの移行やキャッシュなどを削除してしまった場合の保険もあります！
主な機能とポイント
フォルダ階層で整理できる
フォルダはネストできるので、「仕事 → メール → 取引先A」のような深い階層も作れます。
ドラッグ&ドロップでの並べ替えや別フォルダへの移動もできるので、後からいくらでも整理し直せるのが便利です。
ワンタップコピー＆視覚フィードバック
各アイテム左側のアイコンをタップ（クリック）するだけで、本文全体がクリップボードに入ります。
コピーが成功したらアイコンがチェックマークに変化するので、「ちゃんとコピーできたかな？」という不安がありません。
サーバー送信ゼロ：データはすべて端末内に保存
「こぴぺったり」は作成したフォルダ・アイテム・タグ・テーマ設定のすべてをブラウザのローカルストレージに保存します。
サーバーへの送信は一切ありません。
業務でよく使う以下のような外に出せないテキストでも、安心して保管できます。
- 取引先とのやり取りで使うメールテンプレート
- 社内システムのSSH接続コマンドや踏み台経由のコマンド
- 個人情報を含む連絡先テンプレート（電話番号・住所など）
- 社外秘の議事録フォーマットや稟議書の定型句
ネットワークタブを開いてもアプリ起動後は外部送信のリクエストが一切発生しないので、業務用PCでも遠慮なく使えます（GoogleフォントとPWAアイコンの初回取得を除く）。
ただし注意点として、ブラウザのキャッシュやサイトデータを削除すると、保存内容も一緒に消えてしまいます。
こぴぺったりではその対策として、JSONエクスポート機能を使用することで、バックアップを取得することができます。
（後述）
検索・ソート・タグフィルタ
アイテム数が増えてきても、タイトル・本文・タグを横断する全文検索と、タグタブによるクロスフォルダ絞り込みでサッと見つけられます。
ソートは「手動（ドラッグで並べ替え）／名前順／作成日順／更新日順」から選べます。
ダーク／ライトテーマ
メニューからダーク↔ライトを切り替えられます。設定はlocalStorageに保存されるので、リロードしても維持されます。
地味な工夫として、ページ描画前にthemeクラスを当てているので、リロード時に「一瞬ダーク→ライトにチカッ」となるフラッシュが起きません。
JSONバックアップ＆インポート
ローカルストレージに依存しているため、ブラウザのキャッシュを消すとデータも消えます。
その対策として、全データをJSONファイルとしてエクスポート／インポートできる機能を入れています。
PCを移行するときや、別ブラウザに引っ越したいときに、JSONファイル1個で全データを持ち運べます。
PWA：ホームに追加してオフラインでも動く
PWAに対応しているので、スマホやPCのホーム画面にネイティブアプリのように追加できます。
オフラインでも、一度開いたことがあればアプリのUIは動作するので、地下鉄や飛行機の中でも定型文を取り出せます。
モバイル対応
スマホでも片手で快適に使えるレイアウトになっています。
フォルダは左から引き出すドロワーUIに格納されており、コピーボタンも親指の届く範囲に配置しています。
通勤中のメール返信や、現場でのコマンドコピペにも便利です。
技術スタック・実装の工夫
まぁ使用には影響がないので技術好きの方向けに、軽く書いておきます！
- フロントエンド: React 18 + Vite 5 + Tailwind v4
- PWA: vite-plugin-pwa（Service Worker・オフラインキャッシュ・インストールバナー）
- データ保存: localStorage完結。サーバーレスで端末から外にデータが出ない設計
- テスト: Playwright で desktop / tablet / mobile の3ビューポート × 6 spec のE2E
- ホスティング: Cloudflare Pages（静的配信のみ。バックエンド無し）
こだわりポイントは以下です。
- フラッシュレスDarkMode: HTMLパース時にインラインスクリプトでthemeを当てて、初回描画から正しいテーマで出す
- localStorageの安全化: 容量超過などの例外を握りつぶしてアプリが落ちないようにする
- JSONインポートのスキーマ検証: 不正なJSONを読み込んだときに既存データが壊れないよう、フィールドごとに型チェック
- 静的ページの自動生成: about / privacy / features などの静的ページはMarkdownからHTMLを生成。SPAルーティングと衝突しないよう
navigateFallbackDenylistで除外
このあたりは別記事で深掘り解説したい予定です。
こんな方におすすめ
- メール返信や社内連絡で同じ文面を何度も書く方
- 開発で使うコマンド・スニペットをまとめておきたいエンジニア
- ChatGPTに投げるプロンプトを整理しておきたい方
- スマホでさっと定型文を取り出したい方
- クラウドサービスに業務テキストを置きたくない方／業務用PCでも安心して使えるツールを探している方
無料・登録不要・サーバー送信ゼロなので、まず開いて触ってみてください。
何度も書きますが公開URLは下記！！
copype.shinpinoshi.comhttps://copype.shinpinoshi.com/
以上となります！
PWAを今回の開発で初めて知れたので、やってよかったです（^^b
それでは、お疲れさまでした！！