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

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

1. [Monaca](https://monaca.mobi/ja/login) にログインします。
2. Monaca アカウント情報を入力します。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-Mgt3nWNt1pOgeE9Jn6Z%2F-Mgt4mRodLtpZbxkq5xc%2Fimage.png?alt=media\&token=c36dd9f1-6964-4e7c-9e4f-51928b0400b3)

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

次の手順に従い、初めての Monaca プロジェクトを早速作ってみましょう。 ログインすると、ダッシュボードへ自動的に遷移します。 これで、初めての Monaca プロジェクトを作成する準備が整いました。 新規プロジェクトの作成は、次のとおりです。

1. ダッシュボードから、`新しいプロジェクトを作る`または`インポート`を選択することで、新しい Monaca プロジェクトを作成することができます。`新規プロジェクトの作成` を選択すると、さまざまなテンプレートから新しいプロジェクトを作成することができます。`インポート` を選択した場合は、既存の \[Cordova / Monaca] プロジェクトから、以下のような方法で、新しいプロジェクトを作成することができます：
   * URL を指定してインポート (zip 形式)
   * プロジェクトのパッケージをアップロード (zip 形式)
   * Git のリポジトリからインポート ([Git SSH との連携](https://ja.docs.monaca.io/products_guide/monaca_ide/version_control/git_ssh_integration) を参照)
   * GitHubのリポジトリからインポート ([GitHub との連携](https://ja.docs.monaca.io/products_guide/monaca_ide/version_control/github_integration) を参照).

![Import Project Dialog](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-Mgt3nWNt1pOgeE9Jn6Z%2F-Mgt59QB7WUOhb3nTdzk%2Fimage.png?alt=media\&token=387f5ad0-667e-423e-bc8f-a1bec343f6eb)

![Create Project Dialog](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-Mgt3nWNt1pOgeE9Jn6Z%2F-Mgt5Gbc8MhCCUIBdHTr%2Fimage.png?alt=media\&token=e270ded9-be02-40cb-bd13-c843fbcdc8f2)

2\. ここでは、新規プロジェクトの作成 を選択します。表示される `新規プロジェクトの作成` ダイアログ上で サンプルアプリを選択し、次に、`jQuery TODO App` テンプレートの`作成`ボタンをクリックします。

3\. `プロジェクトを作成する`ボタンをクリックします。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-Mgt3nWNt1pOgeE9Jn6Z%2F-Mgt5ZpGXix8EMmpvzv9%2Fimage.png?alt=media\&token=c30e85e9-7a86-4a1b-9653-613c5b0fda18)

4\. ダッシュボードの `オンライン` タブ上に、新規作成したプロジェクトが表示されます。

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

端末を使用しなくても「 プレビューウィンドウ 」を使用すれば、Monaca クラウド IDE 上でプロジェクトをプレビューできます。

{% hint style="info" %}
プレビューウィンドウを使用して実際に検証できる機能には制限があります。制限としては、使用できる Cordova プラグイン/API の種類、Ajax リクエストなどがあります。詳細は、 [ライブプレビューの機能と制限](https://ja.docs.monaca.io/products_guide/monaca_ide/overview) をご確認ください。
{% endhint %}

1. ダッシュボードからプロジェクトを開きます。Monaca クラウド IDE が起動し、デフォルトでは右側にはプレビューウィンドウが表示されます。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-Mgt3nWNt1pOgeE9Jn6Z%2F-Mgt6-s0L1Eu_eDnOlKl%2Fimage.png?alt=media\&token=da516adf-e8ee-4e54-b61d-ac8382f76044)

2\. プレビューウィンドウ上で、TODO をいくつか追加してみましょう。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-Mgt3nWNt1pOgeE9Jn6Z%2F-Mgt63QwVWr-2AddPX-X%2Fimage.png?alt=media\&token=27e1a32b-d73b-414a-b076-c51d9564d64d)

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

{% hint style="info" %}
編集できるファイルは、`www` フォルダーの下にあるファイルになります。
{% endhint %}

1. 左側のプロジェクトツリー画面から、編集対象のファイルを選択します。コードエディターを使用して index.html ファイルの内容を変更してみましょう。
2. ファイルの編集後、変更を保存します。次に、プレビューウィンドウ上で変更点が反映されていることを確認してみましょう。他の箇所も変更して、プレビュー上で確認してみましょう。 今回使用したテンプレートの詳細は、[TODO 管理アプリ](https://ja.docs.monaca.io/sampleapp/samples/todo) をご確認ください。

{% hint style="info" %}
Monaca クラウド IDE に実装されているコードエディターの詳細は、 [コードエディター](https://ja.docs.monaca.io/products_guide/monaca_ide/overview#kdoedit) をご確認ください。
{% endhint %}

**次へ**:

* [パート 2 : Monaca クラウド IDE と Monaca デバッガーとの連携](https://ja.docs.monaca.io/tutorials/monaca_ide/testing_debugging)