BizRobo!ハック：babel/standalone と Polyfill を使ってDSをパワーアップする方法

はじめに

WebサイトをBizRobo!で自動化する方法は現在3つあり、それぞれの特徴と使い所について経験者視点から以下にまとめました。

記事の中でも書いたとおり今後の有望株はDA組込みブラウザであるChromiumだと思っていますが、今もなお圧倒的な使いやすさを誇るデフォルトブラウザは人気が高く、もう少しChromiumが成熟するまではデフォルトブラウザ使いたいなぁというのも分かります。

今回はなんとかデフォルトブラウザの寿命を伸ばす方法がないかと実験してみた結果の共有です。

結論としては、

babelで動的にコンパイル¹しPolyfillで機能を補完したらわりといけた。

感じです。

具体的な使い方、手順を動画にまとめてみました。

以降、手順の整理をしていきます。

前提と注意

• 検証は BizRobo! 10.7.0.4 で実施しました。
• 動画中のロボットやHTMLのページは GitHub からダウンロードできます。
• 実際にbabelを試すときには <script type="text/babel"> への変換漏れがないように各自で調整してください。

Babelって何？

まずはBabelについて。今回DSをパワーアップ（そのままでは処理できないサイトを処理できるようにする）させるために使用する "技" がBabelなのですが、Web開発に詳しい一部の人を除き「それって何？」という感じだと思います。

名前からするにバベルの塔を連想します。同じJavaScript同士なのに意思疎通が取れないなんて。。。という悲哀が感じられますね。

公式サイトによると

Babel is a JavaScript compiler

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

• Transform syntax
• Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
• Source code transformations (codemods)
• And more! (check out these videos for inspiration)

と冒頭に記載されており、つまりは「Babelは古いブラウザ環境でECMAScript2015²以降のコードを下位互換性のあるバージョンのJavaScriptに変換するコンパイラ」ということです。
難しい専門用語を素人でもわかるように噛み砕いて言い直してくれる。的な感じでしょうか。。

つまり古いブラウザ環境であるBizRobo!のデフォルトエンジンは、Babelを使うことによりECMAScript2015以降のコードが含まれたWebサイトでも操作できるようになる。という代物です。

オープンソースで開発されておりとても便利なので、皆さん寄付しましょう！

どうやって使う？

通常Babelを使うのはソフトウェアの出荷・リリース前で、Babelでコードをコンパイルして本番環境にリリースしたりするのですが、今回は既にリリース後のコードに対してコンパイルをする必要があるので、ページを読み込んだタイミングでBabelを実行するために @babel/standalone³というモジュールを使います。

DSの中で利用するためには、

1. 読み込みページのHTML解析が開始される前に
2. Babelで変換する箇所を指定するとともに、
3. babel/standalone のコードを組み込む 　

必要があります

読み込みページの内容を書き換える。

BizRobo!は自分自身の中にブラウザエンジンを持っているので、読み込んだページを解析してWebページを描画するまでの間に特定の処理を組み込む事ができます。⁴

以下の通り、ロボットの設定メニューからデフォルトオプションを開き、ページロード中タブ内のページの変更オプションを設定します。

ページの変更では「すべてのページで同じ」か「URLに依存」のどちらかをターゲットにすることができますが、実際に運用するロボットに設定をする場合には「URLに依存」を選択して影響範囲を絞ることをおすすめします。

Babelで変換する箇所を指定する

Babelで変換したいコードを含む <script> タグを特定して <script type="text/babel"> に書き換えます。これにより後で組み込む babel/standalone のコードが指定タグ内のJavaScriptコードをコンパイルします。

パターン

<script(.*?)>

エクスプレッションを置き換え

contains($1, "text/javascript") ? 
    replaceText($0,$1,replaceText($1,"text/javascript","text/babel")) : 
    ( length($1) > 1 ?
        replaceText($0,$1,$1 + >> type="text/babel"<<) :
        replaceText($0,">",>> type="text/babel"><<) )

上のコードはscriptタグに type="text/javascript が設定されている場合と type 自体が設定されていない場合にのみ type="text/babel を設定するための設定です。

場合によってはscriptタグにそれ以外の type が設定されているかもしれませんが、そういったサイトを扱う際には上のコードを修正する必要があるかもしれません。

babel/standalone コードの組込み

上のステップでコンパイルする箇所のマーキングが終わっているので、あとはBabelを読み込むためのタグを以下のように組み込む必要があります。

このテキストを検索

</title>

このテキストに置き換え

</title>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

このサンプルでは公式サイトの案内に沿ってUNPKGで提供されているインターネット上のコードを使っていますが、その他のCDNで提供されているモジュール⁵を使ってもいいと思います。

もしくは「実行するたびにインターネットに接続したくない」という場合には NPM からモジュールをダンロードし、ローカルファイルとして読み込ませるのもありかもしれません。

