Monacaハンズオン利用開始から端末デバッグまで

講師： Code for Numazu 市川 博之2016/12/17

Code for Numazu 2

目的とアジェンダ 目的

Monaca がどんな開発環境なのか知るMonaca の利用方法と端末でのデバッグ方法を知る※ JavaScript 、 HTML5 、 CSS の使い方は各自調べてね。

アジェンダ1. Monaca とは 5 分2. ログインしてみよう 10 分3. 簡単なサンプルを使ってみよう 45 分4. OnsenUI の利用 20 分5. 触って確かめよう 20 分

Code for Numazu 3

1. Monaca とは Monaca とは、アシアル社が提供している HTML5 をベースとしたマルチプラットホームの開発環境です。

Android/iPhone/WindowsPhone がこれ一つで開発できます。同一のソースコードを利用できます。Web デザイン、 JavaScript の知識があれば開発ＯＫ！

今回は、最初に学びやすいブラウザだけで開発できる、Monaca Cloud と、 Monaca デバッガーの説明をします。必要なのは、 PC とブラウザとスマフォだけ。

Code for Numazu 4

2. ログインしてみよう！ Monaca の HP を開いてみましょう。

HP 　「 https://ja.monaca.io/」

ログインして、ダッシュボードの画面になりましたか？

① ユーザーアカウント作成 ② ログイン

Code for Numazu 5

3. 簡単なサンプルを使ってみよう（ 1/5 ） プロジェクトを作ってみよう！

※ フリーのプランは３つまでしか　　プロジェクトが作れません。

① クリック

② サンプルアプリのHelloWorld を作成します。プロジェクト名、説明には、後でわかるよう言葉を入れましょう

Code for Numazu 6

3. 簡単なサンプルを使ってみよう（ 2/5 ） 新規プロジェクト作成の下に、今のプロジェクト名が登録されました。 開いてみましょう。 メニュー

ファイル

プレビュー

ソースコード

Code for Numazu 7

3. 簡単なサンプルを使ってみよう（ 3/5 ） iPhone の準備　 iTunes で「 Monaca Debugger 」をダウンロード Android の準備　 Google Play で「 Monaca Debugger 」をダウンロード ダウンロード後、アプリを立ち上げましょう。 同期が始まり、プログラムが動きます。 右下のボタンがデバッグ用のボタンです。

選ぶプロジェクト選択画面に戻るアプリをリロード

スクリーンショットログの確認

Code for Numazu 8

3. 簡単なサンプルを使ってみよう（ 4/5 ） 次は、おみくじのサンプルを変えてみましょう

Drag&Drop で画像を追加

おみくじの画像ファイル名を変更

Code for Numazu 9

4. OnsenUI の利用 OnsenUI の利用

OnsenUI は、ナビゲーションバーや、タブバー、ページ遷移をMonaca 上で対応してくれるライブラリです。

今回は、 OnsenUI のサンプルのうち、 Navigation のサンプルを利用します。高知のおすそ分けアプリにすり替えてみます。

https://github.com/hiroyuki-ichikawa/oshusowakeここから、データをダウンロードし、 www 以下のファイルを取り替えます。スプラッシュ画面や、アイコンは、設定のページから変更します。

Code for Numazu 10

5. 触って確かめよう では、実際に Monaca をいろいろと触ってみてください。 残りの時間はチームに戻って検討してもよいです。 Yahoo! 地図を使ってみたい場合は、下記のサンプルを確認。「ふむふむ」 https://github.com/hiroyuki-ichikawa/fumufumu Google 地図を使いたい場合は、 Monaca の本などを参考にしてください。

注意事項フリー版では、ビルドは一日３回までなので、 Monaca デバッガーで十分確認してから、ビルドしましょう。iTunes へのアップや、 Google Play へのアップは、それぞれにライセンス登録が必要なので、登録の際は各自気をつけてください。

Google Play は、すぐにライセンスが発行されますが、 iTunes は時間がかかります。