iOS13にしたら、同期処理のAjax後のwindow.openができなくなった

Posted on 2019年9月26日 23:18 by amyu

今まで、Ajax後にwindow.openで新規ページを開きたい場合、同期処理でAjaxを呼ぶようにすると(それをAjaxといっていいか微妙ですが…)、ポップアップブロックをオンにしていてもページを開くことができました(参考：Ajaxでポップアップブロックを回避する方法 – LAZE SOFTWARE)。例えば下記のような処理です。

    var xhr = new XMLHttpRequest();
    // ハンドラの登録.
    xhr.onreadystatechange = function () {
        switch (xhr.readyState) {
            case 4: // データ受信完了.
                window.open('https://www.yahoo.co.jp/', '_blank');
                break;
        }
    };
    var apiUrl = 'test.json';
    xhr.open('GET', apiUrl, false); // 同期通信(ポップアップエラーをださないため)
    try{
        xhr.send();
    } catch (e) {
        alert('APIの呼び出しに失敗しました');
    }

var xhr = new XMLHttpRequest();

// ハンドラの登録.

xhr.onreadystatechange = function () {

switch (xhr.readyState) {

case 4: // データ受信完了.

window.open('https://www.yahoo.co.jp/', '_blank');

break;

}

};

var apiUrl = 'test.json';

xhr.open('GET', apiUrl, false); // 同期通信(ポップアップエラーをださないため)

try{

xhr.send();

} catch (e) {

alert('APIの呼び出しに失敗しました');

}

Ajaxの書き方が古いとか言われそうですが、xhr.openの第3引数でfalseを指定すると、非同期ではなく、同期処理になります。こうすることで、ポップアップブロックしていても今までなら

ですが、iOS端末でiOS13(もしくはiPadOS13)にアップデートすると、同期処理のAjaxでもwindow.openが機能しなくなってしまいました(泣)。

ちなみに、window.openの返り値はwindowオブジェクトではなく、nullになります。nullならポップアップを許可してくださいとメッセージをだすことができそうです。

なお、もう一つの対策として、Ajaxを呼ぶ前に空のページでwindow.openを呼んでおくという方法があるようです。
参考：クリックイベントの中で非同期処理したあとに別ウィンドウで開くときにポップアップブロックにひっかからない方法 – Webtech Walker

    var xhr = new XMLHttpRequest();
    var w = window.open('', '_blank'); // 先に空のページを開いて
    // ハンドラの登録.
    xhr.onreadystatechange = function () {
        switch (xhr.readyState) {
            case 4: // データ受信完了.
                w.location.href = 'https://www.yahoo.co.jp'; // URLを変更する
                break;
        }
    };
    var apiUrl = 'test.json';
    xhr.open('GET', apiUrl, false); // 同期通信(ポップアップエラーをださないため)
    try{
        xhr.send();
    } catch (e) {
        alert('APIの呼び出しに失敗しました');
    }

var xhr = new XMLHttpRequest();

var w = window.open('', '_blank'); // 先に空のページを開いて

// ハンドラの登録.

xhr.onreadystatechange = function () {

switch (xhr.readyState) {

case 4: // データ受信完了.

w.location.href = 'https://www.yahoo.co.jp'; // URLを変更する

break;

}

};

var apiUrl = 'test.json';

xhr.open('GET', apiUrl, false); // 同期通信(ポップアップエラーをださないため)

try{

xhr.send();

} catch (e) {

alert('APIの呼び出しに失敗しました');

}

これでうまくいけそうですね。一つ欠点としては、Ajaxで判断してエラーなどがあった場合も新しいウィンドウが開いてしまいますが、その場合は、「w.close()」で閉じればいいだけです。

imgタグのsrc属性を書き換える時の注意点

Posted on 2019年6月30日 21:46 by amyu

返信

Pocket

imgタグのsrc属性を書き換えて画像を置き換えたい時ってありますよね。

例えば、下記は青単色の画像と海の画像をラジオボタンで切り替えるサンプルコードです。

HTML

<div class="radios">
    <label><input type="radio" name="replaceImage" onchange="replaceImage('./image/blue.png')" checked>青単色</label>
    <label><input type="radio" name="replaceImage" onchange="replaceImage('./image/sea.png')">海</label>
</div>
<div class="image">
    <img src="./image/blue.png" id="replace">
</div>

</div>

</div>

JavaScript

