JavaScript
AngularJS
ionic

ionic(AngularJSベース)のアプリケーション開発環境を構築

More than 5 years have passed since last update.


  • ionic は AngularJS ベースの UIライブラリです。



  • 今回は、公式ページにあるような Cordova(PhoneGap)等からの利用ではなく、単純にスマホWEBサイト(非ネィティブアプリ)でUIライブラリとして利用することを想定しています。


デモ


  • 公式で提供のデモアプリケーションは、下記で説明する雛形に含まれています。よろしければどんなもんかご覧ください。


    • http://hkusu.github.io/AngularJS_ionicjs_demo

    • GitHub Pages に載せてます。

    • ファイルは minify していません

    • ionic のモバイル対応ブラウザは『iOS 6+, Android 4+』とのことなので、Android 2系などでは動かないかもしれません




環境構築の方針


手順


  • ionic の雛形ジェネレータをインストール

$ npm install -g generator-ionicjs


  • 適当なディレクトリを作成し配下へ移動して、

$ yo ionicjs [今回つくるアプリケーション名]



  • 例: $ yo ionicjs test


    • この test が AnugularJS上のアプリケーション名となる(後からでも書き換えは可能)



  • すでに雛形のアプリケーションは入ってるので、動作確認


$ grunt serve


  • そうするとブラウザが起動して次のように雛形アプリケーションが開きます。

スクリーンショット 2014-03-15 15.40.22.png


動作確認が終わったら

スクリーンショット 2014-03-15 15.37.42.png


おまけ:ionic 公式の方法(Cordova等と連携)でやる場合


  • 一応メモ。ただ今回は PhoneGap などでネィティブアプリ化するわけではないので参考程度に。


    • 余分なライブラリとか入っちゃったら嫌だし..




手順


  • これどおりに



  • もし途中でエラーがでたら下記のように追加でインストールする


    • npm install -g ios-sim

    • npm install -g ios-deploy




  • ionic start [アプリ名] で雛形がつくられる模様

  • Android向けのエミュレートは ant が必要?(未検証)


そのほか参考