入力欄に書いた質問（マイクで話した質問も）を Gemini に送り、AI の返事を画面に表示するアプリを作れます。

アプリに AI を組み込みたいとき、手軽に試せるのが Google の Gemini API です。文章を送ると、AI が考えた返事が文章で返ってきます。

Flutter からは、パッケージを1つ追加するだけで Gemini を呼び出せます。ただし、混雑して返事が来ないことがある、返事に記号がそのまま出るなど、動かしてみて初めて気づく落とし穴もあります。

本記事では、質問を送って返事を表示するまでの流れを解説します。また、混雑して返事が来ないときに、自動でやり直す仕組みも入れます。使っているパッケージが非推奨になった点と、これから始める人向けの選び方も紹介します。

Gemini API（google_generative_ai）

Gemini API はGoogle の AI「Gemini」を使うための窓口で、質問の文章を送るとGemini が考えた返事が文章で返ってきます。

そのため、Flitterに入れることでAIを用いたアプリが作成可能になります。

Flutter からは、google_generative_ai というパッケージで呼び出せます。本記事のコードは、このパッケージの 0.4.7 で作っています。

筆者

Gemini を選んだのは、無料範囲があるからです。ChatGPT や Claude の API は、試すだけでも使った分の料金がかかるため、まずは Geminiで連携を作りました。

一方で、Geminiも上限を超えると従量課金になり、モデルによってChatGPTの方が安くなることがあります。

APIキーの取得

Gemini API を使うには APIキー（アプリが自分のものだと Google に伝えるための合言葉）が必要です。

1. Google AI Studio を開き、左下の鍵のアイコン（Get API key）を押す
2. 「API キー」のページで、右上の API キーを作成 を押す
3. 作ったキーをコピーしておく

作ったキーは、この一覧に並びます。「請求階層」が無料枠になっていれば、料金はかからない範囲で使えます。

筆者

無料枠でも、基本的なテストで使う程度なら、制限に当たることはほとんどありません。安心してFlutterと連携してください。

APIキーはパスワードと同じように扱います。GitHub などに上げないようにしてください。

参考：Using Gemini API keys

パッケージの追加と.envの設定

pubspec.yaml に2つのパッケージを追加します。google_generative_ai が Gemini を呼ぶパッケージ、flutter_dotenv が APIキーを別ファイルから読むパッケージです。

dependencies:
  google_generative_ai: ^0.4.7
  flutter_dotenv: ^6.0.1

flutter:
  assets:
    - .env

プロジェクトの直下（pubspec.yaml と同じ場所）に .env というファイルを作り、your_api_key_here の部分を、コピーしたキーに書き換えます。

GEMINI_API_KEY=api_key

アプリの起動時に、この .env を読み込みます。main.dart の main の最初に、次の2行を入れます。

WidgetsFlutterBinding.ensureInitialized();
await dotenv.load(fileName: '.env');

キーをコードに直接書かず .env に分けておくと、コードだけを人に見せたり公開したりしても、キーが一緒に出ていきません。.env は .gitignore に入れておきましょう。ただし、Web で動かすときには別の注意があります（「エラーと解決策・対策」で説明します）。

参考：google_generative_ai

google_generative_aiは非推奨｜これから始めるならFirebase AI Logic

本記事のコードは、まず手元で Gemini を試すために google_generative_ai で作りました。いまも動きますが、これから作り始めるアプリ、特に人に公開するアプリでは、後継の Firebase AI Logic（firebase_ai パッケージ）を使うのがおすすめです。

呼び出し方はよく似ていて、モデルを作って generateContent に質問を渡す流れは同じです。本記事の解説は、そのまま firebase_ai でも役に立ちます。

参考：Get started with the Gemini API using the Firebase AI Logic SDKs

gemini-3.6-flashとflash-liteの使い分け

Gemini には、性能と速さの違うモデル（AI の種類）がいくつかあります。どのモデルを使うかは、コードの中でモデル名の文字列を書いて選びます。

本記事では、普段は flash を使い、混雑しているときだけ flash-lite に切り替えます。返事の質を保ちつつ、返事が来ないまま待たされることを減らすためです。

モデルは新しいものが次々に出ます。公式のモデル一覧には、gemini-3.6-flash より新しい世代の flash も載っています。モデル名は文字列1か所なので、新しいモデルに替えるときはそこを書き換えるだけです。

参考：Gemini models

Gemini APIに質問し返答する

ここまでの内容をもとに、次の動きをする画面を作ります。

• 入力欄に質問を書く（マイクで話して入れてもよい）
• 「Geminiに聞く」を押すと、質問を Gemini に送る
• 返事を待つ間は、ボタンにくるくるを出して押せなくする
• 返事が届いたら、入力欄の下に表示する（長い返事はスクロールできる）
• 混雑していたら、少し待ってやり直し、それでもだめなら予備のモデルで返事を作る

マイクで話した内容を入力欄に入れる部分は、speech_to_text で作っています。

【Flutter】speech_to_textで音声入力し文字起こし

Flutterのspeech_to_textで音声入力を作る方法を解説。話した内容をリアルタイムで文字にし、認識が止まっても自動で聞き取り直すコードと、マイク許可・エラー対処を紹介します。

alicia-ing.com

2026.10.11

ソースコード

• gemini_service.dart

Gemini とのやり取りをまとめたクラスです。lib/services/ に置きます。

class GeminiService {
  GeminiService() {
    // .env から APIキーを読む
    final apiKey = dotenv.env['GEMINI_API_KEY'];
    if (apiKey != null && apiKey.isNotEmpty && apiKey != 'your_api_key_here') {
      _model = GenerativeModel(model: 'gemini-3.6-flash', apiKey: apiKey);
      // 混雑しているときに使う予備のモデル
      _fallbackModel = GenerativeModel(model: 'gemini-3.5-flash-lite', apiKey: apiKey);
    }
  }

  GenerativeModel? _model;
  GenerativeModel? _fallbackModel;

  bool get isConfigured => _model != null;

  // 質問を送り、返事の文章を返す
  Future<String> ask(String prompt) async {
    final model = _model;
    final fallbackModel = _fallbackModel;
    if (model == null || fallbackModel == null) {
      throw StateError('GEMINI_API_KEY が未設定です。.env に自分のAPIキーを設定してください。');
    }

    final content = [Content.text(prompt)];
    try {
      return _textOf(await _withRetryOnOverload(() => model.generateContent(content)));
    } on GenerativeAIException catch (e) {
      if (!_isOverloaded(e)) rethrow;
      // やり直しても混雑していたら、予備のモデルで返事を作る
      return _textOf(await fallbackModel.generateContent(content));
    }
  }

  // 混雑していたら2秒待って、1回だけやり直す
  Future<GenerateContentResponse> _withRetryOnOverload(
    Future<GenerateContentResponse> Function() call,
  ) async {
    try {
      return await call();
    } on GenerativeAIException catch (e) {
      if (!_isOverloaded(e)) rethrow;
      await Future<void>.delayed(const Duration(seconds: 2));
      return call();
    }
  }

  // エラーの文に 503 や UNAVAILABLE があれば「混雑」とみなす
  static bool _isOverloaded(GenerativeAIException e) =>
      e.message.contains('503') || e.message.contains('UNAVAILABLE');

  static String _textOf(GenerateContentResponse response) =>
      response.text ?? '(応答がありませんでした)';
}

• speech_input_page.dart

画面の State に持たせる部分です。「Geminiに聞く」を押すと _askGemini が呼ばれます。

final GeminiService _gemini = GeminiService();
bool _isAsking = false; // 返事を待っている間は true
String _answer = ''; // Gemini の返事

// 入力欄の文章を Gemini に送り、返事を表示する
Future<void> _askGemini() async {
  final prompt = _textController.text.trim();
  if (prompt.isEmpty) return;

  // 先に _isAsking を true にしてボタンを押せなくする（返事待ちの間の二重送信を防ぐ）
  setState(() {
    _isAsking = true;
    _statusMessage = '';
    _isError = false;
    _answer = '';
  });

  // 聞き取り中なら、マイクを止めてから送る
  if (_isListening) {
    await _speech.stop();
    if (!mounted) return;
    setState(() => _isListening = false);
  }

  try {
    final answer = await _gemini.ask(prompt);
    if (!mounted) return; // 待っている間に画面が閉じられていたら何もしない
    setState(() => _answer = answer);
  } catch (e) {
    if (!mounted) return;
    setState(() {
      _statusMessage = 'Gemini呼び出しエラー: $e';
      _isError = true;
    });
  } finally {
    // 成功しても失敗しても、最後に必ずボタンを押せる状態に戻す
    if (mounted) setState(() => _isAsking = false);
  }
}

build の中に並べる部品です。送信ボタンと、返事の表示です。

// Gemini に送るボタン（返事待ちの間は押せず、くるくるを出す）
FilledButton.icon(
  onPressed: _isAsking ? null : _askGemini,
  icon: _isAsking
      ? const SizedBox(
          width: 16,
          height: 16,
          child: CircularProgressIndicator(strokeWidth: 2),
        )
      : const Icon(Icons.send),
  label: const Text('Geminiに聞く'),
),

// Gemini の返事（長い返事はスクロールできる）
if (_answer.isNotEmpty)
  Expanded(
    child: SingleChildScrollView(
      // 右下のマイクボタンに、返事の最後が隠れないように余白を空ける
      padding: const EdgeInsets.only(bottom: 80),
      child: SelectableText(_answer), // 選択してコピーできる
    ),
  ),

解説

Gemini とのやり取りは GeminiService にまとめ、画面は「いつ送るか」と「何を表示するか」だけを受け持ちます。画面からは _gemini.ask(質問) を呼ぶだけなので、あとで firebase_ai などに替えるときも、直すのは GeminiService だけで済みます。

画面が持つ状態は次の2つです（音声入力やエラー表示の状態は省略しています）。

GeminiService：APIキーを読んでモデルを作る

最初に .env から APIキーを読み、GenerativeModel にモデル名とキーを渡してモデルを作ります。普段使う flash と、予備の flash-lite の2つを作っておきます。

キーが読めなかったときはモデルを作らず、isConfigured が false になります。.envに書き換え忘れのときも、キーがないものとして扱います。

ask：質問を送って返事を受け取る

Content.text(質問) で質問を包み、generateContent に渡すと、Gemini の返事が返ってきます。返事の文章は response.text に入っています。返事が空のときは null になるので、(応答がありませんでした) と表示します。

generateContent は返事が届くまで時間がかかるので、await で待ちます。待っている間も、画面は固まらずに動き続けます。

_withRetryOnOverload：混雑したら待ってやり直す

Gemini が混雑していると、返事の代わりに「503」「UNAVAILABLE」を含むエラーが返ることがあります。混雑は少し待つと解消することが多いので、2秒待ってから1回だけやり直します。

それでも混雑していたら、ask の側で予備の flash-lite に切り替えて返事を作ります。混雑以外のエラー（キーが間違っているなど）は、待っても直らないので、やり直さずにそのまま画面へ伝えます（rethrow）。

_askGemini：二重送信を防いで送る

_askGemini は、次の順に動きます。

1. 入力欄が空なら何もしない
2. 先に _isAsking を true にする。ボタンの onPressed が null になり、押せなくなる
3. 聞き取り中なら、マイクを止めてから送る（話している途中の文字が混ざらないようにする）
4. _gemini.ask で返事を待ち、届いたら _answer に入れて表示する
5. 失敗したら、エラーの文を赤字で表示する
6. finally で、成功しても失敗しても _isAsking を false に戻す

2 を先にしておかないと、返事を待っている間にボタンを何度も押せてしまい、同じ質問が何回も送られます。

筆者

送信中に何回も押すと、Gemini の返事でエラーが起きるのではと考えて、送信中はボタンを押せなくしました。

mounted は「この画面がまだ表示されているか」です。返事を待っている間に画面が閉じられていたら、setState を呼ばないようにしています（閉じた画面を更新しようとするとエラーになるため）。

【Flutter】ボタンの種類と使い方｜押せなくする・色を変える

Flutterのボタンの種類（Filled・Elevated・Outlined・Text・Icon）の違いと使い分けを解説。onPressedにnullを渡して押せなくする方法と、状態で色が変わるマイクボタンの作り方も紹介します。

