Zenn
🕌

【個人開発】AIを利用した文章変換アプリ

に公開
AI
JavaScript
Next.js
個人開発
Gemini API
tech


サイトURL >> https://ai-text-changer.vercel.app/

動機

生成AiのAPIを活用して簡単なアプリケーションを作りたかった

技術スタック

  • Next.js 15
  • JavaScript
  • vercel
  • gemini-1.5-flash (最も応答が早い)
  • cousor (開発環境)

機能

  • gemini-apiを使用して、入力された文章をテーマに沿って変換
  • 変換した文章をXでそのままポスト可能
  • Web Share API を使って共有も可能

使い方

  1. 入力エリアに文章を入力
  2. テーマを選択（現在４種類）し変換を実行
  3. 変換された文章を任意で修正
  4. X,その他アプリで共有

コード解説

変換処理

const simulateAIConversion = async (text) => {
  const themePrompt = getThemePrompt(selectedTheme);
  const GEMINI_API_KEY = process.env.NEXT_PUBLIC_GEMINI_API_KEY;
  
  if (!GEMINI_API_KEY) {
    throw new Error('APIキーが設定されていません');
  }
  
  const url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=' + GEMINI_API_KEY;
  const requestBody = {
    contents: [
      {
        parts: [
          {
            text: `${themePrompt}\n\n文章: ${text}\n\n変換後の文章のみを出力してください。`
          }
        ]
      }
    ],
    generationConfig: {
      temperature: 0.7,
      topK: 40,
      topP: 0.95,
      maxOutputTokens: 1024,
    }
  };

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(requestBody)
    });
    
    if (!response.ok) {
      throw new Error('APIリクエスト失敗: ' + response.status);
    }
    
    const data = await response.json();
    const result = data.candidates?.[0]?.content?.parts?.[0]?.text || '変換結果が取得できませんでした';
    return result;
  } catch (error) {
    console.error('Gemini APIエラー:', error);
    throw error;
  }
};
  • getThemePrompt()関数を用いて設定されたテーマから、AIに渡す指示文を取得
  • 入力さらた文章と指示文を組み合わせて、Geminiに渡す指示内容を作成
  • generationConfig内でテキスト生成モデルの出力挙動を制御

ポスト処理

  const handlePost = () => {
    if (!resultText) return;
    const postUrl = `https://x.com/intent/tweet?text=${encodeURIComponent(resultText)}`;
    window.open(postUrl, '_blank');
  };
  • window.open(url,オプション) を使用して新規タブで(_blankの場合)ポストページを開く

共有処理

  const handleShare = async () => {
    if (!resultText) return;
    
    if (navigator.share) {
      await navigator.share({
        text: resultText,
      });
    } else {
      await navigator.clipboard.writeText(resultText);
      showMessage('クリップボードにコピーしました', 'success');
    }
  };
  • web share api を使用
  • navigater.share() でtitle,text,urlを設定 (今回はtextのみ共有)

振り返り

実は、今回のコードの大部分はCoursorが書いたものだ。Coursorでどれだけ開発時間を短縮できるのか試してみたいと思い使用したが、アイデアだけでアプリが作れる時代になってしまったと改めて実感。コーディングをどこまでAIに任せていいのか、今のところ結論は出ていないがエラー対処についてはAIを使うのが一番早くて正確だと感じている。
技術的な観点から振り返ると、今回はGemini-apiを利用してテキスト生成のみを行ったが、次開発では画像生成、画像読み取りなど、他生成AIのAPIも利用して機能を拡張していこうと思う。

Discussion