団体内ionic勉強資料

1. IONICで
ハイブリッドアプリ入門①
立命館大学経営学部４回 WATNOW CTO 井口智勝

2. 対象者
・HTML,CSS,JAVASCRIPTを理解していてかつ、WEBサービス
が作れる
・ANGULAR.JSを理解している
・BOWER, NPM, GULP, CORDOVAが何かくらいはわかる
・MVCの概念が理解できている
・ある程度ターミナルに触り慣れてる
自信がない場合：ある程度調べてから取り組みましょう

3. IONICでハイブリッドアプ
リ入門シリーズ
1. INTRODUCTION + STATE + UI (今回)
2. SERVICE + MODEL
3. AND MORE…

4. 今日のアウトライン
・WHAT IS THE “IONIC”?
・DEVELOPMENT ENVIRONMENT
・PART1: STATE
・PART1: UI
・LAST BUT NOT LEAST…

5. “IONIC”の説明

6. WHAT IS THE “IONIC”?
“THE BEAUTIFUL, OPEN SOURCE FRONT-END SDK FOR
DEVELOPING HYBRID MOBILE APPS WITH HTML5.”
- 美しいハイブリッドアプリを作るためのSDKです-
・ネイティブライクなUIが用意されているデザイン
ツール

7. WHAT IS THE “IONIC”?
ionic
Angul
ar.js
Cordo
va.js
ハイブリッドアプリ
HTML
5
Sass(
CSS)
Javas
cript
UI フレームワーク 言語

8. WHAT IS THE “IONIC”?
ionic
Angul
ar.js
Cordo
va.js
ハイブリッドアプリ
HTML
5
Sass(
CSS)
Javas
cript
UI フレームワーク 言語
ANGULAR.JS
・双方向データバイ
ンディング
・MVW
・依存性の注入(DI)
JAVASCRIPTの拡張
というよりもHTML
拡張って感じ

9. WHAT IS THE “IONIC”?
ionic
Angul
ar.js
Cordo
va.js
ハイブリッドアプリ
HTML
5
Sass(
CSS)
Javas
cript
UI フレームワーク 言語
CORDOVA.JS
・JAVSCIRPTのコード
をネイティブコード
へ橋渡しするもの
・WEBビュー上で擬似
的に再現している(常
にブラウザで見てい
る感じ)
WEBアプリ一つで複
数プラットフォーム
で使えるアプリにな
る

10. 開発環境

11. INSTALLATION
sudo npm install -g cordova ionic
ionic start アプリ名 blank
cd アプリ名
ionic serve
公式HP ※ node.jsとnpmは必要

12. INSTALLATION
・IDE等で開く
・www以下にtemplatesフォルダ作成
htmlの部品を置いておく場所

13. DIRECTORY
├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS, images, etc.

14. 手を動かす前に、、、
M: MODEL データ
V: VIEW 表示部
C: CONTROLLER その他
処理
・STATEは司令塔。特
定のURLにはこのVIEW
とCONTROLLERという
様に結びつける
M
C
V
ユーザー
State
App.js
Controller.js
※Angular.jsはMVW

15. 手を動かす前に、、、
・SPA(SINGLE PAGE APPLICATION): 基本INDEX.HTML１つ
のみで後は部分的にJAVASCIRPTで動的にページ遷移し
ていく手法。無駄な通信や再描画が無くなるので、
ネイティブアプリの様にサクサク動くように見える。
・URLフラグメント: URLのお尻に付く# 以下の部分
SPAでは、画面遷移をこの技術を用いて行う。これを
ROUTINGと言う。

16. 完成版
ここに用意しています。適宜確認しながら作業して
下さい！
HTTPS://GITHUB.COM/IGTM/IONICTUTORIAL
実際に動かして見てみたい場合、、、
- ダウンロードして、IONIC SERVEすればOK！

17. PART1: STATE

18. 1. .config(function($stateProvider,$urlRouterProvider){
2. $stateProvider
4. .state('test', {
5. url: "/test",
6. templateUrl: “templates/test.html”
7. controller: “TestCtrl”
8. })
9. $urlRouterProvider.otherwise("/test");
11. });
STATE IONIC-NAV-VIEWが１つ
の時(NAMEを振ってない時)
- config内に定義
- $stateProviderと
$urlRouterProvid
erを読込
- state毎に①名前
②url③template
Url④Controller
を定義(controller
はtemplate内に
定義してもOK)
①名前
②url
③templateUrl
④Controller

19. 1. .config(function($stateProvider,$urlRouterProvider){
2. $stateProvider
4. .state('test', {
5. url: "/test",
6. templateUrl: “templates/test.html”
7. controller: “TestCtrl”
8. })
9. $urlRouterProvider.otherwise("/test");
11. });
STATE IONIC-NAV-VIEWが１つ
の時(NAMEを振ってない時)
- urlがどれにも当
てはまらない時
のデフォルト
stateを
$urlRouterProvi
er.otherwise(“”)
で指定
①名前
②url
③templateUrl
④Controller