alicia-ing.com

2026.10.14

返事の表示：スクロールとコピー

返事は長くなりやすいので、SingleChildScrollView に入れてスクロールできるようにします。SelectableText を使うと、返事を選択してコピーできます。

エラーと解決策・対策

以下では、想定しうるエラーの解決方法を紹介します。APIキーを第三者に公開するのは非常に危険ですので、取り扱いには十分に注意してください。

503 UNAVAILABLE（混雑）で返事が来ない

Gemini 側が混雑していると、503（UNAVAILABLE）のエラーが返ります。こちらのコードの誤りではないので、時間をおいてやり直せば返事が来ることが多いです。

筆者

実際に混雑に当たったときは、ボタンを押し直してもエラーが表示されるだけでした。そこで、同じモデルで粘るより、別のモデルに切り替えて返事をもらう方がよいと考えました。

公式のトラブルシューティングでは、少し待ってからやり直し、やり直すたびに待つ時間を延ばす方法がすすめられています。

本記事のコードは、この考え方を簡単にして「2秒待って1回やり直す」にしています。さらに、やり直してもだめなときは予備のモデルに切り替えるのは、待たされる時間を減らすための工夫です（公式の手順にはありません）。

参考：Troubleshooting guide

返事に「##」や「**」がそのまま出る

完成イメージのように、返事に「##」や「**」がそのまま出ることがあります。Gemini はマークダウン（見出しや太字を記号で表す書き方）で返事を書くことが多く、SelectableText は記号をそのまま文字として表示するためです。

直し方は2通りあります。

• 表示側で整える： マークダウンを見た目に変えて表示するパッケージを使う。よく紹介される flutter_markdown は開発が終了しているので、後継として案内されている flutter_markdown_plus を使う
• 記号を使わせない： 質問と一緒に「マークダウンや記号を使わず、普通の文章で答えて」と指示する

返事を読み上げたり吹き出しに出したりする場合は、記号を使わせない方法が向いています。

参考：flutter_markdown_plus

「GEMINI_API_KEY が未設定です」と出る

APIキーが読めていない状態です。次を確認してください。

• .env がプロジェクトの直下（pubspec.yaml と同じ場所）にあるか
• pubspec.yaml の flutter: の assets: に .env を書いたか（書き忘れると、アプリに .env が入らない）
• .env の書き方が GEMINI_API_KEY=キー になっているか（your_api_key_here のままになっていないか）

pubspec.yaml を直したあとは、ホットリロードではなく、アプリを止めてから起動し直してください。

WebではAPIキーが見えてしまう

Web に限らず、スマホのアプリに入れたキーも、取り出そうと思えば取り出せます。公式も、Web やスマホのアプリにキーを直接入れないこと、本番ではサーバーを間に置いて呼び出すことをすすめています。

人に使ってもらうアプリでは、APIキーをアプリに入れない作りにします。Firebase AI Logic（firebase_ai）に移すか、自分のサーバーを間に置いて Gemini を呼ぶ形にしましょう。

参考：Using Gemini API keys

まとめ

Flutter から Gemini API を使う流れは、モデルを作り、generateContent に質問を渡して、response.text で返事を受け取る、の3つです。

• Gemini とのやり取りは GeminiService にまとめ、画面は送るタイミングと表示だけを受け持つ
• 返事を待つ間はボタンを押せなくし、finally で必ず元に戻す
• 混雑（503）は待ってやり直す。だめなら軽いモデルに切り替える
• 返事のマークダウン記号は、表示側で整えるか、使わないように指示する
• google_generative_ai は非推奨。公開するアプリは Firebase AI Logic かサーバー経由にして、APIキーをアプリに入れない

まずは手元で質問を送って返事が返ってくるところまで動かし、AI に何を任せたいかを試してみてください。

Flutter の5種類のボタンの違いを動かして確かめ、状態で色とアイコンが変わるマイクボタン（FloatingActionButton）と、押せなくする切り替えを作れます。

アプリには、必ずと言っていいほどボタンがあります。Flutter にはボタンの種類がいくつもあり、「どれを使えばいいのか」「押せなくするにはどうするのか」と迷いやすい部品です。

本記事では、よく使う5種類のボタンを並べて押し比べたあと、音声入力の開始と停止に使うマイクボタンを作ります。聞き取り中は赤くなり、スイッチで押せなくもできます。

Flutterのボタンの種類

よく使うボタンは、次の5つです。（FilledButton・ElevatedButton・OutlinedButton・TextButton・IconButton）どれも、押したときの処理を onPressed に渡すと動きます。

使い分けの目安は、「目立たせたい操作ほど、塗りつぶしや影のあるボタンにする」ことです。1つの画面に塗りつぶしのボタンを並べすぎると、どれが大事か分からなくなります。

押せなくする：onPressed に null

どのボタンも、onPressed に null を渡すと、押せなくなります。公式の説明でも、onPressed が null のボタンは無効になります。

ElevatedButton(
  onPressed: isReady ? () { /* 処理 */ } : null,
  child: const Text('送信'),
)

条件によって、処理の関数と null を切り替える書き方です。

FloatingActionButton

FloatingActionButton は、画面の上に浮いて見える丸いボタンです。画面でいちばん大事な操作（作る、共有する、録音を始めるなど）に使います。公式の説明では、1つの画面に置くのは多くても1つにするよう案内されています。

Scaffold の floatingActionButton に渡すと、通常は画面の右下に置かれます。

【Flutter】画面を構成するScaffoldウィジェット一覧

Scaffoldはアプリの構造やレイアウトを提供するウィジェット（Widget）で、Flutterでは必要不可欠な要素です。ウィジット一覧と使い方を解説しています。

alicia-ing.com

2025.08.11

主なプロパティは次のとおりです。

参考：FloatingActionButton（Flutter公式）

この記事では、次の画面を作ります。

• 右下のマイクボタンを押すと、聞き取り中（赤）と停止中を切り替わる。アイコンと説明文も変わる
• 「マイクボタン許可」スイッチをオフにすると、マイクボタンを押せなくなる
• 5種類のボタンを押すと、押した回数が増える

ソースコード

• mic_button.dart

マイクボタンの部品です。状態で色とアイコンを変えます。

import 'package:flutter/material.dart';

/// 音声入力の開始／停止ボタン。聞き取り中は赤くなる。
/// onPressed が null のときは押せない。
class MicButton extends StatelessWidget {
  const MicButton({
    super.key,
    required this.isListening,
    required this.onPressed,
  });

  final bool isListening;
  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: onPressed,
      tooltip: isListening ? '停止' : '音声入力開始',
      backgroundColor: isListening ? Colors.red : null,
      child: Icon(isListening ? Icons.mic : Icons.mic_none),
    );
  }
}

• button_page.dart

画面です。状態と、5種類のボタンを持ちます。

import 'package:flutter/material.dart';

import '../widgets/mic_button.dart';

class ButtonPage extends StatefulWidget {
  const ButtonPage({super.key, required this.title});

  final String title;

  @override
  State<ButtonPage> createState() => _ButtonPageState();
}

class _ButtonPageState extends State<ButtonPage> {
  bool _isListening = false;
  bool _enabled = true;
  int _tapCount = 0;

  void _toggleListening() => setState(() => _isListening = !_isListening);

  void _countUp() => setState(() => _tapCount++);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(_isListening ? '聞き取り中(デモ)' : '停止中'),
            SwitchListTile(
              title: const Text('マイクボタン許可'),
              value: _enabled,
              onChanged: (value) => setState(() => _enabled = value),
            ),
            const Divider(),
            Text('ボタンの種類（押した回数: $_tapCount）'),
            const SizedBox(height: 12),
            Wrap(
              spacing: 12,
              runSpacing: 12,
              children: [
                FilledButton(onPressed: _countUp, child: const Text('Filled')),
                ElevatedButton(onPressed: _countUp, child: const Text('Elevated')),
                OutlinedButton(onPressed: _countUp, child: const Text('Outlined')),
                TextButton(onPressed: _countUp, child: const Text('Text')),
                IconButton(
                  onPressed: _countUp,
                  tooltip: 'Icon',
                  icon: const Icon(Icons.thumb_up),
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: MicButton(
        isListening: _isListening,
        onPressed: _enabled ? _toggleListening : null,
      ),
    );
  }
}

• main.dart

動かすための最小の入口です。mic_button.dart は lib/widgets/、button_page.dart は lib/pages/ に置きます。

import 'package:flutter/material.dart';

import 'pages/button_page.dart';

void main() {
  runApp(
    const MaterialApp(home: ButtonPage(title: 'ボタン')),
  );
}

解説

画面（ButtonPage）が、「聞き取り中か」「マイクボタンを押せるか」「押した回数」の3つの状態を持ちます。マイクボタンの見た目は、MicButton が受け取った値だけで決まります。

MicButton：状態で色とアイコンを変える

isListening が true のときだけ赤くし、アイコンとツールチップも切り替えています。

backgroundColor: isListening ? Colors.red : null,
child: Icon(isListening ? Icons.mic : Icons.mic_none),

条件が true か false かで値を選ぶ書き方です。backgroundColor に null を渡すと、テーマで決まっている標準の色になります。

色だけでなくアイコンも変えているので、色の違いが見分けにくい人にも、状態が伝わります。

onPressed に null を渡す

MicButton の onPressed は、VoidCallback? という型で受け取ります。? は、null も受け取れるという意味です。

画面側では、スイッチの状態で、処理と null を切り替えます。

onPressed: _enabled ? _toggleListening : null,

backgroundColor: onPressed == null
    ? Colors.grey
    : (isListening ? Colors.red : null),

部品に切り出す理由

マイクボタンを MicButton として別のクラスに切り出すと、見た目の決まりごと（赤くする、アイコンを変える）を1か所にまとめられます。画面側は、状態を渡すだけで済みます。同じボタンを別の画面で使うときにも、そのまま使えます。

_countUp：5種類のボタンに同じ処理を渡す

5種類のボタンには、すべて同じ _countUp を渡しています。押した回数が増えることで、どのボタンも同じように onPressed で動くことが確かめられます。

実装

1. Flutter のプロジェクトを作る（追加するパッケージはありません）
2. 2つのファイルを、上の場所に置く
3. main.dart を書き換えて、実行する

マイクボタンを押すと赤くなり、もう一度押すと元に戻ります。スイッチをオフにすると、マイクボタンを押せなくなります。

まとめ

• ボタンは FilledButton・ElevatedButton・OutlinedButton・TextButton・IconButton の5種類を使い分ける
• 押したときの処理は onPressed に渡し、null を渡すと押せなくなる
• FloatingActionButton は、画面でいちばん大事な操作に1つだけ置く
• 押せなくするときは、見た目も変えて、押せないと分かるようにする
• 状態で変わる見た目は、部品に切り出して1か所にまとめる

言語などの選択肢から1つを選べるドロップダウンを作り、選んだ値の取り出しと、スイッチで選べなくする切り替えまでを DropdownButtonFormField で実装できます。

アプリで言語や国を選んでもらうとき、一覧から1つを選ぶドロップダウン（プルダウン）がよく使われます。

Flutter でドロップダウンを作る部品はいくつかあります。

本記事では、フォームの仕組みにも組み込める DropdownButtonFormField を使います。画面に出す文字と、プログラムが受け取る値を分ける方法、最初に選んでおく値の決め方、選べなくする方法を、動くコードで説明します。

DropdownButtonFormField（ドロップダウン）

DropdownButtonFormField は、押すと選択肢の一覧が開き、1つを選べる部品です。公式の説明では、ドロップダウンの部品である DropdownButton を、フォームの入力欄として使えるように包んだものです。複数の入力欄をまとめて検証したいときに使う Form の中に置けますが、Form がなくても使えます。

この記事で使うプロパティは3つです。

参考：DropdownButtonFormField

本記事では、次の動きをする画面を作ります。

• 言語の一覧から1つを選べる
• 選んだ言語の名前と ID を、ドロップダウンの下に表示する
• 「変更を許可する」スイッチをオフにすると、ドロップダウンが押せなくなる

ソースコード

• language.dart

選択肢1つ分のクラスと、一覧のデータです。

/// 選択肢1つ分。id は選んだときに渡る値、name は画面に出る文字。
class Language {
  const Language(this.id, this.name);

