ブラウザ内の社内システムの操作には専門的なJavaScriptの知識が必要

「社内システムの操作が自動化できたらなあ」と思ったことはないでしょうか。

 

この社内システムがブラウザを利用したものであれば次の2つの方法で自動化が可能かもしれません。

  • ExcelVBAのフォームのWebBrowserコントロール
  • JavaScript

とはいっても、今回はこの2つの方法で明確に答えを出したという内容のものではありません。

 

この2つの知識で考えたこと、特にJavaScriptを中心に自分の考えを整理して書いていく内容となっています。

きっかけ

今回のような「社内システムの操作をどうすれば自動化できるか」を考えるようになったきっかけは、とある社内システムを使っていた時のことです。

 

この社内システムの操作にあるデータを処理するという作業をしていたのですが、次のようなことに気づきました。

  • かなり単調で量が多い作業であること
  • ブラウザを使っていること

「社内システム」というと

  • 弥生会計・勘定奉行などの会計ソフト
  • 弥生給与・給与奉行などの給与計算ソフト
  • その他業務のための専門的なソフト

などを思い浮かべるかと思います。このようなシステムで使われている構造は「クライアントサーバシステム」とも呼ばれます。

 

システムの種類は一般的には以下の3種類あると言われています。

  • スタンドアローンシステム
  • クライアントサーバーシステム
  • Webシステム

例えばスタンドアローンはMicrosoftのExcelやWordが当てはまります。クライアントサーバーシステムは上記の例で挙げた会計ソフトなどです。今回説明するのは、ブラウザ上で使うWebシステムになります。

 

スタンドアロン型に対して、Webシステムと呼ばれるブラウザを使った業務システムとの詳しい違いについては他のサイトで詳しく書かれているので、メリットなどを知りたい方はそちらを見ていただければと思います。

 

この社内システムでデータを処理している時に「ブラウザ」を使っているという点からピンと来た時がありました。というのも以前『Excel VBAでIEを思いのままに操作できるプログラミング術  』という本を読んだことがあったからです。

 

ExcelVBAをある程度勉強している方であれば『Excel VBAでIEを思いのままに操作できるプログラミング術  』という本を読んだことがある方も多いと思います。本書の内容はタイトル通り、ExcelVBAでIEを操作するための方法が書かれています。

 

例えばWebページというのは基本的にはHTMLやCSSというもので構成されています。そのHTMLやCSSをあたかもオブジェクトのように操作できる機能としてDOMというものがあります。このDOMについて本書では次のように書かれています。

P.84

DOMとはDocument Object Model(ドキュメントオブジェクトモデル)の略称で、構造化された文書の各要素をオブジェクトとしてプログラムから扱えるようにする仕組みです。

(中略)

むしろこのDOMのおかげで、HTMLというVBAとは別の言語で記述されたWebページの画面部品をあたかもVBAの部品と同等に扱うことができるのです。また、HTMLタグの各種属性をキーに部品を操作できるなど大変便利な機能なのです。

要はWebページにあるテキストボックスやテキストリンクをExcelでシートやセルを操作するみたいに操作できる機能が「DOM」ということになります。この機能を使うとExcelVBAからIEを操作できるようになります。

 

この点から気づきにくくなってしまうかもしれませんが、このExcelVBAでIEを操作するときに使っているコードというのは、実は「JavaScript」というものになります。

 

例えば「ie.document.getElementById(”TextArea”)」といったコードはJavaScriptになります。

 

再度JavaScriptの項目で後述しますが、自分は最初、本書からこういったコードはExcelVBAのコードの一部だと思っていました。しかし、よくよく調べてみると違うのです。

 

本格的にブラウザ上のテキストボックスや文字列、ポップアップを操作したいのであれば、本格的なJavaScriptの知識が必要です。特に最近それを感じています。

 

もう一点ここで伝えたいのはExcelVBAのフォーム作成の時に使う「WebBrowser」というコントロールです。これがどういったものか、どんな時に使うのかについては以下の過去記事などを見ていただければと思います。

なぜここでWebBrowserコントロールを出すのかというと、これを使うメリットは自分の今までの経験から次の2点によって説明できます。

  1. WebBrowserコントロールを使用しないでExcelからブラウザ上の社内システムを操作しようとすると弾かれる場合がある
  2. WebBrowserコントロールを使用すると社内システムに弾かれないでHTMLという内部構造を取得できる、結果的に操作できる

上記の1点目を経験した時は驚きと落胆を感じました。最初、ブラウザで社内システムを使っているのだから『Excel VBAでIEを思いのままに操作できるプログラミング術  』に書かれている内容が使えるのではないかと内心わくわくしていたからです。

 

しかし、この社内システムの仕様なのかわかりませんが、ExcelVBAで操作しようとすると「操作が弾かれる」という状況に直面しました。

 

というのも、まず試験的に指定の画面のテーブルの文字列などを取得してイミディエイトウィンドウに表示しようとした時に「その操作は受け付けられません」みたいな文字列が表示されてしまったからです。

 

この時は「せっかくこんな良い仕組みがあるのに使えないなんて・・・」と、非常に落胆したのを覚えています。

 

けれども、この社内システムを使った処理が非常に単調で量が多かったので、「何とかしてどうにかできないものか」と試行錯誤を繰り返していくうちにExcelVBAで使う「WebBrowser」で社内システムを表示できる、さらにはHTMLの取得ができることに気付きます。

 

