少し前の2017年1月27日にIonic 2.0.0 がリリースされました。
クオックスが入居しているビルの2階にあるコワーキングオフィス azitoで、隔週でIonic勉強会を行っているので、勉強会の内容などをこちらにメモしておこうと思います。
Ionicは主にモバイルアプリ向けのフレームワークになります。
1つのコードからAndroidアプリやiPhoneアプリ、プログレッシブWebアプリ等を作ることができます。
Ionicで作るアプリは、いわゆるシングルページアプリケーション(SPA)といわれる、Webアプリケーションです。このWebアプリケーションの部分の大本にはAngularを使用します。
IonicではAngularで使用できるモバイルアプリ向けのコンポーネントが用意されていて、ネイティブアプリと同じような見た目のWebアプリが簡単に作れるようになっています。
また、Ionicで作ったアプリは、AppストアやGoogle Playで公開できるようにパッケージングする仕組みも用意されています。このパッケージングする部分では、Cordova(Phonegap)が使用されています。
JavaやKotlin、Objective-CやSwiftで別々に作っていたモバイルアプリが、1つのコードで作れるようになるので開発期間の短縮が期待できますね。
こんなステキはIonicですが、Ionicを使いこなすためには土台にあるAngularとCordovaについても学習する必要があるので、最初はちょっとだけ大変かもしれないです。
それでは早速、Ionicの開発環境を用意して、サンプルを動かしてみましょう。
IonicのインストールはGet started with Ionic Frameworkのページにある通り、npmコマンドでインストールするだけです。
$ npm install -g cordova ionic
かなり沢山のnpmパッケージがインストールされるので、結構時間がかかります。快適なインターネット接続環境でインストールしてください。
npmコマンドが入っていない！って人は、まずはnpm、Node.jsのインストールが必要です。
Node.jsのサイトからダウンロードしてインストールしてもいいのですが、Node.jsのバージョンを簡単に切り替えることができるnvmを使うのもおすすめです。
インストールが完了すると、ionicコマンドが使えるようになります。ionicコマンドを使って、新しいプロジェクトを作ってみます。
$ ionic start myApp sidemenu –v2
このコマンドを実行すると、カレントディレクトリに myAppというディレクトリが作られ、その中にサンプルコードが入っています。
動かすときには ionic serve を使用します。
$ cd myApp
$ ionic serve
実行すると自動的にブラウザが起動されて、ページが表示されます。
ハンバーガーメニューがついた、アプリっぽい画面が表示されると思います。
ここまでできれば、Ionicの開発環境の出来上がりです。あとは使い慣れたエディタがあればバッチリです。
次回は簡単なToDoアプリを作ってみて、AngularやIonicの使い方をみていこうと思います。
勉強会のお知らせはFacebookやMeetupで行っています。お近くの方で興味があればMeetupのMeteor Oita ♨に参加しちゃってください。
