Ollama実践ガイド｜GUIからCLI・API活用まで解説

はじめに：ローカルAIで開発が変わる

「開発中にChatGPTのAPI料金が気になる...」「機密情報をクラウドに送るのは心配...」そんな悩み、僕も最初はすごく感じていました。特に、プロトタイプ開発中に何度もAIに質問すると、あっという間にAPI使用料が膨らんでしまうんですよね。

Ollamaを使えば、高性能なAIを完全にローカル環境で動かせるため、これらの問題を一気に解決できます。僕も実際に使ってみて、開発効率が大幅に向上したので、今回はその実践的な活用方法を、GUI操作からCLI・API活用まで一緒に学んでいきましょう。

この記事で学べること

Ollamaの基本概念：なぜローカルAIが開発者に重要なのか
GUI版の使い方：直感的なモデル管理とチャット機能
CLI操作：コマンドラインでの効率的なモデル運用
API連携の基礎：REST APIの基本とエンドポイント
基本的なAPI使用例：JavaScript・Pythonでの実装方法
チャット履歴機能：会話の継続性を持つシステム構築
モデル選択：用途に応じた最適なモデルの見つけ方
実践的な開発例：動作するWebアプリケーションの構築

Ollamaって何？ローカルで動くAIがすごい

▶なんでOllamaが話題になってるの？

Ollamaは、大規模言語モデル（LLM）を自分のPCで動かせるオープンソースのツールです。要するにChatGPTみたいなAIを、自分のパソコンの中だけで使えるということなんです。

開発者にとってのメリット：

プライバシー完璧：機密情報が外部に送信されることは一切ありません
コスト削減：API料金を気にせず開発・テストが可能
オフライン環境：ネット接続なしでも AI 機能を利用
カスタマイズ自由：用途に応じたモデル選択・パラメータ調整

Important

企業の機密情報やソースコードを安心してAIに相談できるのが、Ollamaの最大の価値です。

▶GUIが出てきて、僕たち開発者も始めやすくなった

2025年7月18日にリリースされたv0.10.0から、Ollamaに GUI が追加されました：

セットアップが簡単：コマンド不要でインストール・初期設定可能
直感的なモデル管理：ダウンロード・切り替えがワンクリック
開発の導入コスト削減：チーム全体ですぐに使い始められる

GUI版で簡単スタート

▶インストールは思ってるより簡単

Ollama公式サイト（https://ollama.com/download）から、普通のソフトと同じようにインストールしてみましょう。

macOS 12 Monterey以降対応（Apple Silicon・Intel両対応）

公式サイトからダウンロード
- https://ollama.com/download/mac から .dmg ファイルをダウンロード
インストール手順
- .dmg ファイルをダブルクリックして開く
- Ollamaアイコンを「Applications」フォルダにドラッグ&ドロップ
初回起動の認証
- Applicationフォルダから起動
- 「開発元が未確認」の警告が出た場合は「開く」ボタンをクリック
注意: Apple Silicon Macだと自動的にGPUを使ってくれて、推論速度が大幅に向上します。

▶使い方は超シンプル

インストールが終わると、Windows・macOSどちらも自動的にOllama GUIが起動します。見た目はとてもシンプルで、すぐに使い方がわかるはずです。

使い方の流れ：

GUIが自動起動
- インストール完了後、自動的にOllama GUIが表示されます
- 次回からは、アプリのアイコンをクリックするだけ起動します

AIモデルを選択

初回起動時には、いくつかのモデルが表示されます。どのモデルが表示されるかは時期によって変わりますが、代表的なモデルの特徴を理解して、自分のPCスペックに合ったモデルを選んでみましょう：

