# パート 1 : プロジェクトの作成

このパートで学習する内容は、次のとおりです。

* Monaca提供のテンプレートを使用して、新規プロジェクトをローカルに作成します。この方法以外にも、Monacaクラウド IDE に保存されているプロジェクトを、または、既存の Cordovaプロジェクトを、Monaca Localkitにインポートすることもできます。詳細は、[プロジェクトのインポート](/products_guide/monaca_localkit/overview.md#purojekutonoinpto)をご確認ください。
* Monaca Localkit上でプロジェクトをプレビューします。端末は必要ありません。
* プロジェクトファイルを編集して、プレビュー上に変更点が反映されることを確認します。

## ステップ 1 : Monaca Localkit へのログイン

Monaca Localkit を起動し、Monaca アカウントを使用してログインします。

![](/files/-MgtKdH0WSkmwhahYXW4)

## ステップ 2 : プロジェクトの新規作成

ログイン後、初めての Monaca プロジェクトを、ローカルに作ってみましょう。次の手順に従います。

1. Monaca Localkit のダッシュボード上で、 **`+ → 作成`**を選択します。

![](/files/-MgtKkkzwexokEF0lgEW)

    2\. 必要な情報を入力します。

* プロジェクト名 : プロジェクト一覧に表示される、プロジェクトの名前
* 作業ディレクトリ : プロジェクトファイルの保存先となるディレクトリー
* カテゴリを選択 : プロジェクトに使用するテンプレートの種類を選択します。
* テンプレートを選択 : プロジェクトで使用するテンプレート。  `プレビュー`ボタンをクリックすると、選択されているテンプレートを確認できます。

![](/files/-MgtKqz8KUwpAVM0JKRK)

    3\. プロジェクトの作成後、プロジェクト一覧上に、作成したプロジェクトが表示されていることを確認します。

## ステップ 3 : プロジェクトのプレビュー

Monaca Localkit では、端末を用意しなくても、アプリの外観と動作を検証できるように、ライブプレビュー機能を提供しています。ただし、ライブプレビューを使用して、実際に検証できる機能には、制限があります。詳細は、 [ライブプレビューの機能と制限](/products_guide/monaca_ide/overview.md) をご確認ください。

プロジェクトをプレビューする場合には、次の手順に従います。

1. Monaca Localkit のダッシュボード上で、先ほど作成したプロジェクトをクリックします。
2.  `プレビュー`ボタンをクリックします。

![](/files/-MgtLVKeMNQbYOSDavl_)

    3\. 次のようなプレビューウィンドウが表示されます。

![](/files/-MgtLZ3iHSE-ZRWVPDsj)

    4\. プレビューウィンドウ上で、アプリの動作を検証してみましょう。

![](/files/-MgtLcGl_NLEGfXxRiSa)

## ステップ 4 : プロジェクトファイルの編集

1. Monaca Localkit ダッシュボード上から、プロジェクトを保存しているディレクトリーを参照できます。参照する場合、プロジェクト一覧上で、対象プロジェクトの選択後 ( ここでは、メモ帳アプリのプロジェクト )、メニューアイコンの`開く`ボタンをクリックするか、または、プロジェクトを右クリックをして、 `開く`を選択します ( 下のスクリーンショットを参照のこと )。

![](/files/-MgtLlgpUDTKVhii_LB6)

    2\. 新しいウィンドウが開き、プロジェクトファイルの保存先とそのコンテンツが表示されます。 `www` フォルダー内のプロジェクトファイルが、編集対象のファイルです。 `components` フォルダーには、jQuery Mobile など、プロジェクトで必要なファイルが保存されているため、編集はできません。他の JavaScript、CSS、HTML ファイルは、お好みのエディターを使用して、自由に編集できます。

![](/files/-MgtLqBwTEx4snZb8HcW)

    3\. 試しに、`index.html` ファイルを編集してみましょう。お好きな箇所を変更して、保存してみましょう。

    4\. プレビュー機能を使用して、変更点が反映されているか確認してみましょう。プレビューウィンドウがすでに開いている場合には、変更点の保存後、即時に、画面が更新されます。

**次へ**:

* [パート 2 : Monaca Localkit と Monaca デバッガーとの連携](/tutorials/monaca_localkit/testing_debugging.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/tutorials/monaca_localkit/starting_project.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.