ionic2
Angular2を利用して、ハイブリットアプリ開発ができるフレームワークです。
必要なものをインストール
npm install -g ionic cordova ios-deploy
プロジェクト作成
今回はテンプレートにtutorialを指定。
途中、Dashboardを利用するか聞かれるが今回はNO。
ionic start {プロジェクト名} {テンプレート}
とりあえずブラウザで確認してみる
cd {プロジェクト名}
ionic serve
見れた！
実機で確認してみる
手元のiOS10でやってみる。
Xcodeでアカウント登録
Xcode > Preferences > Accounts > Add Apple ID
ビルド
ionic cordova build ios --prod
Xcodeでビルドされたプロジェクトを開く
{プロジェクト名}/platforms/ios/
実行ターゲットを接続したiPhoneへ変更
USBでMacとiPhoneを接続する。
iPhone 7 Plusとなっている箇所を接続したiPhoneへ変更する。
署名証明書の設定
- Xcode上のプロジェクトをダブルクリックして、
Generalを選択。 -
IdentityのBundle Identifierに任意の文字列入力。 -
General > Signing > Add Accountsを選択。 - 自分のAppleアカウントをダブルクリック。
-
No Signingと出るので、下の+から追加。 -
iOS Developpersを選択。
実行
- 左上の再生ボタンをクリック！
- iPhoneのロックを解けと言われるので、言うとおりに。
- HOME画面にアプリが配置されているはず。
- 実行しようとすると・・・、できない。
iPhone上で証明書の信頼を行う。
- iPhoneの
設定 > 一般 > デバイス管理 - 自分のAppleアカウントが表示されているので、タップして信頼させる。
こんどこそ実行。
- HOMEでアプリタップ、実機確認完了！
ページを増やしてみる
- tutorialのトグルメニューにリンクを追加し、作成したページに飛ばすまで実装する。
- ボタンを押したらアラートが表示されるページを作ってみる。
ページの作成
src/pages/配下に新規ページ用フォルダを作る。
sampleフォルダを作成しました。
html作成
-
sample.htmlをページフォルダへ作成
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Sample</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button block (click)="tappedAlert()">アラートが出るボタン</button>
</ion-content>
TS作成
-
sample.tsをページフォルダへ作成 - 公式のアラートコンポーネントを使用します。
sample.ts
import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';
@Component({
selector: 'page-sample',
templateUrl: 'sample.html'
})
export class SamplePage {
constructor(public alertCtrl: AlertController) {
}
tappedAlert() {
let alert = this.alertCtrl.create({
title: 'Sampleアラートです！',
subTitle: 'ここに説明を書きます。ionicでサンプル実装してみた！',
buttons: ['おっけー']
});
alert.present();
}
}
他記述が必要なところ
src/app/app.module.ts
import { SamplePage } from '../pages/sample/sample';
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
SamplePage
],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
SamplePage
],
src/app/app.compornent.ts
import { SamplePage } from '../pages/sample/sample';
// set our app's pages
this.pages = [
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage },
{ title: 'Sample', component: SamplePage },
];
確認
- 再度ビルドからの手順を実行し、実機で確認。
- と思ったらビルドでめっちゃエラーでる・・
- どうやら署名関係のエラー。さっきXcodeで署名を弄ったからか・・・
- config.xmlの署名をXcodeで入力した文字列に変更したら行けた。
実機スクショ
できた！
まとめ
初めてiPhoneアプリに触ってみましたがわりとサクサク行けました！
が、最後の署名のところの回避が大分怪しい・・・ｗ
署名関係は調べたら修正します。