Engineering Design Startup Education Event

Ionic 4でImage Pickerプラグインを試してみる

2019.02.23

環境

macOS Mojave 10.14.2
Node.js v10.4.1
npm 6.8.0
Ionic CLI 4.10.3
Xcode 10.1
Android Studio 3.3.1

まずはIonic 4アプリケーションをIonic CLIを使って立ち上げる

$ ionic start

# プロジェクト名を指定
? Project name: Ionic4ImagePickerSample

# テンプレートを選択
? Starter template: (Use arrow keys)
❯ blank    | A blank starter project
  sidemenu | A starting project with a side menu with navigation in the content area
  tabs     | A starting project with a simple tabbed interface

# Appflowを使うか選択（今回は使わない）
? Install the free Ionic Appflow SDK and connect your app? (Y/n) n

出来上がったら、プロジェクトのディレクトリに移動してみる。

$ cd Ionic4ImagePickerSample

この時点で、プロジェクトのディレクトリ直下には以下のファイル・ディレクトリが存在する。

$ tree -L 1
.
├── angular.json
├── e2e
├── ionic.config.json
├── node_modules
├── package-lock.json
├── package.json
├── src
├── tsconfig.json
└── tslint.json

Cordovaを使ってアプリのプラットフォームにiOS・Androidを追加する

iOSやAndroidのパッケージ名やアプリ名の設定を記述するconfig.xmlを生成するため、一度iOS環境を追加する。

# プラットフォームにiOSを追加
$ ionic cordova platform add ios

config.xmlが生成されるので、先頭の方の以下の部分を変更する。

<widget id="ここにパッケージ名を指定" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>ここにアプリ名を指定</name>

パッケージ名はドメインを逆順にしたnet.playfulit.ionic4imagepickersampleのような命名が良い。世界中で重複してはいけないが、ドメイン名をベースとしたものなら被らないから。

アプリ名はiOS・Androidのホーム画面に表示される名前を入力する。

次に、この設定を反映したiOS・Android環境をセットアップするために一度iOSの環境を削除する。

# プラットフォームからiOSを削除
$ ionic cordova platform rm ios

改めて、iOSとAndroidの環境を追加する。

# プラットフォームにiOSを追加
$ ionic cordova platform add ios

# プラットフォームにAndroidを追加
$ ionic cordova platform add Android

iOSのエミュレーターでアプリの起動確認をする

# Ionicアプリをビルド
$ ionic cordova prepare ios

# Xcodeでプロジェクトを開く
$ open platforms/ios/ImagePickerSample.xcodeproj

Xcodeで起動するエミュレーターを選んで実行ボタンを押す。

無事iPhone XSのエミュレーターでアプリを起動することができた。

Androidのエミュレーターでアプリの起動確認をする

# Ionicアプリをビルド
$ ionic cordova prepare android

Android Studioで、platforms/androidを開く。自動でGradleのSyncが始まるので、終わるまで気長に待つ。 Syncが終わったら実行ボタンを押す。

Androidのエミュレーターでもアプリを起動することができた。

ImagePickerプラグインをインストールする

# プラグインをインストール
$ ionic cordova plugin add cordova-plugin-telerik-imagepicker

# Ionicからプラグインを呼び出しやすくするライブラリをインストール
$ npm install @ionic-native/image-picker

ImagePickerを利用するコードを書く

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Image Picker
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button expand="block" (click)="onPickImageClicked()">Pick Image!</ion-button>
</ion-content>

import { Component } from '@angular/core';
import { ImagePicker, OutputType } from '@ionic-native/image-picker/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private imagePicker: ImagePicker,
  ) { }

  async onPickImageClicked() {
    const result = await this.imagePicker.getPictures({
      outputType: OutputType.FILE_URL,
    });

    console.log(result);
  }
}

Androidでの実行結果

戻り値はfile:///data/user/0/net.playfulit.ionic4imagepickersample/cache/tmp_IMG_20190222_230136116477858344689199.jpgのようなパスとなった。