モデル名	サイズ	必要RAM	GPU推奨	Input	特徴	おすすめ度
gpt-oss:20b	14GB	32GB~	16GB VRAM以上	Text	OpenAI製、最高品質	ハイスペックPC限定
gpt-oss:120b	65GB	128GB~	24GB VRAM×2以上	Text	OpenAI製、最上位モデル	超ハイスペック限定
deepseek-r1:8b	5.2GB	12GB~	8GB VRAM以上	Text	推論特化、思考過程表示	数学・論理問題用
gemma3:1b	815MB	4GB~	CPU可	Text	超軽量、基本的な会話	低スペックPC向け
gemma3:4b	3.3GB	8GB~	4GB VRAM以上	Text,Image	軽量と性能のバランス◎	初心者におすすめ
gemma3:12b	8.1GB	16GB~	8GB VRAM以上	Text,Image	高品質な回答	中級者向け
gemma3:27b	17GB	32GB~	16GB VRAM以上	Text,Image	高性能、詳細な回答	ハイスペック向け
qwen3:4b	2.5GB	8GB~	4GB VRAM以上	Text	多言語対応、アジア言語強い	日本語重視なら
qwen3:8b	5.2GB	12GB~	8GB VRAM以上	Text	バランス型、推論も得意	万能型
qwen3:30b	19GB	32GB~	16GB VRAM以上	Text	高性能、複雑な推論	ハイスペック向け

重要なポイント：

GPU推奨：記載されたVRAMがあると快適に動作しますが、CPUだけでも使用可能（ただし遅い）です
Apple Silicon Mac：M1/M2/M3チップは統合メモリでGPUも統合されているため、メモリ容量が直接性能に影響します
Input：現在表示されるモデルは主にText（テキスト）入力ですが、一部のモデル（gemma3など）は画像入力にも対応しています

選び方の目安：

8GB RAM以下 → gemma3:1b
16GB RAM → gemma3:4b または qwen3:4b
32GB RAM以上 → gemma3:12b、qwen3:8b、gpt-oss:20b など

チャット開始とダウンロード
- 適切なモデルを選択後に下の方にある入力欄に質問(「こんにちは！自己紹介してください」など)を入力して送信すると、初回のみモデルのダウンロードが自動的に始まります
- ダウンロード中は「Downloading model」のような表示が出るので、しばらく待ちましょう
- ダウンロード完了後、AIからの回答が表示されます

CLI で本格活用 - より多くのモデルと詳細制御

GUI版で基本操作に慣れたら、CLI（コマンドライン） を使って Ollama の真の力を引き出してみましょう。僕たち開発者なら避けて通れない道ですし、実際に使ってみると GUI よりも効率的で便利なことが多いです。

▶基本コマンド 4つをマスター

覚えるべきコマンドは実質 4つだけです：

ターミナル

# 1. モデルのダウンロード
ollama pull <モデル名>

# 2. モデルの実行（対話モード）
ollama run <モデル名>

# 3. インストール済みモデル一覧
ollama list

# 4. 不要なモデルの削除
ollama rm <モデル名>

▶実際にモデルを試してみよう

ここでは、qwen2.5-coder:7b を実際にダウンロードして使ってみる全手順を詳しく解説していきます。このモデルは日本語とプログラミングの両方に強く、開発者には特におすすめです。

Step 1: CLI でモデルをダウンロード

ターミナル

# ターミナル/コマンドプロンプトを開いて実行
ollama pull qwen2.5-coder:7b

ダウンロード中の表示例：

pulling manifest 
pulling 60e05f210007: 100% ▕████████████████████████████████▏ 4.7 GB
pulling 66b9ea09bd5b: 100% ▕████████████████████████████████▏   68 B
pulling 1e65450c3067: 100% ▕████████████████████████████████▏ 1.6 KB
pulling 832dd9e00a68: 100% ▕████████████████████████████████▏  11 KB
pulling d9bb33f27869: 100% ▕████████████████████████████████▏  487 B
verifying sha256 digest 
writing manifest 
success

Tip

約4.7GBのダウンロードなので、初回は5-10分程度かかります。Wi-Fi環境の良い場所で実行してみましょう。

Step 2: ダウンロード完了をリストで確認

ターミナル

# インストール済みモデルを確認
ollama list

出力例：

NAME                ID              SIZE      MODIFIED           
qwen2.5-coder:7b    dae161e27b0e    4.7 GB    About a minute ago    
gemma3:4b           a2af6cc3eb7f    3.3 GB    5 hours ago

Step 3: GUI でモデルが選択可能になったことを確認

