会員サイト

/**
 * App InventorからのPOSTリクエストを処理するメイン関数
 * @param {Object} e - App Inventorから送信されるイベントオブジェクト
 * @returns {ContentService.TextOutput} - 処理結果（新しい画像のBase64文字列 or エラーメッセージ）をJSON形式で返す
 */
function doPost(e) {
  // レスポンスの基本構造
  let response = {
    status: 'error',
    message: 'An unknown error occurred.',
    imageData: null
  };

  try {
    // POSTされたJSONデータをパース
    if (!e || !e.postData || !e.postData.contents) {
      throw new Error('Invalid request: No data received.');
    }
    const jsonData = JSON.parse(e.postData.contents);
    const base64Data = jsonData.imageData;
    const artist = jsonData.artist;
    const prompt = jsonData.prompt || `写真自体の特徴は一切変更しないで、${artist}風に描いて。言葉での返答は不要`;

    // 入力データの検証
    if (!base64Data || typeof base64Data !== 'string') {
      throw new Error('Invalid request: imageData is missing or not a string.');
    }

    // Base64データからヘッダーを削除
    const cleanedBase64 = cleanBase64String(base64Data);

    // スクリプトプロパティからAPIキーを取得
    const apiKey = PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
    if (!apiKey) {
      throw new Error('Configuration error: API key is not set in Script Properties.');
    }

    // Gemini APIを呼び出して新しい画像を生成
    const generatedBase64 = callGeminiApi(apiKey, cleanedBase64, prompt);

    // 成功レスポンスを作成
    response = {
      status: 'success',
      message: 'Image generated successfully.',
      prompt: prompt,
      imageData: generatedBase64
    };

  } catch (error) {
    // エラーレスポンスを作成
    console.error(error.toString());
    response.message = error.message;
  }

  // 結果をJSON形式で返す
  return ContentService.createTextOutput(JSON.stringify(response))
    .setMimeType(ContentService.MimeType.JSON);
}

/**
 * Base64文字列からヘッダー部分（例: "data:image/png;base64,"）を削除する
 * @param {string} base64String - 元のBase64文字列
 * @returns {string} - ヘッダーが削除されたBase64文字列
 */
function cleanBase64String(base64String) {
  // "data:[<mime-type>];base64," という形式のヘッダーを正規表現で探して削除
  return base64String.replace(/^data:image\/[a-z]+;base64,/, '');
}

/**
 * Gemini API (Image Generation) を呼び出して画像を生成する
 * @param {string} apiKey - Google AI StudioのAPIキー
 * @param {string} base64Image - 解析・改良の元となる画像のBase64文字列
 * @param {string} prompt - 画像をどのように改良するかを指定する指示文
 * @returns {string} - 生成された新しい画像のBase64文字列
 */
function callGeminiApi(apiKey, base64Image, prompt) {
  // Geminiの画像生成モデルのエンドポイント
  const model = 'gemini-2.5-flash-image-preview';
  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;

  // APIに送信するペイロード（リクエストボディ）
  const payload = {
    contents: [{
      parts: [
        // 1. 指示テキスト
        { text: prompt },
        // 2. 入力画像
        {
          inlineData: {
            mimeType: 'image/png', // App InventorのCanvasはPNG形式
            data: base64Image
          }
        }
      ]
    }],
    generationConfig: {
      // レスポンスとして画像とテキストの両方を要求する
      responseModalities: ['IMAGE', 'TEXT'] 
    },
  };

  // APIリクエストのオプション
  const options = {
    method: 'post',
    contentType: 'application/json',
    payload: JSON.stringify(payload),
    muteHttpExceptions: true // HTTPエラー時に例外をスローさせず、レスポンスを直接受け取る
  };

  // APIにリクエストを送信
  const response = UrlFetchApp.fetch(url, options);
  const responseCode = response.getResponseCode();
  const responseBody = response.getContentText();

  // レスポンスを解析
  if (responseCode === 200) {
    const jsonResponse = JSON.parse(responseBody);
    
    // レスポンスの中から画像データ部分を探す
    const imagePart = jsonResponse?.candidates?.[0]?.content?.parts?.find(p => p.inlineData);
    
    if (imagePart && imagePart.inlineData.data) {
      // 画像のBase64データを返す
      return imagePart.inlineData.data;
    } else {
      // 画像が見つからない場合のエラー
      console.error('API response did not contain image data. Response: ' + responseBody);
      // テキスト部分があれば、それをエラーメッセージとして利用
      const textPart = jsonResponse?.candidates?.[0]?.content?.parts?.find(p => p.text);
      const errorMessage = textPart ? textPart.text : 'No image data in response.';
      throw new Error(`API Error: ${errorMessage}`);
    }
  } else {
    // APIがエラーを返した場合
    console.error('API Error. Code: ' + responseCode + '. Body: ' + responseBody);
    throw new Error(`API request failed with status code ${responseCode}. Details: ${responseBody}`);
  }
}

//
//  ContentView.swift
//
//  DoodlePlus (SwiftUI port)
//  - MIT App Inventor 2 版の「Canvas + 色選択 + 太さ選択 + 消しゴム + 全消去」をSwiftUIで再現
//  - 初心者向けに、できるだけ丁寧にコメントしています。
//  - App Inventor のコンポーネント/ブロック対応をコード中に明記。
//  - 透明消去(アルファ抜き)ではなく「白で上書きする」方式の消しゴムで、AI2の挙動に近づけています。
//    （※本格的な透明消去をしたい場合は Core Graphics のブレンドモード destinationOut などの応用が必要）
//

import SwiftUI

// MARK: - モデル定義（AI2で言うところの「変数」や「状態」）
//
// App Inventor 対応：
// - PaintColor（Canvasの描画色）→ selectedColor
// - LineWidth   （線の太さ）    → selectedWidth
// - 消しゴムモード               → isEraser
// - 描いた線の履歴               → strokes（各ストロークは points の配列）
//

/// 線1本（ストローク）を表すモデル
struct Stroke: Identifiable {
    let id = UUID()
    var points: [CGPoint]     // 線を構成する点列（指でなぞった座標）
    var color: Color          // 線の色（消しゴムなら Color.white）
    var lineWidth: CGFloat    // 線の太さ
}

/// アプリ全体の状態
final class DrawingState: ObservableObject {
    // 現在の選択色（AI2: Canvas.PaintColor）
    @Published var selectedColor: Color = .black
    // 現在の線の太さ（AI2: Canvas.LineWidth）
    @Published var selectedWidth: CGFloat = 6
    // 消しゴムモード（AI2: 「消しゴムボタン選択」プロシージャで true/false を切替）
    @Published var isEraser: Bool = false

    // これまでに描いた全ストローク（AI2: DrawLine を積み重ねるイメージ）
    @Published var strokes: [Stroke] = []
    // ドラッグ中の「現在のストローク」（指を離したら strokes に確定追加）
    @Published var currentStroke: Stroke? = nil

