# インストール

<div id="install"></div>

3つのコマンドで、空のフォルダーから、ルーティング、ネットワーク、テーマ、コード生成が設定済みの Flutter アプリを起動できます。

<div class="ny-doc-strip">
<span class="ny-doc-strip-label">始める前に</span>
<span class="ny-doc-strip-item">Flutter SDK をインストール済み</span>
<span class="ny-doc-strip-dot"></span>
<span class="ny-doc-strip-item">Dart 3</span>
<span class="ny-doc-strip-dot"></span>
<a href="/ja/docs/7.x/requirements">すべての要件 →</a>
</div>

## インストール

次のコマンドを順番に実行してください。どのコマンドも安全に再実行できます。

<div class="ny-doc-steps">
<div class="ny-doc-step">
<span class="ny-doc-step-num">1</span>
<h3 class="ny-doc-step-title">Nylo CLI をグローバルにインストール</h3>

`nylo` コマンドをシステムに追加します。

``` bash
dart pub global activate nylo_installer
```

</div>

<div class="ny-doc-step">
<span class="ny-doc-step-num">2</span>
<h3 class="ny-doc-step-title">新しいプロジェクトを作成</h3>

このコマンドは Nylo テンプレートをクローンし、アプリ名でプロジェクトを設定し、すべての依存関係を自動的にインストールします。

``` bash
nylo new my_app
```

</div>

<div class="ny-doc-step">
<span class="ny-doc-step-num">3</span>
<h3 class="ny-doc-step-title">Metro エイリアスの設定</h3>

プロジェクト用の `metro` コマンドを設定します。これにより、`dart run` の完全な構文を使わずに Metro CLI コマンドを使用できるようになります。

``` bash
cd my_app
nylo init
```

その後、ターミナルを再起動するか、`nylo init` が出力する `source` コマンドを実行してください。

</div>
</div>

<div class="ny-doc-panel">
<div class="ny-doc-panel-head">
<img src="https://nylo.dev/images/nylo_logo.png" alt="" class="ny-mark h-[16px]">
<span>用意されるもの</span>
</div>
<div class="ny-doc-panel-body">
<div class="ny-doc-panel-grid">
<div class="ny-doc-panel-item">ルーティングとナビゲーションの事前設定</div>
<div class="ny-doc-panel-item">API サービスのボイラープレート</div>
<div class="ny-doc-panel-item">テーマとローカライゼーションのセットアップ</div>
<div class="ny-doc-panel-item">コード生成用の Metro CLI</div>
</div>
</div>
</div>


<div id="running-the-project"></div>

## プロジェクトの実行

Nylo プロジェクトは標準的な Flutter アプリと同じように実行できます。

<div class="ny-doc-tabs" x-data="{ tab: '\u30bf\u30fc\u30df\u30ca\u30eb' }">
<div class="ny-doc-tabbar" role="tablist">
<button type="button" role="tab" class="ny-doc-tab" @click="tab = '\u30bf\u30fc\u30df\u30ca\u30eb'" :class="tab === '\u30bf\u30fc\u30df\u30ca\u30eb' ? 'is-active' : ''" :aria-selected="tab === '\u30bf\u30fc\u30df\u30ca\u30eb'">ターミナル</button>
<button type="button" role="tab" class="ny-doc-tab" @click="tab = 'Android Studio'" :class="tab === 'Android Studio' ? 'is-active' : ''" :aria-selected="tab === 'Android Studio'">Android Studio</button>
<button type="button" role="tab" class="ny-doc-tab" @click="tab = 'VS Code'" :class="tab === 'VS Code' ? 'is-active' : ''" :aria-selected="tab === 'VS Code'">VS Code</button>
</div>

<div class="ny-doc-tabpanel" role="tabpanel" x-show="tab === '\u30bf\u30fc\u30df\u30ca\u30eb'" x-cloak>

``` bash
flutter run
```