CLI でダウンロードしたモデルは、GUIの画面にも自動的に表示されます。Ollama GUI を開くと、上部のモデル選択ドロップダウンに qwen2.5-coder:7b が追加されているのが確認できます。

Step 4: GUI で実際にプログラミング支援を試す

ターミナルでの長いコード出力は見にくいので、ダウンロード後は GUI での質問がおすすめ です。

質問例: 「Pythonでフィボナッチ数を計算する関数を作ってください」

実際の回答例（GUI画面）：

Step 5: 技術文書作成も試してみる

質問例: 「DjangoでREST APIを作成する手順を教えてください」

▶モデルサイズ比較検証 - 7B vs 32B

メモリに余裕がある場合は、同じ qwen2.5-coder の異なるサイズで性能を比較してみると面白いです。ここでは、32GB+ RAMの環境」で可能な qwen2.5-coder:32b との比較を行いましょう。

Note

この比較は Mac Studio 64GB での検証結果です。qwen2.5-coder:32b は約20GBのモデルなので、十分なメモリが必要です。

32Bモデルのダウンロード：

ターミナル

$ ollama pull qwen2.5-coder:32b↵
pulling manifest 
pulling ac3d1ba8aa77: 100% ▕████████████████████████████████▏  19 GB
pulling 66b9ea09bd5b: 100% ▕████████████████████████████████▏   68 B
pulling 1e65450c3067: 100% ▕████████████████████████████████▏ 1.6 KB
pulling 832dd9e00a68: 100% ▕████████████████████████████████▏  11 KB
pulling f0676bd3c336: 100% ▕████████████████████████████████▏  488 B
verifying sha256 digest 
writing manifest 
success

インストール済みモデルを確認

ターミナル

$ ollama list↵
NAME                 ID              SIZE      MODIFIED     
qwen2.5-coder:32b    b92d6a0bd47e    19 GB     21 hours ago    
qwen2.5-coder:7b     dae161e27b0e    4.7 GB    23 hours ago    
gemma3:4b            a2af6cc3eb7f    3.3 GB    27 hours ago

比較テスト: 複雑なアルゴリズム問題

同じ問題を両方のモデルに投げて、回答の質、詳細度、正確性を比較します。

テスト問題: 「Pythonでクイックソートを実装してください。詳しく解説してください。」

ターミナル

$ ollama run qwen2.5-coder:7b "Pythonでクイックソートを実装してください"

出力結果

はい、もちろん！以下のコードはPythonでクイックソートを実装しています。

```python
def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]

    return quick_sort(left) + middle + quick_sort(right)

# テスト
arr = [3, 6, 8, 10, 1, 2, 1]
print("ソート前:", arr)
sorted_arr = quick_sort(arr)
print("ソート後:", sorted_arr)
```

このコードでは、リストを再帰的に分割してソートしています。まず、ピボット値（中央の要素）を選択し、それ以上の要素は以下の3つのリストに分類します：

1. ピボットより小さい要素
2. ピボットと等しい要素
3. ピボットより大きい要素

そして、左側と右側を再帰的にソートした後、それぞれの部分と中間部分を結合して新しいソートされたリストを作成します。

このコードはPythonのリスト内包表記を使用していますが、他の方法でも同じように動作します。

比較テスト: 複雑なシステム設計問題

テスト問題: 「マイクロサービスアーキテクチャでのユーザー認証システムを設計してください。JWT、OAuth2.0、Redis、PostgreSQLを使用したスケーラブルな構成を、コード例とアーキテクチャ図で説明してください。」

ターミナル

ollama run qwen2.5-coder:7b --verbose
# 上記の複雑なシステム設計問題を入力

出力結果

ユーザー認証システムの設計は複雑ですが、以下にその基本的なアーキテクチャと主要なコンポーネントを説明します。

1. ユーザーインターフェース: ユーザーがログインやサインアップを行います。
2. クライアントアプリケーション: ユーザーのリクエストを受け取り、認証プロセスを呼び出します。
3. 認証サービス (OAuth2.0): ユーザーの資格情報を検証し、アクセストークンを作成します。OAuth2.0は、ユーザーの情報提供にのみアクセスするため、セキュリティ的な観点から理想的です。
4. JWT (JSON Web Token): サービス間での認証を行うために使用されます。JWTは、ユーザー情報を暗号化し、それぞれのサービスが情報を安全に共有できます。
5. Redis: 一時的にアクセストークンを保存します。Redisは高速でスケーラブルなデータベースであり、セッション管理に最適です。
6. PostgreSQL: ユーザー情報の永続的な保存と管理を行います。