    // 画面全消去（AI2: Canvas.Clear）
    func clear() {
        strokes.removeAll()
        currentStroke = nil
    }
}

// MARK: - SwiftUI 版 Canvas（AI2: Canvas コンポーネントに相当）
//
// - SwiftUI の Canvas/Path を使って、strokes と currentStroke を描画します。
// - App Inventor の Canvas.DrawLine(block) 相当の処理は、points を連結して Path にしています。
//
struct DrawingCanvas: View {
    @ObservedObject var state: DrawingState

    var body: some View {
        GeometryReader { geo in
            ZStack {
                // 背景は白（AI2: Canvas の BackgroundColor に相当）
                Color.white
                    .ignoresSafeArea()

                // これまでに描いたストロークを全部描画
                ForEach(state.strokes) { stroke in
                    Path { path in
                        guard let first = stroke.points.first else { return }
                        path.move(to: first)
                        for p in stroke.points.dropFirst() {
                            path.addLine(to: p)
                        }
                    }
                    .stroke(stroke.color, lineWidth: stroke.lineWidth)
                }

                // ドラッグ中のストロークもプレビュー表示
                if let stroke = state.currentStroke {
                    Path { path in
                        guard let first = stroke.points.first else { return }
                        path.move(to: first)
                        for p in stroke.points.dropFirst() {
                            path.addLine(to: p)
                        }
                    }
                    .stroke(stroke.color, lineWidth: stroke.lineWidth)
                }
            }
            // ジェスチャ：指でなぞる → 点を追加 → 指を離したら確定
            // App Inventor 対応：
            //   - Canvas.Dragged(prevX, prevY, currentX, currentY) で DrawLine しているのと同等
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { value in
                        // ドラッグが始まったら currentStroke を作成（色/太さは現在の選択）
                        if state.currentStroke == nil {
                            let color = state.isEraser ? Color.white : state.selectedColor
                            state.currentStroke = Stroke(points: [value.location], color: color, lineWidth: state.selectedWidth)
                        } else {
                            // すでに作成済みなら座標を追加
                            state.currentStroke?.points.append(value.location)
                        }
                    }
                    .onEnded { value in
                        // 指を離したら確定（strokes に追加）し、currentStroke をクリア
                        if var stroke = state.currentStroke {
                            stroke.points.append(value.location)
                            state.strokes.append(stroke)
                        }
                        state.currentStroke = nil
                    }
            )
        }
    }
}

// MARK: - メインビュー（AI2: Screen1 に相当）
//
// 画面構成（要件/UI要件に基づく）
//  - 上部：描画用 Canvas
//  - 下部：3つの水平行（HStack）
//      1行目：色選択（黒/青/緑/赤）→ PaintColor 切替
//      2行目：太さ選択（細/中/太）→ LineWidth 切替
//      3行目：消しゴムトグル / 画面消去 → isEraser 切替 / Canvas.Clear
//
struct ContentView: View {
    @StateObject private var state = DrawingState()

    // 太さの候補（AI2: 「細/中/太」）
    private let widthOptions: [(label: String, value: CGFloat)] = [
        ("細", 4),
        ("中", 8),
        ("太", 14)
    ]

    // 色の候補（AI2: 「黒/青/緑/赤」）
    private let colorOptions: [(label: String, value: Color)] = [
        ("黒", .black),
        ("青", .blue),
        ("緑", .green),
        ("赤", .red)
    ]

    var body: some View {
        VStack(spacing: 0) {
            // 1) Canvas 領域（要件: 画面の大部分）
            DrawingCanvas(state: state)
                .overlay(alignment: .topLeading) {
                    // シンプルなタイトル（AI2: Screen1.Title）
                    Text("DoodlePlus")
                        .font(.headline)
                        .padding(8)
                        .background(.ultraThinMaterial)
                        .cornerRadius(8)
                        .padding(8)
                        .accessibilityHidden(true)
                }

            Divider()

            // 2) 下部パネル：3段構成
            VStack(spacing: 8) {
                // --- 行1: 色選択（AI2: 色ボタン群 + 「色ボタン選択/リセット」プロシージャに対応）---
                controlRow(title: "色", content: {
                    HStack {
                        ForEach(colorOptions, id: \.label) { opt in
                            Button {
                                // 色選択：PaintColor を更新、かつ消しゴムモードは OFF
                                state.selectedColor = opt.value
                                state.isEraser = false
                            } label: {
                                HStack(spacing: 6) {
                                    Circle()
                                        .fill(opt.value)
                                        .frame(width: 18, height: 18)
                                    Text(opt.label)
                                    // 選択中マーク（AI2: チェック記号の代替として表示）
                                    if !state.isEraser && state.selectedColor.description == opt.value.description {
                                        Image(systemName: "checkmark")
                                    }
                                }
                                .padding(.horizontal, 10)
                                .padding(.vertical, 8)
                                .background(
                                    // 選択中は控えめに強調
                                    (!state.isEraser && state.selectedColor.description == opt.value.description) ?
                                        Color.secondary.opacity(0.15) : Color.clear
                                )
                                .cornerRadius(10)
                            }
                            .accessibilityLabel(Text("色 \(opt.label)"))
                        }
                    }
                })

                // --- 行2: 太さ選択（AI2: 太さボタン群 + 「太さボタン選択/リセット」プロシージャに対応）---
                controlRow(title: "太さ", content: {
                    HStack {
                        ForEach(widthOptions, id: \.label) { opt in
                            Button {
                                state.selectedWidth = opt.value
                            } label: {
                                HStack(spacing: 8) {
                                    // 太さプレビュー
                                    Capsule()
                                        .frame(width: 28, height: max(4, opt.value / 1.6))
                                    Text(opt.label)
                                    if state.selectedWidth == opt.value {
                                        Image(systemName: "checkmark")
                                    }
                                }
                                .padding(.horizontal, 10)
                                .padding(.vertical, 8)
                                .background(
                                    (state.selectedWidth == opt.value) ?
                                        Color.secondary.opacity(0.15) : Color.clear
                                )
                                .cornerRadius(10)
                            }
                            .accessibilityLabel(Text("太さ \(opt.label)"))
                        }
                    }
                })

                // --- 行3: ユーティリティ（AI2: 消しゴム / 画面消去ボタン）---
                controlRow(title: "操作", content: {
                    HStack {
                        // 消しゴム（AI2: 消しゴムボタン選択 → isEraser = true、UI強調）
                        Button {
                            state.isEraser.toggle()
                        } label: {
                            Label("消しゴム", systemImage: state.isEraser ? "eraser.fill" : "eraser")
                                .padding(.horizontal, 12)
                                .padding(.vertical, 10)
                                .background(state.isEraser ? Color.secondary.opacity(0.2) : Color.clear)
                                .cornerRadius(10)
                        }
                        .accessibilityLabel(Text("消しゴム"))
                        .accessibilityHint(Text("オンにすると白い線で上書きして消せます"))

                        Spacer(minLength: 12)

                        // 画面消去（AI2: Canvas.Clear）
                        Button(role: .destructive) {
                            state.clear()
                        } label: {
                            Label("画面消去", systemImage: "trash")
                                .padding(.horizontal, 12)
                                .padding(.vertical, 10)
                                .background(Color.red.opacity(0.12))
                                .cornerRadius(10)
                        }
                        .accessibilityLabel(Text("画面消去"))
                        .accessibilityHint(Text("キャンバスをすべてクリアします"))
                    }
                })
            }
            .padding(12)
            .background(.ultraThinMaterial)
        }
        .preferredColorScheme(.light) // 背景白に合わせた見え方重視（任意）
    }

