ionicとは？
そもそもionicとはGoogle社のAngularというアプリケーションフレームワークをベースにしたモバイル開発に特化したJavascriptフレームワークになります。
Webブラウザでの表示（iphoneであればsafari、PCであればchrome）、ios、android等の環境周りを意識することなく開発することが可能となります。
具体的にはHTMLファイルはionic専用のカスタムタグを使用し、従来のjavascriptファイルは.tsファイルとしてTypescriptでコードを書きます。
これをionicフレームワークでビルドし、各環境用のモジュールが出力可能となるため、いちいちiosだったら、、、のようなIF文を書く必要は無くなります。
ionic環境準備
1.nodebrewをインストールします。
nodebrewはnodeのバージョン管理をすることができる便利なツールになります。
windowsですとnodistになります。
brew install nodebrew
brew upgrade nodebrew`
2.環境変数にnodebrewのインストールパスを追加します。
export PATH=$HOME/.nodebrew/current/bin:$PATH
3.nodebrewを使用してnodeをインストールします。今回はバージョン8.9.4を使用します。
なお、nodeをインストールすると一緒にnpmもインストールされます。
nodebrew install v8.9.4
nodebrew use v8.9.4
4.ionic開発で使用するcordovaとionicをnpmコマンドでインストールします。
npm install -g cordova
npm install -g ionic
ionicのプロジェクト作成
1.ionicでは「ionic start xxxx」で簡単にプロジェクトを作成することができます。
しかもホーム画面まで自動で作成されます。
ionic start コマンドを使用するとテンプレート（tab、sidemenu、aws等）を使用するか問われますが、ここではそのままエンターを押下。
デフォルトでtabsになります。
その後、ios、androidのnativeプラットフォームを作成するか問われますので、Yesを選択します。
最後にionic pro SDKをインストールするか問われますが、これは有料となるため、noを選択しています。
$ionic start hoge
? What starter would you like to use: tabs
? Would you like to integrate your new app with Cordova to target native iOS and Android? Yes
? Install the free Ionic Pro SDK and connect your app? No
2.作成したプロジェクトのディレクトリへ移動し、実行してみます。
ブラウザが自動で起動し、Welcome画面が表示されれば成功です。
cd hoge
ionic serve
開発環境準備
1.visual studio codeをインストールします。
https://visualstudio.microsoft.com/ja/
※リンク先のvisual studio codeを選択してダウンロード＆インストールします。
2.visual studio codeを起動し、画面左メニューから拡張機能を選択します。
入力ボックスに「TSLint」と入力してエンターを押下すると「TSLint for visual studio code」が表示されるのでインストールを選択します。
これでTypescriptの開発が可能となります。
3.ファイル→開くを選択します。
作成したhogeプロジェクトのディレクトリを選択して開くボタンを押下。
実際に画面を編集してみよう
ionicの各画面はhode/src/pages/xxxフォルダ1つにつき1画面の構成となっています。
例えばhomeフォルダは以下のようになっていると思います。
・home.html
・home.scss
・home.ts
1.home.htmlを開き「Welcome to Ionic!」の部分を編集して保存します。
すると開いていたブラウザの画面が自動でリフレッシュされ、編集が反映されます。
これがionicのメリットの1つだと思います。もちろん不正な編集の場合はエラー画面となります。
アラート画面を表示してみよう
1.home.htmlファイルを以下の用に編集します。
タグの下にionicのbuttonタグを追加しています。（clickしたらTestファンクションを呼び出します）
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button color=“danger” (click)=‘Test()’>Danger</button>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
</ion-content>
2.home.tsを以下のように編集します。
2行目でAlertControllerをimportし、constructorの引数にAlertControllerを受け取るようにします。
constructorはionicのビルド時に実行されるので、Functionはconstructorの外に記述します。
import { Component } from ‘@angular/core’;
import { NavController,AlertController } from ‘ionic-angular’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
constructor(public navCtrl: NavController, private alertCtrl: AlertController) {
}
Test() {
let alert = this.alertCtrl.create({
title: ‘エラー‘,
subTitle: ‘通信エラーが発生しました’,
buttons: [‘OK’]
});
alert.present();
}
}
3.ブラウザの画面が自動でリフレッシュされ、画面上に赤色のDangerボタンが表示されたと思います。
押下するとhome.tsに記述したTest()が実行され、アラート画面が表示されます。