1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Monaca Localkitを使用したハイブリッドアプリの作成

Last updated at Posted at 2020-05-03

自分が手を動かした際のメモ
ハイブリッドアプリはおろか、モバイルアプリ開発の経験なしの状態です。

##monacaとGitの連携について
MonacaDocs GitHub との連携
基本的には上記を参考に

##開発環境の構築
①Monaca Cloud IDEは使用せずにMonaca Localkitをインストール
【開発環境構築】
↓ここからLocalkitのダウンロード
Monaca公式
(理由)
・Cloud IDEだとエディターをはじめとする既存の開発ツールと連携しづらい
・バージョン管理をより整合性をもって行うため(ローカルからGitに差分をpushするシンプルな仕組みとする)

②インストールはウィザードに沿って進めていくだけ(完了、Desktopにショートカットアイコンが作成されると思う)

③CloudIDEまたはzipからプロジェクトのimportを行う
これはどっちでもいい。
基本的にCloudIDE上のプロジェクトとは同期した状態にしておくつもりだし、Gitからzipをダウンロードして行うでも可
(今回はCloudIDEからインポートしてみた。結構時間かかる。。。)
※やってみてわかったこと
Monaca Localkitは開発環境ではなく、サーバになるようなもの
スマホのMonacaデバッガーとWindows/Mac OSXにあるMonacaプロジェクトを結びつけてくれる
これはappstoreから「Monaca」というアプリを落とす必要がある

④MonacaデバッガーをつかってPCとiphoneを同期させる
同じLANの中にiphoneとPCが存在すれば、ペアリングを促すアラートが表示される
→ペアリングを選択
これが成功すればMonacaデバッガー側でもMonaca Localkitがインポート(作成)したプロジェクトが表示される
Monaca Localkit側のコードを修正して保存すると、Monacaデバッガー側で自動的にリロードが行われて最新のコードが反映される。
Web開発で言うところのオートリロード機能みたいなイメージ

##開発するためのMonaca Localkit機能
「プレビュー」・・・プロジェクトをモバイルサイズでPC上で実行
「実行」・・・ペアリングしているiphoneでプロジェクトの実行
「アップロード」・・・変更したプログラムをクラウドにアップロード(これをしないとペアリングしているモバイルでの実行に反映されない)
基本的にはこれで開発できる

CLIコマンドでも実行できる
Monaca CLI コマンド
Monacaプロジェクトの階層はwwwフォルダ直下に配置したindex.htmlがhome画面として実行されるイメージ
基本的にアプリケーションプログラムはここに配置する

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?