  final String id;
  final String name;
}

const languages = [
  Language('ja-JP', '日本語 (日本)'),
  Language('en-US', 'English (United States)'),
  Language('fr-FR', 'Français (France)'),
];

• language_dropdown.dart

ドロップダウン部分の部品です。

import 'package:flutter/material.dart';

import '../models/language.dart';

class LanguageDropdown extends StatelessWidget {
  const LanguageDropdown({
    super.key,
    required this.languages,
    required this.selectedId,
    required this.enabled,
    required this.onChanged,
  });

  final List<Language> languages;
  final String? selectedId;
  final bool enabled;
  final ValueChanged<String?> onChanged;

  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField<String>(
      initialValue: selectedId,
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: '言語',
      ),
      items: [
        for (final language in languages)
          DropdownMenuItem(value: language.id, child: Text(language.name)),
      ],
      // onChanged が null のとき、ドロップダウンは押せなくなる。
      onChanged: enabled ? onChanged : null,
    );
  }
}

• dropdown_page.dart

画面です。選んだ値と、変更できるかどうかの状態を持ちます。

import 'package:flutter/material.dart';

import '../models/language.dart';
import '../widgets/language_dropdown.dart';

class DropdownPage extends StatefulWidget {
  const DropdownPage({super.key, required this.title});

  final String title;

  @override
  State<DropdownPage> createState() => _DropdownPageState();
}

class _DropdownPageState extends State<DropdownPage> {
  String? _selectedId = languages.first.id;
  bool _enabled = true;

  String get _selectedName =>
      languages.firstWhere((l) => l.id == _selectedId).name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            LanguageDropdown(
              languages: languages,
              selectedId: _selectedId,
              enabled: _enabled,
              onChanged: (id) => setState(() => _selectedId = id),
            ),
            const SizedBox(height: 12),
            Text('選んだ言語: $_selectedName（ID: $_selectedId）'),
            const SizedBox(height: 12),
            SwitchListTile(
              title: const Text('変更を許可する'),
              value: _enabled,
              onChanged: (value) => setState(() => _enabled = value),
            ),
          ],
        ),
      ),
    );
  }
}

• main.dart

動かすための最小の入口です。

import 'package:flutter/material.dart';

import 'pages/dropdown_page.dart';

void main() {
  runApp(
    const MaterialApp(home: DropdownPage(title: 'ドロップダウン')),
  );
}

解説

選択肢のデータ（language.dart）、ドロップダウンの部品（language_dropdown.dart）、画面（dropdown_page.dart）を分けています。ドロップダウンの部品は、選択肢の一覧、いま選んでいる値、選べるかどうか、選び直したときの処理を、外から受け取るだけです。選んだ値は画面側が持ちます。

Language：選ぶ値と画面の文字を分ける

選択肢を、ただの文字列のリストにすることもできます。この記事では、id（プログラムが使う値）と name（画面に出す文字）の2つを持つクラスにしました。

分けておくと、画面の表示を変えても、プログラムが受け取る値が変わりません。たとえば表示を「日本語 (日本)」から「Japanese」に変えても、受け取る値は ja-JP のままです。

items：リストから選択肢を作る

items: [
  for (final language in languages)
    DropdownMenuItem(value: language.id, child: Text(language.name)),
],

リストの中に for を書くと、一覧のデータから選択肢を作れます。DropdownMenuItem の value が、選んだときに受け取る値、child が画面に出る文字です。一覧に項目を足すだけで、選択肢も増えます。

initialValue：最初に選んでおく値

initialValue に、最初に選んでおく値を渡します。ここに渡す値は、items の value のどれか1つと一致している必要があります。

initialValue は、最初の1回に使う値です。選び直したあとの値は、onChanged で受け取って画面側で持ちます。

onChanged：選び直したときの処理と、選べなくする方法

onChanged には、選び直したときに呼ばれる関数を渡します。引数が、選ばれた value です。この画面では setState で _selectedId を更新し、下の表示を変えています。

ドロップダウンを選べなくしたいときは、onChanged に null を渡します。公式の説明では、onChanged が null のとき、ドロップダウンは無効になります。この画面では、スイッチの状態 enabled が false のときに null を渡しています。

onChanged: enabled ? onChanged : null,

無効のときに出す案内文は、disabledHint で指定できます。

実装

1. Flutter のプロジェクトを作る（追加するパッケージはありません）
2. 3つのファイルを、上の場所に置く
3. main.dart を書き換えて、実行する

ドロップダウンを押して言語を選ぶと、下の表示が変わります。スイッチをオフにすると、ドロップダウンを押せなくなります。

エラーと解決策・対策

以下では、公式の説明で示されているエラーと対処を紹介します。実際に起きたエラーではなく、起こりやすい点をまとめたものです。

There should be exactly one item with [DropdownButton]’s value

initialValue に、items の value に存在しない値を渡すと、このメッセージで止まります。公式の説明では、一致する項目がないとき、または2つ以上あるときに出ます。

• initialValue の値が、items の value のどれかと一致しているか確認する
• 同じ value の項目が2つ以上ないか確認する
• 最初は何も選ばない状態にしたいときは、initialValue を null にする

まとめ

DropdownButtonFormField は、items、initialValue、onChanged の3つを渡せば動きます。

• 選択肢は、プログラムが使う値と画面に出す文字を分けたクラスで作る
• 選択肢のリストは、リスト内の for で作る
• 最初に選んでおく値は initialValue（古い value は非推奨）
• onChanged に null を渡すと、ドロップダウンを選べなくできる

手で文字を打てて、ボタンでコードから文字を入れたり全部消したりでき、文字数もリアルタイムで表示される入力欄を、TextField と TextEditingController で作れます。

アプリの入力欄は、手で打った文字を読むだけでなく、プログラムから文字を入れたり、中身が変わるたびに何かを表示したりしたい場面がよくあります。

Flutter では、入力欄の部品 TextField に、中身を操作するための TextEditingController を組み合わせると、どちらもできます。

本記事では、サンプル文を入れる、全部消す、文字数を表示する、という3つの動きを持つ入力欄を作りながら、TextField と TextEditingController の使い方を説明します。

TextField（テキスト入力欄）

TextField は、文字を入力するための入力欄の部品です。最小の書き方は次のとおりです。

const TextField()

見た目や動きは、プロパティで変えます。この記事で使うものは次の3つです。

参考：TextField（Flutter公式）

TextEditingController（入力欄の中身を操作する）

TextEditingController は、入力欄の中身を読んだり書いたりするための部品です。TextField の controller に渡すと、2つの部品がつながります。

final TextEditingController _controller = TextEditingController();

TextField(controller: _controller)

つなげたあとは、次のことができます。

入力された文字を取る方法は、TextEditingController 以外にもあります。それぞれ、呼ばれるタイミングが違います。

読むだけなら onChanged や onSubmitted でも足ります。この記事のように、コードから文字を入れたり、文字数を出し続けたりするなら、TextEditingController が向いています。

参考：Flutter 公式 API

この記事では、次の動きをする入力欄を作ります。

• 手で文字を入力できる（複数行）
• 入力欄の下に、いまの文字数が出る
• 「サンプルを入れる」ボタンで、コードから文章が入る。カーソルは文字の最後に置く
• 「全部消す」ボタンで、入力欄が空になる

ソースコード

• text_input_page.dart

入力欄、文字数の表示、2つのボタンを持つ画面です。

import 'package:flutter/material.dart';

class TextInputPage extends StatefulWidget {
  const TextInputPage({super.key, required this.title});

  final String title;

  @override
  State<TextInputPage> createState() => _TextInputPageState();
}

