この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
おはようございます、もきゅりんです。
先日、弊社のテウさんから教えてもらったIonicに興味持ったので、AngularのチュートリアルAppをやってみました。
やってみた結果、すごーいって思いました。
こういった写真を撮るアプリが1時間以内で出来ました。
こちら、自分の実機画面です。
世の中すごいことだらけですね。
元ネタはYour First Ionic App: Angularです。
自分はIonic自体には全然詳しくないので、チュートリアルをやってみた結果、さらっと進められているな、と思った点を補足的に書いていこうと思います。
興味が湧いた際は、是非上記チュートリアルと一緒に開いて進めていって頂ければと思います。
なお、Ionicの導入については下記ブログをご参照下さい。
目次
アプリの作成 / 起動
とりあえず、npmは利用できるとして言われた通りに進めていきます。
# Install Ionic and Cordova
npm install -g ionic cordovaアプリはblank,tabs,sidemenuのどれかから作成できるのですが、tabが3つあるもので作成します。「photo-gallery」はアプリ名になります。
# Create an App
ionic start photo-gallery tabs下記のコマンドでブラウザ起動します。
# Run the App
ionic serve実機で確認できるようにする
Cordovaというオープンソースフレームワークから iOS と Android のプラットフォームを追加します。
ionic cordova platform add ios
ionic cordova platform add androidこの後、設定するIonic DevAppで確認するために、src/index.htmlに以下のように追記します。
<head>
<!-- ... Other HTML tags... -->
<script src="cordova.js"></script>
</head>ご自身のモバイルデバイスにIonic DevAppをインストールします。
インストールして、アプリを開くとこのような画面が表示されるので、サインアップします。
それから下記コマンドで、先ほどのように起動すると、
ionic serve --devappデバイス上のDevAppにこんなのが表示されて
開発中のアプリが(自身の)実機で見れます。
Wow! 自分は単純なので、これだけで結構感動しました。
あとは言われた通りに進めていけば問題ないのですが、写真の保存させる部分が(どこに何をやるのかというところが)ちょっと分かりづらかったので補足しておきます。
写真を保存して表示させる
Android, iOS, and the Camera - Oh My! までが完了しているとします。
データのやり取りを担うサービスを作成します。
ionic g service services/Photo写真を保存するため、SQLite pluginを追加します。
ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic/storagephoto.service.tsにPhotoクラスを追加します。
データのやり取りはサービスで管理させるため、tab2.page.tsにあるtakePictureメソッドをphoto.service.tsに移します。
そして、tab2.page.ts にそのphoto.serviceをインポートします。
最終的に photo.service.ts はこんなです。
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { CameraOptions, Camera } from '@ionic-native/camera/ngx';
@Injectable({
providedIn: 'root'
})
export class PhotoService {
public photos: Photo[] = [];
constructor(private camera: Camera, private storage: Storage) {}
takePicture() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
this.camera.getPicture(options).then(
imageData => {
// Add new photo to gallery
this.photos.unshift({
data: 'data:image/jpeg;base64,' + imageData
});
// Save all photos for later viewing
this.storage.set('photos', this.photos);
},
err => {
// Handle error
console.log('Camera issue: ' + err);
}
);
}
loadSaved() {
this.storage.get('photos').then((photos) => {
this.photos = photos || [];
});
}
}
class Photo {
data: any;
}tab2.page.ts に撮った写真がロードされるようにngOnInitを追加します。
import { Component } from '@angular/core';
import { PhotoService } from '../services/photo.service';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
currentImage: any;
constructor(public photoService: PhotoService) {}
ngOnInit() {
this.photoService.loadSaved();
}
}そしたら、写真を取ってみます。
ダニエルくんという仮面です。
そしたら、冒頭の写真ギャラリーとなるわけです。
Angularを理解していればなんてことはないのですが、慣れていないと、どこに何をやるんだっけ？？と若干自分は迷ってしまったため、まとめてみました。
何より驚きの共有欲求が大きかったです。(今更なのですが)
テウさんありがとう！
以上です、どなたかのお役に立てば幸いです。