アーバンデータチャレンジ三島ハッカソン向け、Monacaハンズオン資料

1. Monaca
ハンズオン
利用開始から
端末デバッグまで
講師：Code for Numazu 市川 博之
2016/12/17

2. 目的とアジェンダ
 目的
Monacaがどんな開発環境なのか知る
Monacaの利用方法と端末でのデバッグ方法を知る
※JavaScript、HTML5、CSSの使い方は各自調べてね。
 アジェンダ
1. Monacaとは 5分
2. ログインしてみよう 10分
3. 簡単なサンプルを使ってみよう 45分
4. OnsenUIの利用 20分
5. 触って確かめよう 20分
Code for Numazu 2

3. 1. Monacaとは
 Monacaとは、アシアル社が提供しているHTML5をベースと
したマルチプラットホームの開発環境です。
Android/iPhone/WindowsPhoneがこれ一つで開発できます。
同一のソースコードを利用できます。
Webデザイン、JavaScriptの知識があれば開発ＯＫ！
 今回は、最初に学びやすいブラウザだけで開発できる、
Monaca Cloudと、Monacaデバッガーの説明をします。
必要なのは、PCとブラウザとスマフォだけ。
Code for Numazu 3

4. 2. ログインしてみよう！
 MonacaのHPを開いてみましょう。
HP 「https://ja.monaca.io/」
ログインして、ダッシュボードの画面になりましたか？
Code for Numazu 4
①ユーザー
アカウント作成 ②ログイン

5. 3.簡単なサンプルを使ってみよう（1/5）
 プロジェクトを作ってみよう！
Code for Numazu 5
※フリーのプランは３つまでしか
プロジェクトが作れません。
①クリック
②サンプルアプリのHelloWorld
を作成します。
プロジェクト名、説明には、後で
わかるよう言葉を入れましょう

6. 3.簡単なサンプルを使ってみよう（2/5）
 新規プロジェクト作成の下に、今のプロジェクト名が登録されました。
 開いてみましょう。
Code for Numazu 6
メニュー
ファイル
プレビュー
ソースコード

7. 3.簡単なサンプルを使ってみよう（3/5）
 iPhoneの準備 iTunesで「Monaca Debugger」をダウンロード
 Androidの準備 Google Playで「Monaca Debugger」をダウンロード
 ダウンロード後、アプリを立ち上げましょう。
 同期が始まり、プログラムが動きます。
 右下のボタンがデバッグ用のボタンです。
Code for Numazu 7
選ぶ
プロジェクト選
択画面に戻る
アプリを
リロード
スクリーン
ショット
ログの確認

8. 3.簡単なサンプルを使ってみよう（4/5）
 次は、おみくじのサンプルを変えてみましょう
Code for Numazu 8
Drag&Dropで
画像を追加
おみくじの
画像ファイル名
を変更

9. 4. OnsenUIの利用
 OnsenUIの利用
OnsenUIは、ナビゲーションバーや、タブバー、ページ遷移を
Monaca上で対応してくれるライブラリです。
今回は、OnsenUIのサンプルのうち、Navigationのサンプルを利用します。
高知のおすそ分けアプリにすり替えてみます。
 https://github.com/hiroyuki-ichikawa/oshusowake
ここから、データをダウンロードし、www以下のファイルを取り替えます。
スプラッシュ画面や、アイコンは、設定のページから変更します。
Code for Numazu 9

10. 5. 触って確かめよう
 では、実際にMonacaをいろいろと触ってみてください。
 残りの時間はチームに戻って検討してもよいです。
 Yahoo!地図を使ってみたい場合は、下記のサンプルを確認。
「ふむふむ」https://github.com/hiroyuki-ichikawa/fumufumu
 Google地図を使いたい場合は、Monacaの本などを参考にしてください。
 注意事項
フリー版では、ビルドは一日３回までなので、Monacaデバッガーで
十分確認してから、ビルドしましょう。
iTunesへのアップや、Google Playへのアップは、それぞれにライセンス
登録が必要なので、登録の際は各自気をつけてください。
Google Playは、すぐにライセンスが発行されますが、iTunesは時間がかかります。
Code for Numazu 10