var time = Date.now();
var imageDom = document.getElementById('replace');
var replaceImage = function(imgSrc){
    imageDom.src = imgSrc + '?' + time;
    time = Date.now();
}

var time = Date.now();

var imageDom = document.getElementById('replace');

var replaceImage = function(imgSrc){

imageDom.src = imgSrc + '?' + time;

time = Date.now();

}

サンプル：imgタグのsrc属性置き換え(その1)

このサンプル、青単色の画像は1.52KBなのにたいし、海の画像は3.91MBです。ただ、回線が遅いインターネットを使ってる方は分かると思うのですが、「海」のラジオボタンを選択してすぐは青の画像が表示されたままです(速い回線のインターネットを使ってる人はGoogle ChromeのNetworkタブから、「No throtting」と書いてあるセレクトボックスを「Slow 3G」に変えて試してみてください)。

見てのとおり、ラジオボタンとimgタグのsrc属性は海の画像のURLになっているのに、画像自体は青単色のままです。海の画像自体は読み込まれてから海の画像に切り替わります。

大抵はこれでも問題ないかもしれませんが、中には選択している画像(表記の画像)の種類と表示している画像が釣り合っていない状態があると問題があることもあるでしょう。少なくとも、現在自分が関わってるプロジェクトではそうです。

じゃあ、読み込んでいる間はどうすればいいかというと、一つの策として、何も表示しないとすることが考えられると思います。そのように対応したのが下記です。

JavaScript

var time = Date.now();
var imageDom = document.getElementById('replace');
var tmpImage = new Image(); // 一時的に使用するImageオブジェクト
// 画像が読み込めたら、画像のDOMのsrc属性を置き換える
tmpImage.addEventListener('load', function(){
    imageDom.src = this.src;
});
var replaceImage = function(imgSrc){
    // 画像のDOM要素のsrc属性を空にする
    imageDom.src = '';
    // 一時的なImageオブジェクトに画像のURLを指定
    tmpImage.src = imgSrc + '?' + time;
    time = Date.now();
}

var time = Date.now();

var imageDom = document.getElementById('replace');

var tmpImage = new Image(); // 一時的に使用するImageオブジェクト

// 画像が読み込めたら、画像のDOMのsrc属性を置き換える

tmpImage.addEventListener('load', function(){

imageDom.src = this.src;

});

var replaceImage = function(imgSrc){

// 画像のDOM要素のsrc属性を空にする

imageDom.src = '';

// 一時的なImageオブジェクトに画像のURLを指定

tmpImage.src = imgSrc + '?' + time;

time = Date.now();

}

サンプル：imgタグのsrc属性置き換え(その2)

ようは、ラジオボタンを選択したら、imgタグのsrc属性自体は空にし、JavaScriptで作成したImageオブジェクトにラジオボタンで選択した画像のURLを指定します。で、そのImageオブジェクトに、loadイベント、つまり画像が読み込めた時のイベントを指定して、読み込めたらimgタグのsrc属性を置き換えるというような感じです。

実際はもう少し、キャッシュなども考慮した処理をいれているのですが、選択した画像の種類と実際に表示している画像が異なってはいけないことがあれば、参考にしてみてください。

JavaScriptの配列の反復処理にfor..in文を使うとインデックスが文字列型になる

Posted on 2019年5月19日 11:49 by amyu

返信

Pocket

気づいたら元号が変わってました。アウトプットが大事と書かれている本を読んでインプットしながら、アウトプットしない日々を送っています。

先日、仕事で配列の探索をしようと、下記のような処理をしました(実際にはもう少し複雑です)。

var arr = ['りんご','バナナ','みかん'];
var pos = -1;
for(var i in arr){
    if(arr[i] === 'バナナ'){
        pos = i;
        break;
    }
}
if(pos === 1){
    console.log('バナナは2つ目です');
}else if(pos === -1){
    console.log('バナナはみつかりませんでした');
}

var arr = ['りんご','バナナ','みかん'];

var pos = -1;

