自己書き込み型再び HTAネタ
以前失敗した自己書き込み型の掲示板ぽいやつです。
強引に解決?したものをメモで。
前回のものはローカルで使う場合は動くけどネットワーク上で動かすとADODB.Streamが警告を受けて止まってしまうというもの。
FilesystemObjectを使う限り，UTF-8は使えないからとしばらく前にあきらめていました。
でも，ある本で，JavascriptをShift_JISで組んでいるところを発見。meta文で指定すれば普通に使えるそうです。
それなら・・と作り直してみました。ちなみにShift_JISだと環境依存文字で結構致命的なことになるので，推奨されないUTF-16でやってみることにしました。
<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-16"> <title>Write Me</title> <style type="text/css"> *{font-family:"メイリオ",sans-serif;font-size:calc(18px+1vw);} #log{font-size: 5vmin;background-color: lightcyan} #input{width:80vw;font-size: 5vmin;background-color:cornsilk} </style> </head> <body> <div id="targetDiv"></div> <div id="log"></div> <script> var targetDiv=document.getElementById("targetDiv") var DataCount,ForReading = 1,ForWriting=2,ForAppending = 8 var User= new ActiveXObject("WScript.Network").UserName; var fso = new ActiveXObject("Scripting.FileSystemObject"); var fileName=location.pathname.split("\\").pop() targetDiv.innerHTML="<form name='form'>"+ "<input type='text' id='input' name='text' onFocus='func()'>"+ "<input type='text' name='dummy' style='display:none'>"+ "<input type='button' href='#' value='送信' onclick='writeMe()' style='font-size:5vmin'></form>" const timerID=setTimeout(func2,1000) var inputbox=document.getElementById("input") inputbox.addEventListener('keydown',onkeydown) //end of root function func(){clearTimeout(timerID)} function func2(){location.reload()} function onkeydown(e){ if (e.keyCode=='13'){writeMe()} } function writeMe(){ var res=document.form.text.value var ForReading = 1,ForWriting = 8,ForAppending = 2 var data = fso.OpenTextFile(fileName, ForReading, false,-1) var srcdata = data.ReadAll() data.Close() var srcArr=srcdata.split("\r\n") var lineCount=srcArr.length for (var i=lineCount-1;i!=-1;i--) { if (srcArr[i].indexOf("★☆★□■データ書き込みこの下■□★☆★")>0){ var データ開始行=i break } } srcArr.splice(i+1,0,User+","+res) var data2 = fso.OpenTextFile(fileName, ForAppending, true,-1) data2.Write(srcArr.join("\r\n")) data2.Close() location.reload() } </script> <p id='data' hidden flg='★☆★□■データ書き込みこの下■□★☆★'> </p> <script> var logdiv=document.getElementById("log") var logdata=document.getElementById("data").innerHTML logdata=logdata.split("\n") var htm="" for (var i=0;i<logdata.length;i++){ if (logdata[i].split(",")[1]!=undefined) htm=htm+logdata[i].split(",")[1]+"<br>" } if(logdata=="") {logdiv.innerHTML=""}else{logdiv.innerHTML=htm} </script> </body> </html>
けっこう短いですが，これで全部。メモ帳などに貼り，拡張子HTAでUnicodeで保存します。
文字コードを間違ってなければたぶん動きます。データは
<p id='data' hidden flg='★☆★□■データ書き込みこの下■□★☆★'> </p>
この間にどんどん入っていくはずです。
単独ファイルで動く掲示板というものを実現できた気がします。
サーバー内の散逸するファイルへのリンク集とか作るのに面白いですね。
自動更新を数秒ごとにするので，複数人で開いても普通にチャットっぽくなる。
コードも短くお手軽なので，使い道は考えていませんがお気に入りのコードでした。
Javascript SVGのツールチップを表示する
さんざん悩んでいたものが解消したので，備忘録
SVGで図形の上に来た時に任意の値を表示したいというもの。
titleとかを使えば似たようなものはできたりしますし，svgの直後に文字をつけてCSSでなんとかする手もありました。でも制約がけっこうあり，不満でした。
やっと満足ができるものになったので載せます。
SVGの図形部分もJavaScriptで書けるわけですが，そこは情報がかなり豊富なのでいいとして，ツールチップのとこが今回の本題です。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> #label { padding: 3px; background-color: beige; position: absolute; } </style> </head> <body> <div id="label"></div> <svg width="400" height="200"> <rect id="a" x="10" y="10" width="80" height="80" fill="yellow" onclick="Name()" onmouseover="call()" onmousemove="point()" onmouseout="hidelabel()" data-label="aa"></rect> <rect id="b" x="100" y="10" width="80" height="80" fill="pink" onclick="Name()" onmouseover="call()" onmousemove="point()" onmouseout="hidelabel()" data-label="bb"></rect> <rect id="c" x="300" y="10" width="80" height="80" fill="blue" onclick="Name()" onmouseover="call()" onmousemove="point()" onmouseout="hidelabel()" data-label="箱だよ"></rect> </svg> <script> var labeldiv = document.getElementById("label") function Name() { alert(event.target.getAttribute("id")) } function point() { X = event.x + document.body.scrollLeft Y = event.y + document.body.scrollTop labeldiv.style.left = X + 10 + "px" labeldiv.style.top = Y + "px" } function call() { labeldiv.style.display = "block" labeldiv.innerText = event.target.getAttribute("data-label") } function hidelabel() { labeldiv.style.display = "none" } </script> </body> </html>
説明です。
labelというidのdivがツールチップの本体となります。absolute指定しているので，自由に配置できます。
書式はcss部分で自由に変更可能。
図形の上にマウスカーソルが行ったとき onmouseoverに指定している関数が呼び出されます。各四角のdata-label属性を読み取ってlabelの文字列を書き換えます。
図形上を動いているときはonmousemoveに指定している関数が呼び出されます。
マウス位置を読み取ってそれでlabelのdivの座標を修正しています。定位置にするなら図形の座標を読み取ってうまく指定すればいいかな。
そして図形から離れるときはonmouseoutが呼び出されてdivを非表示にします。
とてもシンプルに書けてスムーズに動いてくれる。
これはhtaとして保存してもちゃんと動きます。htaで試す方はメモ帳にはりつけて UTF-8で保存しましょう。
グラフの各パーツの説明をこのやり方でやるようになり，満足がいくところに来ました。
javascriptすげーの日々はまだ続いています。htaにもそのまま使えるのでほんと助かる。。
HTA 自己書き込み型のスクリプト(失敗)
すっかりHTAにしか興味がないので，ここに書くのも憚られるんですが，自分用メモとしてなら名前詐欺もいいかなと思いそのまま書きます。
HTAネタです。
やったことは，自己書き込み型のスクリプト。
テキストボックスを一個もっていて，そこに打ち込んだものが自分自身に書き込まれるというもの。
条件によっては成功と言えるものができました。まずスクリプトを載せます。
※vscodeの自動整形で検索部分がずれてて動かなくなってたので訂正しました。(-_-;)
<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8"> <title>Write Me</title> <style type="text/css"> #log {} </style> </head> <body> <div id="targetDiv"></div> <div id="log"></div> <script> var targetDiv = document.getElementById("targetDiv") var DataCount, ForReading = 1, ForWriting = 2, ForAppending = 8 var User = new ActiveXObject("WScript.Network").UserName; var fso = new ActiveXObject("Scripting.FileSystemObject"); var fileName = location.pathname.slice(1) targetDiv.innerHTML = "<form name='form'>" + "<input type='text' name='text' maxlength='30' onFocus='func()'>" + "<input type='button' href='#' value='送信' onclick='writeMe()'></form>" const timerID = setTimeout(func2, 3000) //end of function func() { clearTimeout(timerID) } function func2() { location.reload() } function writeMe() { var res = document.form.text.value //定数宣言 var adTypeText = 2 var overWrite = 2 var oldData = "" var ado = new ActiveXObject("ADODB.Stream") ado.Type = adTypeText ado.Charset = "utf-8" ado.Open() ado.LoadFromFile(fileName) var ado2 = new ActiveXObject("ADODB.Stream") ado2.Type = adTypeText ado2.Charset = "utf-8" ado2.Open() var line = "" while (!ado.EOS) { line = ado.ReadText(-2) if (line == " <p id='data' hidden>") { ado2.WriteText(line, 1) ado2.WriteText(User + "," + res + "," + Date() + "<br>", 1) } else { ado2.WriteText(line, 1) } } ado.Close() ado2.SaveToFile(fileName, overWrite) ado2.Close() location.reload() } </script> <p id='data' hidden> </p> <script> var logdiv = document.getElementById("log") var logdata = document.getElementById("data").innerText logdata = logdata.split("\n") var htm = "" for (var i = 0; i < logdata.length; i++) { htm = htm + logdata[i].split(",")[1] + "<br>" } if (logdata == "") { logdiv.innerHTML = "" } else { logdiv.innerHTML = htm } </script> </body> </html>
メモ帳にでも張り付けて，UTF-8形式で保存，拡張子をHTAにすればたぶん動くものです。
テキストボックスが一つだけあり，そこに打ち込んで送信を押すと，すぐ下にログがでてきます。エンター対策はしていません。
同じパソコン上でいくつも同時起動してやってみると，面白い感じです。３秒ごとに自動更新しているので，それなりに同期されると思います。
そう，自分の環境では動くんです。
失敗の部分は，ネットワーク上のフォルダに入れたときに動かないってこと。致命的な部分です。
エラーメッセージを家では確認できないんですが，少し調べたところ，ADODB.Streamは，InternetExplorerと同じレベルのセキュリティ制限を受けるようで，書き込みを阻害されます。
なので，自分のデスクトップとかでは普通に動くけど，ネットワーク上の場所に置くと使えない。
私には意味がないものになってしまいました。(;´∀｀)
でも，自分自身を書き換えるというのはやってて面白かったので，とりあえず載せます。データは
<p id='data' hidden> </p>
の間にどんどん書き込まれていくことになっています。
救いなのは，FileSystemObjectのほうは，同様の制限を受けないこと。なので，外部テキストファイルを作っての掲示板は十分動くようでした。
FileSystemObjectがUTF-8の書き込みができるなら，わたしの望みは果たせたのですが，それはできません。なので，FileSystemObjectで同じ処理をすると，がっつり文字化けしてどうにもならない。
同じことで悩まないように，失敗例としての記事でした。
それにしてもHTAは面白く，VBAで仕事もしているんですが，そちらには最低限しか興味が行っていません。
Javascriptがすごい。CSSがすごい。 HTML5がすごい。 なので，それらを扱えるHTAはものすごい(;´∀｀)
EdgeがChromium版を出してきましたね。実際私はそれを使っているんですが，これが主流になってきたら，もし望む方向に進めばさらにHTAはすごくなる・・かも。
そんな甘いことはないだろうなぁとは思いつつ，やっていくんですが，現状だけでも十分HTAの恩恵は受けています。
HTA自身が使えなくなっても Javascript,CSS,HTMLが書ければWebアプリでも生きていけますし，無駄にはならない・・はずかな。
音声ファイルデータを後につけて実行するメモ
自分用メモ
音声データをBase64でテキスト化して，最後に付け足して使うことが可能だったこと。
<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE11=edge" charset="utf-8"> <title>テスト中</title> <script> window.onload=function(){ mus.play() new Vue({ el:"#app", data:{ myText:"今日はいい天気です。" } }) } </script> </head> <body> <div id="app"> <textarea v-model="myText"></textarea> <p>文章は，「{{ myText }}」</p> <p>文字数は{{myText.length}}文字です。</p> </div> </body> </html> <script> var mus=Audio() mus.src="data:audio/mp3;base64,//uQZAAAA31jQQZSQAI3LFhAwRQATV1VJBz0AADZgCODhjAA8CRkDJjfFWDi3g ～音声の長いテキストデータ～ " </script> <script> /*! * Vue.js v2.5.22 * (c) 2014-2019 Evan You * Released under the MIT License. */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof de ・・・ </script>
音声や画像のSVGデータ，またはJQueryやVue.jsなどのライブラリをHTML内に全部放り込めば，
他ファイル依存がなくなって，作ってかなーり経ったHTAファイルでもファイル依存から解放されるんじゃないかということを試しています。
無知だからいろんなことを試行錯誤するしかない。
音声についてはとりあえずちゃんと動いた。
これであまり長い音声を使わない前提でなら，音声ファイルをどこどこに忘れずに入れておいてとかいうことから解放される。
画像データもAdobeのソフト群にお世話になっている自分としてはSVGでだいたい事足りそう。
データ部分はできれば最後に付け足しておいて，読み返さないといけないコード部分は上に固まってほしい派です。
あと，ライブラリもあまりにも長いものでなければつけてしまえそう。こちらは個人使用の段階ではある程度好き勝手でいいと思うんですが，
他人に紹介しようとしたものができた場合微妙でもあります。
ただ，依存する外部ファイルを極力消したいと思う場合たぶん私は避けないと思う。
テキストで数百キロバイトというのはコードで見るとすごいけど，データサイズとしては小さいですしね。
上記のHTMLの中には音声データとVue.jsを入れてみるということをしました。ライブラリも音声もとても長いのでぶちっと切ってますからもちろん上のコードそのままでは動きませんが，
数十キロバイトのライブラリや画像データなら最後に内部に放り込んでおけば一つのファイルでいいものができそうな気がします。
外部ファイルとする方が使いまわし等で適正なんでしょうけど，
私を含めて，あまり深くその言語を知らない場合，しばらくして忘れてしまうと前提となるファイルとの位置関係が変わってしまったり，絶対参照しているファイルが年度を超えていくうちに
なくなってしまったりということは往々にしてあります。
なので，その方法の是非は抜きにして，一つのファイルで納めてしまいたいという強い希望がいつも頭にあるので，無駄なこととはいえできることを試した。
これでかなりストレスが減るなぁ。
本収集以上にはあまり進んではいませんが，自分がしたいことはSPAと呼ばれるやつのようで，Vue.jsととても相性が良いようです。
JQueryで作られたものもよく出会うため，JQueryの本とかも可能な限りたくさん集めました。
プレーンなJavascriptももちろんたくさん。
本にまみれてますが，なんとなく方向性ができつつあるので，来年度はけっこう楽しみ。
ただコードの中にライブラリを内包する場合，ライブラリによくあるMITライセンスというのとの上手な付き合い方はどうなるのか，調べないとなぁと思っているところです。
mp3ファイルをbase64でテキストにしてjavascriptで活用する
すっかりHTAにはまりこんで，Powerpointに戻る気配がありません(;´∀｀)
JavascriptやCSS,HTML5でできることの幅広さにおののく毎日で，日々本がたまりにたまって読める気配がない。
でも，気の向くままに，調べものするときに読むことで，少しずつ，少しずつ頭の中に概念みたいなものができつつある気がします。
読みながらやれば大概なんとかなりそうな感じです。
さて，HTAの数少ない不満は 画像や音声ファイルを別ファイルで用意しないといけない，という不満でした。
依存ファイルがあると，作って時間がたつと忘れてしまうし，もし誰かに欲しいといわれたときに提供したとして，前提条件が崩れるとうまく動かなくなるのは容易に予測できる。
jQueryやグラフのライブラリはいくらかあきらめがつきますし，私が使う棒グラフ・円グラフくらいならSVGやCanvasでどうにかすればいい話だよなぁとも思う。
Illustratorもあるので，画像データはけっこうSVGにできますし，CSSがやれることも半端ない。
画像面ではほぼ問題は見当たりません。
でも，音源ファイルがどうにかならないのかなーと調べていたら，Base64でエンコードすることで解決しそうでした。
こちらの記事のおかげです。
そこで，mp3ファイルをWindowsのcertutilコマンドでエンコードするものをexcelのvbaで組んでみました。
フォルダを指定して，その直下のmp3ファイルをエンコードします。
そして，さらにそれにちょっとhtmlを足して，htmファイルにして音を確認する感じに作ってみました。
完全に自分用(ﾉ´∀｀*)
前者がこんな感じ
Sub base64encode() Dim strPathName As String With Application.FileDialog(msoFileDialogFolderPicker) If .Show = True Then strPathName = .SelectedItems(1) End If End With If strPathName = "" Then Exit Sub Dim strFileName As String strFileName = Dir(strPathName & "\*.mp3", vbNormal) If strFileName = "" Then Exit Sub Do While strFileName <> "" DoEvents Shell "certutil -f -encode " & strPathName & "\" & strFileName & " " & strPathName & "\" & Left(strFileName, InStr(strFileName, ".mp3") - 1) & ".htm" strFileName = Dir() Loop End Sub
とても短いです(;´∀｀)でもこれでhtmファイルを吐き出します。
ただこのままではどんな音だったか確認もできないので，それにちょっと編集をするのが次のコード
Sub edittext() Dim strPathName As String With Application.FileDialog(msoFileDialogFolderPicker) If .Show = True Then strPathName = .SelectedItems(1) End If End With If strPathName = "" Then Exit Sub Dim strFileName As String strFileName = Dir(strPathName & "\*.htm", vbNormal) Dim inputText, outputText, records, lineStr, flg As Boolean Do While strFileName <> "" DoEvents Set inputText = CreateObject("ADODB.Stream") With inputText .Charset = "UTF-8" .Mode = 3 '読み書き .Type = 2 'テキスト .Open .LoadFromFile strPathName & "\" & strFileName End With Set outputText = CreateObject("ADODB.Stream") With outputText .Charset = "UTF-8" .Mode = 3 '読み書き .Type = 2 'テキスト .Open .writetext "<audio controls='controls' autoplay style='border:3px solid red;'><source src='data:audio/mp3;base64,", 1 flg = True Do Until inputText.eos DoEvents lineStr = inputText.readtext(-2) If flg = True Then flg = False Else .writetext Replace(lineStr, vbCrLf, ""), 0 '問題あったら1 End If Loop .writetext "", 1 .writetext "' type='audio/mp3' /></audio>", 0 .savetofile strPathName & "\" & strFileName, 2 .Close End With strFileName = Dir() Loop End Sub
この二つをつなげるとうまくいかなかったので，タイミングを分ける意味で分割しています。
さっきのコードで吐き出したhtmファイルにaudioタグを付け加えることで，
そのhtmを開くと音を鳴らすようにしただけです。
あと，base64で吐き出したものを一行にするように少し細工をしています。
これで一応文字列にはなりました。
今度はjavascriptでうまく使えるように調整をしていこう。
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
この一文を頭に付け加えるだけで，htaにしてもきちんと動くようです。
htaの制限ってあんまりないのかな・・と最近思います。
このブログの名前の変更を検討するべきなんだろうか・・(;´∀｀)
HTA Audioオブジェクト meta記述で使えた
昨日までの成果でHTAを作る場合にmeta記述でEdge互換にするといろいろ使えたってのを書いていました。
以前失敗したAudioオブジェクトのやつがふいに頭によぎり試してみた。
ためしてみた
まず前の失敗例
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> var pu=Audio() pu.src="end.mp3" pu.play() </script> </head> <body> </body> </html>
この画面が出て使えない。レガシーブラウザモード? (IE6くらいの時代の互換らしい)
metaだけ変えた 他はいじらず
<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8"> <title></title> <script> var pu=Audio() pu.src="end.mp3" pu.play() </script> </head> <body> </body> </html>
音なりますよ! エラーも出ません!
これは大きい。
夢が広がりますね。
Libralyへの苦手意識が減ったので，JQueryの学習も始めました。JavaScriptへの理解が進んだ後でもありますし，意味もあるかな。
たぶんできました。
Plotly.js
plot.ly
現段階でわたしが選んだのはこれです。奥が深そうであり，かつ，こだわらなければシンプルに書ける。
なんといいもの。
Libralyファイルもたった一つです。大き目ではありますが，そこは機能の魅力に負けました。
HTAのコードだけ載せます。
<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8"> <!--meta文で互換性--> <title>テストアンケート</title> <style type="text/css"> table{border-collapse: collapse;} table,tr,td{border: solid 2px black;} td.clsmondai{padding-left: 5px;font-weight: bold;background-color: black;color: white;width:400px} td.clskaito{padding-left: 20px;background-color: antiquewhite} </style> <script src="plotly-latest.min.js"></script> <script> var ForReading = 1; var ForWriting = 8; var p=[ [1,'クラス','select',['1A','1F','1L','2A','2F','2L','3A','3F','3L']], [2,'番号','select',renban(1,41)], [3,'好きな科目は','check',['国語','社会','数学','理科','英語']], [4,'この中で一番好きな食べ物はどれか。','radio',['りんご','バナナ','みかん','ごはん','おかし']], [5,'好きなペットは何か。(複数えらんでいい)','check',['犬','猫','ハムスター']], [6,'自分を動物に例えると。','text',''], [7,'この変なアンケートについて感想をどうぞ。','multi',''] ] var thisName=location.pathname thisName=thisName.slice(thisName.lastIndexOf("\\")+1,thisName.lastIndexOf(".")); var fso = new ActiveXObject("Scripting.FileSystemObject"); if (fso.FolderExists(".\\data")==false) fso.CreateFolder(".\\data"); var DataFile = ".\\data\\"+thisName+"_data.csv"; if (fso.FileExists(DataFile)==false){ var data = fso.OpenTextFile(DataFile, ForWriting,true); var tmp="user" for (var i=0;i<p.length;i++){tmp+=","+p[i][1]} tmp+=",Date" data.WriteLine(tmp); data.Close() } var User=new ActiveXObject("WScript.Network").UserName; //ベタ打ちここまで function init(){ resizeTo(500,600); makeForm() } function renban(s,e){ var arr=[] for (var i=s;i<=e;i++) arr.push(i) return arr } function makeForm(){ var tmp=[] tmp.push("<table>") for(var i=0;i<p.length;i++) tmp.push(makeElement(i)) tmp.push("</table>") document.getElementById("table").innerHTML=tmp.join("") } function makeElement(No){ var mondai=p[No][1] var name="No"+(No) var type=p[No][2] var arr=p[No][3] var html=[]; var tmp; switch(type){ case "select":tmp = makeSelectElement(name,"select",arr);break case "radio":tmp = makeSelectElement(name,"radio",arr);break case "check":tmp = makeSelectElement(name,"checkbox",arr);break case "text":tmp="<input type='text' name='" + name + "' size='45' />";break case "multi":tmp="<textarea name='" + name +"' rows='5' cols='46' ></textarea>";break } html.push("<tr><td class='clsmondai'>" + (No+1) + " " + mondai + "</td></tr>") html.push("<tr><td class='clskaito'>") html.push(tmp+"</td>") return html.join("") } function makeSelectElement(name,type,arr){ switch(type){ case "select": var tmp=[] tmp.push("<select name='" + name +"'>") for(var i=0;i<arr.length;i++){tmp.push("<option value='" + arr[i]+"'>"+arr[i]+"</option>")} tmp.push("</select>") element=tmp.join("") break case "radio": case "checkbox": //間違いじゃないよ var tmp=[] for(var i=0;i<arr.length;i++){ tmp.push("<input type='"+ type +"' name='" + name + "' value='" + arr[i] +"'>"+arr[i]+"<br>") } element=tmp.join("") break } return element } // データ収集部分 function result(){ var html=[] html.push(User+",") for (var i=0;i<p.length;i++){ html.push(getData("No"+i,p[i][2])+",") } html.push(Date()) return html.join("") } function PostData(str){ var fso = new ActiveXObject("Scripting.FileSystemObject"); var data = fso.OpenTextFile(DataFile, ForWriting); data.WriteLine(result()); data.Close(); makeGraph() } function getData(name,type){ switch(type){ case "radio": case "check": return getCheck(name); break; case "text": case "multi": case "select": return document.getElementsByName(name)[0].value.replace(/\r?\n/g,"_"); break; } } function getCheck(name){ var CHECK=document.getElementsByName(name) var tmp="" for(var i=0;i<CHECK.length;i++){ if(CHECK[i].checked) tmp+="_" +CHECK[i].value } return tmp.substring(1) } function makeGraph(){ var fso = new ActiveXObject("Scripting.FileSystemObject") var data = fso.OpenTextFile(DataFile, ForReading) var data= data.ReadAll() var rowCount=data.split("\n").length var res=[] res.push("<table>") var graphNo=0 var graphvalues=[] var graphlabels=[] var graphtype=[] for (var i=0;i<p.length;i++){ res.push("<tr><td class='clsmondai'>"+p[i][1]+"</td></tr>") switch(p[i][2]){ case "select": case "radio": case "check": var tmpArray = [] var count={} for (var j=1;j<rowCount-1;j++){ var tmp=data.split("\n")[j].split(",")[i+1] if (!tmp==""){ var tmp2=tmp.split("_") for (var k=0;k<tmp2.length;k++) { var key=tmp2[k] count[key]=(count[key])? count[key]+1 : 1; } } } for (var key in count){ tmpArray.push([key,count[key]]) } var tmp3=[] var tmp4=[] for (var k=0;k<tmpArray.length;k++){ tmp3.push(tmpArray[k][0]) tmp4.push(tmpArray[k][1]) } graphlabels[graphNo]=tmp3 graphvalues[graphNo]=tmp4 graphtype[graphNo]= (p[i][2]=='radio') ? 'pie' : 'bar' res.push("<tr><td><div id='graph"+graphNo+"'></div></td></tr>") graphNo++ break case "text": case "multi": res.push("<tr><td>") for (var j=1;j<rowCount;j++){ tmp=data.split("\n")[j].split(",")[i+1] if (!tmp=="") res.push(tmp+"<br>") } res.push("</td></tr>") break } } res.push("</table>") res.push('<input type="button" href="#" value="グラフ更新" onClick="makeGraph()"/>') document.body.innerHTML=res.join("") for (var i=0;i<graphvalues.length;i++) { drawGraph(graphvalues[i],graphlabels[i],graphtype[i],'graph'+i) } } function drawGraph(gvalues,glabels,gtype,gdiv){ if (gtype=='pie'){ var data = [{ values: gvalues, labels: glabels, type: 'pie' }]; } else { var data = [{ x: glabels, y: gvalues, type: 'bar' }]; } var layout = { height: 400, width: 388 }; Plotly.newPlot(gdiv, data, layout); } </script> </head> <body onload="init()"> <form id="formFld"> <div id="table"></div> <input type="button" href="#" value="送信する" onClick="PostData()"/> <input type="button" href="#" value="グラフ表示" onClick="makeGraph()"/> </form> </body> </html>
グラフを書いているところは
function drawGraph(gvalues,glabels,gtype,gdiv){
if (gtype=='pie'){
var data = [{
values: gvalues,
labels: glabels,
type: 'pie'
}];
} else {
var data = [{
x: glabels,
y: gvalues,
type: 'bar'
}];
}
var layout = { height: 400, width: 388 };
Plotly.newPlot(gdiv, data, layout);
}
ここだけなんです。gvalues,glabelsは配列を与えています。
驚異的なシンプルさです。
これにより作られるグラフはこんな感じ
とても満足しています。canvasでjavascriptだけで書く方法もネットで探せばありましたが，
libralyも使えるべきだと思い，使う方向で模索しました。
私も慣れないうちは手間取ったので，今はライブラリのファイルを同じフォルダに入れている，という想定のコードになっています。
職場で使うならフルパスで与えておいて，どこにhtaファイルをコピーしても使えるようにするのがよさそうですね。
ライブラリファイルは
plot.ly
ここで落とせます。
最初はグラフライブラリの殆どが動かずとても困りましたが，最終的には全部動くようになりました。
結局知らないせいで視野や選択肢が狭くなっていただけだったようです。
今までhtaで動かないなぁと思っていたことも，互換設定のmeta記述で動くのかもしれません。
いろんな意味で今回のがんばりは今後につながりそうです。この三連休ひたすらやってたので，時間は費やしたけど
集中的に取り組んで，だいぶ変わりました。
vba vbs Jscript javascript
ここら辺がわかればたぶん本職じゃないので，ずっと戦えるはず。
ほんとにそう思ってるのでしっかりやろう。
HTAのタイマー非常に使いやすくて重宝しているので，いろんなものをHTAに作り直してみたいものです。
あとは，今回JavaScriptの配列の中に配列がある場合について，うまく制御できずにかなり時間を費やしたので，
その辺をいろいろと試したい。
デバッグ環境が欲しい。VBEditor並みとまではいかなくても，なんとかしたいな・・。
Dreamweaverを使いこなせていないだけのようでもありますが・・(;´∀｀)