パート 1 : プロジェクトの作成
このパートで学習する内容は、次のとお りです。
- Monaca提供のテンプレートを使用して、新規プロジェクトをローカルに作成します。この方法以外にも、Monacaクラウド IDE に保存されているプロジェクトを、または、既存の Cordovaプロジェクトを、Monaca Localkitにインポートすることもできます。詳細は、プロジェクトのインポートをご確認ください。
- Monaca Localkit上でプロジェクトをプレビューします。端末は必要ありません。
- プロジェクトファイルを編集して、プレビュー上に変更点が反映されることを確認します。
Monaca Localkit を起動し、Monaca アカウントを使用してログインします。
ログイン後、初めての Monaca プロジェクトを、ローカルに作ってみましょう。次の手順に従います。
- 1.Monaca Localkit のダッシュボード上で、
+ → 作成を選択します。
2. 必要な情報を入力します。
- プロジェクト名 : プロジェクト一覧に表示される、プロジェクトの名前
- 作業ディレクトリ : プロジェクトファイルの保存先となるディレクトリー
- カテゴリを選択 : プロジェクトに使用するテンプレートの種類を選択します。
- テンプレートを選択 : プロジェクトで使用するテンプレート。
プレビューボタンをクリックすると、選択されているテンプレートを確認できます。
3. プロジェクトの作成後、プロジェクト一覧上に、作成したプロジェクトが表示されていることを確認します。
Monaca Localkit では、端末を用意しなくても、アプリの外観と動作を検証できるように、ライブプレビュー機能を提供しています。ただし、ライブプレビューを使用して、実際に検証できる機能には、制限があります。詳細は、 ライブプレビューの機能と制限 をご確認ください。
プロジェクトをプレビューする場合には、次の手順に従います。
- 1.Monaca Localkit のダッシュボード上で、先ほど作成したプロジェクトをクリックします。
- 2.
プレビューボタンをクリックします。
3. 次のようなプレビューウィンドウが表示されます。
4. プレビューウィンドウ上で、アプリの動作を検証してみましょう。
- 1.Monaca Localkit ダッシュボード上から、プロジェクトを保存しているディレクトリーを参照できます。参照する場合、プロジェクト一覧上で、対象プロジェクトの選択後 ( ここでは、メモ帳アプリのプロジェクト )、メニューアイコンの
開くボタンをクリックするか、または、プロジェクトを右クリックをして、開くを選択します ( 下のスクリーンショットを参照のこと )。
2. 新しいウィンドウが開き、プロジェクトファイルの保存先とそのコンテンツが表示されます。
www フォルダー内のプロジェクトファイルが、編集対象のファイルです。 components フォルダーには、jQuery Mobile など、プロジェクトで必要なファイルが保存されているため、編集はできません。他の JavaScript、CSS、HTML ファイルは、お好みのエディターを使用して、自由に編集できます。
3. 試しに、
index.html ファイルを編集してみましょう。お好きな箇所を変更して、保存してみ ましょう。 4. プレビュー機能を使用して、変更点が反映されているか確認してみましょう。プレビューウィンドウがすでに開いている場合には、変更点の保存後、即時に、画面が更新されます。
次へ: