[初心者] Ionic4でPhoto Gallery アプリを作ってみる

#Ionic

もきゅりん

2019.07.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

おはようございます、もきゅりんです。

先日、弊社のテウさんから教えてもらったIonicに興味持ったので、AngularのチュートリアルAppをやってみました。

やってみた結果、すごーいって思いました。

こういった写真を撮るアプリが1時間以内で出来ました。

こちら、自分の実機画面です。

ionic-photo-gallary

世の中すごいことだらけですね。

元ネタは Your First Ionic App: Angularです。

自分はIonic自体には全然詳しくないので、チュートリアルをやってみた結果、さらっと進められているな、と思った点を補足的に書いていこうと思います。

興味が湧いた際は、是非上記チュートリアルと一緒に開いて進めていって頂ければと思います。

なお、Ionicの導入については下記ブログをご参照下さい。

[Ionic x Angular] ワンソースでiOSとAndroidアプリを開発

アプリの作成 / 起動

とりあえず、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をインストールします。

App Store / Ionic DevApp

Google play / Ionic DevApp

インストールして、アプリを開くとこのような画面が表示されるので、サインアップします。

signup

それから下記コマンドで、先ほどのように起動すると、

ionic serve --devapp

デバイス上のDevAppにこんなのが表示されて

iphone-test

開発中のアプリが(自身の)実機で見れます。

iphone-test2

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/storage

photo.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();
  }
}

そしたら、写真を取ってみます。

ダニエルくんという仮面です。

mask