目 次 1. Monaca Localkitとは 1.1. 概 要 1.2. 動 作 環 境 2. セットアップ 2.1. Monaca Localkitの 入 手 方 法 2.2. Monaca Localkitのインストール 2.3. ファイアウォール 設 定 (windows8.1) 2.4.

Monaca Localkit β 版 利 用 マニュアル Copyright 2014 Asial Corporation. All rights reserved. 1

目 次 1. Monaca Localkitとは 1.1. 概 要 1.2. 動 作 環 境 2. セットアップ 2.1. Monaca Localkitの 入 手 方 法 2.2. Monaca Localkitのインストール 2.3. ファイアウォール 設 定 (windows8.1) 2.4. ファイアウォール 設 定 (mac) 2.5. Monaca Debuggerのインストール 3. 利 用 手 順 3.1. Localkit Localkitの 起 動 ログイン プロジェクト 設 定 プロジェクト 配 信 3.2. Debugger ログイン サーバー 検 索 ペアリング 3.3. ローカル 開 発 プロジェクトファイルの 編 集 リモートビルド 3.4. 高 度 な 開 発 weinreを 利 用 したデバッグ Chrome dev toolsを 利 用 したデバッグ(Windows) Safari Webインスペクターを 利 用 したデバッグ(Mac) 3.5. リモートビルド プロジェクトのアップロード アプリ 設 定 とビルド 設 定 リモートビルド 4. 注 意 事 項 4.1. 利 用 上 の 注 意 点 4.2. お 問 い 合 わせ Copyright 2014 Asial Corporation. All rights reserved. 2

1. Monaca Localkitとは 1.1 概 要 Monaca Localkitは アプリ 開 発 プラットフォーム Monaca が 提 供 するローカル 環 境 開 発 支 援 ツールです 従 来 のMonacaでは MonacaクラウドIDE や Monacaデバッガー など インターネットを 中 心 とした 開 発 ツールを 提 供 してきました Monaca Localkitは ローカル 環 境 下 で 様 々な 開 発 ツールとMonacaを 組 み 合 わせることで よりセキュアで 高 速 なアプリ 開 発 を 実 現 します システム 構 成 イメージ 1.2 動 作 環 境 Monaca Localkitを 利 用 するためには 以 下 の 環 境 が 必 要 です PC OS 必 須 ソフトウェア Windows7 以 上 / Mac OSX 10.9 以 上 Google Chrome モバイル 端 末 Copyright 2014 Asial Corporation. All rights reserved. 3

OS 必 須 ソフトウェア Android 2.3 以 上 / ios6.0 以 上 Monacaデバッガー Copyright 2014 Asial Corporation. All rights reserved. 4

2. セットアップ ローカル 開 発 環 境 のセットアップについて 説 明 します 2.1 Monaca Localkitのインストール Windows PCの 場 合 1. こちらからMonaca Localkitインストーラをダウンロードしてください 2. ダウンロードした Monaca LocalKit.msi を 実 行 してください 3. ウィザードに 従 ってインストールを 行 ってください 4. インストールが 完 了 するとChromeウェブストアのMonaca Localkitのダウンロード ページが 表 示 されますので Monaca LocalkitをGoogleChromeにインストールしてく ださい Macの 場 合 Chromeウェブストアにアクセスし Monaca LocalkitをGoogleChromeにインストールしてく ださい ChromeウェブストアのMonaca Localkit https://chrome.google.com/webstore/detail/monaca localkit/igimoohpkianbofjknpbnfehmkecbegl 2.3 ファイアウォール 設 定 WIndowsの 場 合 インストーラを 利 用 してインストールを 行 った 場 合 ファイアーウォール 設 定 は 自 動 的 に 行 われるため 下 記 の 作 業 は 不 要 です Copyright 2014 Asial Corporation. All rights reserved. 5

Chromeウェブストアから 直 接 Monaca Localkitをインストールされた 方 は 以 下 の 手 順 に 従 ってファイアーウォール 設 定 にGoogle Chromeを 追 加 してください 1. コントロールパネルを 開 き [Windowsファイアウォール]をクリックします 2. Windowsファイアウォール 設 定 画 面 で[Windowsファイアウォールを 介 したアプリまた は 機 能 を 許 可 ]をクリックします 3. 許 可 されたアプリ 画 面 で[ 設 定 の 変 更 ]をクリックします Copyright 2014 Asial Corporation. All rights reserved. 6

4. [ 別 のアプリの 許 可 ]が 入 力 可 能 となるのでクリックします 5. アプリの 追 加 ダイアログが 表 示 されるのでGoogle Chromeを 選 択 し 追 加 をクリック します Copyright 2014 Asial Corporation. All rights reserved. 7

