Designing and Engineering "遊び心"駆動開発

Playful IT
2/23 10:25

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

環境

  • 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で起動するエミュレーターを選んで実行ボタンを押す。

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

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

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



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

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

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

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での実行結果

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

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

関連記事
2/21 8:36

Capacitorのプラグインを使ってネイティブのAPIを呼び出してみる

はじめに 前回、Capacitorを使ってIonic製のWebアプリをiOS・Androidで動かせるようにしてみた。今回はさらに、Capacitorのプラグインを使ってネイティブの機能を呼び出してみようと思う。 Capacitor…

2/21 6:39

Cordovaに代わるCapacitorをIonic 4で試してみる

Capacitorとは? Capacitorとは、WebアプリをiOS・Android・Electron環境で動かすためのクロスプラットフォーム開発ライブラリ。プラットフォーム固有のAPIはiOSではSwiftで書かれた、AndroidはJava…

2/5 6:44

サーバーレスを学ぶのにAWS Amplifyを使うのをやめた件

AWS Amplifyとの出会い 目黒にあるAWS Loft Tokyoにて行われたBlack Beltセミナーの公開収録に参加して初めてAmplifyを知った。 AWS BlackBeltセミナー Amplify@AWS Loft 2018/11/6 それまでAWS…

2/4 10:59

AWS AmplifyのAPI.graphqlではなくAWSAppSyncClientでAppSyncにアクセスしてみる

AWS Amplifyが提供するGraphQL AWS Amplifyを使ってAppSyncを利用する場合、 import { AmplifyService } from 'aws-amplify-angular'; で読み込んだAmplifyServiceをDI…

2/4 7:32

AWS AmplifyでAppSyncのGraphQLスキーマを作成する

目指すもの まずはログインしているユーザーがつぶやきを投稿できるだけのシンプルなアプリケーションを目指す。Amazon Cognito上ではユーザーは複数作成されるが、つぶやきにはユーザーは関連付けない。 学びたいこと AWS Amplifyで定義したGraphQL…

プロフィール