    // 下部各行のラッパー（タイトル＋内容）
    private func controlRow<Content: View>(title: String, @ViewBuilder content: () -> Content) -> some View {
        VStack(alignment: .leading, spacing: 6) {
            Text(title)
                .font(.subheadline).bold()
                .accessibilityHidden(true)
            content()
        }
    }
}

// MARK: - プレビュー
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 15")
    }
}

/**
 * App InventorからのPOSTリクエストを処理するメイン関数
 * @param {Object} e - App Inventorから送信されるイベントオブジェクト
 * @returns {ContentService.TextOutput} - 処理結果（新しい画像のBase64文字列 or エラーメッセージ）をJSON形式で返す
 */
function doPost(e) {
  // レスポンスの基本構造
  let response = {
    status: 'error',
    message: 'An unknown error occurred.',
    imageData: null
  };

  try {
    // POSTされたJSONデータをパース
    if (!e || !e.postData || !e.postData.contents) {
      throw new Error('Invalid request: No data received.');
    }
    const jsonData = JSON.parse(e.postData.contents);
    const base64Data = jsonData.imageData;
    const characer = jsonData.characer;
    const prompt = jsonData.prompt || `全身写真にしてから顔自体は一切変更しないで、${characer}でコスプレして。言葉での返答は不要`;

    // 入力データの検証
    if (!base64Data || typeof base64Data !== 'string') {
      throw new Error('Invalid request: imageData is missing or not a string.');
    }

    // Base64データからヘッダーを削除
    const cleanedBase64 = cleanBase64String(base64Data);

    // スクリプトプロパティからAPIキーを取得
    const apiKey = PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
    if (!apiKey) {
      throw new Error('Configuration error: API key is not set in Script Properties.');
    }

    // Gemini APIを呼び出して新しい画像を生成
    const generatedBase64 = callGeminiApi(apiKey, cleanedBase64, prompt);

    // 成功レスポンスを作成
    response = {
      status: 'success',
      message: 'Image generated successfully.',
      prompt: prompt,
      imageData: generatedBase64
    };

  } catch (error) {
    // エラーレスポンスを作成
    console.error(error.toString());
    response.message = error.message;
  }

  // 結果をJSON形式で返す
  return ContentService.createTextOutput(JSON.stringify(response))
    .setMimeType(ContentService.MimeType.JSON);
}

/**
 * Base64文字列からヘッダー部分（例: "data:image/png;base64,"）を削除する
 * @param {string} base64String - 元のBase64文字列
 * @returns {string} - ヘッダーが削除されたBase64文字列
 */
function cleanBase64String(base64String) {
  // "data:[<mime-type>];base64," という形式のヘッダーを正規表現で探して削除
  return base64String.replace(/^data:image\/[a-z]+;base64,/, '');
}

/**
 * Gemini API (Image Generation) を呼び出して画像を生成する
 * @param {string} apiKey - Google AI StudioのAPIキー
 * @param {string} base64Image - 解析・改良の元となる画像のBase64文字列
 * @param {string} prompt - 画像をどのように改良するかを指定する指示文
 * @returns {string} - 生成された新しい画像のBase64文字列
 */
function callGeminiApi(apiKey, base64Image, prompt) {
  // Geminiの画像生成モデルのエンドポイント
  const model = 'gemini-2.5-flash-image-preview';
  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;

  // APIに送信するペイロード（リクエストボディ）
  const payload = {
    contents: [{
      parts: [
        // 1. 指示テキスト
        { text: prompt },
        // 2. 入力画像
        {
          inlineData: {
            mimeType: 'image/png', // App InventorのCanvasはPNG形式
            data: base64Image
          }
        }
      ]
    }],
    generationConfig: {
      // レスポンスとして画像とテキストの両方を要求する
      responseModalities: ['IMAGE', 'TEXT'] 
    },
  };

  // APIリクエストのオプション
  const options = {
    method: 'post',
    contentType: 'application/json',
    payload: JSON.stringify(payload),
    muteHttpExceptions: true // HTTPエラー時に例外をスローさせず、レスポンスを直接受け取る
  };

  // APIにリクエストを送信
  const response = UrlFetchApp.fetch(url, options);
  const responseCode = response.getResponseCode();
  const responseBody = response.getContentText();

  // レスポンスを解析
  if (responseCode === 200) {
    const jsonResponse = JSON.parse(responseBody);
    
    // レスポンスの中から画像データ部分を探す
    const imagePart = jsonResponse?.candidates?.[0]?.content?.parts?.find(p => p.inlineData);
    
    if (imagePart && imagePart.inlineData.data) {
      // 画像のBase64データを返す
      return imagePart.inlineData.data;
    } else {
      // 画像が見つからない場合のエラー
      console.error('API response did not contain image data. Response: ' + responseBody);
      // テキスト部分があれば、それをエラーメッセージとして利用
      const textPart = jsonResponse?.candidates?.[0]?.content?.parts?.find(p => p.text);
      const errorMessage = textPart ? textPart.text : 'No image data in response.';
      throw new Error(`API Error: ${errorMessage}`);
    }
  } else {
    // APIがエラーを返した場合
    console.error('API Error. Code: ' + responseCode + '. Body: ' + responseBody);
    throw new Error(`API request failed with status code ${responseCode}. Details: ${responseBody}`);
  }
}

/**
 * App InventorからのPOSTリクエストを処理するメイン関数
 * @param {Object} e - App Inventorから送信されるイベントオブジェクト
 * @returns {ContentService.TextOutput} - 処理結果（新しい画像のBase64文字列 or エラーメッセージ）をJSON形式で返す
 */
