AIがwebで使えるツール集を作った[Next.js]

はじめに

Copilotを積極的に活用し、通常よりも短期間で「PocketALL」というWebアプリを完成させることができました。的確なコード提案のおかげで、初心者ながらも複雑な実装にチャレンジでき、学習と開発を同時に進めることができました。このアプリは、日常的によく使う便利ツールを一箇所にまとめ、ブラウザ上で手軽に利用できるよう設計しています。

実装した機能

現在、PocketALLには以下の4つの機能を実装しています：

1. QRコード生成

URLやテキストを入力するだけで、すぐにQRコードが生成できる機能です。生成したQRコードは画像としてダウンロードも可能です。

実装には qrcode.react ライブラリを使用し、入力内容に応じてリアルタイムでQRコードが更新される仕組みにしました。

2. 画像透過

アップロードした画像の背景を自動的に透過させる機能です。特に商品画像やアイコン作成時に便利です。

この機能は @imgly/background-removal ライブラリを活用し、AIを使って画像から背景を自動検出・除去します。ユーザーインターフェースには以下の要素を実装しています：

• ドラッグ&ドロップによる画像アップロード
• 処理中のリアルタイム進捗表示
• Web Share API対応（モバイル端末での共有に最適）

ブラウザ上で完結する設計のため、ユーザーの画像はサーバーに送信されることなく、プライバシーを保ちながら高品質な透過処理を実現しています。

3. 画像圧縮

高解像度の画像をWebに適した形式・サイズに圧縮する機能です。アップロードした画像を、品質を保ちながらファイルサイズを削減します。

browser-image-compression ライブラリを活用し、圧縮率と品質のバランスを調整できるUIを設けました。以下のような特徴があります：

• スライダーによる圧縮品質調整: 1%〜100%の範囲で画質とファイルサイズのバランスを簡単に調整
• 出力解像度の選択: 400pxの小サイズから8K(7680px)まで、用途に合わせた解像度を選択可能
• 複数の出力形式: JPEG、PNG、WebPの3形式から選択可能
• 圧縮効果の可視化: 元のサイズ、圧縮後サイズ、削減率をリアルタイム表示
• ドラッグ＆ドロップ対応: ブラウザへの簡単なファイルアップロード
• レスポンシブUI: モバイル端末でも使いやすいインターフェース

モバイル端末では、Web Share APIを利用して圧縮した画像を他のアプリに直接共有できる機能も実装しました。PCブラウザでは通常のダウンロード機能が使用されます。

4. 単位変換

長さ、重さ、温度など様々な単位を相互に変換できる機能です。日常のちょっとした計算に便利です。

この機能は自作の変換ロジックを使い、React Hooksを活用して状態管理を行っています。以下のような特徴があります：

• 複数のカテゴリー対応: 長さ、重さ、温度、面積、体積など様々な単位系に対応
• 直感的なインターフェース: 変換元と変換先の単位をドロップダウンで簡単に選択
• リアルタイム変換: 入力値が変わると即座に変換結果が表示される
• 単位の入れ替え機能: ボタン一つで変換元と変換先を入れ替え可能
• よく使われる変換: カテゴリーごとによく使われる変換パターンをワンクリックで適用

変換ロジックは基準単位（SI単位系など）を介して計算することで、あらゆる単位間の正確な変換を実現しています。例えば、長さであればメートル、重さであればキログラムを基準単位として、各単位からの変換関数を定義しています。

アプリケーション内で独自のデータ構造を設計し、各単位カテゴリーに以下の情報を持たせています：

{
  id: "length",
  name: "長さ",
  units: [
    {
      id: "m",
      name: "メートル (m)",
      toBase: (value) => value,         // 基準単位への変換関数
      fromBase: (value) => value        // 基準単位からの変換関数
    },
    {
      id: "km",
      name: "キロメートル (km)",
      toBase: (value) => value * 1000,
      fromBase: (value) => value / 1000
    },
    // 他の単位...
  ],
  commonConversions: [["m", "ft"], ["km", "mile"]] // よく使われる変換
}

技術スタック

PocketALLは以下の技術を使って構築しています：

• フロントエンド: Next.js (React)
• 言語: TypeScript
• スタイリング: Tailwind CSS + daisyUI
• デプロイ: Vercel

開発で学んだこと

GitHub Copilotを活用することで、開発時間を大幅に短縮できましたが、同時にAIとの協業の仕方も学びました。特に、明確な指示をコメントとして書くことで、より適切なコード提案が得られることがわかりました。また、Copilotが生成したコードを理解し、必要に応じて修正する過程で、技術的な理解も深まりました。

今後の展望

まだまだ改善の余地はありますが、少しずつ機能を拡張していきたいと思います。

おわりに

この記事も、Github Copilotが8割程生成してくれました。

制作したPocketALLは、下記のURLからアクセスできます。ぜひお試しください。

URL: PocketALL

ソースコード

GitHubでソースコードを公開しています。
GitHub: PocketALL