npmで取得

npm install --save @babel/standalone

何にせよ、デフォルトブラウザでBabelを使う手順としては以上です。

Polyfillって何？

MDN Web Docs によると「この単語の創案者である Remy Sharp による記事（上記）」では以下のように定義しています。

A shim that mimics a future API providing fallback functionality to older browsers.

つまりはECMAScript2015以降の機能をサポートしていない古いブラウザーで、その機能を使えるようにするための拡張機能のようなものです。実はBabelにも @babel/polyfill としてポリフィルの機能が用意されていたりします。

ただBizRobo! 10.4 以降はデフォルトブラウザにも同様にポリフィルの機能が搭載されているので、そちらを使っていきます。（メーカーのサポートも受けられるので）

どうやって使う？

Babel同様 ロボットの設定 メニューから デフォルトオプション を開き、JavaScript実行タブを選択します。

画面下部の JavaScriptポリフィル に対して「＋」ボタンで追加する機能が選べますが、何を追加すべきかの判断は ECMAScript2015 自体の知識がないと戸惑いますね。。。

ちなみに、こちらのサイトは参考になりました。

また、Browser Tracer 機能でエラーを分析することでどの機能が不足しているか解析することができるよう⁶なのですが、面倒な場合は「すべて」を選んでしまうのもありかもしれません。（よく理解しないまま実装してしまうのは問題が発生したときに詰むので、お勧めはしません。）

上の図は組み込まれている Polyfill のオブジェクト/APIを示していますが、一番上に カスタム というアイテムがあって、これを選ぶと以下のような画面が出てきます。

これはユーザーが自身でオブジェクト/APIをコードを貼り付けて実装することができるインターフェイスのようです。⁷　

その際の組み込まれていないポリフィル探索に、先にも引用した MDN Web Docs というサイトは役に立ちます。

まとめ

BabelもPolyfillもあくまで処置であり解決策ではないので、やっぱりDA組込みブラウザを使って実装するというのが安全な気もします。

とはいえ、社内のWebシステムのように頻繁には変更されないシステムなら、ロボットに任せる固定のワークフローの範囲でBabel、Polyfillが問題なく動作することが確認できれば十分実用には耐えられると思います。

一方で、SaaSのロボット化やB2Cサイトの操作などWebフロントがわりと変化しやすく、しかもそのタイミングが読めないものについては、ある日突然のサイト変更でBabel、Polyfillどちらでも対応できない状況に陥った場合、ロボット自体を作り直さなければならないことにもなり得るので、注意が必要ですね。

って、この問題は影響の多少はあれどRPA全般の課題ですね。。
何でもかんでもロボット化はダメです。

使用上の注意（追記：06/03）

ちなみに本件のようなページの書き換えは、Webのコンテンツセキュリティーポリシー（CSP）にてWebサービス側から禁止されていることが多いです。
というのも、第三者がスクリプトを注入してWebの挙動を変えてしまうことは、普通に考えればセキュリティ上問題ありますよね。
意図せず外部サイトをクラッキングしてしまわないように、あくまで自社のローカルシステムなど、自分/自社で管理できる範囲で行いましょう。

とはいえ、Salesforceなど一般的なビジネス向けSaaSでは予めセキュリティ対策としてCSP⁸によりbabelの差し込みはブロックされてしまいますが。

参考になるサイト

• https://tech.techtouch.jp/entry/build-and-understand-babel-plugin

1. babelはバイトコードやアセンブルなどのより低レベルなコードを生成しているわけではなく、単にJavaScriptを同じレベルの（古い仕様の）JavaScriptに変換しているだけなので、トランスパイラだと思っていますが、の公式ページには「コンパイル」と書いてあるので、コンパイルという言葉を使っています。 ↩

2. ECMAScript2015 と ES6 は同義です。 ↩

3. https://babeljs.io/docs/en/babel-standalone ↩

4. 今回のようなケース以外ではほぼ使い道はないですが。。 ↩

5. https://www.cdnpkg.com/babel-standalone　など ↩

6. マニュアル内 に「エラーの場合、JavaScript コンソールには、存在しない JavaScript オブジェクトが表示されます。この情報に従って、必要なポリフィルが見つかり、適用してエラーを解決できます。」の記述あり。 ↩

7. マニュアル内 に「特定の JavaScript オブジェクトまたは API をサポートするカスタム コードを含めることもできます。カスタムの実装を含めるには、[追加] (+) をクリックし、リストから [カスタム] を選択します。[カスタム] ダイアログ ボックスには、[名前] と [コード] の 2 つのペインが含まれています。[名前] ペインでコード実装の名前を指定し、[コード] ペインに JavaScript コードを貼り付けます。」の記述あり。 ↩

8. https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.security_csp ↩