function doPost(e) {
  // レスポンスの基本構造
  let response = {
    status: 'error',
    message: 'An unknown error occurred.',
    imageData: null
  };

  try {
    // POSTされたJSONデータをパース
    if (!e || !e.postData || !e.postData.contents) {
      throw new Error('Invalid request: No data received.');
    }
    const jsonData = JSON.parse(e.postData.contents);
    const base64Data = jsonData.imageData;
// expression には表情が入っている。「笑った顔」など
    const expression = jsonData.expression;
    const prompt = jsonData.prompt || `この写真が顔写真ならば${expression}に変換して画像を戻して。言葉での返答は不要だから画像を戻して`;

    // 入力データの検証
    if (!base64Data || typeof base64Data !== 'string') {
      throw new Error('Invalid request: imageData is missing or not a string.');
    }

    // Base64データからヘッダーを削除
    const cleanedBase64 = cleanBase64String(base64Data);

    // スクリプトプロパティからAPIキーを取得
    const apiKey = PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
    if (!apiKey) {
      throw new Error('Configuration error: API key is not set in Script Properties.');
    }

    // Gemini APIを呼び出して新しい画像を生成
    const generatedBase64 = callGeminiApi(apiKey, cleanedBase64, prompt);

    // 成功レスポンスを作成
    response = {
      status: 'success',
      message: 'Image generated successfully.',
      prompt: prompt,
      imageData: generatedBase64
    };

  } catch (error) {
    // エラーレスポンスを作成
    console.error(error.toString());
    response.message = error.message;
  }

  // 結果をJSON形式で返す
  return ContentService.createTextOutput(JSON.stringify(response))
    .setMimeType(ContentService.MimeType.JSON);
}

/**
 * Base64文字列からヘッダー部分（例: "data:image/png;base64,"）を削除する
 * @param {string} base64String - 元のBase64文字列
 * @returns {string} - ヘッダーが削除されたBase64文字列
 */
function cleanBase64String(base64String) {
  // "data:[<mime-type>];base64," という形式のヘッダーを正規表現で探して削除
  return base64String.replace(/^data:image\/[a-z]+;base64,/, '');
}

/**
 * Gemini API (Image Generation) を呼び出して画像を生成する
 * @param {string} apiKey - Google AI StudioのAPIキー
 * @param {string} base64Image - 解析・改良の元となる画像のBase64文字列
 * @param {string} prompt - 画像をどのように改良するかを指定する指示文
 * @returns {string} - 生成された新しい画像のBase64文字列
 */
function callGeminiApi(apiKey, base64Image, prompt) {
  // Geminiの画像生成モデルのエンドポイント
  const model = 'gemini-2.5-flash-image-preview';
  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;

  // APIに送信するペイロード（リクエストボディ）
  const payload = {
    contents: [{
      parts: [
        // 1. 指示テキスト
        { text: prompt },
        // 2. 入力画像
        {
          inlineData: {
            mimeType: 'image/png', // App InventorのCanvasはPNG形式
            data: base64Image
          }
        }
      ]
    }],
    generationConfig: {
      // レスポンスとして画像とテキストの両方を要求する
      responseModalities: ['IMAGE', 'TEXT'] 
    },
  };

  // APIリクエストのオプション
  const options = {
    method: 'post',
    contentType: 'application/json',
    payload: JSON.stringify(payload),
    muteHttpExceptions: true // HTTPエラー時に例外をスローさせず、レスポンスを直接受け取る
  };

  // APIにリクエストを送信
  const response = UrlFetchApp.fetch(url, options);
  const responseCode = response.getResponseCode();
  const responseBody = response.getContentText();

  // レスポンスを解析
  if (responseCode === 200) {
    const jsonResponse = JSON.parse(responseBody);
    
    // レスポンスの中から画像データ部分を探す
    const imagePart = jsonResponse?.candidates?.[0]?.content?.parts?.find(p => p.inlineData);
    
    if (imagePart && imagePart.inlineData.data) {
      // 画像のBase64データを返す
      return imagePart.inlineData.data;
    } else {
      // 画像が見つからない場合のエラー
      console.error('API response did not contain image data. Response: ' + responseBody);
      // テキスト部分があれば、それをエラーメッセージとして利用
      const textPart = jsonResponse?.candidates?.[0]?.content?.parts?.find(p => p.text);
      const errorMessage = textPart ? textPart.text : 'No image data in response.';
      throw new Error(`API Error: ${errorMessage}`);
    }
  } else {
    // APIがエラーを返した場合
    console.error('API Error. Code: ' + responseCode + '. Body: ' + responseBody);
    throw new Error(`API request failed with status code ${responseCode}. Details: ${responseBody}`);
  }
}

/**
 * App InventorからのPOSTリクエストを処理する関数
 * @param {Object} e - App Inventorから送信されるイベントオブジェクト
 * @return {ContentService.TextOutput} - Gemini APIからの結果をJSON形式で返す
 */
