【Ionic入門】基本操作まとめ

Ionicの基本操作についてまとめました。

【コマンド】プロジェクトの作成

Cordova + Ionicでプロジェクトを作成していきます。

① 「コマンドプロンプト」もしくは「ターミナル」を開き、以下のコマンドを実行します。

$ ionic start プロジェクト名 blank --v3
補足
1 プロジェクト名は英数字
2 最も簡素なテンプレート「blank」を使用
3 左サイドメニューが付いているテンプレート「sidemenu」、画面下にナビゲーションバーが付いている「tabs」も有

② いくつか設定を聞かれますが、次のように回答します。

質問 回答
Try Ionic 4? n
Would you like to integrate your new app with Cordova to target native iOS and Android? n
Install the free Ionic Pro SDK and connect your app? n
Install the free Ionic Pro SDK and connect your app? n

③ cdコマンドで、作成したプロジェクトのディレクトリに移動します。

$ cd プロジェクト名

④ 以下のコマンドで、デフォルトブラウザが自動で起動し、アプリを表示します。

ionic serve

※自動でブラウザが起動し「http://localhost:8100」にアクセスします。
ページに表示されているのがアプリの画面です。

※Ionicでは以下のようなテンプレートが用意されています。

テンプレート名 概要
tabs アプリ上部にタブあり
blank ホーム画面のみ(一番簡素なもの)
sidemenu 上部に[三]アイコンがあり、サイドメニューを展開可能
super 様々な機能があるもの
tutorial sidemenuとほとんど同じ
aws awsに対応
関連記事
参考 【Ionic】テンプレート一覧

【Android】プラットフォームの追加

① cdコマンドでプロジェクトフォルダに移動します。

cd プロジェクト名

② Android プラットフォームを追加します。

ionic cordova platform add android
関連記事
参考 【Ionic】プロジェクトの作成(コマンド)

【画像ファイル】格納場所・パス

① Ionicで画像を格納するときは、以下のパス内に保存します。

www/asserts/images

※imagesフォルダは自分で作成

②HTMLテンプレートから画像を呼び出すときは、パスは次のようになります。。

<img src="assets/images/icon1.jpg" alt="">
関連記事
参考 【Ionic】画像を格納する場所・呼び出すパス

【フォント】カスタムフォントの使用

Ionicでアプリを作成するときにカスタムフォント(.ttf)を使いたい場合があります。
その手順は次のとおりです。

① カスタムフォントのファイル(ttf形式)を用意します。

② 用意したttfファイルを「src/assets/fonts」内に保存します。

補足
1 fontsフォルダは自分で作成(わかりやすくするため)
2 fontsフォルダ内のttfファイルは、ビルド時に「www/assets」内に自動でコピーされる(後にSCSSで呼び出すときのパスが../assets/fonts/〇〇.ttfで済む)

③ scssファイルで保存したフォントを呼び出すことができます。
※MaruGoAA-SR.ttfの場合

@font-face {
    font-family: 'MaruGoAA-SR';
    /*  */
    src: url('../assets/fonts/MaruGoAA-SR.ttf');
}

page-home {
  ion-title,
  ion-card-header {
    font-family: 'MaruGoAA-SR';
  }
}
関連記事
参考 【Ionic】カスタムフォントを使用する方法

【エミュレータ】アプリの起動

① ビルドしたAndroidアプリをエミュレータを起動するには以下のコマンドを実行します。

ionic cordova emulate android

② ビルドしたiOSアプリをエミュレータを起動するには以下のコマンドを実行します。

ionic cordova emulate ios

補足

プロジェクト作成~エミュレーター起動までの操作手順は次のようになります。

① プロジェクトを作成します。

ionic start test tabs

② プロジェクト直下に移動し、プラットフォーム追加→ビルド→エミュレータ起動を順に実行します。

■Androidの場合

cd test
ionic cordova platform add android
ionic build android
ionic cordova emulate android

■iOSの場合

cd test
ionic cordova platform add ios
ionic build ios
ionic cordova emulate ios

エミュレーターがうまく起動しない場合、Android Studioでプロジェクトフォルダにある「platform/android/」を開き、左上の▶をクリックすると動作確認できます。

関連記事
参考 【Ionic】Android・iOSのエミュレータ起動

【スプラッシュスクリーン】変更・非表示

① スプラッシュスクリーンの画像を変更する場合は、以下のファイルを差し替えます。