class _TextInputPageState extends State<TextInputPage> {
  static const _sampleText = 'Hello, nice to meet you.';

  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  /// コードから文字を入れ、カーソルを文字の最後に置く。
  void _insertSample() {
    _controller.text = _sampleText;
    _controller.selection = TextSelection.collapsed(offset: _sampleText.length);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextField(
              controller: _controller,
              maxLines: 6,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                hintText: '直接入力してください',
              ),
            ),
            const SizedBox(height: 12),
            // 中身が変わるたびに、文字数を作り直す。
            ListenableBuilder(
              listenable: _controller,
              builder: (context, _) => Text('${_controller.text.length} 文字'),
            ),
            const SizedBox(height: 12),
            Row(
              children: [
                FilledButton(
                  onPressed: _insertSample,
                  child: const Text('サンプルを入れる'),
                ),
                const SizedBox(width: 12),
                OutlinedButton(
                  onPressed: _controller.clear,
                  child: const Text('全部消す'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

• main.dart

動かすための最小の入口です。text_input_page.dart は lib/pages/ に置きます。

import 'package:flutter/material.dart';

import 'pages/text_input_page.dart';

void main() {
  runApp(
    const MaterialApp(home: TextInputPage(title: 'テキスト入力')),
  );
}

解説

画面は StatefulWidget で作っています。TextEditingController は、画面が表示されている間ずっと同じものを使い続けるので、State のフィールドとして1つだけ作ります。

使っている部品は、入力欄の TextField、文字数を出す ListenableBuilder、操作する2つのボタンです。

ListenableBuilder：文字数を更新し続ける

文字数の Text は ListenableBuilder で包んでいます。listenable に TextEditingController を渡すと、中身が変わるたびに builder の中が作り直されます。

TextEditingController は、中身が変わると監視している側に知らせる仕組みを持っています（変化を知らせる部品の仲間として作られています）。ListenableBuilder は、公式の説明では、監視している対象が変わったときに、その部分の画面を作り直す部品で、builder は変化の知らせが来るたびに呼ばれます。ここでは、その知らせを受け取って、文字数の表示だけを更新します。

onChanged の中で setState を呼んでも文字数は出せます。ただ、その場合は画面全体が作り直されます。ListenableBuilder なら、作り直す範囲を文字数の部分だけに絞れます。

_insertSample：コードから文字を入れる

_controller.text = _sampleText; で、入力欄の文字が置き換わります。

ただし、公式の説明では、text を書き換えると、選択範囲や変換中の範囲が消えます。文字を入れたあと、カーソルをどこに置くかも決まらなくなります。

そこで、次の行でカーソルを文字の最後に置いています。

_controller.selection = TextSelection.collapsed(offset: _sampleText.length);

TextSelection.collapsed は、範囲を選ばず、1か所にカーソルを置く指定です。offset に文字数を渡すと、文字の最後になります。

文字とカーソルを同時に決めたいときは、公式の説明のとおり、value に TextEditingValue をまとめて入れる方法もあります。

clear：全部消す

_controller.clear は、入力欄を空にする関数です。ボタンの onPressed に、そのまま渡せます。

dispose：後片付け

TextEditingController は、使い終わったら dispose で後片付けします。公式の説明にも、不要になったら dispose する、と書かれています。画面が閉じるときに呼ばれる State の dispose の中で、_controller.dispose() を呼びます。

エラーと解決策・対策

以下では、公式の説明で注意されている、つまずきやすい点と対処を紹介します。実際に起きたエラーではなく、起こりやすい点をまとめたものです。

文字を入れたのに、カーソルが思った場所にない

_controller.text だけを書き換えた場合、選択範囲が消えるため、カーソルの位置が思った場所にならないことがあります。上のコードのように selection も指定するか、value にまとめて入れてください。

入力のたびに、変な動きや無限ループになる

addListener の中で、同じ TextEditingController の text を書き換えると、書き換えがまた知らせとして届くため、無限に繰り返すおそれがあります。公式の説明でも、この点が注意されています。入力内容を整えたいときは、入力時に文字を変換する TextInputFormatter を使ってください。

まとめ

TextField は入力欄の部品、TextEditingController はその中身を操作する部品です。

• controller に渡すと、text で読み書きできる
• text を書き換えると選択範囲が消えるので、カーソルの位置は selection で決める
• 中身の変化に合わせて表示を変えるなら、ListenableBuilder で作り直す範囲を絞れる
• 使い終わったら dispose で後片付けする

話しかけた内容がそのまま画面に文字で出続け、音声認識が止まっても自動で聞き取り直す音声入力画面を、speech_to_text で作れます。

Flutterで英会話アプリや音声メモアプリを作るとき話した言葉を文字に入力が第一歩です。

Flutterではspeech_to_textというパッケージを使うと、スマホやブラウザに入っている音声認識の機能を、短いコードで呼び出せます。ただし、そのままだと無音が続いたときなどに認識が止まってしまいます。

本記事では、話している途中の文字を表示しながら、止まったら自動で聞き取り直す画面を作ります。パッケージの呼び出しは別のクラスに分け、画面側のコードをすっきりさせます。

speech_to_text（音声認識パッケージ）

speech_to_text は、端末に入っている音声認識の機能を Flutter から使うためのパッケージです。Android、iOS、Web に対応しています。

注意したいのは、このパッケージが想定している使い方です。公式の説明では、想定しているのはコマンドや短いフレーズで、長い会話を途切れなく文字にしたり、ずっと聞き続けたりする使い方は想定外とされています。

そのため、今回のように「開いている間ずっと聞き取る」画面を作るときは、止まったら聞き取り直す仕組みを自分で用意します。

インストール

pubspec.yaml の dependencies に追加します。この記事のコードは ^7.4.0 で作っています。

dependencies:
  speech_to_text: ^7.4.0

事前設定（マイクの許可）

マイクを使うため、プラットフォームごとに設定が必要です。設定の内容は公式ページの記載にもとづきます。

参考：speech_to_text 公式ページ

話した内容を文字にする音声入力画面

ここまでの内容をもとに、次の動きをする画面を作ります。

• 画面を開くと、すぐ聞き取りを始める
• 話している途中の文字も、確定した文字も、画面に出し続ける
• 右上のマイクのアイコンが、聞き取り中は赤、停止中は灰色になる
• 認識が止まったら、少し待って自動で聞き取り直す

ソースコード

• speech_service.dart

speech_to_text を包むクラス。パッケージの細かい呼び出しをここに集める

import 'package:speech_to_text/speech_to_text.dart' as stt;

class SpeechService {
  final stt.SpeechToText _speech = stt.SpeechToText();

  Future<bool> initialize({
    required void Function(bool isListening) onStatusChange,
    required void Function(String message) onError,
  }) {
    return _speech.initialize(
      onStatus: (status) => onStatusChange(status == 'listening'),
      onError: (error) => onError(error.errorMsg),
    );
  }

  /// 話した内容を、認識できた分だけ onResult に渡し続ける。
  /// 一区切り話し終えると isFinal が true になる。
  Future<void> listen({
    required void Function(String recognizedWords, bool isFinal) onResult,
    String? localeId,
  }) {
    return _speech.listen(
      onResult: (result) => onResult(result.recognizedWords, result.finalResult),
      listenOptions: stt.SpeechListenOptions(
        localeId: localeId,
        partialResults: true,
      ),
    );
  }

  Future<void> stop() => _speech.stop();
}

• voice_input_page.dart

画面。表示する文字と状態だけを持つ

import 'dart:async';
import 'package:flutter/material.dart';
import '../services/speech_service.dart';

class VoiceInputPage extends StatefulWidget {
  const VoiceInputPage({super.key, required this.title});

  final String title;

  @override
  State<VoiceInputPage> createState() => _VoiceInputPageState();
}

class _VoiceInputPageState extends State<VoiceInputPage> {
  final SpeechService _speech = SpeechService();

  bool _speechEnabled = false;
  bool _isListening = false;
  Timer? _restartTimer;

  String _committedText = ''; // 話し終えて確定した分
  String _partialText = ''; // いま話している途中の分
  String _statusMessage = '';

  @override
  void initState() {
    super.initState();
    _initSpeech();
  }

  @override
  void dispose() {
    _restartTimer?.cancel();
    _speech.stop();
    super.dispose();
  }

  Future<void> _initSpeech() async {
    final available = await _speech.initialize(
      onStatusChange: _handleStatus,
      onError: _handleError,
    );
    if (!mounted) return;
    setState(() {
      _speechEnabled = available;
      if (!available) _statusMessage = 'この端末では音声認識を利用できません';
    });
    if (available) _listen();
  }

  Future<void> _listen() async {
    if (!mounted || !_speechEnabled || _isListening) return;
    await _speech.listen(onResult: _handleResult);
  }

  void _handleResult(String words, bool isFinal) {
    setState(() {
      if (isFinal) {
        _committedText = '$_committedText $words'.trim();
        _partialText = '';
      } else {
        _partialText = words;
      }
    });
  }

  // 認識が止まったら、少し待って聞き取り直す。
  void _handleStatus(bool listening) {
    if (!mounted) return;
    setState(() => _isListening = listening);
    if (!listening && _speechEnabled) {
      _restartTimer?.cancel();
      _restartTimer = Timer(const Duration(milliseconds: 300), _listen);
    }
  }

  void _handleError(String message) {
    if (!mounted) return;
    setState(() {
      _isListening = false;
      _statusMessage = '音声認識エラー: $message';
      // マイクの許可がないときは、やり直しても同じなので止める。
      if (message.contains('permission')) _speechEnabled = false;
    });
  }

  String get _displayText => '$_committedText $_partialText'.trim();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 16),
            child: Icon(
              _isListening ? Icons.mic : Icons.mic_off,
              color: _isListening ? Colors.red : Colors.grey,
            ),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: SingleChildScrollView(
                child: Text(
                  _displayText.isEmpty ? '話しかけてください' : _displayText,
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
              ),
            ),
            Text(_statusMessage),
          ],
        ),
      ),
    );
  }
}

• main.dart

import 'package:flutter/material.dart';

import 'pages/voice_input_page.dart';

void main() {
  runApp(
    const MaterialApp(home: VoiceInputPage(title: '音声入力')),
  );
}

解説

音声認識の呼び出しはSpeechServiceに集め、画面のVoiceInputPageは「いま何が表示されているか」だけを持ちます。こうしておくと、あとで別のパッケージに替えるときも、直すのは SpeechService だけで済みます。

画面が持つ状態は次の4つです。

各関数の機能

initialize：音声認識を使える状態にする

initializeは、音声認識を使える状態にする最初の処理です。使えるときは true、使えないときは false が返ります。公式の説明では、initializeは一度だけ呼ぶ想定で、2回目以降の呼び出しは無視されます。そのため、状態の変化とエラーを受け取る関数は、最初の呼び出しで渡します。

SpeechService.initialize では、受け取った状態が listening のときだけ true として画面に伝えます。

listen：聞き取りを始める

listen で聞き取りを始めます。ポイントは partialResults: true です。これを指定すると、話し終わるのを待たず、話している途中の文字が結果に何度も届きます。話しながら文字が増えていく動きは、この設定のおかげです。

localeIdを省略すると、端末の標準の言語で聞き取ります。言語を指定したいときは、locales() で取れる言語の一覧にある ID を渡します。

_handleResult：途中の文字と確定した文字を分ける

結果は isFinal で2つに分かれます。

• isFinal が false：話している途中。_partialText を上書きする
• isFinal が true：一区切り話し終えた。_committedText の後ろに足し、_partialText を空にする

画面には、2つをつなげた _displayText を出します。

_handleStatus：止まったら聞き取り直す

音声認識は、無音が続くなどで自分から止まります。公式の説明のとおり、ずっと聞き続ける使い方は想定されていないためです。

そこで、状態が「聞き取り中」から変わったら、Timer で 300 ミリ秒待ってから _listen を呼び直します。止まった直後には呼び直さず、少し間を置いてから再開しています。

_handleError：許可がないときは止める

エラーの文字にpermission が含まれていたら、マイクの許可がありません。何度やり直しても同じ結果になるので_speechEnabled を false にして再開を止めます。

dispose：後片付け

画面を閉じるときに、再開用のTimerを止め、聞き取りも止めます。

実装

1. Flutter のプロジェクトを作り、speech_to_text を pubspec.yaml に追加して flutter pub get を実行する
2. 先ほどの「事前設定」を済ませる
3. 上のコードを lib/ に置き、実行する
4. 初回はマイクの許可を求められるので、許可する

画面を開くと聞き取りが始まり、アイコンが赤になります。話しかけると、途中の文字が出て、話し終えると確定します。

エラーと解決策・対策

以下では、想定しうるエラーの解決方法を紹介します。

「この端末では音声認識を利用できません」と出る

initialize が false を返した状態です。音声認識が使えない環境で起きます。公式の説明では、ビルドはできても音声認識に対応していないプラットフォームがあり、その場合は initialize が false を返します。

先に述べた事前設定が済んでいるか、対応しているブラウザや端末かを確認してください。

「音声認識エラー」に permission と出る

マイクの許可がありません。端末やブラウザの設定で、アプリにマイクの使用を許可してください。このコードでは、許可がないと分かった時点で聞き取りのやり直しを止めます。

言語が思った言語にならない

localeId を省略すると、端末の標準の言語で聞き取ります。ほかの言語で話したいときは、locales() で取れる言語の ID を listen の localeId に渡してください。

まとめ

speech_to_text の流れは、initialize で準備し、listen で聞き取り、結果を受け取る、の3つです。

• partialResults: true で、話している途中の文字を出せる
• isFinal で、途中の文字と確定した文字を分けて持つ
• 音声認識は自分から止まるので、状態の変化を見て聞き取り直す
• パッケージの呼び出しは SpeechService に分け、画面は状態だけを持つ

• 契約の手順が分からず、どのようにすればよいか分からない
• 契約したあとにやめたくなったとき、きちんと解約できるのか不安
• 「30日間返金保証」があると聞くけれど、条件がよく分からない
• iPhoneで使うには、何をすればいいのか知りたい

この記事ではそうした疑問に答えるために、契約からiPhoneで接続するまでの手順と、自動更新の止め方、返金の条件を、実際の画面でまとめます。

筆者は、飛行機搭乗の数十分前から契約を始めましたが離陸前までに契約できました。スマホから短い時間で簡単ですので是非契約をしてみて下さい。

NordVPNを見てみる

NordVPNを契約した理由

私がVPNを契約したきっかけはドイツへの留学です。

ドイツへは研究のために留学をしましたが、そこで研究をする前に一度研究室へのあいさつ回りでドイツへ渡航しました。

しかし現地ではU-NEXTやTVerを始め日本の動画サービスが使えませんでした。YouTube、Twitter、Instagramは見られても、それ以外のアプリは見られず、不便に感じました。

そこでドイツでの接続が安定して接続できる情報を知り、2回目の渡航ではNordVPNを契約しました。

契約前に確認すること

契約の前に、次の3つを用意しておくとスムーズです。

 どこで契約したかによって、あとで解約や返金をする場所が変わります。公式サイトで契約すれば手続きはNordVPN側で行えますが、Apple（App Store）などを経由して契約すると、解約や返金は購入元で行う必要があります。

詳しくは後半の「解約・返金」で説明します。

私は、あとで気に入らなかったときに30日以内に返金してもらえるよう、アプリを入れる前にブラウザで「NordVPN」と検索して、公式サイトから直接契約しました。App Store経由だと、返金の手続きがNordVPNではなくAppleになるためです。

スマホで契約する人は、先にアプリを入れず、公式サイトから契約することをおすすめします。

契約手順（ステップごと）

NordVPNを契約する方法を各ステップごとに説明をします。

プランを選ぶ

公式サイトの料金ページを開き、使いたい期間のプランを選びます。

上の画面は、2026年9月に開いたときの料金ページです。
「1か月プラン」を選ぶと、ベーシックプランが月額2,280円と表示されていました。
画面には「30日間返金保証」の表示もあります。

私は1か月プランを契約しました。ドイツには1年もいないため、滞在期間に合わせて月額のプランにしました。

プランは1か月・1年・2年があり、長期になるほど割引が大きくなります。公式サイトで見ると、ベーシックプランの2年プランは月額580円（最初の27か月分。3か月延長つき）でした。ドイツに長く滞在する人は、長期プランのほうがお得だと思います。

ただし、これは最初の期間の価格で、更新後は料金が変わる点には注意してください。

アカウントを作成する

プランを選んだら、メールアドレスを入力してアカウントを作成します。

このメールアドレスは、ログインや契約内容の確認メールの受け取りに使われます。

支払い方法を選ぶ

