Ionicで画像をWebから取得＆内部ディレクトリに保存してから表示する

この記事は Ionic Advent Calendar 2017 の13日目の記事です

はじめに

画像などのリソースの追加/更新ペースを高くする場合、毎回アップデートの申請をするのはめんどいので、Webにアップした画像を引っ張ってきて表示してみたいと思います
また毎回だとWebのオーバーヘッドが馬鹿にならないので一度取得した画像は内部ディレクトリに保存して再利用します

インストールとか

今回は画像のアップロード先としてFirebase Storageを使いますのでfirebaseとangularfire2をインストールします

$ npm install firebase angularfire2

またIonicの内部ディレクトリに書き込むためにIonic Native - Fileもインストールします

$ ionic cordova plugin add cordova-plugin-file
$ npm install @ionic-native/file

これで準備は完了

実装

コードだけ

src/pages/hoge/hoge.ts

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { File } from '@ionic-native/file';
import * as firebase from 'firebase/app';
import 'firebase/storage';

@IonicPage()
@Component({
  selector: 'page-hoge',
  templateUrl: 'hoge.html',
})
export class HogePage {

  imagePath: string;

  setImagePath() {
    const image = this.getImage();
    const saveDirectory = this.file.dataDirectory;

    // `file://`スキーマがAndroid7以上だと参照できないので取る
    const imagePath = (saveDirectory + image).replace(/file:\/\//, '');

    this.file.checkFile(saveDirectory, image)
      // ファイルが存在すればそのまま使用
      .then(() => this.imagePath = imagePath)

      // なければ
      .catch(error => {

        // Firebase storageからURLを取得して
        const imgRef = firebase.storage().ref('path/to/' + image);
        imgRef.getDownloadURL()
          .then(url => {

            // URLからデータを取得して
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.responseType = 'arraybuffer';
            xhr.onload = (event) => {
              const data = xhr.response;
              const contentType = xhr.getResponseHeader('Content-Type');
              const blob = new Blob([data], { type: contentType });

              // 保存
              this.file.writeFile(saveDirectory, image, blob)
                .then(() => this.imagePath = imagePath)

                // 失敗してもURLをそのまま渡せば表示はできる
                .catch(() => this.imagePath = url);
            };

            xhr.send();
          });
      });
  }

  private getImage(): string {
    // APIで取ってくるなりなんなり
    return 'hoge.png';
  }

}

src/pages/hoge/hoge.html

<ion-content padding>
  <img [src]="imagePath" />
</ion-content>

これで画像の取得表示ができました
やったね
ガンガン画像を追加しましょう

まとめ

Ionic最高！！