Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@sakkuntyo

monacaのローカル開発環境構築

More than 1 year has passed since last update.

monacaのライブプレビュー便利ですよね
でも好きなエディタ使ったり、Gitで構成管理しながらやりたい所

monaca-cliを使えばそんな事も出来ます!!!!

Vimで編集、Chromeでレイアウト確認している例
image.png

ローカルで編集するメリット

  • 好きなエディタで編集しながらブラウザでライブプレビューが出来る
  • Gitなどの他のシステムとの連携もしやすい

ローカルで編集するデメリット

  • スマートフォン毎のレイアウト確認ができない

Nodejsをインストールする

  • npmでmonaca-cliをインストールするために必要
  • Nodejs v8.11.0で動作確認済
  • ここからダウンロードできます

monaca-cliをインストールする

コマンドラインで以下コマンドを実行


$ npm install -g monaca --unsafe-perm

※rootユーザーでの実行時には--unsafe-permが必要な場合あり

monaca-cliでmonacaにログインする

$ monaca login
# メールアドレスとパスワードを聞かれるので入力してEnter

monacaのプロジェクトをローカルにクローンする

$ monaca clone
# どのプロジェクトか聞かれるので選んでEnter
# 作成するディレクトリ名を聞かれるので、入力してEnter
# ディレクトリ名を入力しない場合はプロジェクト名と同じ名前になります。

ローカルの変更を適用する

$ cd [プロジェクトディレクトリ名]
$ monaca upload

ローカルのプロジェクトを最新の状態にする

$ cd [プロジェクトディレクトリ名]
$ monaca download
  • 変更のあったファイルのみダウンロードされて配置される様です

サーバーを起動

$ cd [プロジェクトディレクトリ名]
$ npm run dev

レイアウトを確認する

ローカルサーバを使ってレイアウト確認した時

image.png

monacaのサイトを使ってレイアウト確認した時

image.png

所感

  • ライブプレビューできるの良い
    • browsersyncのおかげ
  • monacaいらなくない?
    • 初期テンプレートや各デバイスに向けて簡単にデプロイ出来るのはやはり便利だと思います
6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
sakkuntyo
UbuntuとNodejsをよく使います。 今はAzureに触れています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?