2019.02.23
$ 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
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
# Ionicアプリをビルド
$ ionic cordova prepare ios
# Xcodeでプロジェクトを開く
$ open platforms/ios/ImagePickerSample.xcodeproj
Xcodeで起動するエミュレーターを選んで実行ボタンを押す。
無事iPhone XSのエミュレーターでアプリを起動することができた。
# Ionicアプリをビルド
$ ionic cordova prepare android
Android Studioで、platforms/android
を開く。自動でGradleのSyncが始まるので、終わるまで気長に待つ。
Syncが終わったら実行ボタンを押す。
Androidのエミュレーターでもアプリを起動することができた。
# プラグインをインストール
$ ionic cordova plugin add cordova-plugin-telerik-imagepicker
# Ionicからプラグインを呼び出しやすくするライブラリをインストール
$ npm install @ionic-native/image-picker
<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);
}
}
戻り値はfile:///data/user/0/net.playfulit.ionic4imagepickersample/cache/tmp_IMG_20190222_230136116477858344689199.jpg
のようなパスとなった。