このアーキテクチャは以下のようになります：

```
+-------------------+
| User Interface    |
|                   |
+---------^---------+
          |
          v
+---------^---------+
| Client App       |
| (e.g., Mobile,   |
|  Web)            |
+---------^---------+
          |
          v
+---------^---------+
| Auth Service      |<--- OAuth2.0
| (User             |     Granting Access Token
|  Credentials      |
|  Validation)      |
+---------^---------+
          |
          v
+---------^---------+
| JWT               |<--- User Info (Encrypted)
| Encryption        |     Distribution
+---------^---------+
          |
          v
+---------^---------+
| Redis             |<--- Access Token Storage
| Session           |
+---------^---------+
          |
          v
+---------^---------+
| PostgreSQL        |<--- User Data Storage and Management
| Database          |
+-------------------+
```

このアーキテクチャでは、ユーザーの認証情報はOAuth2.0を使って検証され、JWTを使ってセキュリティで保護された情報を転送します。また、Redisを使用してアクセストークンを高速に保存し、PostgreSQLはユーザー情報の永続的な保存と管理を行っています。

この設計はスケーラブルであり、システムの負荷が増加しても依然として効率的に動作します。また、各コンポーネントが独立しており、一部のサービスがダウンしても他のサービスは機能を維持できます。

total duration:       10.428098375s
load duration:        64.656292ms
prompt eval count:    88 token(s)
prompt eval duration: 356.13625ms
prompt eval rate:     247.10 tokens/s
eval count:           606 token(s)
eval duration:        10.006022917s
eval rate:            60.56 tokens/s

比較ポイント

実際の出力を分析した結果、以下の違いが明確に現れました：

アルゴリズム実装（クイックソート）の比較：

項目	qwen2.5-coder:7B	qwen2.5-coder:32B
実装の種類	関数型（1つの実装）	関数型 + インプレース版（2つの実装）
解説の詳細度	基本的な説明	詳細な手順解説 + メモリ効率の言及
コード品質	シンプルで読みやすい	より本格的、実用性重視

システム設計問題の比較：

項目	qwen2.5-coder:7B	qwen2.5-coder:32B
アーキテクチャ図	テキストベースの簡易図	より構造化された詳細図
技術的深度	概念的な説明中心	具体的な実装コード付き
セキュリティ考慮	基本的な言及	詳細なセキュリティ対策の指摘
実装言語	説明のみ	JavaScript/Node.jsの具体例
処理速度	60.56 tokens/s	17.98 tokens/s
応答時間	10秒	44.8秒

実用性の違い：

7Bモデル: 学習・理解フェーズに最適。概念を素早く把握したい場合
32Bモデル: 実装・本格開発に最適。詳細な仕様や複数の実装パターンが必要な場合

開発現場での使い分け：

ターミナル

# アイデア出し・概念理解 → 7Bで高速処理
ollama run qwen2.5-coder:7b "RESTとGraphQLの違いを簡単に"

# 詳細設計・実装支援 → 32Bで詳細分析
ollama run qwen2.5-coder:32b "マイクロサービス間の認証設計を詳しく"

Tip

大型モデルは詳細な解説や複雑なシステム設計に優れ、小型モデルは速度やメモリ効率に優れる傾向があります。用途に応じた選択が重要です。

▶開発でよく使うコマンドパターン

ターミナル

# モデル情報の確認
ollama show qwen2.5-coder:7b

# 実行中のモデル確認
ollama ps

# サーバー状態確認
curl http://localhost:11434/api/tags

# ワンライナーでコード生成
ollama run qwen2.5-coder:7b "DjangoでHello Worldサーバー"

# ファイル入力で一括処理
ollama run qwen2.5-coder:7b < requirements.txt > implementation.md

Important

