【初心者向け】MonacaアプリでGemini APIを活用した単語帳生成機能の実装方法

AIや機械学習がトレンドとあって、各社からさまざまなサービスが登場しています。特に大規模言語モデル（LLM）はChatGPTの登場以降、どうビジネスやアプリの中で活かすかが議論されています。その中でも、GoogleのGemini APIは、高性能で使いやすいツールとして知られています。

このチュートリアルでは、英単語を入力すると、その単語の日本語訳、定義、品詞、例文、関連語をGemini APIを使って自動生成するアプリを作成します。

準備

このチュートリアルを始める前に、以下の準備が必要です：

Monacaアカウント：まだお持ちでない方は、Monacaの公式サイトで無料アカウントを作成できます。
Googleアカウント：Gemini APIを使用するために必要です。

ステップ1：Gemini APIキーの取得

まず、Gemini APIを使用するためのAPIキーを取得します。

Google AI for Developersにアクセスします。
右上のログインボタンをクリックし、Googleアカウントでログインします。
Get API keyページに移動します。
「APIキーを作成」ボタンをクリックして、新しいAPIキーを作成します。
- 初めての場合、Google Cloud Projectの作成を求められることがあります。指示に従って作成してください。
生成されたAPIキーをメモしておきます。このキーは後で使用します。

注意：APIキーは秘密情報です。他人と共有したり、公開リポジトリにアップロードしたりしないでください。

ステップ2：Monacaプロジェクトのインポート

GitHubから提供されたプロジェクトをMonacaにインポートします。
以下の手順に従ってください：

まず、以下のURLからプロジェクトをダウンロードします：
https://github.com/monaca-samples/gemini-english-word-maker
ページ右側の「Code」ボタンをクリックし、「Download ZIP」を選択してZIPファイルをダウンロードします。
Monacaにログインし、ダッシュボードを開きます。
ダッシュボード上部の「インポート」ボタンをクリックします。
インポート方法で「ZIP」を選択します。
プロジェクト名を確認し、必要に応じて変更します（例：「GeminiWordApp」）。
「インポート」ボタンをクリックしてプロジェクトをインポートします。

これで、GitHubから提供されたGemini English Word MakerプロジェクトがMonacaにインポートされ、すぐに利用可能な状態になります。このプロジェクトには既にFramework7が含まれており、Gemini APIを使用するための基本的な設定も行われています。

次のステップでは、このプロジェクトの内容を確認し、必要に応じて調整を行っていきます。

ステップ3：必要なパッケージのインストール

ターミナル（コマンドプロンプト）を開き、解凍したプロジェクトフォルダに移動します。
そして、以下のコマンドを実行して必要なパッケージをインストールします。

npm install @google/generative-ai

これにより、プロジェクトの依存関係と@google/generative-ai パッケージがインストールされます。

ステップ4：Gemini APIの初期化

Gemini APIを初期化するスクリプトを作成します。

www/js フォルダ内に gemini.js ファイルを新規作成します。
以下のコードを gemini.js に追加します：

import { GoogleGenerativeAI } from "@google/generative-ai";

const API_KEY = "YOUR_GEMINI_API_KEY"; // ここに実際のAPIキーを入力してください
const genAI = new GoogleGenerativeAI(API_KEY);

window.geminiModel = genAI.getGenerativeModel({
    model: "gemini-1.5-flash",
    generationConfig: {
        responseMimeType: "application/json"
    }
});

このコードの説明：

import { GoogleGenerativeAI } from "@google/generative-ai"; は、Gemini APIを使用するためのライブラリをインポートします。
API_KEY には、ステップ1で取得したAPIキーを入力します。
genAI.getGenerativeModel() で、使用するGeminiモデルを指定します。ここでは高速な「gemini-1.5-flash」モデルを使用します。
responseMimeType: "application/json" は、APIからの応答をJSON形式で受け取るように指定します。
window.geminiModel として保存することで、アプリ全体からこのモデルにアクセスできるようになります。

ステップ5：ルーティングの設定

アプリ内のページ遷移を管理するルーティングを設定します。

www/js/routes.js ファイルを開きます。
以下のようにコードを変更します：

// URLパスごとに対応する画面をルートを指定します
var routes = [
  {
    path: "/", // ルートパス（アプリケーションのホームページ）
    componentUrl: "./pages/word.html", // このルートに対応するコンポーネントのURL
  }
];

export default routes;

この設定により、アプリを開いたときに word.html ページが表示されるようになります。

ステップ6：単語生成画面の作成