次に支払い方法を選んで支払い情報を入力します。確定ボタンを押すと契約が完了します。

 支払い方法はクレジットカードにしました。返金保証が使えなくなるのが不安で、クレジットカードを選びました。

ただ、公式の料金ページやヘルプを確認したところ、返金の条件は「初回購入から30日以内」で、支払い方法によって返金できるかが変わるという記載は見当たりませんでした。

支払い方法は、クレジットカードのほか、PayPalやGoogle Pay、Apple Payなどが案内されています。入力で迷う場面はありませんでした。

アプリを入れてログインする

契約が終わったら、アプリストアで「NordVPN」を検索してインストールします。WindowsやMacでもアプリがあるのでインストールしてください。完了後、先ほど作ったアカウントでログインします。

この時点ではまだVPNにつながっていないため「保護されていません」と表示されています。VPNの接続は簡単で、「すべてのロケーションで検索」で日本を選択するか、最近の履歴から選んでください。

ホーム画面の青いVPNで接続を保護ボタンを押すと、VPNに接続されます。

 契約したあとすぐに飛行機に乗ったため事前に接続を試すことはできませんでした。それでも、日本のサーバーへの接続は1回のタップでできてとても楽でした。

インストールとログインも、ほかのサービスと同じ感覚でできます。パソコンの場合も、アプリ（ファイル）を入れて実行すれば接続できます。私はiPhoneとノートパソコンで、おもに動画を見るときに使っています。

他にも外出先Wifiにつなぐとき海外では見ている内容が筒抜けで個人情報が抜き取られてしまうといった問題が起きやすいです。（日本でも野良Wifiにつなぐと被害に遭います。）

そこで、NordVPNを契約しておくと安全に接続ができます。

解約・自動更新停止を止める方法

NordVPNは、期間が終わると自動的に更新される仕組みです。使わなくなったら更新される前に自動更新を止める必要があります。

自動更新を止めてもお金が戻るわけではありません。自動更新を止めるとすでに払った期間の終わりまではそのまま使えてその後に更新されなくなります。

お金を戻してもらうには、次の「返金」の手続きが別に必要です。

公式サイト経由で契約した場合

NordVPNの公式ヘルプによると、手順は次のとおりです。パソコンでもiPhoneでも、アプリではなくブラウザ（iPhoneならSafariなど）でNordアカウントにログインして行います。

1. パソコンやスマホのブラウザで、Nordアカウント（my.nordaccount.com）にログインします。
2. 「請求」（billing）のタブを開きます。
3. 自動更新の横にある「キャンセル」を押します。
4. 「自動更新をキャンセル」を選びます。
5. 自動更新の表示が「オフ」に変わります。

30日間返金保証を使うには

NordVPNには、新しく契約したときに使える30日間の返金保証があります。公式ヘルプによる条件は次のとおりです。

 日本語版のヘルプには、返金できない理由として「月間サブスクリプションを利用している」という項目もあります。英語版のヘルプには、この項目はありません。一方、料金ページには「すべてのプランには30日間の返金保証が付いています」とあり、1か月プランにも「30日間返金保証」と表示されていました。

1か月プランで返金を考えている人は、申請する前にライブチャットで対象になるか確認することをおすすめします。

まとめ

NordVPNは、公式サイトでプランを選び、アカウントを作って支払いをすれば契約できます。契約後はアプリを入れてログインし、「VPNで接続を保護」を押すだけで接続できます。

返金を望む場合は契約前に以下の内容を押さえておきたいです。

• 自動更新を止めても、返金はされない
• 返金保証が使えるのは、新規契約から30日以内
• 契約した場所（公式サイトかApp Storeか）で、解約・返金の手続きをする場所が変わる

NordVPNを見てみる

矢印キーで2Dプレイヤーをタイル1マスずつ動かし、長押しでの連続移動と、進む方向に合わせた向きの画像の切り替えができるようになります。

昔のRPGのように、キャラクターがマス目にそってカクカクと動く移動するゲームは3Dゲームよりも制作の負担もなく現在もレトロゲームや同人ゲームとして人気が強いです。

Tilemapでマップを作ったあと、「プレイヤーを1マスずつ動かすにはどうすればいいの？」とつまずく人も多いはずです。

本記事では、2dキャラクターの実装として、Input.GetKeyを使ったキー入力から1マスずつの移動・向きの切り替えまでを解説します。キーを押しっぱなしにしたときの連続移動や、2つのキーを同時に押したときの優先順位など、実際に遊ぶと気になる動きにも対応しています。

【Unity】Rigidbody+CapsuleColliderを用いたプレイヤー移動

UnityでCharacterControllerからRigidbody+CapsuleColliderへ移動処理を移行する方法を解説。カメラ相対移動、FixedUpdateでの速度制御、移行の判断基準まで紹介します。

alicia-ing.com

2026.07.13

Input.GetKey（キー入力）

Input.GetKeyは、キーボードのキーが押されているかどうかを調べる関数です。矢印キーでキャラクターを動かす、スペースキーでジャンプする、Escキーでメニューを開くなど、キーボードで操作するゲームのほとんどで使われます。

使い方は、調べたいキーをKeyCodeで指定するだけです。矢印キーはそれぞれ次のKeyCodeに対応しています。

if (Input.GetKey(KeyCode.RightArrow))
{
    // →キーが押されている間、毎フレーム実行される
}

キー入力の処理は、毎フレーム呼ばれるUpdate()の中に書きます。

参考：Input.GetKey – Unity スクリプトリファレンス

GetKey・GetKeyDown・GetKeyUpの違い

キー入力を調べる関数は3種類あり、trueを返すタイミングが違います。

1マスずつ動かしたい場合、GetKeyだけを使うと毎フレーム1マス進んでしまい、一瞬で画面の端まで飛んでいってしまいます。反対にGetKeyDownだけを使うと、押すたびに1マスしか進まず、長い距離を歩くときにキーを何度も叩くことになります。

そこで本記事のコードでは、2つを組み合わせています。

• GetKeyDown： どのキーが「新しく押されたか」を調べる
• GetKey： そのキーが「まだ押され続けているか」を調べ、一定の間隔で連続移動する

event Action（C#のイベント）で処理をつなぐ

eventは、「何かが起きたこと」を他のスクリプトに知らせるためのC#の仕組みです。Actionと組み合わせると、知らせるときに値（移動方向など）も一緒に渡せます。

例えば「キーが押された」ことを入力のスクリプトが知らせ、それを受け取った移動のスクリプトがプレイヤーを動かす、という使い方をします。

// 知らせる側
public event Action<Vector3> MoveRequested;   // Vector3（方向）を一緒に渡すイベント
MoveRequested?.Invoke(Vector3.up);            // 登録されている処理をまとめて呼ぶ

// 受け取る側
input.MoveRequested += OnMoveRequested;       // 登録
input.MoveRequested -= OnMoveRequested;       // 解除

イベントを使うと、入力・移動・画像の切り替えを別々のスクリプトに分けられます。それぞれのスクリプトはお互いの中身を知らなくてよいため、後から「NPCにも同じ移動を使いたい」「入力をゲームパッドに変えたい」となったときに、一部だけを差し替えられます。

なお、UnityにはInspectorから登録できるUnityEventもあります。本記事ではコードの中だけで完結させるため、C#のeventを使っています。

参考：イベント – C# プログラミング ガイド（Microsoft Learn）

SpriteRenderer.spriteで画像を差し替える

SpriteRendererは、2Dの画像（スプライト）を画面に表示するコンポーネントです。
spriteプロパティに別のスプライトを代入すると、表示している画像をその場で差し替えられます。

playerRenderer.sprite = spriteUp;   // 上向きの画像に切り替える

キャラクターの向きを変える方法には、ほかにAnimatorでアニメーションを切り替える方法もあります。

歩きのアニメーションまで作り込みたい場合はAnimatorが向いていますが、上下左右の4枚の画像を切り替えるだけなら、spriteを差し替える方法の方が設定が少なく済みます。

【Unity】2D/3Dオブジェクトが表示されない原因と対処方法

2D/3Dオブジェクトが表示されない原因は、カメラワークの不具合が考えられます。「Screen Space - Camera」にして、MainCameraをアタッチすると正しく表示されます。

alicia-ing.com

2024.11.10

参考：SpriteRenderer.sprite – Unity スクリプトリファレンス

矢印キーで1マスずつ動く2Dプレイヤー移動

ここまでに説明したInput.GetKey・event Action・SpriteRenderer.spriteを組み合わせて、Tilemapの上を1マスずつ歩く2Dプレイヤーを作ります。実装する動きは次のとおりです。

• 1マスずつ移動： 矢印キーを押すと、上下左右に1マス分だけ移動する
• 長押しで連続移動： キーを押しっぱなしにすると、少し待ってから一定の間隔で進み続ける
• 同時押しの優先： 2つのキーを押したときは、後から押したキーの方向へ進む（斜めには進まない）
• 向きの切り替え： 進む方向に合わせて、キャラクターの画像を上下左右に切り替える
• 止まったときの表示： キーを離したら「待機画像」か「最後に向いた方向」のどちらかを表示する

処理は役割ごとに5つのスクリプトに分けています。

ソースコード

PlayerInput.cs

using System;
using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// 矢印キーから移動の要求
/// </summary>
public class PlayerInput : MonoBehaviour
{
    [SerializeField] private float repeatDelay = 0.2f;     
    [SerializeField] private float repeatInterval = 0.1f;  
    private float repeatTimer;      

    public event Action<Vector3> MoveRequested; 
    public event Action Released;              
    //入力キーと方向を対応させる
    private static readonly (KeyCode key, Vector3 direction)[] bindings =
    {
        (KeyCode.UpArrow, Vector3.up),
        (KeyCode.DownArrow, Vector3.down),
        (KeyCode.RightArrow, Vector3.right),
        (KeyCode.LeftArrow, Vector3.left),
    };

    // 押された順に並べたbindingsの添字。最後が現在有効なキー
    private readonly List<int> heldKeys = new List<int>();
    private const int None = -1;  // キーを押していない
    private int CurrentIndex => heldKeys.Count > 0 ? heldKeys[heldKeys.Count - 1] : None;

    private void Update()
    {
        int previousIndex = CurrentIndex;

        heldKeys.RemoveAll(i => !Input.GetKey(bindings[i].key));
        for (int i = 0; i < bindings.Length; i++)
        {
            if (Input.GetKeyDown(bindings[i].key) && !heldKeys.Contains(i))
                heldKeys.Add(i);
        }
        
        int currentIndex = CurrentIndex;
        if (currentIndex == None)
        {
            if (previousIndex != None) Released?.Invoke();
            return;
        }

        if (currentIndex != previousIndex)
        {
            repeatTimer = repeatDelay;
            MoveRequested?.Invoke(bindings[currentIndex].direction);
            return;
        }

        repeatTimer -= Time.deltaTime;
        if (repeatTimer <= 0f)
        {
            repeatTimer = repeatInterval;
            MoveRequested?.Invoke(bindings[currentIndex].direction);
        }
    }
}

GridMover.cs

using System;
using UnityEngine;

/// <summary>
/// 対象を1マスずつ動かす。向き・移動の通知を行う
/// </summary>
public class GridMover : MonoBehaviour
{
    [SerializeField] private Transform target;
    [SerializeField] private float gridSize = 1f;

    public event Action<Vector3> MoveAttempted;
    public event Action<Vector3, Vector3> Moved;

    //移動処理
    public bool TryMove(Vector3 direction)
    {
        if (direction == Vector3.zero || target == null) return false;

        MoveAttempted?.Invoke(direction);

        Vector3 nextPos = target.position + direction * gridSize; //移動先

        target.position = nextPos;  //位置更新
        Moved?.Invoke(nextPos, direction);
        return true;
    }
}

PlayerDirectionSprite.cs

using UnityEngine;

/// <summary>
/// プレイヤーの進行で画像差し替え
/// </summary>
public class PlayerDirectionSprite : MonoBehaviour
{
    //止まっているときの状態
    private enum IdleFacingMode
    {
        IdleSprite, //待機
        LastDirection //最後に向いている方向
    }