6. GoogleChomeが 許 可 されていることと Monaca Localkitとモバイル 端 末 を 接 続 して いるネットワーク(プライベート パブリックのどちらか)にチェックが 付 いている ことを 確 認 してください Copyright 2014 Asial Corporation. All rights reserved. 8

Mac OS PCの 場 合 以 下 の 手 順 に 従 ってファイアーウォール 設 定 にGoogle Chromeを 追 加 してください 1. システム 環 境 設 定 を 表 示 し[セキュリティとプライバシー]をクリックします 2. セキュリティとプライバシー 画 面 で[ファイアーウォールオプション]をクリックしま す Copyright 2014 Asial Corporation. All rights reserved. 9

3. ダイアログで[Google Chrome.app]を 追 加 し パラメータに 外 部 からの 接 続 を 許 可 を 設 定 し [OK]をクリックします Copyright 2014 Asial Corporation. All rights reserved. 10

2.4 Monaca Debuggerのインストール ローカル 開 発 で 使 用 するiOS/Android 端 末 にMonaca Debuggerをインストールしてくださ い ios 端 末 の 場 合 AppStore 版 デバッガー AppStoreから Monaca をダウンロードしてください カスタムビルド 版 デバッガー Monaca IDEで 開 発 用 のデバッガーをビルドして 利 用 することができます カスタムビルド 版 デバッガーは ユーザが 独 自 のプラグインを 組 み 込 むことが 可 能 で safariのリモートデバッグ 機 能 を 利 用 することができます 詳 しくはこちらをご 確 認 ください Android 端 末 の 場 合 GoolePlayハイパフォーマンス 版 Crosswalkエンジンが 組 み 込 まれたデバッガーで 従 来 のAndroid WebViewより 高 性 能 なWebViewを 利 用 できます 詳 しくはこちらをご 覧 ください Google Playから Monacaデバッガー(ハイパフォーマンス 版 ) をダウンロードし てください GoolePlay 通 常 WebView 版 Google Playから Monacaデバッガー をダウンロードしてください Copyright 2014 Asial Corporation. All rights reserved. 11

