Monaca＋Onsen UIて?作るアフ?リ事始め
?
3 likes?1,969 views
Monaca＋Onsen UIで簡単なアプリを作ってみます。 Tech Garden Schoolでの授業で使います。
Monaca＋Onsen UIて?作るアフ?リ事始め
- 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上でリアルタイムに動作確認出来る
- 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を使う方法も
- 13. 眺める Onsen UI Master-Detailをテンプレートとして作ったプロジェクト を眺めてみましょう。 ● プレビューボタンで動きを確認する ● ソースコードツリーを眺める ● ソースコードを眺める ○ index.html ○ app.js ■ <ons-navigator>を確認！（ナビゲーション型のページ管理です）
- 15. 商品一覧画面の颁厂厂
- 16. 商品一覧画面の础辫辫.箩蝉
- 17. 商品一覧画面で商品をタップした时
- 19. 商品详细画面の贬罢惭尝を作る
- 20. 画面详细画面の颁厂厂
- 21. 商品详细画面の础辫辫.箩蝉