    [SerializeField] private SpriteRenderer playerRenderer;
    [SerializeField] private Sprite spriteIdle;
    [SerializeField] private Sprite spriteUp;
    [SerializeField] private Sprite spriteDown;
    [SerializeField] private Sprite spriteLeft;
    [SerializeField] private Sprite spriteRight;
    [SerializeField] private IdleFacingMode idleFacingMode = IdleFacingMode.LastDirection;

    private Vector3 lastFacingDirection = Vector3.zero;

    //指定した方向を向く
    public void Face(Vector3 direction)
    {
        if (direction == Vector3.zero) return; 

        lastFacingDirection = direction;
        SetSprite(GetSpriteForDirection(direction));
    }

    //止まったときの画像にする
    public void ShowIdle()
    {
        bool hasLastFacing = lastFacingDirection != Vector3.zero;
        bool keepLastFacing = idleFacingMode == IdleFacingMode.LastDirection && hasLastFacing;

        SetSprite(keepLastFacing ? GetSpriteForDirection(lastFacingDirection) : null);
    }

    //画像の差し替え
    private void SetSprite(Sprite sprite)
    {
        if (playerRenderer == null) return;

        Sprite nextSprite = sprite ?? spriteIdle;
        if (nextSprite != null && playerRenderer.sprite != nextSprite)
            playerRenderer.sprite = nextSprite;
    }

    //対応する画像を呼び出す
    private Sprite GetSpriteForDirection(Vector3 direction)
    {
        if (direction == Vector3.up && spriteUp != null) return spriteUp;
        if (direction == Vector3.down && spriteDown != null) return spriteDown;
        if (direction == Vector3.left && spriteLeft != null) return spriteLeft;
        if (direction == Vector3.right && spriteRight != null) return spriteRight;
    
        return null;
    }
}

PlayerSpawner.cs

using UnityEngine;

/// <summary>
/// シーン開始時のプレイヤーの位置と向きを決める
/// </summary>
public class PlayerSpawner : MonoBehaviour
{
    [SerializeField] private Transform target;
    [SerializeField] private Vector3 startPosition = new Vector3(0.5f, 0.5f, 0f); 

    // 開始位置に置き、開始時の向きを startFacing に入れる
    public void Spawn(out Vector3 startFacing)
    {
        if (target == null) target = transform;

        target.position = startPosition;
        startFacing = Vector3.zero;
    }
}

PlayerController.cs

using UnityEngine;

/// <summary>
/// プレイヤーの各コンポーネントの接続
/// 入力 → 移動 → 向きの画像
/// </summary>
public class PlayerController : MonoBehaviour
{
    [SerializeField] private PlayerInput input;
    [SerializeField] private GridMover mover;
    [SerializeField] private PlayerSpawner spawner;
    [SerializeField] private PlayerDirectionSprite directionSprite; // 向きスプライト制御

    // イベントの登録/解除
    private void OnEnable()
    {
        if (input != null)
        {
            input.MoveRequested += OnMoveRequested; 
            input.Released += OnReleased;
        }
        if (mover != null)
        {
            mover.MoveAttempted += OnMoveAttempted;
        }
    }

    private void OnDisable()
    {
        if (input != null)
        {
            input.MoveRequested -= OnMoveRequested;
            input.Released -= OnReleased;
        }
        if (mover != null)
        {
            mover.MoveAttempted -= OnMoveAttempted;
        }
    }

    private void Start()
    {
        Vector3 startFacing = Vector3.zero;
        if (spawner != null) spawner.Spawn(out startFacing);

        if (directionSprite == null) return;
        if (startFacing == Vector3.zero) directionSprite.ShowIdle();
        else directionSprite.Face(startFacing);
    }

    ///イベントを受け取る
    private void OnMoveRequested(Vector3 direction) => mover?.TryMove(direction);
    private void OnReleased() => directionSprite?.ShowIdle();
    private void OnMoveAttempted(Vector3 direction) => directionSprite?.Face(direction);
}

解説

• 名前空間（モジュール）

• イベント

処理の流れをまとめると、次のようになります。

[PlayerInput] 矢印キーを押す → MoveRequested
      ↓
[PlayerController] OnMoveRequested → GridMover.TryMove()
      ↓
[GridMover] MoveAttempted → 1マス移動 → Moved
      ↓
[PlayerController] OnMoveAttempted → PlayerDirectionSprite.Face()（画像を切り替え）

[PlayerInput] キーを離す → Released → PlayerDirectionSprite.ShowIdle()

キー長押しで連続移動する（repeatDelay・repeatInterval）

PlayerInputのUpdate()では、キーを押したときと、押し続けているときで処理を分けています。

// 有効なキーが変わった：即移動
if (currentIndex != previousIndex)
{
    repeatTimer = repeatDelay;
    MoveRequested?.Invoke(bindings[currentIndex].direction);
    return;
}

//同じキーを押し続ける
repeatTimer -= Time.deltaTime;
if (repeatTimer <= 0f)
{
    repeatTimer = repeatInterval;
    MoveRequested?.Invoke(bindings[currentIndex].direction);
}

キーを押した瞬間はすぐに1マス進み、タイマーにrepeatDelay（0.2秒）をセットします。そのまま押し続けると、タイマーが0になったところで次の1マスに進み、以降はrepeatInterval（0.1秒）ごとに進みます。

パソコンでキーを押しっぱなしにしたとき、1文字目のあとに少し間が空いてから文字が連続で入力されるのと同じ仕組みです。最初に少し待つことで、「1マスだけ動きたかったのに2マス進んでしまった」という誤操作を防げます。

Time.deltaTime（前のフレームからの経過時間）を引いているため、フレームレートが変わっても同じ速さで進みます。歩く速さを変えたいときは、InspectorでRepeat Intervalの値を調整してください。値を小さくするほど速く歩きます。

キー同時押しの優先度

2つの矢印キーを同時に押したときにどちらへ進むかは、heldKeysリストで決めています。

//リスト更新（離されたキーを外し、新しく押されたキーを末尾に追加）
heldKeys.RemoveAll(i => !Input.GetKey(bindings[i].key));
for (int i = 0; i < bindings.Length; i++)
{
    if (Input.GetKeyDown(bindings[i].key) && !heldKeys.Contains(i))
        heldKeys.Add(i);
}

1. RemoveAllで、もう押されていないキーをリストから外す
2. GetKeyDownで新しく押されたキーを見つけ、リストの末尾に追加する

リストの末尾が「一番最後に押したキー」になり、CurrentIndexはこの末尾のキーを返します。

private int CurrentIndex => heldKeys.Count > 0 ? heldKeys[heldKeys.Count - 1] : None;

例えば、→キーを押しながら↑キーを押すと↑方向へ進みます。そのあと↑キーだけを離すと、リストには→キーが残っているため、すぐに→方向へ戻って進みます。

入力をif文で上から順に調べる書き方だと、「↑と→を同時に押すと、いつも↑が勝つ」「同時に押すと斜めに進む」といった動きになりがちです。押した順番を覚えておくことで、プレイヤーの操作に素直に反応する移動になります。

実装

5つのスクリプトは、プレイヤーのオブジェクトと、画像を表示するオブジェクトにアタッチします。

各スクリプトは[RequireComponent]を使っていないため、必要なコンポーネントは自動で追加されません。SpriteRendererの追加と、PlayerControllerの参照の設定は、忘れずに手動で行ってください。

まとめ

本記事では、Tilemapの上で2Dプレイヤーを矢印キーで1マスずつ動かす方法として、次の内容を解説しました。

• Input.GetKeyとGetKeyDownを組み合わせて、押した瞬間の移動と長押しの連続移動を作る
• 押したキーの順番をListで覚えて、同時押しでは後から押したキーを優先する
• SpriteRenderer.spriteを差し替えて、進む方向に合わせて画像を切り替える

スクリプトを役割ごとに分けているため、ここから機能を足していくのも簡単です。次のステップとして、GridMoverに壁の判定を加えて「壁の方を向くだけで進めない」動きにしたり、Movedイベントを使ってマップの端で別のシーンへ切り替えたりすると、RPGのマップ移動らしくなります。

Input SystemのInputActionReferenceを使って、ゲームパッドでキャラクターの移動とジャンプを操作できるようになります。

Unityでプレイヤー操作実装する際に、キーボード操作だけでなく「ゲームパッド（コントローラー）にも対応したい」という場面が出てきます。

特にアクションゲームやプラットフォーマーでは、スティックでの移動とボタンでのジャンプはほぼ必須の操作です。

本記事では、Unityの新しいInput SystemとInputActionReferenceを使い、移動・ジャンプという最小構成でゲームパッド対応を実装する方法を分かりやすく解説します。

Gamepad.currentを直接参照する方法やPlayerInputコンポーネントに依存する方法とは違う、疎結合で使い回しやすい設計です。

【Unity】マウス操作をゲームに導入する画面クリックで処理

UnityでCSVのテキストをマウスクリックで１つずつ進めるには、if文でメソッド「Input.GetMouseButtonDown(0)」を使用します。ノベルゲームは画面のクリック回数に応じてテキストを表示するシステムに近づきます。

alicia-ing.com

2025.08.11

Input System

Input Systemは、キーボード・マウス・ゲームパッドなどの入力をまとめて扱える、Unityの新しい入力の仕組みです。

XboxコントローラーやPlayStationコントローラー（DualSense）などのゲームパッドに対応したいときや、同じ操作をキーボードとゲームパッドの両方で行えるようにしたいときに使います。

従来のInput.GetAxis()などを使う古い入力システム（Input Manager）でもある程度のゲームパッド対応は可能でしたが、デバイスごとの差異を吸収しづらく、コードが複雑になりがちでした。

Input Systemでは、実際の入力デバイスと、ゲーム内の意味（「移動する」「ジャンプする」）をInput Actionという単位で分けられます。そのため、デバイスが変わってもコード側を変更せずに済みます。

Input Systemを使うには、パッケージの導入と、入力を定義するInput Actionsアセットの作成が必要です。

参考：Input System – Unity マニュアル

Input Systemパッケージの導入

Unity Input Systemは標準では有効になっていないため、Package Managerからインストールする必要があります。

1. メニューから Window > Package Manager を開きます
2. 検索欄で「Input System」を検索し、Install をクリックします
3. インストール後、「新しい入力システムに切り替えますか？」という確認ダイアログが表示されるので Yes を選択します（Unityの再起動が必要です）

Input Actionsアセットとゲームパッドのバインディング設定

次に、実際の入力を定義するInput Actionsアセットを作成します。

1. Projectウィンドウで右クリックし、Create > Input Actions を選択してアセットを作成します
2. 作成したアセットをダブルクリックしてエディタを開きます
3. Action Mapsに「Player」などの名前でマップを作成します

各アクションの+ボタンからバインディングを追加し、Listen機能を使って実際にゲームパッドを操作するとバインディング候補が自動検出されるので、それを選択すると設定が楽になります。

設定が終わったら忘れずにSave Assetをクリックしてください。

InputActionReference

InputActionReferenceは、Input Actionsアセットの中にある特定のInput Actionを、Inspectorから参照するための型です。スクリプトにアクション名を文字列で書かずに、「どのアクションを使うか」をInspectorで選べます。

InputActionReferenceは、同じ入力ハンドラークラスを別のキャラクターやプレハブで使い回したり、テスト用に別のInput Actionsアセットへ差し替えたりしやすくなります。

参考：InputActionReference – Input System ドキュメント

InputActionReferenceで実装する移動・ジャンプ入力

本記事では、InputActionReferenceを使って、ゲームパッドの移動（左スティック）とジャンプ（ボタン）を取得する入力ハンドラーを実装します。

入力の取得だけを専用クラス（PlayerInputHandler）に切り出し、実際の移動処理・ジャンプ処理からはMoveInput・JumpWasPressedThisFrameという2つのプロパティを参照するだけで済むようにすることで、キーボードやマウスなど他の入力方式にも差し替えやすい設計を目指します。

F310r-Windows11で使えるゲームパッド実機レビュー

Logicool F310ゲームパッドの実機レビュー。Windows 11対応の設定方法やドライバ情報を解説。スペックや操作手順を紹介。

alicia-ing.com

2025.03.28

Logicool G ゲームパッド F310r ゲーム コントローラー 有線 USB 接続 FF14 steam PC PS5 PS4 windows F310 国内正規品 【 ファイナルファンタジー XIV 推奨モデル 】

