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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

1回答

597閲覧

Javascriptが非同期処理されてプログラムが思うように動かない

JIT

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/06/23 00:22

Javascript初心者です。Monacaにてアプリを開発しています。
スマホ内に保存した画像ファイルを画面に表示させるために、画像URLをBLOB形式に変換し、変数「texthtml」へ追加しようとしているのですが上手くいきません。

下記のソースコードでは、変数「texthtml」内は空白になってしまいます。
関数「urledit」で行われているファイル操作の処理が「非同期」で行われているらしい事は分かっているのですが、具体的にどこを修正すれば良いのか分からずに困っています。

該当のソースコード

Javascript

1var imgn; //グローバル変数「imgn」 2 3function createFile(dirEntry, fileData, fileName) { 4(略) 5 textArray = '<div class="shop01-p" style="background-image:url(KmEsb001-shop01.png);"></div>'; //ここでは1行だけにしていますが、実際の「textArray」は複数の行数があります。 6 var texthtml = ''; 7 for (var i = 0; i < textArray.length; i++){ 8 if (textArray[i].match(/shop01-p/)) { 9 var result = textArray[i].split(/(|)/); 10 11 urledit(result[0],result[1],result[2]); 12 //関数「urledit」から変数「imgn」を持ってきたい。 13 //関数「urledit」でグローバル変数「imgn」を編集している。 14 15 console.log( imgn ); //undefined 16 texthtml += imgn; 17 }else{ 18 texthtml += textArray[i]; 19 } 20 } 21(略) 22} 23 24function urledit(R0,R1,R2){ 25 requestFileSystem(LocalFileSystem.PERSISTENT, 0, 26 function(fileSystem){ 27 var dirEntry = fileSystem.root; 28 var gUrl = dirEntry.toURL() + R1; 29 console.log('data:' + gUrl ); 30 window.resolveLocalFileSystemURL(gUrl, 31 function(fileEntry){ 32 fileEntry.file(function (file) { 33 var reader = new FileReader(); 34 reader.onloadend = function() { 35 var ifn = fileEntry.toURL(); 36 if (ifn.match(/.png/)) { 37 var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" }); 38 }else{ 39 var blob = new Blob([new Uint8Array(this.result)], { type: 'image/jpeg' }); 40 } 41 var urlurlurl = window.URL.createObjectURL(blob); 42 imgn = R0 + '(' + urlurlurl + ')' + R2; //この変数「imgn」を関数「createFile」に渡したい。 43 console.log( imgn ); //imgn='<div class="shop01-p" style="background-image:url(blob:file:///7490f2c1-52b1-44c2-a015-91508e1a3c3b);"></div>' 44 return(imgn); 45 }; 46 reader.readAsArrayBuffer(file); 47 }); 48 } 49 ); 50 }); 51}

基本的な部分で躓いているような気がするのですが、皆様のお力をお借りしたく存じます。
よろしくお願いします。

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

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

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

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

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

sousuke

2020/06/23 12:13

urleditは編集していいんですか?
JIT

2020/06/23 13:44

はい、編集しても構いません。
guest

回答1

0

追記) 申し訳ありません。誤答でした。

//ここでは1行だけにしていますが、実際の「textArray」は複数の行数があります

(追記ここまで


基本的な部分で躓いているような気がする

文字列は添え字番号でアクセスすると、1文字の string になります。

javascript

1var textArray = "hoge"; 2var textArray2 = [ 3 "hoge", 4 "hogu" 5]; 6console.log( textArray[0], textArray2[0] );// "h", "hoge" 7console.log( textArray[1], textArray2[1] );// "o", "hogu"

ご質問のコード内では if (textArray[i].match(/shop01-p/))と評価されているはずです

投稿2020/06/23 00:57

編集2020/06/23 01:07
AkitoshiManabe

総合スコア5432

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問