Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Ionicでハイブリッドアプリ入門①

2.685 visualizaciones

Publicado el

団体内ionic勉強資料

Publicado en: Ingeniería
  • Sé el primero en comentar

Ionicでハイブリッドアプリ入門①

  1. 1. IONICで ハイブリッドアプリ入門① 立命館大学経営学部4回 WATNOW CTO 井口智勝
  2. 2. 対象者 ・HTML,CSS,JAVASCRIPTを理解していてかつ、WEBサービス が作れる ・ANGULAR.JSを理解している ・BOWER, NPM, GULP, CORDOVAが何かくらいはわかる ・MVCの概念が理解できている ・ある程度ターミナルに触り慣れてる 自信がない場合:ある程度調べてから取り組みましょう
  3. 3. IONICでハイブリッドアプ リ入門シリーズ 1. INTRODUCTION + STATE + UI (今回) 2. SERVICE + MODEL 3. AND MORE…
  4. 4. 今日のアウトライン ・WHAT IS THE “IONIC”? ・DEVELOPMENT ENVIRONMENT ・PART1: STATE ・PART1: UI ・LAST BUT NOT LEAST…
  5. 5. “IONIC”の説明
  6. 6. WHAT IS THE “IONIC”? “THE BEAUTIFUL, OPEN SOURCE FRONT-END SDK FOR DEVELOPING HYBRID MOBILE APPS WITH HTML5.” - 美しいハイブリッドアプリを作るためのSDKです- ・ネイティブライクなUIが用意されているデザイン ツール
  7. 7. WHAT IS THE “IONIC”? ionic Angul ar.js Cordo va.js ハイブリッドアプリ HTML 5 Sass( CSS) Javas cript UI フレームワーク 言語
  8. 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. 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. 10. 開発環境
  11. 11. INSTALLATION sudo npm install -g cordova ionic ionic start アプリ名 blank cd アプリ名 ionic serve 公式HP ※ node.jsとnpmは必要
  12. 12. INSTALLATION ・IDE等で開く ・www以下にtemplatesフォルダ作成 htmlの部品を置いておく場所
  13. 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. 14. 手を動かす前に、、、 M: MODEL データ V: VIEW 表示部 C: CONTROLLER その他 処理 ・STATEは司令塔。特 定のURLにはこのVIEW とCONTROLLERという 様に結びつける M C V ユーザー State App.js Controller.js ※Angular.jsはMVW
  15. 15. 手を動かす前に、、、 ・SPA(SINGLE PAGE APPLICATION): 基本INDEX.HTML1つ のみで後は部分的にJAVASCIRPTで動的にページ遷移し ていく手法。無駄な通信や再描画が無くなるので、 ネイティブアプリの様にサクサク動くように見える。 ・URLフラグメント: URLのお尻に付く# 以下の部分 SPAでは、画面遷移をこの技術を用いて行う。これを ROUTINGと言う。
  16. 16. 完成版 ここに用意しています。適宜確認しながら作業して 下さい! HTTPS://GITHUB.COM/IGTM/IONICTUTORIAL 実際に動かして見てみたい場合、、、 - ダウンロードして、IONIC SERVEすればOK!
  17. 17. PART1: STATE
  18. 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が1つ の時(NAMEを振ってない時) - config内に定義 - $stateProviderと $urlRouterProvid erを読込 - state毎に①名前 ②url③template Url④Controller を定義(controller はtemplate内に 定義してもOK) ①名前 ②url ③templateUrl ④Controller
  19. 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が1つ の時(NAMEを振ってない時) - urlがどれにも当 てはまらない時 のデフォルト stateを $urlRouterProvi er.otherwise(“”) で指定 ①名前 ②url ③templateUrl ④Controller
  20. 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が2つ 以上の時(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. 21. PART1: UI
  22. 22. UIの基本4つの使い方 1. タブ 2. ナビゲーション 3. モーダル 4. サイドメニュー
  23. 23. 1. タブ
  24. 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. 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. 26. 2. ナビゲーション
  27. 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. 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. 29. 3. モーダル ・下からニョキってでて くるやつ ・データを入れたり、選 択したりに使う
  30. 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. 31. 4. サイドメニュー ・ボタン押すor横スワイプで 出てくるメニュー ・左 or 右 or 両方でも設置可 ・カテゴリを変えたりするの に使える!
  32. 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. 33. LAST BUT NOT LEAST… ・IONIC CREATOR ある程度までのビジュアル部分だけ、ドラッグアン ドドロップで直感的に作れるWEBサービス ・IONICONS デフォルトで使えるアイコン集

×