CLI を使うことで、GUI では使えない数百種類の専門モデルにアクセスできるようになります。

API連携の基礎

Ollama の真の価値は REST API にあります。自分のアプリケーションに AI 機能を統合して、本格的な AI アプリケーションを開発してみましょう。

▶REST API の基本

OllamaサーバーはデフォルトでHTTP APIを http://localhost:11434 で提供します。

基本的なAPI呼び出し：

ターミナル

# cURLでOllamaに質問を送信
curl -X POST http://localhost:11434/api/generate \
  -H "Content-Type: application/json" \
  -d '{
    "model": "qwen2.5-coder:7b",
    "prompt": "JavaScriptの非同期処理について教えて",
    "stream": false
  }'

▶主要なAPI エンドポイント

開発で使う頻度の高いエンドポイント：

エンドポイント	メソッド	用途	使用例
`/api/generate`	POST	テキスト生成	一回限りの質問・回答
`/api/chat`	POST	チャット形式	会話履歴を保持した対話
`/api/embed`	POST	ベクトル埋め込み	文書検索・類似度計算
`/api/tags`	GET	モデル一覧	利用可能モデルの取得
`/api/pull`	POST	モデルDL	プログラムからモデル取得

他のAPIエンドポイント（モデル情報取得、削除、実行中プロセス管理など）の詳細については、公式ドキュメントを参照してください：

📚 API完全リファレンス: https://github.com/ollama/ollama/blob/main/docs/api.md

基本的なAPI使用例

▶言語別の基本的な使用例

通常の使用例:

async function generateCode(prompt) {
  const response = await fetch('http://localhost:11434/api/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      model: 'qwen2.5-coder:7b',
      prompt: prompt,
      stream: false
    })
  });
  
  const data = await response.json();
  return data.response;
}

// 使用例
generateCode('PythonでCSVファイルを読み込んでグラフ作成する関数')
  .then(code => console.log(code));

ストリーム使用例:

async function generateCodeStream(prompt) {
  const response = await fetch('http://localhost:11434/api/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      model: 'qwen2.5-coder:7b',
      prompt: prompt,
      stream: true  // ストリーム出力
    }),
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    const chunk = decoder.decode(value);
    const lines = chunk.split('\n').filter((line) => line.trim());

    for (const line of lines) {
      try {
        const data = JSON.parse(line);
        if (data.response) {
          process.stdout.write(data.response);
        }
        if (data.done) {
          console.log(); // 改行
          return;
        }
      } catch (e) {
        // JSONパースエラーは無視
      }
    }
  }
}

// 使用例：リアルタイムで出力される
generateCodeStream('ReactでToDoリストコンポーネントを作成して');

チャット履歴機能の実装

実際の開発では、AIとの継続的な対話で過去の会話を参照したいケースが多いです。ここではシンプルな会話履歴システムの実装例を紹介します：

chat_example.py

# シンプルなOllamaチャット例 - 会話履歴を保持
import requests

messages = []

def chat_example():
    # 1. ユーザー質問
    user_input = "こんにちは、僕の名前はtecharmです"
    messages.append({"role": "user", "content": user_input})
    
    print("👤 ユーザー:", user_input)
    
    # 2. API応答
    response = requests.post('http://localhost:11434/api/chat', json={
        'model': 'qwen2.5-coder:7b',
        'messages': messages,
        'stream': False
    })
    
    data = response.json()
    ai_response = data['message']['content']
    messages.append({"role": "assistant", "content": ai_response})
    
    print("🤖 AI:", ai_response)
    print("\n" + "="*50 + "\n")
    
    # 2回目の質問（前の会話を参照）
    follow_up = "僕の名前は何ですか？"
    messages.append({"role": "user", "content": follow_up})
    
    print("👤 ユーザー:", follow_up)
    
    response2 = requests.post('http://localhost:11434/api/chat', json={
        'model': 'qwen2.5-coder:7b',
        'messages': messages,
        'stream': False
    })
    
    data2 = response2.json()
    ai_response2 = data2['message']['content']
    messages.append({"role": "assistant", "content": ai_response2})
    
    print("🤖 AI:", ai_response2)
    print("\n" + "="*50 + "\n")
    
    # 3. 前の質問を確認
    print("📝 会話履歴:")
    for index, msg in enumerate(messages):
        role = '👤' if msg['role'] == 'user' else '🤖'
        content_preview = msg['content'][:30] + '...' if len(msg['content']) > 30 else msg['content']
        print(f"{index + 1}. {role} {content_preview}")