¥2,527 （2026/09/26 19:01時点 | Amazon調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ

ソースコード

using UnityEngine;
using UnityEngine.InputSystem;

public class PlayerInputHandler : MonoBehaviour
{
    [SerializeField] private InputActionReference moveAction;
    [SerializeField] private InputActionReference jumpAction;

    public Vector2 MoveInput { get; private set; }
    public bool JumpWasPressedThisFrame { get; private set; }

    private void OnEnable()
    {
        moveAction.action.Enable();
        jumpAction.action.Enable();
    }

    private void OnDisable()
    {
        moveAction.action.Disable();
        jumpAction.action.Disable();
    }

    private void Update()
    {
        MoveInput = moveAction.action.ReadValue<Vector2>();
        JumpWasPressedThisFrame = jumpAction.action.WasPressedThisFrame();
    }
}

解説

• 名前空間

• フィールド・プロパティ

MoveInput・JumpWasPressedThisFrameは{ get; private set; }としているため、ほかのスクリプトからは読み取りだけができ、書き換えはできません。

InputActionReferenceでアクションを参照

InputActionReferenceは、Input Actionsアセット内の特定のInput ActionをInspector上から参照できる型です。

[SerializeField] private InputActionReference moveAction;
[SerializeField] private InputActionReference jumpAction;

コード内に直接アクション名を文字列で書く必要がなく、Inspectorから見た目でどのアクションを使っているか確認できます。

Gamepad.currentを直接参照する実装と違って、キーボード用のInput ActionsアセットとゲームパッドMap用のアセットを差し替えるだけで入力元を切り替えられます。

同じPlayerInputHandlerを別のプレハブで使い回す際にも、参照先のアクションを変えるだけで対応できる点が疎結合設計のメリットです。

移動入力をVector2で取得する

MoveInput = moveAction.action.ReadValue<Vector2>();

MoveアクションはAction TypeをValue（Vector2）に設定しているため、ReadValue()でスティックの傾き具合をVector2として取得できます。x軸が左右、y軸が上下の入力値（-1〜1の範囲）です。

取得したMoveInputは、別のスクリプト（プレイヤーの移動処理を担うクラスなど）からplayerInputHandler.MoveInputとして参照し、transform.TranslateやRigidbody.linearVelocityなどに渡してキャラクターを動かすといった使い方をします。

【Unity】Rigidbody+CapsuleColliderを用いたプレイヤー移動

UnityでCharacterControllerからRigidbody+CapsuleColliderへ移動処理を移行する方法を解説。カメラ相対移動、FixedUpdateでの速度制御、移行の判断基準まで紹介します。

alicia-ing.com

2026.07.13

ジャンプ入力を1フレームだけ検知する（WasPressedThisFrame）

JumpWasPressedThisFrame = jumpAction.action.WasPressedThisFrame();

WasPressedThisFrame()は、そのボタンが「このフレームで押された瞬間」かどうかを返すメソッドです。

ジャンプのように「押した瞬間に1回だけ処理を実行したい」動作には、このWasPressedThisFrame()を使うのが適切です。

【Unity】キャラクターをジャンプさせる自然な動きを実装

本記事を読むと以下の実行ができますRigidbodyを使ったキャラクターのジャンプ実装と、SphereCastによる正確...

alicia-ing.com

2026.09.20

isPressedにしない理由

InputActionにはisPressed（現在押されているかどうか）とWasPressedThisFrame()（このフレームで押された瞬間かどうか）という似た名前のプロパティ・メソッドがあります。

ジャンプ処理をisPressedで判定してしまうと、ボタンを押し続けている間、毎フレーム「押されている」と判定され続けてしまいます。その結果、Update()が呼ばれるたびにジャンプ処理が実行され、意図せず連続ジャンプしてしまうバグにつながります。

// 悪い例：ボタンを押している間ずっとtrueになる
if (jumpAction.action.IsPressed())
{
    Jump(); // 毎フレーム呼ばれてしまう
}

// 良い例：押した瞬間の1フレームだけtrueになる
if (jumpAction.action.WasPressedThisFrame())
{
    Jump(); // 1回だけ呼ばれる
}

ジャンプやポーズメニューの開閉など、「1回の入力につき1回だけ処理したい」動作では、必ずWasPressedThisFrame()を使うようにしましょう。

逆に、ダッシュのように「押している間だけ継続する」動作にはisPressedが向いています。用途によって使い分けることが重要です。

実演

空のGameObject、またはプレイヤーオブジェクトにアタッチします。

設定が完了すると、他のスクリプトからplayerInputHandler.MoveInput・playerInputHandler.JumpWasPressedThisFrameを参照するだけで、ゲームパッドからの入力を取得できるようになります。

まとめ

本記事では、Unity Input SystemのInputActionReferenceを使い、ゲームパッドでの移動とジャンプを実装する方法を解説しました。

• InputActionReferenceをInspectorで参照することで、入力元を差し替えやすい疎結合な設計にできる
• 移動はReadValue()、ジャンプはWasPressedThisFrame()で取得する
• ジャンプなど「1回だけ処理したい」入力はisPressedではなくWasPressedThisFrame()を使う

今回紹介したPlayerInputHandlerは移動とジャンプの最小構成ですが、同じ考え方でダッシュ・攻撃・ポーズメニューの開閉など他のアクションにも応用できます。

まずはこの最小構成で「ゲームパッドで動くもの」を作り、そこから少しずつアクションを増やしていくと理解が深まるのでおすすめです。

Rigidbodyを使ったキャラクターのジャンプ実装と、SphereCastによる正確な接地判定を組み合わせて、二段ジャンプや無限ジャンプを起こさない自然なジャンプ動作

Unityでキャラクターをジャンプさせることはゲーム開発での基礎ですが、「ボタンを押しても反応しない」「空中で何度もジャンプできてしまう」といった問題によくぶつかります。

これは多くの場合、接地判定（キャラクターが地面に着いているかどうかの判定）が不十分なことが原因です。

本記事では、RigidbodyとPhysics.SphereCastを使い、CapsuleColliderの実際のサイズに連動した接地判定と、目標到達高さから逆算したジャンプ初速の計算方法をあわせて解説します。

ジャンプ実装に必要な要素（SphereCast）とは？

Unityでジャンプ実装を検索すると、「unity rigidbody ジャンプ」「unity 接地判定」といったキーワードで多くの記事がヒットしますが、実装方式は大きく2つの系統に分かれます。

1. ジャンプそのものの実装（AddForceやvelocityでY方向に力・速度を加える）
2. 接地判定の実装（タグ判定・Raycast・CheckSphere・SphereCast・isGroundedなど）

この2つは別々に解説されがちですが、実際に「ちゃんと動くジャンプ」を作るには両方を組み合わせる必要があります。

特に接地判定が甘いと、空中にいるのにジャンプ入力を受け付けてしまい、二段ジャンプ・無限ジャンプというよくあるバグにつながります。

本記事で採用するPhysics.SphereCastは、球（Sphere）を指定方向に飛ばして衝突を検出するUnityの物理判定です。

単純なRaycast（線を1本飛ばすだけ）と違い、球という「太さ」を持つ判定なので、地面のわずかな段差や傾斜でも安定して接地を検出できます。

SphereCastを使ったジャンプ処理

今回のジャンプ実装は、以下の4ステップで構成されています。

ソースコード

using UnityEngine;

[RequireComponent(typeof(Rigidbody), typeof(CapsuleCollider), typeof(PlayerInputHandler))]
public class PlayerJump : MonoBehaviour
{
    [SerializeField] private float jumpHeight = 1.5f;
    [SerializeField] private LayerMask groundMask = ~0;

    private Rigidbody rb;
    private CapsuleCollider capsule;
    private PlayerInputHandler input;
    private bool jumpRequested;

    private void Awake()
    {
        rb = GetComponent<Rigidbody>();
        capsule = GetComponent<CapsuleCollider>();
        input = GetComponent<PlayerInputHandler>();
    }

    private void Update()
    {
        if (input.JumpWasPressedThisFrame)
        {
            jumpRequested = true;
        }
    }

    private void FixedUpdate()
    {
        Vector3 velocity = rb.linearVelocity;

        if (jumpRequested && IsGrounded())
        {
            velocity.y = Mathf.Sqrt(jumpHeight * -2f * Physics.gravity.y);
        }
        jumpRequested = false;

        rb.linearVelocity = velocity;
    }

    private bool IsGrounded()
    {
        Vector3 origin = transform.TransformPoint(capsule.center);
        float castRadius = capsule.radius * 0.9f;
        float castDistance = capsule.height * 0.5f + 0.15f;
        return Physics.SphereCast(origin, castRadius, Vector3.down, out _, castDistance, groundMask, QueryTriggerInteraction.Ignore);
    }
}

解説

• 入力の検知とFixedUpdateでの物理処理を分離する設計

ジャンプボタンの入力検知をUpdate、実際の速度変更をFixedUpdateに分けています。

• Updateはフレームごとに呼ばれる（フレームレートに依存する）ため、入力の取りこぼしを防ぐのに向いています。
• FixedUpdateは一定の時間間隔で呼ばれる（物理エンジンの更新タイミングに同期する）ため、Rigidbodyを操作する処理はここで行うのが基本です。

Update内で直接Rigidbodyの速度を書き換えてしまうと、フレームレートによって物理挙動が不安定になることがあります。そこで、UpdateではjumpRequestedというフラグを立てるだけにとどめ、実際の速度変更はFixedUpdateでまとめて行うように設計しています。

FixedUpdateの先頭でjumpRequestedを判定した後、必ずfalseにリセットしている点もポイントです。これにより、1回のボタン入力に対してジャンプが1回だけ発生するようになります。

• SphereCastでCapsuleColliderに連動した接地判定を行う

IsGrounded()メソッドが接地判定の中心部分です。単純に固定の半径・距離を指定するのではなく、CapsuleColliderのプロパティから動的に計算しています。

Vector3 origin = transform.TransformPoint(capsule.center);
float castRadius = capsule.radius * 0.9f;
float castDistance = capsule.height * 0.5f + 0.15f;

• origin：capsule.center（ローカル座標）をTransformPointでワールド座標に変換し、キャラクターの中心からキャストを開始します。
• castRadius：コライダーの半径そのままだと壁際でわずかに引っかかることがあるため、0.9fを掛けて少し小さめに設定しています。
• castDistance：カプセルの半分の高さ（中心から底面まで）に、地面との間に余裕を持たせる0.15fを加えています。

この値をキャラクターのサイズ（CapsuleCollider）から計算する設計にしておくことで、キャラクターモデルを差し替えてCapsuleColliderのサイズが変わっても、接地判定のコードを書き直す必要がありません。

• ジャンプの初速を目標到達高さから逆算する

ジャンプの高さを「なんとなくの数値」で調整すると、意図した高さにならず何度も微調整することになります。本実装では、到達させたい高さ（jumpHeight）から必要な初速を逆算しています。

velocity.y = Mathf.Sqrt(jumpHeight * -2f * Physics.gravity.y);

これは物理の等加速度運動の公式 v0 = √(2gH) をそのままコードにしたものです。Physics.gravity.yは通常マイナスの値（デフォルトは-9.81）なので、符号を合わせるために-2fを掛けています。

• H：到達させたい高さ（jumpHeight、インスペクターで調整可能）
• g：重力加速度（Physics.gravity.yの絶対値）
• v0：地面を離れる瞬間に必要な初速（Y方向の速度）

インスペクター上でjumpHeightの値を1.5から2.0に変えるだけで、「ちょうど2m飛び上がるジャンプ」を数値ベースで作れるようになります。感覚での調整に頼らず、狙った高さを確実に再現できるのがこの計算式の利点です。

• レイヤーマスクとQueryTriggerInteraction.Ignoreで誤検知を防ぐ

SphereCastはデフォルトのままだと、地面以外のコライダー（アイテムの当たり判定やエフェクト用のトリガーなど）にも反応してしまうことがあります。これを防ぐために2つの仕組みを併用しています。

