3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

サーバー代0円で完全ブラウザ完結のセキュアなWebツール集を180個以上作った話

3
Posted at

はじめに

こんにちは.個人開発で「ZeroTools」という完全無料・ブラウザ完結型のWebツール集サイトを構築しました.
現在,テキスト処理,画像編集,開発者向けツール,ビジネス計算など,実務で役立つツールを180種類以上搭載しています.

世の中には数多くの便利なWebツール集がありますが,なぜあえて今,これらを新規に自作したのか.その理由と,それを「サーバー費用ゼロ」で「究極に安全に」実現した技術的な裏側をご紹介します.

  • サービスURL: ZeroTools
  • リポジトリ規模: 現在約180ツール,すべてNext.js(App Router)で構築

既存ツールが抱えるセキュリティリスクと「完全ローカル処理」への挑戦

PDFの結合,CSVの変換,JSONの整形,パスワード生成など,日常業務でWebツールを使う機会は多いと思います.しかし,多くの既存サービスでは,ユーザーが入力したデータやアップロードしたファイルが一度「運営者の管理する外部サーバー」へ送信され,そこで処理されています.

これは,会社の機密データや個人情報を扱う実務層や企業にとって,極めて大きなセキュリティリスクです.「データがログに残っていないか」「悪用されないか」という懸念から,利用を禁止している企業も少なくありません.

ZeroToolsでは,この問題を解決するために「すべてのデータ処理を100%ユーザーのブラウザ(クライアントサイド)内で行う」という制約を自らに課しました.
ユーザーが入力したテキストやアップロードした画像・ファイルは,一切外部のサーバーに送信されません.完全にインターネットから隔離された環境(オフライン)でも動作する設計となっており,実務やビジネスでも絶対の安心感を持って使用していただけます.


技術スタックとサーバー代0円を実現する構成

180個以上のツールを配置し,かつ大量のアクセスに耐えつつサーバー代を0円に抑えるため,以下の構成を採用しました.

  • フレームワーク: Next.js (App Router)
  • デプロイ・ホスティング: Cloudflare Pages (Free Plan)
  • スタイリング: Vanilla CSS / Tailwind CSS
  • アイコン: Lucide React

すべてのツールはNext.jsの output: 'export' 機能を利用し,完全に静的なHTML/JS/CSSとしてビルドされています.そのため,リクエストごとにサーバーサイドで動的な処理を行う必要がなく,CloudflareのCDNから世界中へ爆速で配信されます.データベースやバックエンドサーバーを一切持たないため,いくらアクセスが増えてもインフラコストは「永久に0円」です.


クライアントサイドでの高度な処理の実現

「サーバーを使わない」ということは,これまでバックエンドで行っていた重い処理もすべてブラウザ上で動かす必要があります.これを実現するために,以下のような最新のWeb技術を駆使しています.

  1. WebAssembly(Wasm)の活用
    OCR(光学文字認識)や特定の解析ロジックなど,JavaScriptだけでは速度的に厳しい処理にはWasmを導入し,ブラウザ内でネイティブアプリ並みの高速処理を実現しています.
  2. Web APIの徹底活用
    ファイルの圧縮・解凍(ZIP化),暗号化・復号(Web Crypto API),音声ファイルの編集・再生(Web Audio API)など,モダンブラウザが標準で備えている強力なAPI群をフルに活用しています.
  3. Canvas APIによる高速画像処理
    画像の切り抜き,リサイズ,フォーマット変換などは,すべてブラウザのCanvas上でピクセルデータを直接操作して処理しています.サーバーへのアップロード時間がゼロになるため,処理そのものも一瞬で完了します.

開発中に直面した課題と解決策

1.巨大なWasmファイルのビルド・デプロイ問題

OCRや音声解析などのライブラリを静的ビルドに含めると,Next.jsのビルド成果物に巨大な .wasm ファイルが含まれ,ホスティングサービスの容量制限やデプロイエラーを引き起こすことがありました.
これに対しては,不要な依存関係を排除し,デプロイ前に不要な重いWasmファイルをクリーンアップする前処理スクリプト(rm -f out/_next/static/media/ort-wasm-simd-threaded.jsep*.wasm など)を導入することで,軽量かつ高速な配信を維持できるようにしました.

2.外部APIとの連携におけるセキュリティとレート制限

名画ギャラリーなどのツールで外部の画像データを取得する際,ブラウザからの直接のフェッチではCORS制限やレート制限(429エラー)に衝突します.
これを解決するため,あらかじめビルド時に必要なリソースをローカルアセットとして保存し,完全に外部依存のない自己完結型の構成へと修正しました.これにより,表示速度の劇的な向上と安定性を両立しています.


まとめ

個人開発で180種類以上のセキュアなツール集を構築し,Cloudflare Pagesで運用することで,セキュリティとコストパフォーマンスを極限まで両立させることができました.
データの安全性が保証されたWebツールは,これからのリモートワーク時代においてエンジニアだけでなくすべてのビジネスパーソンにとって必須の存在です.

もし「こういうツールもブラウザ完結で動かしてほしい」といったご要望があれば,ぜひフィードバックをお寄せください.


3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?