Zenn
🦊

Hi 👋, We're ^.,.^ BlueFoxEnterprise !

2024/02/16に公開
Chrome拡張
JavaScript
自己紹介
VS Code 拡張機能
bluefox
idea

^.,.^ < Hey!　はじめまして！絶賛酩酊中の青色きつねです。
BlueFoxEnterpriseでWebフロントの操作を自動化するOSSプロダクトを開発している　一匹です。他にもメインコミッターの天才チンパンジー、2足歩行パンダ、海には魬やなんかがいます。
ちなみにきつねは名ばかりの広報です。きつねなので本業とかはありません。野生動物だもの。

プロダクトの技術領域（？）としてはこの辺りを徘徊してます：

  • JavaScript
  • HTML, CSS
  • Edge(Chrome) Extension
  • VSCode Extension

良質な情報があまりない場所を歩き回ってるから、後から来る人たちのためにも道案内を残しておこうと思ってブログをはじめました。
あとはドキュメント整備がまるで出来ていないのでそれも書き捨てておきたい。

^.,.^ BlueFox ?

私たちが開発しているBlueFoxというOSSは、つまりSelenoumみたいなやつです。
違いとしてはBlueFoxのインターフェースは基本的にブラウザやVSCodeなどの拡張機能として実装されるという点、対応言語はJavaScriptのみで、その動作をJSONやCSVでも記述できる点（出来ない事もあるけど…）が多分大きいです。
色々あってよく分からないドライバやなんかは必要なく、インストールするものはEdge(Chrome)拡張機能として提供されるBlueFox本体と、Webサーバーとして動作するVSCode用の拡張機能（必要ならば）のふたつだけです。

最初の一歩

ある日森を歩いていたところ、Webシステム開発の現場においてテストはほぼすべて手作業で実際に操作して行われているという現実とご対面しました。もちろんシステムが古いから単体テスト用のフレームワークなんてものも入ってません。ソリューションは色々あるものの、特にSIer, SESという業務形態においては導入・運用まで考えた場合に機動力のある解決方法が無く、自動化に合わせて既存のやり方を変えるにしてもコストがかかります。
この時に求められたのは導入が容易でかつ自動化におけるリソース管理が可能なアプリケーション、つまりそれがBlueFoxです。
なので方向性はE2Eや単体テストというよりも開発生産性の向上に重きを置いてる。

Googleで「^.,.^ BlueFox」を検索する例

(async () => {
  let blueFoxScript = new BlueFoxScript();
  await blueFoxScript.init();

  await blueFoxScript.tabs.create("https://www.google.com");
  await sleep(1000);
  let tab = await blueFoxScript.tabs.get("https://www.google.com")[0];

  await tab.dispatch
    .tails()
    .target("textarea").setProperty({ value: "^.,.^ BlueFox" })
    .target("[name='btnK'][tabindex='0']").call("click", null)
    .run({ sleep: 50 });
})();

どうにもリソースの確保が難しい仕事というのは世の中にあるものです。
ソース管理の仕組みがないプロジェクトもあります。だからBlueFoxはExcelで動作を記述出来ます（厳密にはTSVですが…）
環境構築の手順書を用意する余裕のない場合のために、BlueFoxはブラウザに拡張機能をインストールするだけで済むようになっています。
開発の中で、まるで触ったことのない画面からデータを作成しなければならない機会はたくさんあります。先人たちが託したナレッジなんてありません。あなたがこの群れの先頭なのです…

そんなわけで、2023年の1月頃に開発がスタートしました。
画面にJSONをドロップするだけだった試作品から早1年、BlueFoxのインターフェース本体とそこからリポジトリを分割したJSライブラリ、エディタ付きのサーバーと、いつの間にか大所帯になりつつあります。
残念なことにマネタイズの方法は今のところさっぱり思いつきません。野生動物だもの。

このブログでは、そんなBlueFoxの開発の中で使用している小手先のテクニックや、そもそもこのプロダクトの使い方について書き留めていきます。技術的な難易度は多分中級入口くらいだと思います。
どうぞよろしく！

リポジトリ

https://github.com/xoFeulB

Social

https://github.com/xoFeulB
https://twitter.com/xoFeulB
https://bsky.app/profile/xofeulb.bluefox.tech

https://www.voidark.org

Discussion