5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

で、Ionicって?

  • Cordovaを拡張して作られている、モバイルUIフレームワーク
  • AngularJSを採用している
  • HTML5でクロスコンパイルなネイティブアプリが作れる!

※ 1系と2系があるけど、今回は1系の1.3を使ってみた。

つまりクール! :thumbsup:

どうやって作るの?

色々な方法の始め方があるけど、今回は

Ionic Creator

を使ってスタートしてみた。

Ionic Creator

ProttみたいなプロトタイピングツールちっくなWebサービス
https://creator.ionic.io/

ionic3.png

  • 登録して、UIパーツをドラッグしたりしてUIを作っていく
  • 途中、プレビューでページ遷移の確認も出来る!
  • UIの色などもCSSで結構好き勝手に変えられる!
  • UIが出来たら、プロジェクトとしてダウンロード出来る!

ダウンロードして実際に実装に使いました。

ダウンロードしたプロジェクトはこんな感じの構成

ionic4.png

コレをこのままWebにあげるとWebアプリにもなる!

ローカルのIonic開発環境はコマンドでつくります。
http://ionicframework.com/getting-started/ に乗ってる手順通り。

ionic5.png

してIonicをインストールして

ローカルで一旦適当にプロジェクト作って

ionic6.png

今回はAndroid、iOSだったので

xxxdir/$cd myApp
xxxdir/myApp$ionic platform add ios android

して、iOS・Androidプロジェクトを作って
ダウンロードしたプロジェクトで上書き

こんな感じになる
あとはゴリゴリ書くだけ!

いっつクール! :thumbsup: :thumbsup:

 

"controllers.js"にゴリゴリ書いていく

こんな感じ

出来たー!

ってなったら、ビルドする。

xxxdir/myApp$ionic build ios
xxxdir/myApp$ionic build android

XCodeプロジェクトとapkが出来るので
iOSはこのあと更にXCode開いてXCodeから普通にビルドすればOK!

いっつイージー!! :thumbsup: :thumbsup:

実際にストアに今は出てます。

iOS


https://itunes.apple.com/us/app/k-3-tong-ren-ji-mai-hui-ying/id1133023112?l=ja&ls=1&mt=8

Android


https://play.google.com/store/apps/details?id=jp.digiq.k3app&hl=ja


使って感じたメリット

  • やはりクロスプラットフォームなので開発が速い!

    • 3bkアプリはiOS、Android合わせて1ヶ月くらい
  • html・CSSでUIを書くの手慣れているので(ネイティブに比べて)速い!

使って感じたデメリット

  • UIあんまり凝れなさそう アニメーションとか凝れなそう

  • 端末機能を使うのにCordovaを使うのだけど、コイツで提供されてないと結構大変

ハマりポイント

  • runコマンドで実行した場合Codeova-Authが動かない!

    • でもrunしないとログが見れないからどこでコケてるのは今度はわからなくなる!
    • → ひたすらalertすると言う原始的な方法でデバッグした・・・
  • 端末ハードウェア機能を使う為のCordovaが古かったりして探すのが大変!

個人的な総評

とは言えとにかく開発スピードが速いので活用して行きたい。

ライバルのOnsenUIも気になるけど・・・
それは弊社エースエンジニアがこの後記事にしてくれてます!

 

Created by 株式会社デジタルクエスト 大野 修平 ( @saimushi )
5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?