1. sakkuntyo

    画像調整

    sakkuntyo
Changes in body
Source | HTML | Preview
@@ -1,88 +1,89 @@
monacaのライブプレビュー便利ですよね
でも好きなエディタ使ったり、Gitで構成管理しながらやりたい所
monaca-cliを使えばそんな事も出来ます!!!!
Vimで編集、Chromeでレイアウト確認している例
-![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266455/14ba0678-5acf-4faf-ad4c-4a4a673af59b.png)
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266455/7621dc38-19de-593d-b7e9-7765462b15b2.png)
+
+
## ローカルで開発するメリット
- 好きな開発環境で編集しながらブラウザでライブプレビューが出来る
- Gitなどの他のシステムとの連携もしやすい
## ローカルで開発するデメリット
- スマートフォン毎のレイアウト確認ができない
## Nodejsをインストールする
- npmでmonaca-cliをインストールするために必要
- Nodejs v8.11.0で動作確認済
- [ここ](https://nodejs.org/ja/)からダウンロードできます
## monaca-cliをインストールする
コマンドラインで以下コマンドを実行
```shell
$ npm install -g monaca --unsafe-perm
```
※rootユーザーでの実行時には--unsafe-permが必要な場合あり
## monaca-cliでmonacaにログインする
```shell
$ monaca login
# メールアドレスとパスワードを聞かれるので入力してEnter
```
## monacaのプロジェクトをローカルにクローンする
```shell
$ monaca clone
# どのプロジェクトか聞かれるので選んでEnter
# 作成するディレクトリ名を聞かれるので、入力してEnter
# ディレクトリ名を入力しない場合はプロジェクト名と同じ名前になります。
```
## ローカルの変更を適用する
```shell
$ cd [プロジェクトディレクトリ名]
$ monaca upload
```
## ローカルのプロジェクトを最新の状態にする
```shell
$ cd [プロジェクトディレクトリ名]
$ monaca download
```
- 変更のあったファイルのみダウンロードされて配置される様です
## サーバーを起動
```shell
$ cd [プロジェクトディレクトリ名]
$ npm run dev
```
## レイアウトを確認する
- サーバーを起動した状態で行います
- http://localhost:8080に接続する事で確認できます
- サーバー起動中にソースを変更した場合、ブラウザで表示しているページも即座に更新されます(ライブプレビュー)
### ローカルサーバを使ってレイアウト確認した時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266455/13da1aab-1769-dcd0-d154-defc36c4f8d7.png)
### monacaのサイトを使ってレイアウト確認した時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266455/b6c3cda9-0581-8403-af80-86ccdb9820eb.png)
## 所感
- ライブプレビューできるの良い
- browsersyncのおかげ
- monacaいらなくない?
- 初期テンプレートや各デバイスに向けて簡単にデプロイ出来るのはやはり便利だと思います