単語データを生成・表示する画面を作成します。
www/pages フォルダ内に word.html ファイルを新規作成します。
画面の主要箇所は、単語を入力するフォームと生成された単語データを表示する テーブル です。

入力フォーム

<form class="list list-strong-ios list-dividers-ios list-outline-ios">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">単語</div>
          <div class="item-input-wrap">
            <input type="text" name="word" placeholder="英単語を入力してください" value="" />
          </div>
        </div>
      </div>
    </li>
  </ul>
  <!-- 生成ボタン -->
  <div class="block block-strong grid grid-gap">
    <a class="button button-fill convert-form-to-data" href="#" @click=${send}>単語データ生成</a>
  </div>
</form>

このフォームは単語入力欄と生成ボタンを含んでいます：

input 要素は実際のテキスト入力欄です。name="word" 属性は、JavaScriptでこの入力欄を特定するのに使用されます。
生成ボタンは a タグで作成され、@click=${send} 属性により、クリック時に send 関数が呼び出されます。

生成の結果表示テーブル

<div class="data-table">
  <table>
    <tbody>
      <tr>
        <th nowrap>日本語名</th>
        <td>${data.japanese}</td>
      </tr>
      <!-- 他の行も同様 -->
    </tbody>
  </table>
</div>

この部分は、Gemini APIから生成された単語データを整理して表示するテーブルです。

Framework7のテーブルスタイルを適用するため、data-tableクラスが使用されています。テーブルの各行は、日本語名、品詞、定義などのデータ種類とその対応する値を表示するように構成されています。

値の表示には、テンプレート構文である${data.xxx}形式で、JavaScriptのdataオブジェクトから動的に値を取得し表示することができます。

(data.references || []).join(', ')は、関連語データが存在しない場合に空の配列を使用し、データが存在する場合はカンマで区切って表示するという柔軟な処理を行います。

ステップ7：単語データ生成スクリプト

このスクリプトは、ユーザーが入力した英単語に基づいて、Gemini APIを使用して単語データを生成する機能を実装しています。

以下、コードの各部分を詳しく解説します。

<script>
export default function (props, {$f7, $on, $update, $onMounted }) {
    // データオブジェクトの初期化
    let data = {};

    // 単語データ生成関数
    const send = async (e) => {
        // 入力された単語を取得
        const word = document.querySelector('[name="word"]').value;
        if (word === '') return;  // 単語が空の場合は処理を中止
        console.log({ word });

        // Geminiモデルに送信するプロンプトを作成
        const prompt = `${word}について、下記の情報をJSONで返してください
        - 日本語名（日本語）: japaneseというキー
        - 定義（英語）: definition というキー
        - 品詞（日本語）: parts というキー
        - 例文（英語）: example というキー
        - 関連語（英語）: references というキーで、配列にて
        `;

        // Geminiモデルにリクエストを送信
        const res = await geminiModel.generateContent([prompt]);
        try {
            // レスポンスをJSONとしてパース
            data = JSON.parse(res.response.candidates[0].content.parts[0].text);
            $update();  // UIを更新
        } catch (e) {
            // パースに失敗した場合、dataを空オブジェクトにリセット
            data = {};
        }
        $update();  // UIを再度更新
    };

    return $render;
}
</script>

データの初期化

let data = {};

data 変数は、Gemini APIから取得したデータを保存するためのオブジェクトです。最初は空のオブジェクトとして初期化されています。この変数は、APIからの応答を受け取った後に更新され、画面に表示されるデータとなります。

単語データ生成関数

const send = async (e) => {
    // ... (関数の中身)
};

send 関数は、「単語データ生成」ボタンがクリックされたときに実行される非同期関数です。async キーワードは、この関数が非同期処理（APIリクエストなど）を含むことを示しています。

入力された単語の取得

const word = document.querySelector("[name="word"]").value;
if (word === "") return;
console.log({ word });

この部分では、入力フィールドから単語を取得しています。document.querySelector('[name="word"]') で入力フィールドを選択し、その value を取得します。単語が空の場合は処理を中止します。

プロンプトの作成

const prompt = `${word}について、下記の情報をJSONで返してください
// ... (プロンプトの内容)
`;

ここでは、Gemini APIに送信するプロンプトを作成しています。プロンプトには、入力された単語と、APIに要求する情報の形式が含まれています。このプロンプトは、APIがJSONフォーマットで特定の情報を返すように指示しています。

APIリクエストの送信と応答の処理

const res = await geminiModel.generateContent([prompt]);
try {
    data = JSON.parse(res.response.candidates[0].content.parts[0].text);
    $update();
} catch (e) {
    data = {};
}
$update();

この部分が、APIとのやり取りのメイン部分です：