ビルドが成功すると、Nylo のデフォルトランディング画面が表示されます。

</div>

<div class="ny-doc-tabpanel" role="tabpanel" x-show="tab === 'Android Studio'" x-cloak>

プロジェクトフォルダーを開き、ターゲットセレクターからデバイスを選択して、**Run** を押します。

<a href="https://docs.flutter.dev/tools/android-studio#running-and-debugging" target="_BLANK">Flutter ドキュメント：実行とデバッグ ↗</a>

</div>

<div class="ny-doc-tabpanel" role="tabpanel" x-show="tab === 'VS Code'" x-cloak>

プロジェクトフォルダーを開き、コマンドパレットから **Debug: Start Without Debugging** を実行します。

<a href="https://docs.flutter.dev/tools/vs-code#run-app-without-breakpoints" target="_BLANK">Flutter ドキュメント：ブレークポイントなしで実行 ↗</a>

</div>

</div>


<div id="metro-cli"></div>

## Metro CLI

Metro がプロジェクトファイルを生成します。引数なしで実行するとメニューが表示され、コマンドを直接呼び出すこともできます。

``` plaintext
$ metro

Metro - Nylo's Companion to Build Flutter apps by Anthony Gordon

Usage:
    command [options] [arguments]

Options
    -h

All commands:

[Widget Commands]
  make:page
  make:stateful_widget
  make:stateless_widget
  make:state_managed_widget
  make:navigation_hub
  make:journey_widget
  make:bottom_sheet_modal
  make:button
  make:form

[Helper Commands]
  make:model
  make:provider
  make:api_service
  make:controller
  make:event
  make:route_guard
  make:config
  make:interceptor
  make:command
  make:env
```

### コマンドリファレンス

各コマンドには名前を指定します。例：`metro make:page settings_page`

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">ウィジェットコマンド</div>
<div class="ny-doc-command">
<code>metro make:page</code>
<span>新しいページを作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateful_widget</code>
<span>Stateful Widget を作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateless_widget</code>
<span>Stateless Widget を作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:state_managed_widget</code>
<span>State 管理 Widget を作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:navigation_hub</code>
<span>Navigation Hub（ボトムナビ）を作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:journey_widget</code>
<span>Navigation Hub 用の Journey Widget を作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:bottom_sheet_modal</code>
<span>ボトムシートモーダルを作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:button</code>
<span>カスタムボタン Widget を作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:form</code>
<span>バリデーション付きフォームを作成</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">ヘルパーコマンド</div>
<div class="ny-doc-command">
<code>metro make:model</code>
<span>Model クラスを作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:provider</code>
<span>Provider を作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:api_service</code>
<span>API サービスを作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:controller</code>
<span>Controller を作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:event</code>
<span>イベントを作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:route_guard</code>
<span>Route Guard を作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:config</code>
<span>設定ファイルを作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:interceptor</code>
<span>ネットワークインターセプターを作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:command</code>
<span>カスタム Metro コマンドを作成</span>
</div>
<div class="ny-doc-command">
<code>metro make:env</code>
<span>.env から環境設定を生成</span>
</div>
</div>

### 使用例

``` bash
# 新しいページを作成
metro make:page settings_page

# Model を作成
metro make:model User

# API サービスを作成
metro make:api_service user_api_service
```


<div id="nylo-cli"></div>

## Nylo CLI

<!-- uncertain: strip label "Requires" — no established translation in this locale's existing files -->
<div class="ny-doc-strip">
<span class="ny-doc-strip-label">必須</span>
<span class="ny-doc-strip-item">nylo_installer 1.8.0+</span>
<span class="ny-doc-strip-dot"></span>
<a href="#nylo-self-update">CLI の更新 →</a>
</div>