if __name__ == "__main__":
    chat_example()

実行方法：

ターミナル

python chat_example.py

出力例：

👤 ユーザー: こんにちは、僕の名前はtecharmです
🤖 AI: こんにちは！techarmさん。何かお手伝いできることがありますか？

==================================================

👤 ユーザー: 僕の名前は何ですか？
🤖 AI: あなたの名前はtecharmです。

==================================================

📝 会話履歴:
1. 👤 こんにちは、僕の名前はtecharmです
2. 🤖 こんにちは！techarmさん。何かお手伝いできることがありますか？
3. 👤 僕の名前は何ですか？
4. 🤖 あなたの名前はtecharmです。

このシンプルなプログラムで：

文脈理解: AIが前の会話内容を参照して一貫した回答
履歴管理: 会話の流れを配列で簡単に管理
実装容易: 約50行のコンパクトなコード

実用的なWebアプリケーション開発

Ollama APIを活用した動作するAIチャットアプリを作成してみましょう：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🤖 Dev Assistant - Local AI</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            width: 95%;
            max-width: 900px;
            height: 80vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background: #2d3748;
            color: white;
            padding: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 16px 16px 0 0;
        }
        
        .model-selector {
            background: #4a5568;
            border: none;
            color: white;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-size: 0.9rem;
            cursor: pointer;
        }
        
        .chat-area {
            flex: 1;
            padding: 1.5rem;
            overflow-y: auto;
            background: #f7fafc;
        }
        
        .message {
            margin: 1rem 0;
            padding: 1rem 1.5rem;
            border-radius: 12px;
            max-width: 80%;
            line-height: 1.6;
        }
        
        .user {
            background: #4299e1;
            color: white;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }
        
        .ai {
            background: white;
            border: 1px solid #e2e8f0;
            margin-right: auto;
            border-bottom-left-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .input-area {
            padding: 1.5rem;
            background: white;
            border-top: 1px solid #e2e8f0;
            display: flex;
            gap: 1rem;
            border-radius: 0 0 16px 16px;
        }
        
        #messageInput {
            flex: 1;
            padding: 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            resize: none;
            min-height: 50px;
            font-family: inherit;
        }
        
        #messageInput:focus {
            outline: none;
            border-color: #4299e1;
        }
        
        .send-btn {
            padding: 1rem 1.5rem;
            background: #4299e1;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
        }
        
        .send-btn:disabled {
            background: #a0aec0;
            cursor: not-allowed;
        }
        
        .status {
            padding: 0.75rem 1.5rem;
            background: #edf2f7;
            font-size: 0.875rem;
            color: #718096;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 Dev Assistant</h1>
            <select id="modelSelect" class="model-selector">
                <option value="qwen2.5-coder:7b">Qwen 2.5 Coder (コーディング+日本語)</option>
                <option value="llama3.2:3b">Llama 3.2 (汎用・軽量)</option>
                <option value="deepseek-coder:6.7b">DeepSeek Coder (プログラミング特化)</option>
            </select>
        </div>
        
        <div id="chatArea" class="chat-area">
            <div class="message ai">
                <strong>🤖 AI Assistant</strong><br>
                開発者向けAIアシスタントです。コード生成、レビュー、技術解説など何でもお手伝いします！
            </div>
        </div>
        
        <div class="input-area">
            <textarea id="messageInput" placeholder="質問やコード生成の依頼を入力... (Ctrl+Enterで送信)"></textarea>
            <button id="sendBtn" class="send-btn" onclick="sendMessage()">送信</button>
        </div>
        
        <div class="status">
            <span id="status">準備完了</span>
            <span>Ollama Local API</span>
        </div>
    </div>

    <script>
        const chatArea = document.getElementById('chatArea');
        const messageInput = document.getElementById('messageInput');
        const sendBtn = document.getElementById('sendBtn');
        const status = document.getElementById('status');
        
        let processing = false;

        // Enter key handling
        messageInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
                e.preventDefault();
                sendMessage();
            }
        });

        async function sendMessage() {
            const message = messageInput.value.trim();
            if (!message || processing) return;

            processing = true;
            sendBtn.disabled = true;
            sendBtn.textContent = '送信中...';

            addMessage(message, true);
            messageInput.value = '';

            try {
                const model = document.getElementById('modelSelect').value;
                status.textContent = `${model} で処理中...`;
                
                const response = await askOllama(message, model);
                addMessage(response, false);
                status.textContent = '準備完了';
                
            } catch (error) {
                addMessage(`エラー: ${error.message}`, false, true);
                status.textContent = 'エラー発生';
            } finally {
                processing = false;
                sendBtn.disabled = false;
                sendBtn.textContent = '送信';
            }
        }

        function addMessage(content, isUser, isError = false) {
            const div = document.createElement('div');
            div.className = `message ${isUser ? 'user' : 'ai'}`;
            if (isError) div.style.background = '#fed7d7';
            
            const prefix = isUser ? '👤 You' : '🤖 AI';
            div.innerHTML = `<strong>${prefix}</strong><br>${formatContent(content)}`;
            
            chatArea.appendChild(div);
            chatArea.scrollTop = chatArea.scrollHeight;
        }

        function formatContent(text) {
            return text
                .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
                .replace(/`([^`]+)`/g, '<code style="background:#f1f5f9;padding:2px 4px;border-radius:3px;">$1</code>')
                .replace(/\n/g, '<br>');
        }

        async function askOllama(question, model) {
            const response = await fetch('http://localhost:11434/api/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    model: model,
                    prompt: question,
                    stream: false
                })
            });
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: Ollamaサーバーに接続できません`);
            }
            
            const data = await response.json();
            return data.response;
        }
    </script>
