ionic

アプリ開発・ハイブリッドとネイティブの長所と短所を見比べる

  • このエントリーをはてなブックマークに追加
  • LINEで送る
ionicハイブリッドアプリ開発

ネイティブアプリ版とハイブリッドアプリ版双方の開発方法で、国旗あてクイズアプリを作ってみました。
まずはネイティブとハイブリッドアプリの違いを、実際に操作して体感してみてください。
ネイティブ版「国旗クイズ」
ionic版「国旗クイズ」

アプリ画面イメージ

スライドショーには JavaScript が必要です。

ハイブリッドとネイティブの比較

ハイブリッドアプリはionicで作成しました。ネイティブはAndroid版のみですが、ちょっと古くてEclipce時代の作品です。今はAndroid Studioに統一されているのでラクですが、一昔前はEclipseで開発が行われていた時代もあったのです。

アプリの動き

ネイティブのほうが動作はさくさく動きます。ionicはブラウザをかませるので、どうしても動作が重くなります。
クイズに正解、不正解したときに表示される◯や☓は、アニメーション付きで表示させたかったのですが、ionicでアニメーションをつけると動作がカクつき、あまり使い物にならなかったです。
ただしこれは、Androidに限った話で、iOSではアニメーションを付けてもスムーズに動きました。アニメーション無しにしても、クイズ一覧表示に切り替えるときなど、若干のラグが見られます。iOSではスムーズです。

アプリの動き 結論

ionicはiOSのほうが動作がスムーズですね。スペック云々の前に、仕組みが違うので仕方ない。
ハイブリッドアプリを検討する際には、Androidに注意する必要があります。

コーディング量

1ソースでAndroid・iOSで動くので、ionicのほうが圧倒的に少ないです。ハイブリッドアプリの最大の魅力です。
それを抜きにしても、ionicのほうがコード量は少ないように感じます。
コードを書く上で要求される範囲も結構違います。ハイブリッドはJavaScriptですが、ネイティブではJava(とSwift)になります。
話がそれますが、JavaとJavaScriptは知らない人からは一緒くたにされがちですが、全く違うものです。
毎回、「グレープとグレープフルーツ位ちがうよ」と説明するのが疲れます。同じ経験をお持ちの方も多いのでは?

コーディング量 結論

Android・iOS両方でアプリを公開するのであればハイブリッドのほうが少なく済みます。どちらか片方だけに絞るのであれば、同じくらいです。

開発環境

ネイティブは「Android Studio」と「Xcode」をそれぞれ使うことになります。これらはコード補完など、強力にやってくれるので便利です。
ionicであればテキストエディタとブラウザになります。テキストエディタは、有料、無料のものが色々あります。お好みで選べば良いと思いますが、個人的にはAtomというテキストエディタをオススメします。

開発環境  結論

慣れたエディタをそのまま使えるハイブリッドは魅力です。しかしAndroid StudioなどのIDEはかなり強力なので、優劣つけがたい。

総括

独断と偏見による総括です。参考程度に読んでくれればいいです。
使う側にとっては快適に動けばそれで良いのです。
作る側にとって、Androidの挙動が、どこまで許容できるかにかかってくるのではないでしょうか?
あとは作りたいアプリの種類にもよります。アクションゲームみたいなものは、ネイティブのほうが向いています。
今後Windows Phoneが普及してくれば(現在はMADOSUMAだけですが、Win10搭載のスマートフォンがでるらしい)1ソースで3種類動くのは魅力的です。(現在ionicではWindows Phoneに対応していません)
私は1人で趣味の延長みたいな感覚で作っているので、人員を割くことができません。1人で3種類も作るのは時間的にも物理的にもきついので、ハイブリッドアプリは私にとってピッタリのようです。

以上

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ionicで「サロンカルテ」アプリを作りました

ionicを使えば、スマートフォンやタブレット向けアプリが簡単に作成できます。
例えば弊社が開発した「サロンカルテ」は、AndroidタブレットやiPad上で動作する、美容室・ネイルサロン向けの施術管理システムです。
ionicはスマートフォン向けの開発環境ですが、工夫することでタブレットでも最適なレイアウトにすることができます

サロンカルテのアプリを見てみる