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

Facebook にシェア
Pocket

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

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

HTML

JavaScript

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

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

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

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

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

JavaScript

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

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

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

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

Facebook にシェア
Pocket

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

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

やっていることは単純に、配列からある’バナナ’という文字列が入っているインデックスを取得し、インデックスが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()を使うと自分のやりたいことはできそうだと発覚。

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

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

Facebook にシェア
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のロボットファイルを配布する方法

Facebook にシェア
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ファイルも含まれてしまっていたという。そりゃそうか)。

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

UiPathのカスタム入力アクティビティでデータの入出力

Facebook にシェア
Pocket

前回のUiPathの入力ダイアログで初期値をいれたり複数選択するようにする方法 | while(isプログラマ)の続き(余談ですが、WordPress5.0.1にアップデートしたらエディタがかなり変更になったので、Classic Editorというプラグインをインストールして元の形式に戻しました)。

前回、入力ダイアログアクティビティについて説明しましたが、このアクティビティは簡単には使えるものの、制約も多く、汎用的に使いたいと思ってもできないことがあります。

そこで使ってほしいのが、『カスタム入力アクティビティ』。どういうものかというと、HTML形式のフォームを作って、それを入力ダイアログ代わりに使うというものです(参考:2018.3リリース新機能のご案内 – 日本 / お知らせ – UiPath Community ForumUiPath Developer Community 第7回ワークショップ 覚え書き「カスタム入力アクティビティ」 – Qiita)。v2018.3と結構最近に実装された機能のため、ググってもこのアクティビティについて書かれてあるサイトがあまりないため、この機能を知ったときは結構衝撃的でした。

とりあえず、今回は前回までに入力ダイアログで実装した部分をすべてこのHTMLに置き換えていきたいと思います。まずはフォームとなるHTMLを作成していきます。下記のようなHTMLをロボットファイルのプロジェクトフォルダに「form」というフォルダを作成し、その中に「form.html」という名前で作成することにします。

ここで一つ気を付けたほしいのが、5行目にあるように「」という記述をいれること(公式のサンプルでは「」ですが)。このカスタム入力アクティビティのレンダリングはIEを利用しているのですが、この記述がないとどうやらIE7モードで動いてしまうようです。

そして、このソースの一番の肝は56行目の「window.external.setResult(url.value + ‘,’ + sortVal + ‘,’ + (pageNum.value – 0));」の部分。このsetResultという関数を使うことで、UiPath側に文字列として値を渡すことができます。公式ではJSONで記述しているみたいなんですが、今回は簡単にCSVで記述して返すことにします。

また、今回のHTMLでは並び順のデフォルトに「すべて」を指定し、取得数は数値入力としてデフォルトを100としました。こういうことは入力ダイアログではできないことですね。

つづいて、UiPath側は前回ダイアログを使っていた箇所をすべて削除し、カスタム入力に置き換えます。今回の場合だと、URLに”form/form.html”、結果にretValという文字列変数を指定します。このretValはCSV形式なので、retValArrというString型の配列にSplit関数を使って渡し、前回urlやsortPropやpageNumとしていたところをretValArrの値に置き換えます。

実行すると下記のような画面が表示されます。

無駄にサイズが大きいですね。JavaScriptのresizeToメソッドでサイズを変更できるかと思いきや、できませんでした。ググってみるとフォーラムでどうやったらサイズを変更できるのか質問している人がいて、運営っぽい人が「バグっぽいので調べて対応します」と書いてあると思われるページを見つけました(New Custom Input activity – RPA Dev Advanced / Bug Reports – UiPath Community Forum)。早く、指定のサイズで開くようにできるようになってほしいです。

話は戻って、先ほどのOKボタンを押すと、うまく動きます。ただし、右上の×ボタンで閉じるとretValには空文字””が入るため、途中でエラーとなって落ちます。どうしようかなと思ったのですが、自分が関わった業務では、retValが空文字の場合、下記のように繰り返し(後判定)アクティビティを使って、retValが空文字の場合は再度開くようにしました(もちろん、場合によっては×ボタンを押せば即プログラムを終了するようにしたり、何もしないでエラーを発生させるというほうがいいこともあると思います)。

つづいて、カスタム入力に値を渡してみたいと思います。ウェブページなので、GETパラメータにしたらいいかな? と思ったのですが、URIに「?」が含まれているとエラーが発生しました。

仕方がないので、ハッシュ(アンカー)を利用することに。URIの後に#を書いて、その後にCSV形式で値をセットします。

HTMLファイルは下記のように変更。

フォームのデフォルト指定をなくし、JavaScriptのロード時のイベントでハッシュを取得してそれぞれをデフォルト値としてセットしています。

動かすと確かに、渡した値がセットされました。

値を渡す方法としては微妙かもしれないですが、多分一番簡単な値の渡し方だと思います。渡すデータ量が多くなるようだと、一時ファイルを作ってそこから呼び出すようにしたほうがいいかもしれないです。

これができるなら、UiPathで(HTMLを使った)GUIアプリケーションなんてものも作れそうですね。