</body>
</html>

この例では 250行程度 で動作するAIチャットアプリケーションを実装しています。

まとめ

今回は、Ollamaの実践的な活用方法をGUI操作からCLI・API活用まで解説しました。

Ollamaの主な特徴：

プライバシー完璧：機密情報が外部に送信されない
コスト削減：API料金を気にせず開発・テスト可能
オフライン動作：ネット接続なしでもAI機能を利用
豊富なモデル：数百種類から用途に応じて選択可能

習得した技術：

GUI版：直感的な操作でモデル管理とチャット
CLI版：コマンドラインでの効率的なモデル操作
API連携：プログラムからの呼び出しとWebアプリ開発
会話履歴：文脈を保持した継続的な対話システム

Ollamaを活用することで、開発プロセスを大幅に効率化し、AI機能を手軽に組み込んだアプリケーション開発が可能になります。ぜひ実際に試して、ローカルAIの可能性を体験してみてください。

参考リンク：

Ollama公式サイト - ダウンロードやモデル検索
GitHub - 技術的な詳細情報・Issues
API Documentation - 詳細なAPI仕様

Ollama実践ガイド｜GUIからCLI・API活用まで解説

はじめに：ローカルAIで開発が変わる

この記事で学べること

Ollamaって何？ローカルで動くAIがすごい

▶なんでOllamaが話題になってるの？

▶GUIが出てきて、僕たち開発者も始めやすくなった

GUI版で簡単スタート

▶インストールは思ってるより簡単

▶使い方は超シンプル

最新モデルの探し方と選択

▶公式サイトでモデルを探す

▶開発者が注目すべきモデル

CLI で本格活用 - より多くのモデルと詳細制御

▶基本コマンド 4つをマスター

▶実際にモデルを試してみよう

▶モデルサイズ比較検証 - 7B vs 32B

比較テスト: 複雑なアルゴリズム問題

比較テスト: 複雑なシステム設計問題

比較ポイント

▶開発でよく使うコマンドパターン

API連携の基礎

▶REST API の基本

▶主要なAPI エンドポイント

基本的なAPI使用例

▶言語別の基本的な使用例

チャット履歴機能の実装

実用的なWebアプリケーション開発

まとめ

この記事はいかがでしたか？

目次