クッキーなし・プライバシー最優先の開発者向け文字列変換ツールキット「string-is」

ひとことでいうと

string-is は、開発者が日常的に扱う文字列を手軽に変換・検証できる、オープンソースの Web ツールキットです。JSON の整形、JWT のデコード、Base64 の変換、URL エンコードなど、よく使う変換がブラウザ一つで完結します。最大の特徴は、クッキー（Cookie）を一切使わず、厳格なセキュリティ設定のもとで動作するため、機密性の高いデータも安心して貼り付けられる点です。Next.js と TypeScript で構築されており、入力した文字列のフォーマットを自動で判別して、最適な変換候補を提示してくれます。個人の開発作業から、セキュリティ要件の厳しい企業環境まで幅広く活用できます。

こんな人におすすめ

1. API のデバッグをよくするエンジニア

JWT（認証トークン）のデコードや JSON の整形・検証を素早く行いたいとき、ブラウザを開くだけで完結します。外部のサービスにデータを送信しない設計なので、認証情報が含まれるトークンも安心して貼り付けられます。「コピー&ペーストで試したいけど、情報が外に漏れないか心配」という場面にぴったりです。

2. セキュリティを重視する企業・チーム

社内規定でクッキーや外部トラッキングを禁止している環境でも、Docker（アプリをまとめて動かす仕組み）一つで自前のインスタンスを立ち上げられます。Vercel や Heroku へのワンクリックデプロイボタンも用意されており、数分で組織専用ツールとして運用を始めることができます。

3. オープンソースを学びたい開発者・学習者

変換ロジックが src/lib/ 以下に TypeScript として整理されており、React の深い知識がなくても新しい変換機能を追加できます。identity（フォーマット検出）→ input（解析）→ output（変換）→ converter（統合）という 4 層の明快な設計は、ソフトウェアの設計パターンを学ぶ教材としても非常に優れています。

インストール・使い方

ローカル環境（自分のパソコン）で起動する

ここでは「ターミナル（文字で命令を送る画面）」を使います。コマンドはそのままコピー&ペーストで実行できます。

Step 1: リポジトリ（ソースコードの置き場）を取得し、必要なライブラリをインストールします。

git clone https://github.com/recurser/string-is.git
cd string-is
yarn install

git clone でプロジェクト一式をダウンロードし、yarn install で動作に必要な部品をすべて揃えます。

Step 2: Git フックをセットアップします。

yarn husky install

Git フックとは、コードを保存する際に自動でチェックを走らせる仕組みです。コードを書いて貢献したい場合に役立ちます。

Step 3: 開発サーバーを起動してブラウザで確認します。

yarn dev

起動後、ブラウザで http://localhost:3000 を開くとツールが表示されます。localhost とは「自分のパソコン上」という意味です。

Docker を使って起動する（こちらが推奨）

Docker とは、アプリをまるごとパッケージ化して動かすツールです。環境の違いに左右されずに動かせるため、チームでの利用や本番環境への導入に向いています。

Step 1: Docker イメージ（アプリの設計図）をビルドします。

docker build -t string-is .

このコマンドで string-is という名前のイメージが作成されます。

Step 2: コンテナ（イメージから起動した実体）を立ち上げます。

docker run -p 3000:3000 string-is

-p 3000:3000 は「ポート（通信の入口）を繋げる」という指定です。起動後、同様に http://localhost:3000 でアクセスできます。

docker-compose を使う場合は、以下の一行で起動できます。

docker-compose up

サブパス（URLの一部）へのデプロイ

https://tools.example.com/string-is のように、ドメインの下の階層に配置したい場合は、ビルド時に環境変数を指定します。この値はビルド時に固定されるため、後から変更できない点に注意してください。

docker build -t string-is --build-arg NEXT_PUBLIC_BASE_PATH="/string-is" .
docker run -p 3000:3000 string-is

動かしてみた

リポジトリの構成を確認したところ、pages/ ディレクトリに Next.js のページが整然と並んでいました。[[...converter]].tsx というファイル一つが全変換ページを担当するダイナミックルート（動的なURL対応）になっており、シンプルながら柔軟な設計です。

pages/
  [[...converter]].tsx   # 全変換ページのダイナミックルート
  _app.tsx               # アプリ全体のルート
  _document.tsx          # HTMLドキュメントの構造
  about.tsx
  privacy.tsx
  terms.tsx
  security.tsx
  sitemap.xml.tsx
  robots.txt.tsx
.meta/
  121.md  122.md  123.md  ... （コンバーターのメタデータ）

.meta/ ディレクトリには各コンバーターのメタ情報が Markdown ファイルで管理されており、121.md から 327.md まで非常に多くの変換機能が定義されていることが確認できました。プロジェクト全体として TypeScript と Next.js の構成が整っており、ローカルでの開発から本番デプロイまでの流れがよく整備されています。

ブラウザで試す（デモ）

string-is の主な変換機能（JSON 整形、Base64 エンコード/デコード、URL エンコード/デコード、文字数カウントなど）を模した Gradio デモをブラウザ上で試すこともできます。実際のツールと同様の変換ロジックを Python で再実装したもので、インストールなしに各機能の動作感をすぐ体験できます。まずデモで雰囲気をつかんでから、本格的に導入するかどうか判断するという使い方もおすすめです。

実践のコツ：新しい変換機能を追加するはじめの一歩

string-is は 4 層のアーキテクチャ（設計の階層構造）によって、機能の追加がしやすくなっています。たとえば「テキストを逆順にする」変換を追加したい場合、次の順番でファイルを作成していきます。

