Monaca＋Onsen UIで簡単なアプリを作ってみます。 Tech Garden Schoolでの授業で使います。

1. Monaca＋Onsen UIで作る
アプリ事始め
2015/4/18 Kenichi Inoue (Tech Garden School)

2. 今日やること
● Monaca IDEで、CakeShopのAPIを使った、商品一覧と商
品詳細の画面をつくる
● Monaca Debuggerを使って実機で動かす
● サーバ側システムを各自のサーバにアップする（可能なら）

3. 前もって理解しておくこと
● Monaca
● Onsen UI
● SPA (Single Page Application)
● Webサイトとのユーザインタフェースの違い

4. Monaca
● Monacaは開発環境であって、XcodeやEclipse、
SublimeTextと横並びで語るもの
○ CakePHPと横並びではない
● Monacaで作るプロジェクトには、デフォルトでPhoneGap
(Cordova)が組み込まれているので、HTMLとJavaScriptで
iPhoneやAndroid等で動作するアプリが開発できる

5. Monaca IDEとMonaca Debugger
● Monaca IDE
○ Webブラウザで動作するアプリの開発環境
○ 「プレビュー」により、（PCの）Webブラウザでアプリの動作を確認出来る
● Monaca Debugger
○ iPhoneやAndroid等の実機で動作するデバッグ用アプリ
○ Monaca IDEで開発しているアプリは、実機にインストールしたMonaca
Debugger上でリアルタイムに動作確認出来る

6. ソースをGitで管理したいんだけど
● Monaca自体は、ソース管理の仕組みを持っていません（極
めて残念･･･）
● ただ、開発したソースコード等は、WebDAVや、Monaca
LocalKitを使うことでローカルPC環境（Mac等）に持ってこら
れるので、そこでGit管理することは可能

7. Onsen UI
● HTMLとJavaScript（あとCSS）で、iPhoneやAndroidのネイ
ティブアプリっぽいユーザインタフェースを作るためのライブ
ラリ
● 同じようなものとして、jQuery Mobileなどもある
○ 他には･･･ http://blog.mb.cloud.nifty.com/?p=980

8. SPA (Single Page Application)
● ふつうのWebサイト（Webシステム）は、1画面を1HTMLファ
イルで作る
○ 画面遷移する度にサーバリクエストが行われ、画面全体分のデータ
が戻り、画面全体が切り替わる
● Cordovaでは、画面遷移の度にサーバリクエストしたりはし
ない
● Onsen UIでは、よりネイティブアプリっぽい動きを実現する
ため、複数の画面を1HTMLファイルに書いた方が良い

9. Onsen UIで複数の画面を管理する
どの型が適しているかを考え、アプリを設計する
● ナビゲーション型
○ 画面操作で次の画面に進み、Backボタン等で前の画面に戻る
● スライディングメニュー型
○ 必要に応じてメニューを画面左側に表示し、選択する
● タブバー型
○ 画面下部にタブを表示し、選択する
● スプリットビュー型
○ タブレットなど広い画面で、画面左側にメニューを常時表示する
http://ja.onsen.io/guide/overview.html#ManagingMultiplePages

10. ユーザインタフェースの違い
● 例えば複数の選択肢から1つを選ぶとき
○ ふつうは、プルダウンで作る
○ でも、iPhoneではどうですか？
■ Onsen UIにプルダウン（Picker）はありません！
たとえば、こういう風に複
数の部品を組み合わせて
作る！
Onsen UIが対応している部品に何があるかを
眺めておく！
http://ja.onsen.io/reference/css.html
他に、Cordova用のPluginを使う方法も

11. Hands on
Let’s try!

12. プロジェクトを作る
Monacaにログインして、
プロジェクトを作ります。
Onsen UI Master-Detailを選択。

13. 眺める
Onsen UI Master-Detailをテンプレートとして作ったプロジェクト
を眺めてみましょう。
● プレビューボタンで動きを確認する
● ソースコードツリーを眺める
● ソースコードを眺める
○ index.html
○ app.js
■ <ons-navigator>を確認！（ナビゲーション型のページ管理です）

14. まず、商品一覧画面のHTMLを作る

15. 商品一覧画面のCSS

16. 商品一覧画面のApp.js

17. 商品一覧画面で商品をタップした時

18. プレビューしてみる
こうなりましたか？

19. 商品詳細画面のHTMLを作る

20. 画面詳細画面のCSS

21. 商品詳細画面のApp.js

22. プレビューしてみる
こうなりましたか？