function doPost(e) {
  // エラーハンドリング
  try {
    // 1. App Inventorから送信されたJSONデータを解析
    const postData = JSON.parse(e.postData.contents);
    const base64Image = postData.image; // App Inventor側で "image" というキーに設定

    // 2. スクリプトプロパティからAPIキーを読み込む
    const API_KEY = PropertiesService.getScriptProperties().getProperty('API_KEY');
    if (!API_KEY) {
      return createErrorResponse('APIキーが設定されていません。');
    }

    // 3. Gemini APIのエンドポイントURL
    const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=${API_KEY}`;
  
    // 4. Gemini APIに送信するリクエストボディを作成
    const payload = {
      "contents": [{
        "parts": [{
          "text": "画像を解析してください。  まず、ランドマークや観光地が写っている場合は正式な地名を含めてください。  そうでない場合は人物を確認し、有名人（俳優・女優・著名人）であればその人物名を含めてください。  最後に、写真全体の内容を200文字以内で自然な文章として解説してください。  出力は必ず一つの段落の文章で返答してください。箇条書きは禁止です。"
        }, {
          "inline_data": {
            "mime_type": "image/png", // App InventorのCanvasはPNG形式
            "data": base64Image
          }
        }]
      }]
    };

    // 5. Gemini APIにリクエストを送信するための設定
    const options = {
      'method': 'post',
      'contentType': 'application/json',
      'payload': JSON.stringify(payload),
      'muteHttpExceptions': true // エラーレスポンスを例外ではなくオブジェクトとして取得
    };

    // 6. APIにリクエストを送信
    const response = UrlFetchApp.fetch(API_URL, options);
    const responseCode = response.getResponseCode();
    const responseBody = response.getContentText();

    if (responseCode !== 200) {
       return createErrorResponse(`APIリクエストエラー: ${responseCode} ${responseBody}`);
    }
    
    // 7. APIからのレスポンスを解析
    const resultJson = JSON.parse(responseBody);
    
    // レスポンスの構造をチェックし、テキスト部分を取得
    let generatedText = "解析結果を取得できませんでした。";
    if (resultJson.candidates && resultJson.candidates.length > 0 &&
        resultJson.candidates[0].content && resultJson.candidates[0].content.parts &&
        resultJson.candidates[0].content.parts.length > 0) {
      generatedText = resultJson.candidates[0].content.parts[0].text;
    } else {
       // Geminiからのレスポンスが期待した形式でない場合
       return createErrorResponse(`予期しないAPIレスポンス形式です: ${responseBody}`);
    }

    // 8. App Inventorに返すJSONを作成
    const output = JSON.stringify({
      "status": "success",
      "result": generatedText
    });

    // 9. 結果をJSON形式で返す
    return ContentService.createTextOutput(output).setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    // スクリプト全体で発生したエラーをキャッチ
    return createErrorResponse(`スクリプトエラー: ${error.toString()}`);
  }
}

/**
 * エラーレスポンスを生成するヘルパー関数
 * @param {string} message - エラーメッセージ
 * @return {ContentService.TextOutput} - エラー情報を格納したJSONオブジェクト
 */
function createErrorResponse(message) {
  const errorOutput = JSON.stringify({
    "status": "error",
    "message": message
  });
  return ContentService.createTextOutput(errorOutput).setMimeType(ContentService.MimeType.JSON);
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DoodlePlus (JavaScript 版)</title>
  <style>
    /* =============================
       シンプルな見た目のためのCSS
       ============================= */
    :root {
      --primary: #3f51b5; /* App Inventor プロジェクト設定のPrimary色に合わせた雰囲気 */
      --accent: #ff4081;
      --bg: #ffffff;
      --text: #222;
      --muted: #888;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
    main { display: grid; grid-template-rows: auto 1fr; height: 100%; }
    header { padding: .5rem .75rem; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: .75rem; }
    header h1 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--primary); }

    /* ツールバー（App Inventorの「水平配置」に相当） */
    #toolbar { display: flex; gap: .75rem; padding: .5rem; border-bottom: 1px solid #eee; flex-wrap: wrap; }
    .group { display: flex; gap: .5rem; align-items: center; }
    .group-label { font-size: .85rem; color: var(--muted); }

    /* ボタン（App InventorのButtonに相当） */
    button { appearance: none; border: 1px solid #ddd; background: #fff; color: #222; padding: .4rem .6rem; border-radius: .5rem; cursor: pointer; font-size: .95rem; }
    button:focus { outline: 2px solid #d0d8ff; outline-offset: 2px; }
    button.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(63,81,181,0.12) inset; }

    /* 色ボタンは背景色で色を示す。選択状態はチェックマークで表現（App InventorのTextに"✔︎"を出すのに対応） */
    .color-btn { width: 44px; height: 32px; border-radius: .5rem; position: relative; }
    .color-btn .check { position: absolute; right: 6px; top: 4px; font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); display: none; }
    .color-btn.selected .check { display: block; }

    /* 太さボタンは選択中を赤文字（App InventorのTextColor=赤）で表す */
    .thick-btn.selected { color: #d32f2f; font-weight: 700; }

    /* アクションボタン */
    #eraser.selected { background: #fafafa; border-color: #bbb; }
    #clear { border-color: #ffe0e0; }

    /* キャンバス（App InventorのCanvasに相当） */
    #stage-wrap { position: relative; }
    #stage { width: 100%; height: 100%; display: block; background: #fff; touch-action: none; /* ジェスチャーでのスクロール/ズームを抑制 */ }

    /* 小さなヘルプ */
    footer { padding: .35rem .75rem; font-size: .8rem; color: var(--muted); border-top: 1px solid #eee; }
  </style>
</head>
<body>
  <main>
    <!-- App Inventor: Screen1.Title 相当 -->
    <header>
      <h1>お絵かきアプリ+（DoodlePlus / JS版）</h1>
      <span style="font-size:.85rem;color:#888">App Inventorのブロック構成をJavaScript実装に写経</span>
    </header>

    <!-- App Inventor: 水平配置1/2/3 をまとめたツールバー -->
    <div id="toolbar" role="toolbar" aria-label="Drawing toolbar">
      <!-- 色ボタン群（水平配置1） -->
      <div class="group" id="colors" aria-label="colors">
        <span class="group-label">色:</span>
        <button class="color-btn" id="btn-black"  data-color="#000000" title="黒" aria-pressed="true" style="background:#000000"><span class="check">✔︎</span></button>
        <button class="color-btn" id="btn-blue"   data-color="#0000ff" title="青" style="background:#0000ff"><span class="check">✔︎</span></button>
        <button class="color-btn" id="btn-green"  data-color="#00ff00" title="グリーン" style="background:#00ff00"><span class="check">✔︎</span></button>
        <button class="color-btn" id="btn-red"    data-color="#ff0000" title="赤" style="background:#ff0000"><span class="check">✔︎</span></button>
      </div>

      <!-- 太さボタン群（水平配置2） -->
      <div class="group" id="thickness" aria-label="thickness">
        <span class="group-label">太さ:</span>
        <button class="thick-btn" id="btn-thin"   data-width="3">細</button>
        <button class="thick-btn" id="btn-medium" data-width="5">中</button>
      </div>

      <!-- アクション群（水平配置3） -->
      <div class="group" id="actions" aria-label="actions">
        <button id="clear" title="画面消去 (Canvas.Clear)">画面消去</button>
        <button id="eraser" title="消しゴム (白で描く)">消しゴム</button>
      </div>
    </div>

    <!-- キャンバス領域（Canvas） -->
    <div id="stage-wrap">
      <canvas id="stage"></canvas>
    </div>

    <footer>
      ヒント: ドラッグして線を描画。色を押すと消しゴムは解除されます（App Inventorの仕様を踏襲）。
    </footer>
  </main>

  <script>
    // =============================================================
    //  App Inventorの状態と手続きをJavaScriptで表現
    // =============================================================
    // ▼App Inventorでのグローバル変数に相当
    //   - 選択色ボタン（Button参照）
    //   - 色ボタンリスト
    //   - ペン太さ（Button参照）
    //   - 太さボタンリスト
    //   - 太さリスト [3.0, 5.0]
    //   - 消しゴム（boolean）

    const colorButtons = [
      document.getElementById('btn-black'),
      document.getElementById('btn-blue'),
      document.getElementById('btn-green'),
      document.getElementById('btn-red')
    ];
    let selectedColorButton = colorButtons[0]; // 既定は「黒」

    const thicknessButtons = [
      document.getElementById('btn-thin'),
      document.getElementById('btn-medium')
    ];
    const thicknessList = [3, 5]; // App Inventor: 太さリスト [3.0, 5.0]
    let selectedThicknessButton = thicknessButtons[0]; // 既定は「細」

    let eraser = false; // 消しゴムモードかどうか

    // ▼Canvas関連
    const canvas = document.getElementById('stage');
    const ctx = canvas.getContext('2d');

    // 高DPIでもクッキリ描けるように、CSSサイズと内部ピクセルを分けて設定
    function resizeCanvasToDisplaySize() {
      const dpr = window.devicePixelRatio || 1;
      const rect = canvas.getBoundingClientRect();
      const width = Math.floor(rect.width * dpr);
      const height = Math.floor(rect.height * dpr);
      if (canvas.width !== width || canvas.height !== height) {
        // 既存の描画は消えるので、必要ならイメージを保持してからリサイズしてください。
        const img = ctx.getImageData(0, 0, canvas.width, canvas.height);
        canvas.width = width;
        canvas.height = height;
        ctx.putImageData(img, 0, 0); // 単純復元（拡大縮小はしない）
        ctx.scale(dpr, dpr); // 以降の描画はCSSピクセル基準
      }
      // 背景が透明になっている場合、白で塗りつぶしてApp Inventorの見た目に合せる
      // （初回のみ塗る・クリア時は別処理）
    }

    // レイアウト: ツールバーを除いた残りの領域いっぱいにキャンバスを広げる
    function layout() {
      const headerH = document.querySelector('header').offsetHeight;
      const toolbarH = document.getElementById('toolbar').offsetHeight;
      const footerH = document.querySelector('footer').offsetHeight;
      const wrap = document.getElementById('stage-wrap');
      wrap.style.height = `calc(100vh - ${headerH + toolbarH + footerH}px)`;
      resizeCanvasToDisplaySize();
    }

    window.addEventListener('resize', layout);

    // =============================================================
    //  App Inventor: 手続き（procedures）の移植
    // =============================================================
    // 手続き: 色ボタンリセット（全ボタンから✔︎を外す）
    function resetColorButtons() {
      colorButtons.forEach(btn => btn.classList.remove('selected'));
      colorButtons.forEach(btn => btn.setAttribute('aria-pressed', 'false'));
    }

    // 手続き: 色ボタン選択(ボタン)
    function selectColorButton(btn) {
      // App Inventor: 選択色ボタン.TextColor=白 相当 → ここではUI強調として✔︎表示
      btn.classList.add('selected');
      btn.setAttribute('aria-pressed', 'true');
      selectedColorButton = btn;

      // キャンバスの線色（PaintColor）を更新
      updateStrokeStyle();
    }

    // 手続き: 太さボタンリセット（全ボタンのTextColor=黒 相当）
    function resetThicknessButtons() {
      thicknessButtons.forEach(btn => btn.classList.remove('selected'));
    }

    // 手続き: 太さボタン選択(ボタン)
    function selectThicknessButton(btn) {
      btn.classList.add('selected'); // App Inventor: TextColor=赤 相当
      selectedThicknessButton = btn;
      // LineWidthを更新
      updateLineWidth();
    }

    // 手続き: 消しゴムボタン選択（トグル）
    function toggleEraser() {
      eraser = !eraser;
      document.getElementById('eraser').classList.toggle('selected', eraser);
      updateStrokeStyle(); // PaintColorを白 or 選択色へ
    }

    // 付帯: 線色を状態に合わせて更新
    function updateStrokeStyle() {
      if (eraser) {
        ctx.strokeStyle = '#ffffff'; // App Inventor: 白で上書き
      } else {
        ctx.strokeStyle = selectedColorButton.dataset.color;
      }
    }

    // 付帯: 線の太さを状態に合わせて更新
    function updateLineWidth() {
      const w = Number(selectedThicknessButton.dataset.width) || thicknessList[0];
      ctx.lineWidth = w;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
    }

    // 付帯: 画面消去（Canvas.Clear）
    function clearCanvas() {
      // 背景を白で塗りつぶし、App InventorのCanvas.Clearに近い見た目に
      ctx.save();
      ctx.setTransform(1,0,0,1,0,0); // 変換を一時的にリセット
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // 白背景
      ctx.fillStyle = '#ffffff';
      const rect = canvas.getBoundingClientRect();
      ctx.fillRect(0, 0, rect.width, rect.height);
      ctx.restore();
    }

    // =============================================================
    //  App Inventor: Screen1.Initialize 相当（初期化）
    // =============================================================
    function initialize() {
      layout();
      // 既定の選択状態をApp Inventorと同じにする
      resetColorButtons();
      selectColorButton(selectedColorButton); // 黒

      resetThicknessButtons();
      selectThicknessButton(selectedThicknessButton); // 細(3px)

      // 背景を白で初期化
      clearCanvas();
    }

    // =============================================================
    //  App Inventor: Any Button.Click 相当のイベント分岐
    // =============================================================
    function onButtonClick(e) {
      const el = e.target.closest('button');
      if (!el) return;

      if (colorButtons.includes(el)) {
        // 色ボタン: 色ボタンリセット → 消しゴム=false → 色ボタン選択
        resetColorButtons();
        eraser = false;
        document.getElementById('eraser').classList.remove('selected');
        selectColorButton(el);
        return;
      }

      if (thicknessButtons.includes(el)) {
        // 太さボタン: 太さボタンリセット → 太さボタン選択
        resetThicknessButtons();
        selectThicknessButton(el);
        return;
      }

      if (el.id === 'clear') {
        clearCanvas();
        return;
      }

      if (el.id === 'eraser') {
        toggleEraser();
        return;
      }
    }

    document.getElementById('toolbar').addEventListener('click', onButtonClick);

    // =============================================================
    //  App Inventor: Canvas.Dragged(prevX, prevY, currentX, currentY)
    //  → JSではPointer Eventsで実装
    // =============================================================
    let drawing = false;
    let last = { x: 0, y: 0 };

    function toCanvasCoords(evt) {
      const rect = canvas.getBoundingClientRect();
      const x = (evt.clientX - rect.left);
      const y = (evt.clientY - rect.top);
      return { x, y };
    }

    function pointerDown(evt) {
      drawing = true;
      last = toCanvasCoords(evt);
    }

    function pointerMove(evt) {
      if (!drawing) return;
      const p = toCanvasCoords(evt);
      // Canvas.DrawLine(prevX, prevY, x, y) 相当
      ctx.beginPath();
      ctx.moveTo(last.x, last.y);
      ctx.lineTo(p.x, p.y);
      ctx.stroke();
      last = p;
    }

    function pointerUp() {
      drawing = false;
    }

    canvas.addEventListener('pointerdown', pointerDown);
    canvas.addEventListener('pointermove', pointerMove);
    window.addEventListener('pointerup', pointerUp);

    // スクロールなどで外に出た場合の保険
    canvas.addEventListener('pointerleave', pointerUp);

    // =============================================================
    // 起動
    // =============================================================
    initialize();
  </script>
</body>
</html>

/**
 * App InventorからのGETリクエストを処理するメイン関数
 * @param {object} e - App Inventorから渡されるイベントオブジェクト
 * @returns {ContentService.TextOutput} - 観光地情報のJSONまたはエラーメッセージ
 */
function doGet(e) {
  // レスポンスのMIMEタイプをJSONに設定
  const response = ContentService.createTextOutput();
  response.setMimeType(ContentService.MimeType.JSON);

  try {
    // クエリパラメータから緯度、経度、半径を取得
    const lat = e.parameter.latitude;
    const lon = e.parameter.longitude;
    const radius = e.parameter.radius;

    // パラメータが不足している場合はエラーを返す
    if (!lat || !lon || !radius) {
      response.setContent(JSON.stringify({
        error: "パラメータが不足しています。'latitude', 'longitude', 'radius'が必要です。"
      }));
      return response;
    }

    // Gemini APIを呼び出して観光地情報を取得
    const touristSpots = getTouristSpots(lat, lon, radius);
    
    // 取得した情報をJSON形式で返す
    response.setContent(JSON.stringify(touristSpots));

  } catch (error) {
    // エラーが発生した場合、エラーメッセージをJSONで返す
    response.setContent(JSON.stringify({
      error: "データの取得中にエラーが発生しました。",
      details: error.message
    }));
  }

  return response;
}

/**
 * Gemini APIを呼び出して、指定された座標周辺の観光地情報を取得する
 * @param {number} latitude - 中心の緯度
 * @param {number} longitude - 中心の経度
 * @param {number} radius - 検索半径（メートル）
 * @returns {Array<Object>} - 観光地のリスト
 */
function getTouristSpots(latitude, longitude, radius) {
  // スクリプトプロパティからAPIキーを読み込む
  const API_KEY = PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
  if (!API_KEY) {
    throw new Error("APIキーがスクリプトプロパティに設定されていません。");
  }

  const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${API_KEY}`;

  // Geminiに渡すプロンプト（指示文）- 緯度経度が不要なことを明記
  const prompt = `
あなたは優秀なローカルツアーガイドです。
以下の中心座標と半径の範囲内にある観光地を最大5件まで探してください。
結果は必ず指定されたJSON形式で、名前と住所と200文字以内の説明のみを含めてください。緯度と経度は不要です。

中心緯度: ${latitude}
中心経度: ${longitude}
半径: ${radius}メートル
`;

  // Gemini APIに送信するデータ（ペイロード）- responseSchemaから緯度経度を削除
  const payload = {
    "contents": [{
      "parts": [{
        "text": prompt
      }]
    }],
    "generationConfig": {
      "responseMimeType": "application/json",
      "responseSchema": {
        "type": "ARRAY",
        "items": {
          "type": "OBJECT",
          "properties": {
            "name": { "type": "STRING", "description": "観光地の名前" },
            "address": { "type": "STRING", "description": "観光地の住所" },
            "desc": { "type": "STRING", "description": "観光地の説明" }
          },
          "required": ["name", "address"]
        }
      }
    }
  };

  // APIリクエストのオプション
  const options = {
    'method': 'post',
    'contentType': 'application/json',
    'payload': JSON.stringify(payload),
    'muteHttpExceptions': true // HTTPエラー時もレスポンスを返す
  };

  // APIを呼び出す
  const response = UrlFetchApp.fetch(API_URL, options);
  const responseCode = response.getResponseCode();
  const responseBody = response.getContentText();

  if (responseCode !== 200) {
    throw new Error(`APIリクエストに失敗しました。ステータスコード: ${responseCode}, レスポンス: ${responseBody}`);
  }
  
  // レスポンスからJSON部分を抽出してパースする
  const result = JSON.parse(responseBody);
  const jsonText = result.candidates[0].content.parts[0].text;
  
  return JSON.parse(jsonText);
}

はい、承知いたしました。App Inventorから呼び出すためのGoogle Apps Scriptを作成します。

このスクリプトは、指定された緯度・経度・半径を基に、Gemini 2.5 Flashモデルを使用して周辺の観光地情報を最大5件取得し、JSON形式で返します。

以下に、Google Apps Scriptのコードと、その設定方法を説明します。

1. Google Apps Scriptの準備
まず、Google Apps Scriptプロジェクトを準備する手順を説明します。

/**
 * App InventorからのGETリクエストを処理するメイン関数
 * @param {object} e - App Inventorから渡されるイベントオブジェクト
 * @returns {ContentService.TextOutput} - 観光地情報のJSONまたはエラーメッセージ
 */
function doGet(e) {
  // レスポンスのMIMEタイプをJSONに設定
  const response = ContentService.createTextOutput();
  response.setMimeType(ContentService.MimeType.JSON);

  try {
    // クエリパラメータから緯度、経度、半径を取得
    const lat = e.parameter.latitude;
    const lon = e.parameter.longitude;
    const radius = e.parameter.radius;

    // パラメータが不足している場合はエラーを返す
    if (!lat || !lon || !radius) {
      response.setContent(JSON.stringify({
        error: "パラメータが不足しています。'latitude', 'longitude', 'radius'が必要です。"
      }));
      return response;
    }

    // Gemini APIを呼び出して観光地情報を取得
    const touristSpots = getTouristSpots(lat, lon, radius);
    
    // 取得した情報をJSON形式で返す
    response.setContent(JSON.stringify(touristSpots));

  } catch (error) {
    // エラーが発生した場合、エラーメッセージをJSONで返す
    response.setContent(JSON.stringify({
      error: "データの取得中にエラーが発生しました。",
      details: error.message
    }));
  }

  return response;
}

/**
 * Gemini APIを呼び出して、指定された座標周辺の観光地情報を取得する
 * @param {number} latitude - 中心の緯度
 * @param {number} longitude - 中心の経度
 * @param {number} radius - 検索半径（メートル）
 * @returns {Array<Object>} - 観光地のリスト
 */
function getTouristSpots(latitude, longitude, radius) {
  // スクリプトプロパティからAPIキーを読み込む
  const API_KEY = PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
  if (!API_KEY) {
    throw new Error("APIキーがスクリプトプロパティに設定されていません。");
  }

  const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${API_KEY}`;

  // Geminiに渡すプロンプト（指示文）
  const prompt = `
あなたは優秀なローカルツアーガイドです。
以下の中心座標と半径の範囲内にある観光地を最大5件まで探してください。
結果は必ず指定されたJSON形式で、名前、住所、緯度、経度を含めてください。

中心緯度: ${latitude}
中心経度: ${longitude}
半径: ${radius}メートル
`;

  // Gemini APIに送信するデータ（ペイロード）
  const payload = {
    "contents": [{
      "parts": [{
        "text": prompt
      }]
    }],
    "generationConfig": {
      "responseMimeType": "application/json",
      "responseSchema": {
        "type": "ARRAY",
        "items": {
          "type": "OBJECT",
          "properties": {
            "name": { "type": "STRING", "description": "観光地の名前" },
            "address": { "type": "STRING", "description": "観光地の住所" },
            "latitude": { "type": "NUMBER", "description": "観光地の緯度" },
            "longitude": { "type": "NUMBER", "description": "観光地の経度" }
          },
          "required": ["name", "address", "latitude", "longitude"]
        }
      }
    }
  };

  // APIリクエストのオプション
  const options = {
    'method': 'post',
    'contentType': 'application/json',
    'payload': JSON.stringify(payload),
    'muteHttpExceptions': true // HTTPエラー時もレスポンスを返す
  };

  // APIを呼び出す
  const response = UrlFetchApp.fetch(API_URL, options);
  const responseCode = response.getResponseCode();
  const responseBody = response.getContentText();

  if (responseCode !== 200) {
    throw new Error(`APIリクエストに失敗しました。ステータスコード: ${responseCode}, レスポンス: ${responseBody}`);
  }
  
  // レスポンスからJSON部分を抽出してパースする
  const result = JSON.parse(responseBody);
  const jsonText = result.candidates[0].content.parts[0].text;
  
  return JSON.parse(jsonText);
}

App InventorとGoogle AIのGeminiモデルを連携させるためのGoogle Apps Script(GAS)ですね。承知いたしました。

App Inventorから送られてくる手描きの絵（Base64文字列）をGemini APIで解析・改良し、新しい画像を生成してApp Inventorに返すためのGASコードを作成します。

このスクリプトは、以下の処理を行います。

POSTリクエストの受付: App Inventorから送信されたJSONデータ（画像データとプロンプトを含む）を受け取ります。

Base64データの整形: 受け取ったBase64文字列から不要なヘッダー（data:image/png;base64,など）を削除します。

Gemini APIの呼び出し:

スクリプトプロパティに保存されたAPIキーを安全に読み込みます。

入力された画像とプロンプトをgemini-2.0-flash-preview-image-generationモデルに送信し、画像の改良を依頼します。このモデルは、入力画像を解釈し、指示に基づいて新しい画像を生成できます。

結果の返却: 生成された新しい画像のBase64文字列をJSON形式でApp Inventorに返します。

以下のドキュメントに、GASのコードと設定方法の詳細を記載します。

/**
 * App InventorからのPOSTリクエストを処理するメイン関数
 * @param {Object} e - App Inventorから送信されるイベントオブジェクト
 * @returns {ContentService.TextOutput} - 処理結果（新しい画像のBase64文字列 or エラーメッセージ）をJSON形式で返す
 */
function doPost(e) {
  // レスポンスの基本構造
  let response = {
    status: 'error',
    message: 'An unknown error occurred.',
    imageData: null
  };

  try {
    // POSTされたJSONデータをパース
    if (!e || !e.postData || !e.postData.contents) {
      throw new Error('Invalid request: No data received.');
    }
    const jsonData = JSON.parse(e.postData.contents);
    const base64Data = jsonData.imageData;
    const prompt = jsonData.prompt || 'この手描きの絵を、より洗練された高品質なデジタルアートにしてください。';

    // 入力データの検証
    if (!base64Data || typeof base64Data !== 'string') {
      throw new Error('Invalid request: imageData is missing or not a string.');
    }

    // Base64データからヘッダーを削除
    const cleanedBase64 = cleanBase64String(base64Data);

    // スクリプトプロパティからAPIキーを取得
    const apiKey = PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
    if (!apiKey) {
      throw new Error('Configuration error: API key is not set in Script Properties.');
    }

    // Gemini APIを呼び出して新しい画像を生成
    const generatedBase64 = callGeminiApi(apiKey, cleanedBase64, prompt);

    // 成功レスポンスを作成
    response = {
      status: 'success',
      message: 'Image generated successfully.',
      imageData: generatedBase64
    };

  } catch (error) {
    // エラーレスポンスを作成
    console.error(error.toString());
    response.message = error.message;
  }

  // 結果をJSON形式で返す
  return ContentService.createTextOutput(JSON.stringify(response))
    .setMimeType(ContentService.MimeType.JSON);
}

/**
 * Base64文字列からヘッダー部分（例: "data:image/png;base64,"）を削除する
 * @param {string} base64String - 元のBase64文字列
 * @returns {string} - ヘッダーが削除されたBase64文字列
 */
function cleanBase64String(base64String) {
  // "data:[<mime-type>];base64," という形式のヘッダーを正規表現で探して削除
  return base64String.replace(/^data:image\/[a-z]+;base64,/, '');
}

/**
 * Gemini API (Image Generation) を呼び出して画像を生成する
 * @param {string} apiKey - Google AI StudioのAPIキー
 * @param {string} base64Image - 解析・改良の元となる画像のBase64文字列
 * @param {string} prompt - 画像をどのように改良するかを指定する指示文
 * @returns {string} - 生成された新しい画像のBase64文字列
 */
function callGeminiApi(apiKey, base64Image, prompt) {
  // Geminiの画像生成モデルのエンドポイント
  const model = 'gemini-2.0-flash-preview-image-generation';
  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;

  // APIに送信するペイロード（リクエストボディ）
  const payload = {
    contents: [{
      parts: [
        // 1. 指示テキスト
        { text: prompt },
        // 2. 入力画像
        {
          inlineData: {
            mimeType: 'image/png', // App InventorのCanvasはPNG形式
            data: base64Image
          }
        }
      ]
    }],
    generationConfig: {
      // レスポンスとして画像とテキストの両方を要求する
      responseModalities: ['IMAGE', 'TEXT'] 
    },
  };

  // APIリクエストのオプション
  const options = {
    method: 'post',
    contentType: 'application/json',
    payload: JSON.stringify(payload),
    muteHttpExceptions: true // HTTPエラー時に例外をスローさせず、レスポンスを直接受け取る
  };

  // APIにリクエストを送信
  const response = UrlFetchApp.fetch(url, options);
  const responseCode = response.getResponseCode();
  const responseBody = response.getContentText();

  // レスポンスを解析
  if (responseCode === 200) {
    const jsonResponse = JSON.parse(responseBody);
    
    // レスポンスの中から画像データ部分を探す
    const imagePart = jsonResponse?.candidates?.[0]?.content?.parts?.find(p => p.inlineData);
    
    if (imagePart && imagePart.inlineData.data) {
      // 画像のBase64データを返す
      return imagePart.inlineData.data;
    } else {
      // 画像が見つからない場合のエラー
      console.error('API response did not contain image data. Response: ' + responseBody);
      // テキスト部分があれば、それをエラーメッセージとして利用
      const textPart = jsonResponse?.candidates?.[0]?.content?.parts?.find(p => p.text);
      const errorMessage = textPart ? textPart.text : 'No image data in response.';
      throw new Error(`API Error: ${errorMessage}`);
    }
  } else {
    // APIがエラーを返した場合
    console.error('API Error. Code: ' + responseCode + '. Body: ' + responseBody);
    throw new Error(`API request failed with status code ${responseCode}. Details: ${responseBody}`);
  }
}