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

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

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

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

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgtK8Tx7b-J1_yHtIMa%2F-MgtKdH0WSkmwhahYXW4%2Fimage.png?alt=media\&token=31e61fc8-f11b-475e-bcfa-70755ed1f5c9)

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

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

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgtK8Tx7b-J1_yHtIMa%2F-MgtKkkzwexokEF0lgEW%2Fimage.png?alt=media\&token=67a30b24-b40f-4bdb-9e40-b31872f7961e)

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

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgtK8Tx7b-J1_yHtIMa%2F-MgtKqz8KUwpAVM0JKRK%2Fimage.png?alt=media\&token=42ce5fd8-449c-4a7e-a00f-fade79afe5a3)

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

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

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

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

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgtK8Tx7b-J1_yHtIMa%2F-MgtLVKeMNQbYOSDavl_%2Fimage.png?alt=media\&token=76c490a1-7aa7-4025-988d-f57bdc582c6b)

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgtK8Tx7b-J1_yHtIMa%2F-MgtLZ3iHSE-ZRWVPDsj%2Fimage.png?alt=media\&token=3a8dd229-23c3-4a13-add1-ea25d640f70b)

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgtK8Tx7b-J1_yHtIMa%2F-MgtLcGl_NLEGfXxRiSa%2Fimage.png?alt=media\&token=f4718c5a-994b-42fa-b797-cd62faa76ca7)

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

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgtK8Tx7b-J1_yHtIMa%2F-MgtLlgpUDTKVhii_LB6%2Fimage.png?alt=media\&token=e5b2e173-c40f-4903-aa32-548347ab0b78)

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgtK8Tx7b-J1_yHtIMa%2F-MgtLqBwTEx4snZb8HcW%2Fimage.png?alt=media\&token=d9eb6267-acd5-49da-b13a-e76d420de9fe)

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

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

**次へ**:

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