• groundMask（レイヤーマスク）： SphereCastの判定対象を、あらかじめ設定した「地面」レイヤーのみに絞り込みます。プレイヤー自身や敵、アイテムなどのレイヤーを対象外にできます。
• QueryTriggerInteraction.Ignore： IsTriggerが有効なコライダー（当たり判定はあるが物理的にすり抜けるコライダー）を接地判定の対象から除外します。これを指定しないと、トリガーに触れただけで「地面に着地した」と誤判定されることがあります。

この2つを組み合わせることで、地面用のコライダーだけを確実に検出できるようになります。レイヤーマスクの活用に触れていない競合記事も多いため、意図しない誤検知を防ぎたい場合は必ず設定しておきましょう。

実演

Rigidbody・CapsuleCollider・PlayerInputHandlerを設定済みのプレイヤーオブジェクトにアタッチします（RequireComponentにより、この3つが未設定のオブジェクトにはアタッチできません）。

まとめ

本記事では、Rigidbodyを使ったUnityのジャンプ実装を、以下の4つのポイントに分けて解説しました。

• 入力検知（Update）と物理処理（FixedUpdate）を分離する設計
• CapsuleColliderの実サイズに連動したSphereCast接地判定
• 目標到達高さから初速を逆算するv0 = √(2gH)の計算式
• レイヤーマスクとQueryTriggerInteraction.Ignoreによる誤検知防止

これらを組み合わせることで、二段ジャンプ・無限ジャンプといった典型的なバグを防ぎつつ、狙った高さに正確に跳ぶジャンプ処理を作れます。

まずは本記事のコードをそのまま自分のプロジェクトに組み込み、jumpHeightやgroundMaskの値を自分のキャラクターに合わせて調整するところから始めてみてください。

接地判定の考え方は壁ジャンプや二段ジャンプなど、他のアクションを追加する際の土台にもなります。

プレイヤーの後ろから滑らかに追従する、カクつきのない三人称カメラの実装

3人称視点（TPS/TPP）のゲームを作っていると、カメラをプレイヤーにそのまま追従させただけではカクついたり、キャラクターの動きに機械的に張り付いてしまったりして、なめらかさに欠ける映像になってしまうことがあります。

本記事では、位置はVector3.Lerp、回転はQuaternion.Slerpという2つの異なる補間関数を組み合わせて、自然な三人称カメラの追従処理を実装する方法を解説します。

followSpeedやrotationSpeedなどのパラメータ調整方法や、カメラの動きが不自然になったときのチェックポイントまで、実際に手を動かしながら理解できる内容になっています。

三人称カメラの追従処理とは？

三人称カメラ（TPS/TPPカメラ）とは、プレイヤーが操作するキャラクターの背後や斜め上から映すカメラのことです。アクションゲームやオープンワールドゲームなど、多くの3Dゲームで採用されている視点です。

三人称カメラの追従処理を作るとき、意識すべきポイントは大きく分けて2つあります。

transform.positionをそのままキャラクターの位置に代入するだけでは、カメラが一瞬でキャラクターの真後ろにワープしたような、機械的で不自然な映像になってしまいます。

そこで、位置と回転それぞれに補間（インターポレーション）をかけることで、カメラがワンテンポ遅れてついてくるような、滑らかな追従感を演出します。

このとき重要なのが、位置の補間にはVector3.Lerp、回転の補間にはQuaternion.Slerpという異なる関数を使うという点です。

位置は直線的な移動なので線形補間（Lerp）で十分ですが、回転は「角度」を扱うため、球面線形補間（Slerp）を使わないと不自然な回転になってしまいます。

この違いについてはコードを解説するセクションで詳しく説明します。

Vector3.LerpとQuaternion.Slerpで実装する三人称カメラ

三人称カメラの追従処理は、以下の3ステップで実装できます。

カメラをキャラクターの子オブジェクトにしてしまうと、キャラクターの回転がそのままカメラの回転に伝わってしまい、独立した滑らかな動きを付けられなくなります。

そのため、カメラはシーン上の独立したオブジェクトとして配置し、スクリプトで位置・回転を毎フレーム計算する構成にします。

ソースコード

using UnityEngine;

public class CameraFollow : MonoBehaviour
{
    [SerializeField] private Transform target;
    [SerializeField] private Vector3 offset = new Vector3(0f, 3.2f, -7f);
    [SerializeField] private float followSpeed = 5f;
    [SerializeField] private float rotationSpeed = 5f;
    [SerializeField] private float lookHeight = 1.5f;

    private void LateUpdate()
    {
        if (target == null)
        {
            return;
        }
        Vector3 desiredPosition = target.position + offset;
        transform.position = Vector3.Lerp(transform.position, desiredPosition, followSpeed * Time.deltaTime);

        Vector3 lookPoint = target.position + Vector3.up * lookHeight;
        Quaternion desiredRotation = Quaternion.LookRotation(lookPoint - transform.position);
        transform.rotation = Quaternion.Slerp(transform.rotation, desiredRotation, rotationSpeed * Time.deltaTime);
    }
}

解説

• 位置の追従処理（Vector3.Lerp）

Vector3 desiredPosition = target.position + offset;
transform.position = Vector3.Lerp(transform.position, desiredPosition, followSpeed * Time.deltaTime);

まずtarget.position + offsetで、「カメラが本来いるべき理想の位置（desiredPosition）」を計算します。

offsetは(0, 3.2, -7)のように、キャラクターから見て「上に3.2、後ろに7」といった相対位置を指定するベクトルです。

次にVector3.Lerp(現在位置, 理想位置, 割合)で、現在のカメラ位置から理想位置へ少しずつ近づけます。第3引数のfollowSpeed * Time.deltaTimeが「1フレームでどれだけ理想位置に近づくか」の割合です。

Time.deltaTimeを掛けることで、フレームレートが変わっても同じ速度で追従するようになります。

Vector3.Lerpは2点間を直線的に補間する関数なので、位置の移動には自然にマッチします。
これが、いきなりtransform.position = desiredPositionと代入せず、Lerpを使う理由です。

• 注視点の回転処理（Quaternion.Slerp）

Vector3 lookPoint = target.position + Vector3.up * lookHeight;
Quaternion desiredRotation = Quaternion.LookRotation(lookPoint - transform.position);
transform.rotation = Quaternion.Slerp(transform.rotation, desiredRotation, rotationSpeed * Time.deltaTime);

回転の処理も基本的な流れは位置と同じで、「理想の回転（desiredRotation）」を計算してから、現在の回転を少しずつ近づけます。

ただし、回転を補間する際はVector3.LerpではなくQuaternion.Slerp（球面線形補間）を使う点に注意してください。

回転は「角度」という性質上、直線的な補間（Lerp）をそのまま当てはめると、回転速度にムラが出たり、経由地点でおかしな姿勢を取ったりすることがあります。

Quaternion.Slerpは球面上を一定の角速度で補間するため、回転が常に自然な速さで進みます。位置はLerp、回転はSlerpという使い分けは、Unityのカメラ制御において基本となる考え方です。

【Unity】Vectorを使ったイージング、アニメーション動作

Vector2を使ったスクリプトでアニメーションを作成します。RectTransformで座標を決めて、線形補間「Leap」を実行します。本記事では、マウスのポインターの位置でアニメーションを稼働させるソースコードを公開・解説しています。

alicia-ing.com

2025.08.11

• LookRotationで注視点を計算する仕組み

Quaternion.LookRotation(方向ベクトル)は、指定した方向を向く回転（Quaternion）を返す関数です。

ここでは、lookPoint – transform.position（カメラから注視点への方向ベクトル）を渡すことで、「カメラから見て、注視点の方向を向いた回転」を計算しています。

lookPointはtarget.position + Vector3.up * lookHeight、つまりキャラクターの位置から少し上にずらした点です。

キャラクターの足元をそのまま注視点にすると、カメラが常に下向きになり圧迫感のある画になってしまうため、lookHeightで見上げるような角度にならないよう調整しています。

• LateUpdateを使う理由

このスクリプトでは、UpdateではなくLateUpdateを使っています。これは三人称カメラの実装において非常に重要なポイントです。

Unityでは、シーン内の複数のUpdateがどの順番で実行されるかは保証されていません。もしキャラクターの移動処理と、カメラの追従処理が両方ともUpdateに書かれていた場合、カメラのUpdateがキャラクターのUpdateより先に実行されてしまうことがあります。

それにより、カメラは「1フレーム前のキャラクター位置」を基準に追従することになり、映像がカクつく原因になります。

LateUpdateは、シーン内のすべてのUpdateが終わった後に必ず呼ばれることが保証されています。そのため、キャラクターの移動処理が確実に終わった後の最新位置を使ってカメラを更新でき、カクつきのない滑らかな追従が実現できます。

カメラ制御では「移動処理はUpdate、カメラ追従はLateUpdate」という役割分担を徹底しましょう。

実装

シーン上に独立して配置したカメラオブジェクトにアタッチします。

offset・followSpeed・rotationSpeed・lookHeightはデフォルト値のままでも動作しますが、キャラクターのモデルサイズやゲームのジャンルに応じて調整が必要になることがほとんどです。

値の目安は次の「パラメータ調整ガイド」を参照してください。

パラメータ調整ガイド

スクリプトには4つの調整用パラメータがあります。それぞれの値を変えたときに、どのような体感の変化があるかをまとめました。

【Unity】スライダーを特定の位置にスナップ（吸着）させる方法

UnityのSliderに任意の位置へのスナップ（吸着）機能を実装する方法を解説。IPointerUpHandlerとonValueChangedを組み合わせ、snapPointsとsnapThresholdで吸着位置・距離を自由に設定できます。

alicia-ing.com

2026.06.18

followSpeed（追従の重さ）

followSpeedは、カメラがキャラクターの理想位置にどれだけ速く近づくかを決める値です。値が大きいほど追従が速く（キャラクターに張り付くような動き）、値が小さいほど追従が遅く（ワンテンポ遅れてついてくる、重厚感のある動き）なります。

目安として、アクション性の高いゲームではfollowSpeed = 8〜10程度、じっくり見せたい探索系のゲームではfollowSpeed = 3〜5程度から調整を始めるとよいでしょう。

極端に小さくしすぎると、キャラクターが素早く動いたときにカメラが置いていかれ、画面外にキャラクターが消えてしまうことがあるので注意してください。

rotationSpeed（回転の追従感）

rotationSpeedは、カメラの向きが理想の回転にどれだけ速く追いつくかを決める値です。この値がfollowSpeedと極端に違うと、後述する「不自然な動き」の原因になりやすいため、基本的にはfollowSpeedと近い値からスタートするのがおすすめです。

lookHeight（注視点の高さ）

lookHeightは、カメラがキャラクターのどの高さを見つめるかを決める値です。キャラクターの頭上あたり（1.5前後）に設定すると自然な見下ろし角度になり、値を大きくしすぎるとカメラが必要以上に見下ろす形になります。

逆に0に近づけると、キャラクターの足元付近を注視点にすることになり、水平に近い圧迫感のある画角になります。

offset（カメラ距離・画角）

offsetはキャラクターから見たカメラの相対位置で、(左右, 上下, 前後)のベクトルで指定します。Y成分を大きくするとカメラの高さが上がり、Z成分（マイナス方向）を大きくするとキャラクターとの距離が離れて引きの画になります。

壁際でカメラがめり込まないようにする「衝突回避」は本記事のスコープ外としていますが、offsetの距離を調整するだけでも、狭い通路でのめり込みはある程度軽減できます。

まとめ

本記事では、Unityで三人称カメラの追従処理を実装する方法を解説しました。

• 位置の追従にはVector3.Lerp、回転の追従にはQuaternion.Slerpを使う（直線補間と球面補間の使い分け）
• Quaternion.LookRotationで注視点への方向を計算し、lookHeightで見上げ角度を調整する
• カメラの更新処理はUpdateではなくLateUpdateに書き、実行順序によるカクつきを防ぐ
• followSpeedとrotationSpeedは近い値に揃えることで、首振りのような不自然な動きを防げる

まずは本記事のパラメータの目安値から始めて、実際にゲームを動かしながらfollowSpeed・rotationSpeed・lookHeight・offsetの4つを少しずつ調整し、自分のゲームに合った「気持ちいい」カメラワークを探ってみてください。

壁のめり込み対策やCinemachineの活用など、さらに踏み込んだカメラ制御は次のステップとして挑戦してみるとよいでしょう。