for(var i in arr){

if(arr[i] === 'バナナ'){

pos = i;

break;

}

if(pos === 1){

console.log('バナナは2つ目です');

}else if(pos === -1){

console.log('バナナはみつかりませんでした');

}

やっていることは単純に、配列からある’バナナ’という文字列が入っているインデックスを取得し、インデックスが1だった場合に、コンソールに’バナナは2つ目です’と出力しているだけです(これぐらいならArray.prototype.indexOf() – JavaScript | MDNを使えよと思われそうですが、実際にはもう少しループの中で複雑なことをしていました)。

一見、普通に’バナナは2つ目です’と出力されるような気がしますが、何も出力されません。見つからなかったら、’バナナはみつかりませんでした’と出力されるはずですが、それすらでてきません。

おかしいなぁ。と思って試しに、「i === 1」を「i == 1」としてみると、なんと’バナナは2つ目です’と出力されました。もしかしてと思って、最後に「console.log(typeof pos)」といれると、stringと出力されました。

配列のインデックスを「arr[‘0’]」というように、数値の文字列型で取得できるのは知ってたのですが、for..inを配列で使うと、インデックスは文字列型になってしまうことは知りませんでした。まあ、確かにfor..inはあくまでオブジェクトのプロパティ名が代入される処理ですしね。

MDNを見ると、「注: for…in はインデックスの順序が重要となる配列の繰り返しには使うぺきではありません。」と書かれてました(参考：for…in – JavaScript | MDN)。普通のforループかforEachを使うのがよさそうです。

ただ、forループだといちいちlengthの指定が必要だし、forEachだと途中で抜けれなくて無駄な処理が多くなりそうなので、for…inにしました。ですが、もう少し調べてみると、Array.prototype.some()を使うと自分のやりたいことはできそうだと発覚。

var arr = ['りんご','バナナ','みかん'];
var pos = -1;
arr.some(function(val, index){
console.log(val);
    if(val === 'バナナ'){
        pos = index;
        return true;
    }
})
if(pos === 1){
    console.log('バナナは2つ目です');
}else if(pos === -1){
    console.log('バナナはみつかりませんでした');
}

var arr = ['りんご','バナナ','みかん'];

var pos = -1;

arr.some(function(val, index){

console.log(val);

if(val === 'バナナ'){

pos = index;

return true;

}

})

if(pos === 1){

console.log('バナナは2つ目です');

}else if(pos === -1){

console.log('バナナはみつかりませんでした');

}

Array.prototype.some()ってあまり使う機会ないと思って使ったことなかったんですけど、こういう使い方もあるなら結構いろいろ使いどころありそうです。

間違えてUiPathのコミュニティ版ではなくトライアル版をインストールしてしまった話

Posted on 2019年1月13日 23:04 by amyu

Pocket

2019/07/09追記：
コメントでいただきましたが、最新版ではトライアル版をいれた端末でもコミュニティ版をいれることができるそうです。なので、この記事は情報が古いです。

確か昨年の10月後半のことなのですが、職場の自分の端末に勉強用のためにUiPathのコミュニティ版をインストールしようと思ったら間違えてトライアル版をインストールしてしまい、しかもそのままトライアル版のシリアルNoでアクティベーションしてしまいました。

しばらくしてトライアル版をインストールしてしまったことに気づき、ディアクティベーションしようと思いました。が、なぜかトライアル版にディアクティベーションするために必要な「regutil.exe」というファイルが見当たらず。そのままコミュニティ版をインストールしても、すでにこの端末にはアクティベーションしているからコミュニティ版では使えませんというようなエラーがでて使えずという状態になりました。

とはいっても、体験版はインストールして60日は使えるのでまあいいかと思い、そのままトライアル版を使ってUiPathの勉強をしていました。実際にUiPathが必要になるのは、12月の客先常駐案件だったためです(ただしその後、11月に1か月間、客先の炎上案件にいってほしいと言われたので、実際使ったのは数日程度です)。

1月に自社に戻ってきたのですが、UiPath Studioを起動してみると、使用期限切れで使えず(そりゃそうだ)。特に何か問題があるわけではないのですが、12月に常駐案件でいっていたお客さんから何か問題があったらメールするかもしれないと言われ、上層部からも機会があればUiPathについて知見などを共有してほしいといわれており、できたら会社の自端末でもUiPath Studioを動くようにしておきたいとは思っていました。

というわけで、なんとかしてコミュニティ版をインストールできないかと思って調べてみると、カスタマーサポートを通じてディアクティベーションしてもらったという人がフォーラムにいました(トライアル版ライセンスをディアクティベートしたい – 日本 / フォーラム – UiPath Community Forum)。なので、カスタマーサポート | UiPath株式会社に連絡することに。内容はほとんど上記に書いたことそのまま、「体験版を間違えてインストールしちゃったのだけど、知見を共有してほしいといわれているのでコミュニティ版をインストールしたいのでそのやり方があれば教えてください」という感じです。

そしたら、UiPath用のカスタマーサービス用のURLなんてものが届きました。Zendeskというサービスを使っているようです。こんなサービスがあるんですね。日本語版もあるらしい。知らなかった。

次の日に「Community Editionのご利用に際しては、弊社ライセンスサーバー上での設定が必要となります。」とメールが届きました。そのためには、ご利用端末のデバイスID及びライセンスコードが必要になるとのことなので、Zendeskにログインしたうえで、デバイスID及びライセンスコードを書いて送信(カスタマーサポートページでデバイスIDとライセンスコードを書く必要はあったのだろうか……)。

そうすると、何やらむこうのサーバでディアクティベーションしてくれたようで、「Community Edition利用に必要な手続きが完了いたしました」とメールが届き、試しにコミュニティ版のUiPathを起動すると、エラーが出ず起動できました。

ちなみに、スタッフからのメールには、無料体験版の期間延長(30日分)も申請書を書くことでできると書いてありました(申請書の内容次第っぽいですが)。コミュニティ版の利用には、利用規約により利用できない場合があるので、その場合は無料体験版の延長を検討してほしいとのことです。利用規約の抜粋までしてもらえて、親切な対応でした(多分、こういうサポート対応はよくあるんだと思います)。

というわけで、トライアル版を間違えてインストールしてしまった場合は、カスタマーサービスに連絡する必要がありそうです。UiPathのスタッフからすると何の得にもならず、無駄に時間をつぶしてしまうだけのような気もしなくはないですが……。

UiPathのロボットファイルを配布する方法

Posted on 2019年1月6日 23:08 by amyu

返信

Pocket

UiPathには、UiPath　Studioというロボットを定義する開発環境と、ロボットを動作させるためのUiPath Robotの二種類があります。今まで説明してきたのは、UiPath Studioでの開発環境のみでしたが、今回はUiPath Studioで作成したロボットの配布とUiPath Robotでの実行方法について説明します。

まずは、UiPath Studioの「パブリッシュボタン」を押下します。

そうすると、下記のようにパブリッシュ用のダイアログが表示されるので、適当にリリースノートを入力して「パブリッシュボタン」を押します。

下記のようなダイアログが表示されます。

作成されたファイルは基本的に「C:\ProgramData\UiPath\Packages」に作成されます(正確にいうと、「%programData%\UiPath\Packages\」らしいです)。今回の例では、「hatebu.1.0.6945.40949.nupkg」というファイルが作成されていました。これが、ロボットファイルです。

今回作ったファイルを下記に置いておきます(WordPressで拡張子nupkgがおけなかったので、とりあえずzipにしています)
hatebu.1.0.6945.40949

上記のhatebu.1.0.6945.40949.nupkgをUiPath Robotで動かしたい端末の、「C:\ProgramData\UiPath\Packages」フォルダ内(つまり、ロボットファイルが作成されたのと同じフォルダ)においてください。そうしてUiPath Robotを起動すると、利用可能なプロセスに「hatebu」が追加されます。

右の更新ボタンを押すとインストールされ、ボタンが開始ボタンに変わります。

開始ボタンを押すと処理が実行され、ロボットが実行されるはずです。

なお、処理中に強制的にロボットを終了させたい場合は、UiPath Robotの「終了」ボタンを押して、修了確認ダイアログで「はい」を押すと終了します。

ちなみに、配布したnupkgファイルの中身はzipファイルなので、拡張子をzipにして解凍することができます。

この中のlib/net45のフォルダの中にもともとのUiPathで作成したファイルが入っているので、これをもとにUiPath Studioで動かすこともできます(解凍して気づいたけど、ロボットで作ったCSVファイルも含まれてしまっていたという。そりゃそうか)。

これでちょっとしたバッチファイルのように使えるかもしれませんね。

while(isプログラマ)

ころころ興味対象が変わるプログラマの技術ブログ(多分)

「プログラミング」カテゴリーアーカイブ

iOS13にしたら、同期処理のAjax後のwindow.openができなくなった

imgタグのsrc属性を書き換える時の注意点

HTML

JavaScript

JavaScript

JavaScriptの配列の反復処理にfor..in文を使うとインデックスが文字列型になる

間違えてUiPathのコミュニティ版ではなくトライアル版をインストールしてしまった話

UiPathのロボットファイルを配布する方法