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

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

スポンサーリンク

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

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

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

$ ionic start プロジェクト名 blank
– 補足
プロジェクト名 任意の英数字
blank テンプレート名（最も簡素なテンプレート「blank」を使用）
他のテンプレート名 tabs（アプリ上部にタブあり）、blank（ホーム画面のみ、一番簡素)、sidemenu（上部に[三]アイコンがあり、サイドメニューを展開可能）、super（様々な機能があるもの）、tutorial（sidemenuとほとんど同じ）aws（awsに対応）、tabs（画面下にナビゲーションバーが付いている）

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

質問 回答
Install the free Ionic Appflow SDK and connect your app? No

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

$ cd プロジェクト名

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

ionic serve

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

– 関連記事
参考 ■【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で呼び出すときのパスが.https://raw.githubusercontent.com/nishizumi-lab/sample/master/algorithm/electricity/denken/riron/fonts/〇〇.ttfで済む)

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

@font-face {
    font-family: 'MaruGoAA-SR';
    /*  */
    src: url('.https://raw.githubusercontent.com/nishizumi-lab/sample/master/algorithm/electricity/denken/riron/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のエミュレータ起動
スポンサーリンク

【一括変更】アプリアイコン、スプラッシュスクリーン

Ionicのアプリアイコン、スプラッシュスクリーンの変更する方法についてまとめました。

アプリアイコンの変更

Ionicでアプリアイコンを変更する手順はつぎのとおりです。

① アプリアイコンに使用する画像ファイル（icon.png）を「プロジェクト名/resources」以下に保存します。
（解像度は1024x1024px以上）

② 以下のコマンドを順に実行します。

$ ionic cordova resources --icon android
$ ionic cordova resources --icon ios

③ 「プロジェクト名/resources/android/icon」「プロジェクト名/resources/ios/icon」以下に自動で異なるサイズのアプリアイコン画像が出力されます。

スプラッシュスクリーンの変更

① スプラッシュスクリーンに使用する画像ファイル（splash.png）を「プロジェクト名/resources」以下に保存します。
（解像度は2732x2732px以上）

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

$ ionic cordova resources --splash android
$ ionic cordova resources --splash ios

③ 「プロジェクト名/resources/android/splash」「プロジェクト名/resources/ios/splash」以下に自動で異なるサイズのアプリアイコン画像が出力されます。

補足

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

①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 platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk sample

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

$ zipalign -v 4 platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk app-release-unsigned.apk

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

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

コメント