ステップ 1 の `nylo` コマンドは、プロジェクトの作成以外にも使えます。プロジェクトディレクトリから実行することで、ビルドのクリーンアップ、iOS Pod のリフレッシュ、テストの実行、翻訳のチェックができます。

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">プロジェクトコマンド</div>
<div class="ny-doc-command">
<code>nylo new</code>
<span>新しいプロジェクトを作成</span>
</div>
<div class="ny-doc-command">
<code>nylo init</code>
<span>シェルに metro エイリアスを設定</span>
</div>
<div class="ny-doc-command">
<code>nylo clean</code>
<span>flutter clean と flutter pub get を実行</span>
</div>
<div class="ny-doc-command">
<code>nylo ios:pod-refresh</code>
<span>iOS Pod を再インストール</span>
</div>
<div class="ny-doc-command">
<code>nylo metro</code>
<span>エイリアスなしで Metro コマンドを実行</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">テストと翻訳</div>
<div class="ny-doc-command">
<code>nylo test</code>
<span>テストをフォーマットして実行</span>
</div>
<div class="ny-doc-command">
<code>nylo locale:find-untranslated</code>
<span>.tr() でラップされていないテキストを検索</span>
</div>
<div class="ny-doc-command">
<code>nylo locale:check-missing-keys</code>
<span>lang ファイルに不足しているキーを検索</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">CLI 自体</div>
<div class="ny-doc-command">
<code>nylo self-update</code>
<span>nylo を最新バージョンに更新</span>
</div>
<div class="ny-doc-command">
<code>nylo --version</code>
<span>インストール済みのバージョンを表示</span>
</div>
</div>

オプションを受け取るコマンドは `-h` で一覧表示できます。例えば `nylo test -h` のようにします。テストについては [テストの実行](/docs/7.x/testing#running-tests) を、`locale:` コマンドについては [翻訳の監査](/docs/7.x/localization#auditing-translations) を参照してください。

<div id="nylo-clean"></div>

### プロジェクトのクリーンアップ

`nylo clean` は `flutter clean` を実行した後、`flutter pub get` を実行します。通常のクリーンでは不十分な場合は、プラットフォームフラグを追加してください:

``` bash
# flutter clean を実行後、flutter pub get を実行
nylo clean

# ios/Pods、ios/.symlinks、ios/Podfile.lock も削除し、pod install --repo-update を実行
nylo clean --ios

# android/ で gradlew clean も実行
nylo clean --android

# 上記の両方
nylo clean --all
```

プロジェクトに `ios/` または `android/` フォルダーがない場合、そのプラットフォームは警告とともにスキップされます。`pod install` は macOS でのみ実行されます。

<div id="nylo-ios-pod-refresh"></div>

### iOS Pod のリフレッシュ

CocoaPods が同期しなくなった場合、`nylo ios:pod-refresh` は `ios/Pods`、`ios/.symlinks`、`ios/Podfile.lock` を削除し、`ios/` フォルダーで `pod install --repo-update` を実行します:

``` bash
nylo ios:pod-refresh
```

macOS 上でプロジェクトのルートから実行してください。`nylo clean --ios` とは異なり、`flutter clean` や `flutter pub get` は実行しません。

<div id="nylo-metro"></div>

### エイリアスなしで Metro を実行

`nylo metro` は、それ以降に指定したものをすべて Metro（`dart run nylo_framework:main`）に渡します。`nylo init` を実行する前や、`nylo init` が `metro` エイリアスを追加できない Windows で使用してください:

``` bash
nylo metro make:page settings_page
nylo metro make:model User
```

<div id="nylo-self-update"></div>

### CLI の更新

``` bash
nylo self-update
```

これは pub.dev を確認し、新しいバージョンが利用可能な場合は `nylo_installer` を再インストールします。コマンドの実行後、`nylo` はアップデートが利用可能な場合にも通知します。出力先がターミナルでない場合は静かになるため、この通知が CI ログやパイプ出力に混ざることはありません。

インストール済みのバージョンを確認するには:

``` bash
nylo --version
```