質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

Q&A

解決済

1回答

1032閲覧

【Ionic cordova】iOSにて、スマートフォンに保存された画像を選択する際、毎回ファイルパスが異なる点について

develop-man

総合スコア4

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

0グッド

0クリップ

投稿2020/03/16 01:58

前提・実現したいこと

Ionic4 cordova を使用して、iOSまたはAndroid OSのスマートフォンに保存された画像を選択して表示、かつ次回以降は同じ画面を開いた際に、選択された画像がそのまま表示されているような処理を作成しています。プラグインは、cordova-plugin-cameraを使用しています。選択された画像がそのまま表示される処理については、cordova-sqlite-storageによって選択された画像のパスを保存・取得する予定です(下記ソースコードは、画像の選択部分のみとなっています)。

発生している問題・エラーメッセージ

Android OSについては、画像選択時に毎回同じパスを取得できており、問題ないです。
iOSにて画像を選択する際、アプリのtmpディレクトリに保存され、アプリ再起動時に削除されてしまっているようで、画像のパスが毎回変化してしまいます。この仕様により、前回選択された画像を再び表示させるという処理ができなくなっています。
もし、該当のプラグイン以外で実現できる方法があれば、ご教授をお願い致します。

該当のソースコード

typescript

1import { Component } from '@angular/core'; 2import { NavController, Platform } from 'ionic-angular'; 3import { Camera } from '@ionic-native/camera'; 4import { FilePath } from '@ionic-native/file-path'; 5import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; 6 7declare var Ionic: any; 8 9@Component({ 10 selector: 'page-home', 11 templateUrl: 'home.html' 12}) 13export class HomePage { 14 15 safeUrl: SafeResourceUrl = null; 16 constructor(public platform: Platform, public navCtrl: NavController, public camera: Camera, public filePath: FilePath, private domSanitizer: DomSanitizer) { 17 18 } 19 20 // フォトライブラリ 21 openPhoto() { 22 const options = { 23 quality: 100, 24 sourceType: this.camera.PictureSourceType.PHOTOLIBRARY, 25 destinationType: this.camera.DestinationType.FILE_URI, 26 mediaType: this.camera.MediaType.PICTURE 27 } 28 this.camera.getPicture(options).then((url) => { 29 if (this.platform.is('ios')) { 30 // iOS 31 let imageUrl = Ionic.WebView.convertFileSrc(url); 32 this.safeUrl = this.domSanitizer.bypassSecurityTrustUrl(imageUrl); 33 } else if (this.platform.is('android')) { 34 // Android OS 35 this.filePath.resolveNativePath(url) 36 .then(filePath => { 37 let imageUrl = Ionic.WebView.convertFileSrc(filePath) 38 this.safeUrl = imageUrl; 39 }) 40 } 41 }) 42 } 43 44} 45

html

1<ion-header> 2 <ion-navbar> 3 <button ion-button menuToggle> 4 <ion-icon name="menu"></ion-icon> 5 </button> 6 <ion-title>Home</ion-title> 7 </ion-navbar> 8</ion-header> 9 10<ion-content padding> 11 <h3>Ionic Menu Starter</h3> 12 13 <p> 14 If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way. 15 </p> 16 17 <button ion-button secondary (click)="openPhoto()">Toggle Menu</button> 18 <img [src]="safeUrl" style="width: 50%; height: 50%"> 19</ion-content>

試したこと

上記ソースコードを、iOS11.3, 12.1およびAndroid8.0, 9.0のエミュレータ上で実行しました。

補足情報(FW/ツールのバージョンなど)

$ ionic info Ionic: ionic (Ionic CLI) : 4.5.0 Ionic Framework : ionic-angular 3.9.9 @ionic/app-scripts : 3.2.4 Cordova: cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.1.4, ios 5.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins) System: ios-deploy : 1.9.4 ios-sim : 8.0.2 NodeJS : v8.11.4 npm : 6.5.0 OS : macOS Xcode : Xcode 11.3 Build version 11C29

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2020/03/16 02:12

iOS のそのような挙動はプライバシーに関する配慮(適当にパスを指定したら画像が見えてしまうと言う事態を防ぐ)のためなので、アプリ再起動時に同じ画像を表示したいのであればアプリ内にコピーする必要があるかと。
develop-man

2020/03/16 02:38

それはつまり、開発側が意図的にアプリ側からユーザーのディレクトリ等に直接アクセスさせるのを防ぐため、ということでしょうか?
hoshi-takanori

2020/03/16 02:42 編集

そうです。Apple はアプリ開発者(や、彼らがホイホイ入れる得体の知れないライブラリ)を信じてませんから。
develop-man

2020/03/16 02:48

なるほど、確かにiOSはそういった面の制限は厳しい気がします…。 ありがとうございます。納得できました。
guest

回答1

0

自己解決

追記・修正の依頼に回答して頂き、自己解決しました。
iOSでは、セキュリティ面から画像などのファイルに直接アクセスさせるのを防ぐため、アプリのディレクトリにコピーする必要があるということですね。ありがとうございました。

投稿2020/03/16 02:53

develop-man

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問