3. 利 用 手 順 ローカル 開 発 の 手 順 を 説 明 します 3.1 Monaca Localkit Monaca Localkitの 起 動 はじめに 以 下 の 手 順 でMonaca Localkitを 起 動 します 1. PCでGoogle Chromeを 実 行 2. Google Chromeのブックマークバーに 表 示 される[アプリ]をクリック (またはアドレスバーに chrome://apps/ を 入 力 ) 3. [Monaca Localkit]をクリック ログイン Moanca Localkitを 起 動 するとログイン 画 面 が 表 示 されます 前 回 ログイン 済 みの 場 合 は 自 動 的 に 再 ログインします Copyright 2014 Asial Corporation. All rights reserved. 12

Monacaアカウントとして 登 録 されたEメールアドレスとパスワードを 入 力 し ログインを 行 ってください Monacaアカウントをお 持 ちでない 場 合 は サインアップページでアカウントの 新 規 登 録 を 行 ってください ([Sign Upボタン]をクリックするとMonacaのサインアップページが 表 示 されます) プロジェクト 設 定 ログインするとプロジェクト 一 覧 画 面 が 表 示 されます Copyright 2014 Asial Corporation. All rights reserved. 13

新 規 プロジェクトを 作 成 する 場 合 以 下 は 新 しいプロジェクトを 作 成 する 手 順 です 1. プロジェクト 一 覧 画 面 で[New Project]を 選 択 2. プロジェクトのテンプレートを 選 択 Copyright 2014 Asial Corporation. All rights reserved. 14

3. [Select Directory]をクリックし 作 業 ディレクトリを 選 択 4. [Project Name]を 入 力 し [Create]をクリック Copyright 2014 Asial Corporation. All rights reserved. 15

Cloud 上 で 作 成 した 既 存 プロジェクトの 場 合 以 下 はCloud 上 で 作 成 された 既 存 のMonacaプロジェクトを 開 発 対 象 として 設 定 する 手 順 です 1. プロジェクトを 選 択 Copyright 2014 Asial Corporation. All rights reserved. 16

2. プロジェクトの 詳 細 画 面 で[Download]ボタンをクリックします 3. プロジェクトファイルのダウンロード 先 となるディレクトリを 選 択 4. ディレクトリを 選 択 すると 自 動 的 にプロジェクトファイルがダウンロードさ れます Copyright 2014 Asial Corporation. All rights reserved. 17

プロジェクト 配 信 プロジェクトの 詳 細 画 面 で[Start Debugging]ボタンをクリックすると Monaca Localkitがプ ロジェクトの 配 信 を 開 始 します プロジェクト 未 配 信 状 態 プロジェクト 配 信 中 Copyright 2014 Asial Corporation. All rights reserved. 18

3.2 デバッガー デバッグに 使 用 するモバイル 端 末 でMonacaデバッガーを 起 動 してください ログイン デバッガー 起 動 するとログイン 画 面 が 表 示 されます 前 回 ログイン 済 みの 場 合 は 自 動 的 に 再 ログインします 必 ずMonaca Localkitにログインしたユーザと 同 じユーザでログインを 行 ってください Copyright 2014 Asial Corporation. All rights reserved. 19

Monaca Localkitとデバッガーのペアリング ログインするとプロジェクト 一 覧 画 面 が 表 示 されます 以 下 の 手 順 でMonaca Localkitとデバッガーのペアリングを 行 ってください 1. プロジェクト 一 覧 画 面 で 画 面 左 上 のボタンをクリックし サイドメニューを 表 示 して ください Copyright 2014 Asial Corporation. All rights reserved. 20

2. サイドメニューから[ローカルPCs]を 選 択 します 3. 接 続 可 能 なサーバの 一 覧 が 表 示 されます Copyright 2014 Asial Corporation. All rights reserved. 21

リストに[ 配 信 中 ]が 表 示 されない 場 合 は 3.1 Monaca Localkitの プロジェクト 配 信 を 行 ってください 4. リストから 接 続 可 能 なPCを 選 択 します Copyright 2014 Asial Corporation. All rights reserved. 22

5. デバッガーでは6 桁 のペアリングコードが 表 示 され Monaca Localkitではペアリング コード 入 力 画 面 が 表 示 されます デバッガー Monaca Localkit Copyright 2014 Asial Corporation. All rights reserved. 23

6. Monaca Localkitにデバッガーで 表 示 されたペアリングコードを 入 力 し [pair]ボタンをクリック 以 上 でデバッガーとMonaca Localkitのペアリングが 完 了 します デバッガーでのプロジェクト 実 行 デバッガーでリストからペアリング 済 みプロジェクトを 選 択 すると プロジェクトファイル のダウンロードが 行 われます Copyright 2014 Asial Corporation. All rights reserved. 24

ダウンロードが 完 了 するとプロジェクトが 実 行 されます プロジェクト 実 行 画 面 Copyright 2014 Asial Corporation. All rights reserved. 25

3.3 ローカル 開 発 プロジェクトに 設 定 した 作 業 ディレクトリ 以 下 のファイルを 任 意 のツールで 編 集 して 保 存 す ると デバッガーに 変 更 が 即 座 に 同 期 され プロジェクトが 再 実 行 されます テキストエディタでボタンの 背 景 色 を 赤 色 に 変 更 して 保 存 デバッガーでは 変 更 されたファイルが 同 期 され プロジェクトが 再 実 行 される Copyright 2014 Asial Corporation. All rights reserved. 26

3.4 高 度 な 開 発 weinreを 利 用 したデバッグ(WIndows/Mac) weinreとは WEb INspector REmote の 略 で リモートデバッグ 機 能 を 提 供 してい るツールです weinreを 使 うと DOMインスペクタでCSSの 適 用 を 確 認 したり コンソールで javascriptを 実 行 することができます DOMインスペクタ Copyright 2014 Asial Corporation. All rights reserved. 27

コンソール Chrome Dev Toolsを 利 用 したリモートデバッグ(Androidデバッガーのみ) Google ChromeをインストールしたコンピュータとAndroidデバッガーをインストー ルした 端 末 をUSB 接 続 することで Chrome Dev Toolsのリモートデバッグ 機 能 を 利 用 することができます Chrome Dev Toolsのリモートデバッグ 機 能 は weinreと 同 じようにDOMインスペク タ コンソール そしてJavascriptのステップ 実 行 が 可 能 です Javascriptステップ 実 行 の 例 : Copyright 2014 Asial Corporation. All rights reserved. 28

Chrome Dev Toolsを 利 用 できるAndroid OSのバージョンは ハイパフォーマンス 版 デバッガーの 場 合 :Android4.0 以 上 通 常 Webview 版 デバッガーの 場 合 :Android4.4 以 上 となります 利 用 方 法 についてはこちらをご 確 認 ください Safariを 利 用 したリモートデバッグ(Mac+ ios) Macをご 利 用 の 方 は カスタムビルド 版 デバッガーをインストールしたiOS 端 末 とPC をUSB 接 続 することで Mac の Safariを 利 用 したリモートデバッグを 行 うことが 可 能 です 利 用 方 法 についてはこちらをご 確 認 ください 3.5 リモートビルド Monacaでは Cloud 上 のビルドサーバーを 利 用 してiOS/Android/Windows8/ChromeAppsのア プリビルドを 行 うことができます プロジェクトのアップロード リモートビルドを 行 うために ローカルで 編 集 したプロジェクトをアップロードします アップロードの 手 順 は 以 下 のとおりです Copyright 2014 Asial Corporation. All rights reserved. 29

1. プロジェクト 一 覧 からアップロードしたいプロジェクトを 選 択 します 2. プロジェクトの 詳 細 画 面 で[Upload]ボタンをクリックします アプリ 設 定 とビルド 設 定 アップロードしたプロジェクトに 対 して アプリの 設 定 とビルドの 設 定 (ios/androidのみ) を 行 います 1. プロジェクトの 詳 細 画 面 で[Application and Build Settings]をクリックします Copyright 2014 Asial Corporation. All rights reserved. 30

2. 新 しいウインドウにプロジェクトの 設 定 画 面 が 表 示 されます 3. アプリの 設 定 (Androidアプリの 場 合 ) Copyright 2014 Asial Corporation. All rights reserved. 31

画 面 左 側 の 一 覧 から[Androidアプリ]を 選 択 するとAndroidアプリ 用 の 設 定 が 表 示 され ます Androidアプリ 設 定 についてはこちらをご 確 認 ください (iosアプリの 場 合 ) 画 面 左 側 の 一 覧 から[iOSアプリ]を 選 択 するとiOSアプリ 用 の 設 定 が 表 示 されます iosアプリ 設 定 についてはこちらをご 確 認 ください Copyright 2014 Asial Corporation. All rights reserved. 32

(Windows8アプリの 場 合 ) 画 面 左 側 の 一 覧 から[Windows8]を 選 択 するとWindows8ストアアプリ 用 の 設 定 が 表 示 されます Windows8ストアアプリ 設 定 についてはこちらをご 確 認 ください Copyright 2014 Asial Corporation. All rights reserved. 33

(ChromeAppsの 場 合 ) 画 面 左 側 の 一 覧 から[Chrome Apps]を 選 択 するとChromeアプリ 用 の 設 定 が 表 示 されま す Chromeアプリ 設 定 についてはこちらをご 確 認 ください Copyright 2014 Asial Corporation. All rights reserved. 34

4. ビルドの 設 定 (Androidアプリの 場 合 ) 画 面 左 側 の 一 覧 から[Androidビルド]を 選 択 するとAndroidアプリ 用 のビルド 設 定 が 表 示 されます Androidビルド 設 定 についてはこちらをご 確 認 ください Copyright 2014 Asial Corporation. All rights reserved. 35

(iosアプリの 場 合 ) 画 面 左 側 の 一 覧 から[iOSビルド]を 選 択 するとiOSアプリ 用 のビルド 設 定 が 表 示 されま す iosアプリのビルド 設 定 を 行 うためにはiOS Developer Programの 登 録 が 必 要 となりま すのでご 注 意 ください iosビルド 設 定 についてはこちらをご 確 認 ください Copyright 2014 Asial Corporation. All rights reserved. 36

リモートビルド アップロードしたプロジェクトのビルドを 行 います 1. ビルド 対 象 プロジェクトの 詳 細 画 面 で[Build Application]をクリックします Copyright 2014 Asial Corporation. All rights reserved. 37

2. 新 しいウインドウでビルド 対 象 プラットフォームの 選 択 画 面 が 表 示 されます 3. 任 意 のプラットフォームを 選 択 し ウィザードに 従 ってビルドを 実 行 してください 4. ビルドが 完 了 すると アプリのパッケージをダウンロードすることができます Copyright 2014 Asial Corporation. All rights reserved. 38

4. 注 意 事 項 ( 免 責 事 項 ) 利 用 上 の 注 意 点 本 ソフトウェアはベータ 版 です 正 式 配 布 版 の 前 段 階 の 評 価 版 として 関 係 者 の 方 々に 配 布 し 性 能 や 機 能 使 い 勝 手 な どを 評 価 して 頂 くバージョンとなっております 従 って 正 式 版 の 機 能 を 一 通 り 備 えた 完 成 品 に 近 い 状 態 ではありますが ソフトウェ アの 不 具 合 などにより 正 常 に 機 能 しない 場 合 があります 注 意 事 項 をご 理 解 の 上 本 ソフトウェアをご 利 用 ください 本 ソフトウェアの 使 用 において 生 ずる 損 害 については 弊 社 は 一 切 の 責 任 を 負 う ものではありません 5. お 問 い 合 わせ お 問 い 合 わせにつきましてはMonacaサポートサービスをご 利 用 ください Copyright 2014 Asial Corporation. All rights reserved. 39