Ionicとは
Ionicとは、オープンソースのモバイル向けのUIコンポーネントのライブラリ及びモバイルアプリ開発フレームワークです。
一つのコードでAndroid/iOS両方に対応したクロスプラットフォームなアプリを作れることが特徴です。
HTML+CSS+JavaScript(正確にはTypeScriptですが)を用いてWebアプリケーションを作る要領でモバイルアプリを作成することができ、シンプルで美しい「モバイルっぽい」UIが簡単に作れます。
また、Apache Cordovaというフレームワークを拡張して作られており、カメラ等の端末の機能を呼び出すことも可能です。
現在、Ionicは2系が公開されています。
Ionic2はJavaScriptフレームワークAngular2をプロジェクト内に採用しており、Angular2の開発と並行する形で開発が進められています。
IonicはAngularと密結合な構成になっているので、
Ionicでアプリを作る際にはAngular2のスタイルに従って開発していくことになります。
ちなみにIonic2は2016/9末にβ開発が終了したところで、だいぶ実務に採用しやすくなりました。
これからIonic2を用いたアプリ開発の基本の解説をサンプルアプリを作成しながら連載していきたいと思います。
環境構築
まずはIonicアプリを開発するための環境を構築します。
今後開発端末としてMacをベースとして話を進めていきますが、Windowsでも同じように読めるはずです。
1.Node.jsのインストール
Ionicはプロジェクトの生成・ビルド等各種の操作を行うCLIを提供していますが、それらはNode.jsを前提としているため
Node.jsのインストールが必要です。
Node.jsがインストールされていない方は以下のa)~b)のどちらかでインストールしてください。
a)GUIインストーラを用いる方法
Node.jsからインストーラをダウンロード、実行して指示に従ってください。
なおこの際インストーラはNode.js v6以上のものを選択してください。
b)Homebrewを用いる方法
MacユーザでHomebrewがインストール済みであればHomebrewでインストール出来ます。
Homebrewに関してはコチラ参考：Homebrewのススメ
$ brew install node
の実行してください。
インストール完了後
$ node –version
を実行してv6以上のバージョンが表示されればOKです。
2.Ionic及びCordovaのインストール
IonicとIonicの裏側で必要なCordovaの最新版のインストールを行います。
次のコマンドを実行してください。
$ npm install -g ionic cordova
npmはNode.jsにおけるパッケージ管理ツールです。
npmは非常に広大なエコシステムを持っており、現在のJavaScript開発では
必須といってもいいので知らない方は機会に覚えておきましょう。
-gオプションをつけているのでグローバル環境にIonicとCordovaがインストールされます。
これによりIonicのCLIが使えるようになります。
以上でIonicアプリを作る環境が整いました！
次回からいよいよサンプルアプリを作成していきたいと思います。
