会社ではMacを使ってますが、自宅では未だにwindowsPCを使っているため、
未だにキーボードで日本語変換を間違える鵜沢です。
そんなわけでこの度は、windowsでしか使えないvbsの話。
vbsは非常に簡単なスクリプト言語ですので、
開発者でなくても、PC初心者でも使いこなせると思います。
で、今回はブラウザ操作（IEのみですが）をスクリプトで自動で行う方法について。
ブラウザの操作はDOM(Document Object Model)というものを使用して行うことができます。
以下のソースをtest.vbsというファイルタイトルで保存し、windowsで実行してみましょう。
単純にIEブラウザでグーグルのサイトを表示するだけのソースです。
実行は作ったファイルをダブルクリックで行えます。
——————————–
Option Explicit
Dim objIE
Dim strBody
Set objIE = CreateObject(“InternetExplorer.Application”)
objIE.Width = 800
objIE.Height = 600
objIE.Left = 0
objIE.Top = 0
objIE.Visible = True
objIE.Navigate “http://www.google.co.jp/”
‘<< A >>
Set objIE = Nothing
———————————
ただ、IEブラウザを表示しただけですが、
ここではIEブラウザをオブジェクトとしてとらえています。
そのオブジェクトのパラメータにサイズや遷移先を設定しています。
このソースをすこし改造してみましょう。
‘<< A >>の部分を以下のように書き換えて再度実行してみると、
ブラウザを開く→検索条件を入力する→検索を実行する
を自動で行ってくれます。
———————————
Do Until objIE.Busy = False
WScript.sleep(100)
Loop
objIE.document.getElementsByName(“q”).item(0).value = “test”
objIE.document.getElementsByName(“btnG”).item(0).click
———————————
Do～Loopはブラウザが開ききるまでの待ちです。
残りの2行が、検索条件を入力する。と、検索ボタンををクリック。
の処理になります。
ここで、”q”とか”btnG”といった文字が出てきていますが、
これはそれぞれのinputのnameを入れます。
nameの調べ方はブラウザで右クリック→「ソースを表示」でできるはずです。
vbsとHTMLのタグを使えばブラウザ上の処理が自動化できます。
上記のソースのNavigateの行のURLや入力、ボタンクリックの箇所を変更すれば、
毎日行うデスクワークが楽になるかもしれません。
ちなみにブラウザで右クリック→「ソースを表示」
でソースが取得できない場合は、
‘<< A >>の部分を以下のようにすると画面のHTMLソースが取得できたりします。
もちろん、取得できない画面もあります。
———————————
strBody = objIE.Document.Body.InnerHtml
WScript.echo strBody
———————————
最近はブラウザ操作の自動化の便利なツールがたくさん出ていますので、
わざわざvbsを使うこともないかもしれませんが、
vbsを使えば、IEで表示している内容を、
Excelに自動で書き込んで、グラフ化する・・・なんてことまでできるはずです・・・
昨日新宿で買ってきたPCがこれ
http://www.dospara.co.jp/5goods_pc/pc_detail.php?h=d&f=d&m=pc&mc=1293&map=7
これのセール品でメモリを４GBにして、28000円
安い！
パソコンおたく出身のエンジニアとしては
なんの装飾も付いていない、（自作系のガワをまとった）PCの箱を開ける時が至福の時となるのですが。
しかし安い。10台買っても28万。
28万程度ですがたぶん、、というか確実に弊社で使ってるデータセンターのサーバを凌駕する性能を発揮するでしょう。
今はスケールアウトの時代ですからね。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
２台目
これで２台目なんですが、なんで買い込んでるっていうと
ログデータの解析用なんです。
弊社では１時間でログローテートさせ、社内までデータを引っ張ってきています。
なので、１時間分のログ解析は１時間で終わらせないといけません。
ボヤボヤしてると次のバッチの時間が来てしまいますからね。
下手するとギガ級のファイルを処理ですわ。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ログが半端ない
ソーシャルアプリの人は良くわかってるとおもいますが、
PVが半端ないっす。
PC用のWEBサイト（たいしてアクセスないやつ）のPVなんて
５秒ぐらいで抜き去ります。
どうせなら、勉強がてらMapReduceなどの分散技術でやってみるかと。
３万円PCをたくさん並べて処理するなんてGooglerみたい！
こんにちわ、市川です。
今回は、久しぶりにHTMLネタですが、HTML5の話ではありません（汗）
業務向けのシステムでは、データの表示に表をよく使います。
何故、表を使うかというと、多くの情報を一気に表示する事が可能だからだと思われます。
しかし、実際に出来上がった表を見ると、結構見づらい。。
見やすくするために、1行おきに背景の色を交互に変えて、少しは見やすくなりますが、やはり見づらいのはそれほど解消されません。
そこで、今回紹介したいのは数値データを使って、グラフを表示する方法です。
例えば、こんなデータがあったとした場合
| Android1.5 |
Android1.6 |
Android2.1 |
Android2.2 |
Other |
| 21.3 |
23.5 |
53.1 |
1.8 |
0.3 |
(参考にしたデータGaApps.jp)
これぐらいのデータであれば、見づらいという事はないですが、ぱっと見の印象でどれぐらいのシェアなのかが、あまりよく分かりません。
では、これをグラフにしたらどうでしょう？
情報が一気に分かりやすくなったと思いませんか？
けど、「画像の動的生成ってめんどくさいし、グラフと言ったら、計算もめんどくさいんじゃないの？」って思うかもしれませんが、実はこの画像はwebサービスを使って生成しています。
Google Chart API
これを使うとビックリするぐらい簡単に、いろんな形のグラフを作ることができます。
どれくらい簡単かというと、urlに必要な情報を含めてimgタグのsrcに指定するだけです。
ただ、グラフのカスタマイズを色々としようとすると、urlで指定するパラメータが多いので、自力でやるのはかなり困難です。
で、さすがgoogle。
ちゃんとウィザードを用意しています。
Chart Wizard
これを使って、作りたいグラフのフォーマットを決めたら、urlをコピーするだけ。
そのurlの一部を置き換えれば、動的にグラフを生成することが出来ます。
今回の例で作ったurlをパラメータ毎に分解すると、以下のようになります。（グラフ毎にパラメータが変わる場合があります）
・画像のサイズ
chs=500×245
・チャートの種類
cht=p3
・色
chco=3072F3
・データ
chd=t:15.3,20.3,59.7,4.5,0.2
・データのラベル
chl=Android1.5|Android1.6|Android2.1|Android2.2|Other
・マージン
chma=|0,5
・タイトル
chtt=%E3%81%BB%E3%81%AB%E3%82%83%E3%82%89%E3%82%89%E3%81%AE%E3%82%B0%E3%83%A9%E3%83%95
つまり、chdの値と、chlの値を動的に指定してあげれば、同じような形のグラフが、様々なデータで作成することが出来ます。
サンプルとして作成したページはこれです。
サンプル
何をしているかというと、ボタンを押すと表示されているデータから、urlを編集してグラフを作っています。
編集部分のソース
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script type="text/javascript">
$(function() {
$("#btn_graph").click(function(){
var lbl = '',dt = '',img_url = '';
$("#data-head th").each(function () {
lbl = lbl + $(this).text() + "|";
});
lbl = lbl.substr(0,lbl.length-1);
$("#data-row1 td").each(function () {
dt = dt + $(this).text() + ",";
});
dt = dt.substr(0,dt.length-1);
img_url = 'http://chart.apis.google.com/chart?chs=500x245&cht=p3&chco=3072F3&chd=t:' +
dt + '&chl=' + lbl +
'&chma=|0,5&chtt=Android+OS%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E5%88%86%E5%B8%83';
$("#img-tag").remove();
$("<img id='img-tag' src='" + img_url + "' ></div>").appendTo("#graph-img");
});
});
</script> |
5行目で、thからデータのラベルのなる情報を取得しています
9行目で、tdからデータを取得しています
13行目でurlを作成して、17行目でimgタグに埋め込んで、htmlに突っ込みます。
サーバであえて処理をすることなく、ブラウザ上だけで必要な情報を集めて、グラフの生成が可能です。
こうすれば、サーバの負荷も気にする必要はありません。
これで、より分かりやすいユーザーインターフェイスを提供する方法が増えますね。
