hAcKTion

日々のアウトプット場所。

ハイブリッドアプリを作ってみる(2)〜Ionicってなんだ〜

ハイブリッドアプリに関してのメモ第2回。
Webの言語でハイブリッドアプリを作ろうと調べていくとたどり着く「Ionic」についてメモします。

私は、Ionicというフレームワークを使って中でHTML/CSS/JavaScriptを書いたら、Ionicがいい感じにネイティブアプリのコードにしてくれると思っていたのですが、Ionicの公式ページ(日本語はこちら)をみると、

Ionic Framework is an open source mobile UI toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single codebase, running everywhere.

と、まず紹介があり、頭の中に「?」が浮かびました。
「Ionic」は「UI toolkit」だったのでした。
例えが100%正しくはなさそうですが、Webの「Bootstrap」みたいなものでしょうか。
WebViewで表示するハイブリッドアプリなので、ネイティブのパーツをHTMLで表現する事は難しいので、
そういったアプリのような見た目を構築するための「UI」がいっぱい詰まったものが「Ionic」という事のようです。

具体的にはアプリ画面のタイトルの表示の仕方はiOSAndroidでは異なりますが、ワンソースで管理するために、Ionicが「タイトル」というコンポーネントを用意してくれていて、その「タイトル」というコンポーネントを使ってマークアップすると、iOSではiOSのタイトルの見た目に、AndroidではAndroidのタイトルの見た目に表示を切り替えてくれます。

今回Ionicに惹かれたのは、「React」を公式サポートしているからです。
最近はReactを使ってアプリケーションを開発する事が多くなってきていて、可能であればReactを使いたいなと思っていました。
IonicはAngular, Reactでの利用をサポートしていて、もうすぐVueにもサポートする予定とのことで、開発者が慣れているフレームワーク/ライブラリで開発が行えるのが魅力と感じています。

ちなみに、同じReactで開発する場合、React Nativeの選択肢も考えられますが、
React NativeはGitHubを覗く限り、現在も進化が続いていそうではあるものの、
tagをよくみてみると、まだメジャーバージョンが1に達していない事もあり、 今回は見送る事にしました。

さて、Ionicは「UI toolkit」というのが分かったところで、じゃあ実際にネイティブのコードを作ってるのはどこ?
というのを次のエントリーで探っていきたいと思います。