これで「いけるか!?」と喜んだのですが、それも束の間、例えばIEでリンクをクリックすると画面下にポップアップが表示される時があります。この時にデータを指定のフォルダにダウンロードしたいとします。

 

けれども『Excel VBAでIEを思いのままに操作できるプログラミング術  』には残念ながらそこまでの操作方法は書かれていないようなのです。

 

以上のようなことがあって、現在自分が辿りついた結論としては、

「本格的にWebページやブラウザを操作・自動化したいのであればJavaScriptの勉強は避けて通れない」

というものです。

 

当たり前と言えば当たり前なのですが、やはり結局はちゃんと勉強しないといけないということですね。

JavaScriptとは

最近は、ここまできっかけの項目で書いたような理由から『入門者のJavaScript (ブルーバックス)』を読んでいました。

 

JavaScriptというのは今までExcelVBAやAccessVBAばかり勉強してきた自分にとっては全くの未知の言語です。

 

JavaScriptについて『入門者のJavaScript (ブルーバックス)』には次のように書かれています。

P.3

JavaScriptはWebページ作成に使われるプログラミング言語のひとつです。「Java」と名前は似ていますが、別のプログラミング言語です。Javaの略称でもありません。

引用文では「JavaScriptはWebページ作成に使われるプログラミング言語のひとつ」とありますが、本書を読むまで自分はこんなことも知りませんでした。

 

具体的にJavaScriptでできることというのはどんなものがあるのでしょうか。本書には次のように書かれています。

P.3

具体例をあげると、見出しにポインターを重ねると隠れていたメニューが出てきたり、ポインターを重ねた部分の色が変わったりする仕組みです。

 

また、画像をクリックすると、ズームインするように拡大表示される仕組みや、会員登録などのWebページで、未入力欄を残したまま登録ボタンをクリックすると、「○○欄が未入力」とメッセージが出る仕組みなども、JavaScriptで作られています。

なんとなくイメージはできます。はてなブログやワードプレスなどでブログを書いたことがある人であれば、こういった機能を実装したことがある人も多いのではないでしょうか。

 

要はJavaScriptはWebページの操作ができるということですね。本書を230ページぐらいまで読んでもうひとつ気づいたのは「プログラミング言語というのは基本的には本質は同じ」なのかなと思いました。

 

本書ではJavaScriptの操作において主に次のようなコードが書かれています。

  • 変数
  • 条件分岐(If文)
  • 配列
  • 繰り返し(for文)

これらって「ExcelVBA」でも出てくるんですよね。もちろん表記は違います。例えばJavaScriptのIf文は次のような表記で書かれています。

P.175

var hoge=10;

if(hoge >=5){

  window.alert(‘りんご’);

}

意味としては変数hogeに数値の10を格納。次のIf文で、変数hogeが5以上の場合、画面上に「りんご」の文字列が書かれたウィンドウを表示する、というコードです。

 

確かにExcelVBAのIf文とは表記は異なるのですが基本的な構造は同じで、他のコードも同じような感じです。

 

もちろん全部が全部、コードの構造がExcelVBAと同じだとは思いませんがExcelVBAを勉強してきた自分にとっては非常にありがたいことです。

 

最初から0から覚えるというわけではなくて、ExcelVBAの知識を生かして勉強できそうなので、勉強の楽さという点でも「Webを利用できる」という今後の自分の新しい可能性にとっても非常に勉強しがいのある言語になりそうだと思いました。

JavaScriptから個人的に感じたこと

今回は、今までとは全く違った言語について書いたのと同時に、いろいろと感じるものがありました。やはり何事もそうですが「具体的なイメージ」ができないと勉強はしづらいということです。

 

例えば自分の場合、ExcelVBAやAccessVBAといった「VBA」というプログラミング言語を学んできました。VBAはVBを元にして作られたと言われています。

 

ですからVBAを勉強した後は次のステップアップとして「VB.netを勉強すべきなんだ」と漠然と考えていました。けれども業務上でVB.netが必要とされる状況を経験できないと、それが「どういった場面で必要なのか?」「なぜ必要なのか?」ということがイメージできません。

 

VBAのクラスモジュールやオブジェクト指向もそうです。

 

なぜそれを勉強する必要があるのか、ということが具体的に経験・イメージできないと自分の脳が拒絶反応をするというか、なかなか勉強が進みません。「なぜそれが必要なのか?」と考えてしまうんですね。この点の挫折については以下の過去記事でも触れています。

けれども、今取り組んでいる業務から幸いにも「JavaScript」の存在の認知やその必要性について理解できるようになってきました。

 

自分はExcelVBAを勉強後AccessVBAを勉強してきたので、今後は「Accessの業務を自動化できれば時給も上がるはず」とか「自分のできる範囲が広がるだろう」思っていました。

 

けれどもAccessの実務経験が浅いためか、せっかく勉強したのにそのような案件は自分の所にはなかなか来ません。

 

しかしその代わりにJavaScriptというものを見つけます。世の中には「セレンディピティ」とか偶然からモノを見つけ出す能力といった言葉がありますが、今回の件はなんとなくそんなものを感じています。

 

やはり何事も勉強は進めておくべきだなと思いました。

あわせて読みたい

こんな記事も読まれています

コメント