Identity を実装する（src/lib/identities/）: 入力がどのフォーマットかを 0〜100 の確信度で返す関数を書きます。プレーンテキストなら既存の PlainIdentity を流用できます。
Output を実装する（src/lib/outputs/）: 入力文字列を受け取り、変換済みの文字列を返す関数を書きます。
Converter を実装する（src/lib/converters/）: Input と Output を繋ぐ処理と、使用する Output の ID をエクスポートします。
UI コンポーネントを追加する（src/components/domain/convert/outputs/）: 変換結果を画面に表示する部品を作ります。既存の JSON や YAML のコンポーネントを参考にすると早く作れます。
多言語ファイルを更新する（locales/en/pages-converter.json）: ランディングページ用の見出し・説明・サンプルを追記して完成です。

各層のファイルを index.ts でエクスポートすることも忘れずに行いましょう。

活用例

JWT のデバッグ: API 開発中に発行されたトークンをペーストしてヘッダーとペイロードを即座に確認できます。有効期限を示す exp クレームの読み取りも簡単です。
設定ファイルのフォーマット変換: YAML 形式で書いた設定を JSON に変換して別のツールに渡したり、逆に JSON を読みやすい YAML に整形してチームと共有したりできます。
Base64 画像の確認と生成: API レスポンスに含まれる Base64 エンコード済み画像をデコードして中身を確認したり、ファイルを Base64 に変換して HTML や CSS への埋め込み用文字列を生成したりできます。
社内専用のプライバシー安全ツール: ログや認証情報を含む文字列を外部サービスに貼り付けるリスクを避けて、セルフホストインスタンス（自前で立てたサーバー）で安全に処理できます。
オープンソース学習の題材: 4 層アーキテクチャの実装を読み解くことで、ソフトウェア設計の考え方を実際のコードから学べます。テストコードも整備されており、品質の高い TypeScript の書き方を身につける教材になります。
多言語対応ツールの自社展開: i18n（国際化）が組み込まれているため、日本語を含む複数言語での運用も見据えたカスタマイズが可能です。グローバルチームへの展開にも対応できます。

用語とポイント解説

Identity（アイデンティティ） 入力された文字列が「どのフォーマットか」を判定する検出器です。かんたんに言うと、「この文字列は JSON っぽい」「これは Base64 らしい」という確信度（0〜100）を返す判定役です。string-is が自動でフォーマットを見抜けるのは、この Identity の働きによるものです。

Input（インプット） 特定フォーマットの文字列を読み取り、プログラムが扱いやすいデータ（オブジェクト）に変換するモジュールです。かんたんに言うと、「生の文字列を解釈する翻訳係」のような役割です。Output と組み合わせて変換の入口を担います。

Output（アウトプット） 解析済みのデータを、指定のフォーマットの文字列に変換するモジュールです。かんたんに言うと、「データを目的の形に整えて出力する担当」です。JSON → YAML、JWT → 読みやすい構造体など、出力の種類ごとに独立したファイルで管理されています。

Converter（コンバーター） Input と Output を繋ぎ合わせる統合コードです。かんたんに言うと、「変換処理の本体を一箇所にまとめたもの」で、どの Input とどの Output を組み合わせるかを定義します。4 層アーキテクチャの中心的な役割を担います。

CSP（Content Security Policy） ブラウザに対して「このページはここからしかリソースを読み込まない」と宣言するセキュリティの設定です。かんたんに言うと、「外部の怪しいスクリプトを読み込ませないようにする門番」です。string-is は厳格な CSP を採用しており、意図しないデータ流出を防いでいます。

Next.js（ネクストジェイエス） React（UI を作るライブラリ）をベースにした Web フレームワーク（開発の土台）です。かんたんに言うと、「React をより便利に使えるようにした開発基盤」で、ページのルーティング、サーバーサイドレンダリング、国際化などが最初から組み込まれています。string-is はこの Next.js の上に構築されています。

i18n（アイエイティーン） Internationalization（国際化）の略で、アプリを複数の言語に対応させる仕組みです。かんたんに言うと、「日本語・英語・フランス語など、いろんな言葉でツールを使えるようにする機能」のことです。string-is では locales/ ディレクトリに各言語のテキストが管理されています。

Docker（ドッカー） アプリとその動作環境をひとつにまとめて持ち運べるようにするツールです。かんたんに言うと、「アプリ専用の箱に全部詰め込んで、どこでも同じように動かせるようにする仕組み」です。string-is は Docker に対応しており、自前サーバーへの簡単なデプロイが可能です。

Plausible Analytics（プローザブルアナリティクス） クッキーを使わないプライバシーフレンドリーなアクセス解析サービスです。かんたんに言うと、「訪問者を追跡せずにページの閲覧数だけを計測できる、普通のアクセス解析ツールの代わり」です。string-is のプライバシー方針と合致したアクセス計測手段として採用されています。

SSR（Server-Side Rendering） サーバー側でページの HTML を生成してからブラウザに送る方式です。かんたんに言うと、「表示の準備をサーバーでやっておくことで、ブラウザでの表示を速くする技術」です。Next.js が標準でサポートしており、string-is のページ表示の高速化に寄与しています。

string-is はインストールから機能拡張まで一貫して開発者に寄り添った設計になっており、すぐに実務で使い始めることができます。ぜひ JWT デバッグや社内向けプライバシー安全ツールの構築などに活用してみてはいかがでしょうか。