Monaca＋Onsen UIで作るアプリ事始め

2015/4/18 Kenichi Inoue (Tech Garden School)

今日やること

● Monaca IDEで、CakeShopのAPIを使った、商品一覧と商品詳細の画面をつくる

● Monaca Debuggerを使って実機で動かす● サーバ側システムを各自のサーバにアップする（可能なら）

前もって理解しておくこと

● Monaca● Onsen UI● SPA (Single Page Application)● Webサイトとのユーザインタフェースの違い

Monaca● Monacaは開発環境であって、XcodeやEclipse、

SublimeTextと横並びで語るもの○ CakePHPと横並びではない

● Monacaで作るプロジェクトには、デフォルトでPhoneGap(Cordova)が組み込まれているので、HTMLとJavaScriptでiPhoneやAndroid等で動作するアプリが開発できる

Monaca IDEとMonaca Debugger● Monaca IDE

○ Webブラウザで動作するアプリの開発環境○ 「プレビュー」により、（PCの）Webブラウザでアプリの動作を確認出来る

● Monaca Debugger○ iPhoneやAndroid等の実機で動作するデバッグ用アプリ

○ Monaca IDEで開発しているアプリは、実機にインストールしたMonaca Debugger上でリアルタイムに動作確認出来る

ソースをGitで管理したいんだけど

● Monaca自体は、ソース管理の仕組みを持っていません（極めて残念･･･）

● ただ、開発したソースコード等は、WebDAVや、Monaca LocalKitを使うことでローカルPC環境（Mac等）に持ってこられるので、そこでGit管理することは可能

Onsen UI● HTMLとJavaScript（あとCSS）で、iPhoneやAndroidのネイ

ティブアプリっぽいユーザインタフェースを作るためのライブラリ

● 同じようなものとして、jQuery Mobileなどもある○ 他には･･･ http://blog.mb.cloud.nifty.com/?p=980

SPA (Single Page Application)● ふつうのWebサイト（Webシステム）は、1画面を1HTMLファ

イルで作る○ 画面遷移する度にサーバリクエストが行われ、画面全体分のデータ

が戻り、画面全体が切り替わる

● Cordovaでは、画面遷移の度にサーバリクエストしたりはしない

● Onsen UIでは、よりネイティブアプリっぽい動きを実現するため、複数の画面を1HTMLファイルに書いた方が良い

Onsen UIで複数の画面を管理する

どの型が適しているかを考え、アプリを設計する

● ナビゲーション型○ 画面操作で次の画面に進み、Backボタン等で前の画面に戻る

● スライディングメニュー型○ 必要に応じてメニューを画面左側に表示し、選択する

● タブバー型○ 画面下部にタブを表示し、選択する

● スプリットビュー型○ タブレットなど広い画面で、画面左側にメニューを常時表示する

http://ja.onsen.io/guide/overview.html#ManagingMultiplePages

ユーザインタフェースの違い

● 例えば複数の選択肢から1つを選ぶとき○ ふつうは、プルダウンで作る○ でも、iPhoneではどうですか？

■ Onsen UIにプルダウン（Picker）はありません！

たとえば、こういう風に複数の部品を組み合わせて作る！

Onsen UIが対応している部品に何があるかを眺めておく！http://ja.onsen.io/reference/css.html

他に、Cordova用のPluginを使う方法も

Hands onLet’s try!

プロジェクトを作る

Monacaにログインして、

プロジェクトを作ります。

Onsen UI Master-Detailを選択。

眺める

Onsen UI Master-Detailをテンプレートとして作ったプロジェクトを眺めてみましょう。

● プレビューボタンで動きを確認する● ソースコードツリーを眺める● ソースコードを眺める

○ index.html○ app.js

■ <ons-navigator>を確認！（ナビゲーション型のページ管理です）

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

商品一覧画面のCSS

商品一覧画面のApp.js

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

プレビューしてみる

こうなりましたか？

商品詳細画面のHTMLを作る

画面詳細画面のCSS

商品詳細画面のApp.js

プレビューしてみる

こうなりましたか？