プロジェクト名\resources\splash.png

Ionicで起動時の画像(スプラッシュスクリーン)を消すには次の操作を行います。

①config.xmlを開きます。

②以下のように一部分を編集します。

<preference name="FadeSplashScreenDuration" value="0"/>
<preference name="SplashScreen" value="none"/>
関連記事
参考 【Ionic】スプラッシュスクリーンの変更・非表示

【ページ】新規作成、ボタンタップで遷移、メニュー追加

① 以下のコマンドを実行します。

ionic generate page NewPage

② src/pages/page直下にnew-pageフォルダが作成されます、
page1フォルダ内には以下のファイルが生成されます。

new-page
|- new-page.html
|- new-page.scss
|- new-page.ts
|- new-page.module.ts

③ モジュールの宣言をapp.module.tsで一括管理する場合は、「new-page.module.ts」を削除します。

④ app.module.ts内でNewPageを宣言します。
■app.module.ts

import { NewPage } from '../pages/new-page/new-page';

⑤declarationsとentryComponentsプロパティの要素にNewPageを追加します。

ボタンタップで遷移

NewPageに遷移するボタンをホーム画面に設置します。

■home.ts

toNewPage() {
  this.navCtrl.setRoot(NewPage);
}


import { NewPage } from '../new-page/new-page';

■home.html

<button ion-button (click)="toNewPage()">次ページへ</button>
関連記事
参考 【Ionic】新規ページの作成

メニュー追加

Ionicでアプリを作成するときにカスタムフォント(.ttf)を使いたい場合があります。
その手順は次のとおりです。

① ホームページのヘッダーに、トグルボタン(三本線)を追加します。

■src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

:
(省略)

menuToggleタグ・・・ディレクティブ付きのボタン

② 次にトグルボタンをタップしたときに表示されるメニューを追加していきます。

■src/app/app.html に記述

<ion-menu [content]="c1">
  <ion-header>
    <ion-toolbar>
      <ion-title>My Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item (click)="openPage('option')">設定</button>
      <button menuClose ion-item (click)="openPage('bookmark')">お気に入り</button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav #c1 [root]="rootPage"></ion-nav>

[設定][お気に入り]メニューを追加しています。
また、それぞれタップすると、次に作成するページ「optionPage」「bookmarkPage」へそれぞれ飛びます。

補足
ion-menuタグ メニュー作成
type属性 メニューの表示方法を指定

③以下のコマンドで[設定][お気に入り]ページを作成します。

ionic g page optionPage
ionic g page bookmarkPage

④ ハンドラを記述します。

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { OptionPage } from '../pages/option-page/option-page';
import { BookmarkPage } from '../pages/bookmark-page/bookmark-page';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  openPage(name: string){
    switch(name){
      case 'option':
        this.nav.setRoot(OptionPage);
        break;
      case 'bookmark':
        this.nav.setRoot(BookmarkPage);
        break;
    }
  }
}

⑥ ルートモジュールに各ページモジュールを追加します。

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { OptionPageModule } from '../pages/option-page/option-page.module';
import { BookmarkPageModule } from '../pages/bookmark-page/bookmark-page.module';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    OptionPageModule,
    BookmarkPageModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

⑦ ホームページ(HopePage)以外にもトグルボタンを設置します。

関連記事
参考 【Ionic】アプリにメニューを追加

【リリース】アプリのリリース(Android)

① 以下のコマンドでアプリをビルドし、APKファイルを作成します。

$ ionic cordova build --release android

② アプリに署名するためのファイルを作成します。

$ keytool -genkey -v -keystore sample.keystore -alias sample -keyalg RSA -keysize 2048 -validity 10000

③ APKファイルに署名します。

$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore sample.keystore sample.apk sample

④ 署名されたAPKファイルを最適化します。

$ zipalign -v 4 sample.apk sample2.apk

⑤ これでGoogle Play Storeに投稿できるようになります。

詳細記事
1 【Ionic入門】アプリのリリース、Google Play Storeに公開
2 【Google Play】デベロッパーのアカウント登録・作成
3 【Google Play】アプリの公開方法
4 【Cordova】アプリの更新方法(バージョンコードの変更)
参考文献・関連記事
参考 [Ionic3] Storageを使ったTODOアプリの作成
関連 【Ionic入門】Android・iPhoneアプリ開発編
関連記事