20. 1. .config(function($stateProvider,$urlRouterProvider){
2. $stateProvider
3. .state('test',{
4. 'url':'/test',
5. views: {
6. 'hoge': {
7. templateUrl: "templates/test.html",
8. controller:'TestCtrl'
9. },
10. 'fuga': {
11. templateUrl: "templates/test.html",
12. controller:'TestCtrl'
13. }
14. }
15. });
16. $urlRouterProvider.otherwise("/test");
18. });
STATE IONIC-NAV-VIEWが２つ
以上の時(NAMEを振ってる時)
- ionic-nav-view
のnameを指定
する
- <ionic-nav-view
name=“hoge”>
</ionic-nav-
view>
- <ionic-nav-view
name=“fuga”><
/ionic-nav-
view>
①名前
②url
③templateUrl
④Controller
③templateUrl
④Controller

21. PART1: UI

22. UIの基本４つの使い方
1. タブ
2. ナビゲーション
3. モーダル
4. サイドメニュー

23. 1. タブ

24. 1. タブ ∼基本構造∼
<ion-tabs>
<ion-tab title="タブに表示される文字" icon-
off="非選択時のアイコン" icon-on="選択時のアイコ
ン" ui-sref="選択時のステータス指定">
<ion-nav-view name="コントローラのス
テータスで指定したviewsの名前"></ion-nav-view>
</ion-tab>
</ion-tabs>

25. 1. タブ ∼実践∼
<ion-tabs class="tabs-icon-top tabs-color-active-
positive">
<ion-tab title="first" icon-off="ion-chatbox-working"
icon-on="ion-chatbox-working" ui-sref="tab.first">
<ion-nav-view name="first"></ion-nav-view>
</ion-tab>
<ion-tab title="second" icon-off="ion-chatboxes" icon-
on="ion-chatboxes" ui-sref="tab.second">
<ion-nav-view name="second"></ion-nav-view>
</ion-tab>
<ion-tab title="third" icon-off="ion-chatbox" icon-
on="ion-chatbox" ui-sref="tab.third">
<ion-nav-view name="third"></ion-nav-view>
</ion-tab>
</ion-tabs>

26. 2. ナビゲーション

27. 2. ナビゲーション
∼基本構造∼
<ion-nav-bar class="bar-
stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
index.html・ION-NAV-BARを用意
・CONTROLLERのCONFIGで
STATEを振り分け設定
・STATEが変更し、URLが変
わると自動で、画面遷移の
ANIMATIONと、BACKボタン
を表示してくれる

28. 2. ナビゲーション
∼実践∼
angular.module('app', ['ionic', 'app.controllers'])
.config(function($stateProvider,$urlRouterProvider)
{
$stateProvider
.state('tab.third',{
'url':'/third',
views: {
'third': {
templateUrl: "templates/tabs-third.html",
controller:'ThirdCtrl'
}
}
})
.state('tab.third-detail1',{
'url':'/third/detail1',
views: {
'third': {
templateUrl: "templates/tabs-third-
detail1.html",
controller:'ThirdDetail1Ctrl'
}
}
})
app.js
<ion-tab title="third" icon-off="ion-
chatbox" icon-on="ion-chatbox" ui-
sref="tab.third">
<ion-nav-view name="third"></ion-
nav-view>
</ion-tab>
…view やcontentを用意しStateを変更していく。URLの
階層が深くなるとナビゲートしてバックボタンが表示される。
tabs.html
href="#/tab/third/detail1"
もしくは、
ui-sref=“tab.third-detail1”
tabs-third.html
tabs-third-detail1.html

29. 3. モーダル
・下からニョキってでて
くるやつ
・データを入れたり、選
択したりに使う

30. 3. モーダル ∼実践∼
．．．
.controller('FirstCtrl',['$scope','$ionicModal',function($scope,
$ionicModal){
$ionicModal.fromTemplateUrl('templates/modal.html',{
scope: $scope,
animation:'slide-in-up'
}).then(function(modal){
$scope.myModal = modal;
});
controllers.js
hoge.html myModal.html
どこかで
ng-click=“myModal.show()”
もちろんController内で関数を定義して
それを呼び出してもOK！
どこかで
ng-click=“myModal.hide()”
読込

31. 4. サイドメニュー
・ボタン押すor横スワイプで
出てくるメニュー
・左 or 右 or 両方でも設置可
・カテゴリを変えたりするの
に使える！

32. 4. サイドメニュー
・ion-side-menusで囲う
・ion-side-menu-contentとion-
side-menu-contentが一つずつ必要
・ion-nav-buttonsでトグルボタン
を設置
・buttonにmenu-toggleでおした時
の動作を指定できる。
・Defaultでは、rootページ以外で
はトグルボタンが無くなり、swipe
も出来なくなる
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-
stable">
<ion-nav-buttons side="left">
<button menu-toggle="left"
class="button button-icon button-
clear ion-navicon">
</button>
</ion-nav-buttons>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar>test</ion-
header-bar>
<ion-content>test</ion-content>
</ion-side-menu>
</ion-side-menus>
index.htmlコンテンツ部分
サイドメニュー部分

33. LAST BUT NOT LEAST…
・IONIC CREATOR
ある程度までのビジュアル部分だけ、ドラッグアン
ドドロップで直感的に作れるWEBサービス
・IONICONS
デフォルトで使えるアイコン集