たぶんできました。
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を使いこなせていないだけのようでもありますが・・(;´∀`)
次にやること メモ
アンケートを取ったら,次にやることはグラフ表示。
そこまでできたら本当に授業に生かせる気がする。
単純に記録やアンケートを取るだけならもう対応可能なとこまできたわけですが,グラフはまた別の話ですね。
HTML+JavaScriptという範囲でなら選択肢は非常に多そうでした。
できるだけプラグイン等を少なくしたい,という中で考えた場合で
この二つがとても気に入りました。すごくいい。
でも,HTAで動くか,と試してみたところ,うまくいきません。。むうぅ。
出力にブラウザを使うのはかまわないため,JScriptでローカルデータを吸い上げてブラウザに渡せばいいから
使えないといえません。
でも,できるならHTAの画面だけで勝負はできないか,いろいろと試しています。
そのまま使えるものはあんまりないぽいんですが,
meta文に
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
とすれば動くものがいくつかありました。
ちょこっとずつ変えたらけっこう動いてくれるっぼい。
これにいろいろ書き出しながら確認,編集をすると次々と動き出しました。ヽ(*´∇`)ノ
やる気がまたデテキタ(゚▽゚*)
簡単にあきらめるものではないね。 きっちり形になったら,また記事にしたいと思います。
Windows7の環境が自宅にはないんですが,電子黒板がWindows7なのが,とても脅威 (((ノ)゜Д゜(ヽ))))
追記
plot.ly
plotly.jsがものすごくいい。職場で使えるか確認した後本格的に扱ってみようと思います。
これがもし使えるなら・・スゴソウダ。
アンケート とりあえずできた
今日一日でかなり進んだ。
久々に一日の大半を使ってやってた気がします。
Excelのブックを貼れないのが残念ですが,まぁやってみます。
Excelには二つのシートを作ります。 アンケートシート と コード と名前をつけます。
アンケートシート はこんな感じ
セル b1の値がタイトルに
セル a4から 設問
セル b4から 種別 入力規則で select check radio text multi に制限しています。
セル c4からが選択肢です 連番は 1-41 のように書く,選択肢の場合は,(半角カンマ)区切りで
do loopでa列に空白がでるまで見ているので,けっこうアバウトです。
コード にはつぎのを貼ります。
<!doctype html> <html> <head> <meta charset="utf-8"> 【タイトル】 <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> var ForReading = 1; var ForWriting = 8; var p=[ 【パラメータ配列】 ] 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.txt"; 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(); document.forms[0].reset() } 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) } </script> </head> <body onload="init()"> <form id="formFld"> <div id="table"></div> <input type="button" href="#" value="送信する" onClick="PostData()"/> </form> </body> </html> [END]
wordに一度貼ってからexcelに貼るといいかも。 最後の[END]は大事です。
これがないと永久ループに・・ DoEventsは入れてるので止めてあげればいいですが。
HTAを吐き出すコードが次
Sub MakeHTAFile() Dim CodeSheet As Worksheet: Set CodeSheet = ThisWorkbook.Worksheets("コード") Dim ConfigSheet As Worksheet: Set ConfigSheet = ThisWorkbook.Worksheets("アンケートシート") Dim ADODBStream As Object Set ADODBStream = CreateObject("ADODB.Stream") With ADODBStream .Charset = "UTF-8" .Open End With Dim i, j, k, tmp, tmp2, tmp3 i = 1 Do Select Case CodeSheet.Cells(i, 1) Case Is = "【タイトル】" ADODBStream.writetext "<title>" & ConfigSheet.Cells(1, 2) & "</title>", 1 Case Is = "【パラメータ配列】" j = 1 Do While ConfigSheet.Cells(j + 3, 1) <> "" tmp = ConfigSheet.Cells(j + 3, 3) If InStr(tmp, ",") > 0 Then tmp2 = "['" & Replace(tmp, ",", "','") & "']" If InStr(tmp, "-") > 0 Then tmp2 = "renban(" & Split(tmp, "-")(0) & "," & Split(tmp, "-")(1) & ")" '数式に,が出るから上のコードとの順番注意 If tmp = "" Then tmp2 = "''" tmp3 = " [" & j & ",'" & ConfigSheet.Cells(j + 3, 1) & "','" & ConfigSheet.Cells(j + 3, 2) & "'," & tmp2 & "]," If ConfigSheet.Cells(j + 3 + 1, 1) = "" Then tmp3 = Left(tmp3, Len(tmp3) - 1) ADODBStream.writetext tmp3, 1 j = j + 1 Loop Case Else ADODBStream.writetext CodeSheet.Cells(i, 1), 1 End Select i = i + 1 DoEvents Loop Until CodeSheet.Cells(i, 1) = "[END]" Dim FileName As String FileName = ThisWorkbook.Path & "\" & ConfigSheet.Cells(1, 2) & ".hta" ADODBStream.savetofile FileName, 2 ADODBStream.Close End Sub
こんな感じの画面です。
テキストには
こういう感じでテキストがたまっていきます。
JScript側でかなり処理をしているので 以前のものよりだいぶすっきりです。
わたしの環境では一応動きました。(゚▽゚*)
アンケートづくり テキスト出力部分も統合
さて,やっとJScript,HTML部分の最後です。たぶん。
けっこう確認はしたんですが・・・どうでしょう。(;´∀`)
Excelとの連携はまだです。
メモ帳などにUTF-8の文字コードで出力し,拡張子HTAで保存すればたぶん動きます。たぶん(;´∀`)
dataフォルダを直下につくり,その中に出力データをtextで出力するはずです。
<!doctype html> <html> <head> <meta charset="utf-8"> <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> var ForReading = 1; var ForWriting = 8; var p=[ [1,"クラス","select",["1A","1B","1C"]], [2,"番号","select",renban(1,41)], [3,"食べ物をひとつえらべ","radio",["りんご","みかん","バナナ"]], [5,"てすとですよ","text"] ] 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.txt"; 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] tablepart=document.getElementById("table") 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(); document.forms[0].reset() } 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) } </script> </head> <body onload="init()"> <form id="formFld"> <div id="table"></div> <input type="button" href="#" value="送信する" onClick="PostData()"/> </form> </body> </html>
だいぶまたいじってます。
var p=[ [1,"クラス","select",["1A","1B","1C"]], [2,"番号","select",renban(1,41)], [3,"食べ物をひとつえらべ","radio",["りんご","みかん","バナナ"]], [5,"てすとですよ","text"] ]
質問のパラメータを二次配列?に固めました。連番も専用の関数を用意。40人とか相手のときはこのほうがいいかな,と。
この部分とタイトルさえExcelから出力すればいいように作った・・はず。
どうかなー
アンケートフォームづくり なんとか。
いろいろと試行錯誤をして,たぶんですが
<table id="~"></table>
に対してinnerHTMLを使うのをHTAでは拒否られていたようでした。
HTMLではそんなこと気にせずやってくれてたので,残念ですが,HTA+JScriptとHTML+JavaScriptで仕様が違うのはわかってること。
ローカルファイルにアクセスしたい私はHTA+JScriptで推し進めるしかないこと。
いろいろな表現方法があるわけで,なんとか乗り越えられることが多々であることから,がんばるしかありません。
とりあえず,拡張子をhtaにしても怒られずに動くものになったのでコードをのせます。
この場合コードって表現でいいのか,ソースって言うべきなのか,そのへん知りませんが気にせずわたしはコードと言い張っておこう。VBA扱うときいいかえるのがめんどい。。
<!doctype html> <html> <head> <meta charset="utf-8"> <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> function init(){ var tmp=[] var arr=[];for(var i=1;i<41;i++){arr.push(i)} tmp.push("<table>") tmp.push(makeElement(1,"番号","food","select",arr)) tmp.push(makeElement(2,"食べ物をひとつえらべ","food","radio",["りんご","みかん","バナナ"])) tmp.push(makeElement(3,"好きなペットをえらべ(複数可)","pet","check",["犬","猫","ハムスター"])) tmp.push(makeElement(4,"てすとですよ","textar","text")) tmp.push(makeElement(5,"てすとですとも","text","multi")) tmp.push("</table>") document.getElementById("table").innerHTML=tmp.join("") } function makeElement(No,mondai,name,type,arr){ tablepart=document.getElementById("table") 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'>" + mondai + "</td></tr>") html.push("<tr><td class='clskaito' id='" + name + "'>") html.push(tmp+"</td>") return html.join("") } function makeSelectElement(name,type,arr){ switch(type){ case "select": var tmp=[] tmp.push("<select id='" + 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 } </script> </head> <body onload="init()"> <form id="formFld"> <div id="table"></div> <input type="button" href="#" value="送信する" onClick="PostData()"/> </form> </body> </html>
余裕がなかったのでペットにバナナがあったりしたのも編集(;´∀`)
こんな画面になるかと思います。
tmp.push(mekeElement(~))
の繰り返しで要素を増やせるように作ったので,Excel側でVBAで制御しやすくなったはず。
あとはきちんと統合していこう。
苦労はしているけどたぶん順調。。
ちょっと小説に逃げよう。
HTA innertHTMLまわりでうまくいかない
あいかわらずアンケートのほうで遊んでいます。
いったんは作れたんですが,JavaScriptの情報をあさってると,便利そうなところにどんどん出会うので,それに従って書き直しているところ。
とりあえずhtmlを作る部分 ブラウザでは動くHTMLをのせます。
<!doctype html> <html> <head> <meta charset="utf-8"> <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> function init(){ makeElement(1,"たべものをえらべ","food","select",Array.from(new Array(41)).map((v,i)=> i + 1)) makeElement(2,"ペットをえらべ","pet","radio",["犬","猫","バナナ"]) makeElement(3,"ペットをえらべ","pet2","check",["犬","猫","バナナ"]) makeElement(4,"てすとですよ","textar","text") makeElement(5,"てすとですとも","text","multi") } function makeElement(No,mondai,name,type,arr){ 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(document.getElementById("table0").innerHTML) html.push("<tr><td class='clsmondai'>" + mondai + "</td></tr>") html.push("<tr><td class='clskaito' id='" + name + "'></td>") document.getElementById("table0").innerHTML=html.join("") if (type=="select") { document.getElementById(name).appendChild(tmp) } else { document.getElementById(name).innerHTML=tmp } } function makeSelectElement(name,type,arr){ switch(type){ case "select": var element = document.createElement("select") for(var i=0;i<arr.length;i++){ var option=document.createElement("option") option.value=arr[i] option.innerText=arr[i] element.appendChild(option) } 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 } </script> </head> <body onload="init()"> <form id="formFld"> <table id="table0"> </table> <input type="button" href="#" value="送信する" onClick="PostData()"/> </form> </body> </html>
画面はこんな感じになる
アンケート部分を作るところをかなりシンプルにできたつもりです。やってておもしろかった。
ただ,これをHTAにすると,innerHTMLを扱う周辺でエラーが出てうまく動かない。
未知の実行時エラーとでる。ほんと意味がワカラナイ 未知って
でもがんばる
いろいろ試しているうちに,うまくいった段階を破壊することがあるので,とりあえず記録を残しにきました(;´∀`)
アンケート けっこうできてきた。
一度はまりだすと,小説より面白いですね。ひたすらアンケートのやつやってました。
Excelのブックをアップする手段がないので,物自身は上げれませんが,
概要とコードを上げてみます。
図のように,エクセルのシートに設問のデータを入れると,htaを作り出すという仕組みです。原因不明の上部の空白がいまのとこまだ解決できていませんが,使えそうなレベルになってきています。
Excelのコードを載せます。
・ポイントがあるとするならば,ADODB.Streamを使うことでUTF-8で書き出している点
・cssやJavaScript部分は共通なのでそのあたりをヘッダやフッタとしてExcelシートにのせておいて,それをどんどん張り付けてる点
・それらの一部を変更したい場合はreplaceで対応しています。
あんまり特別なことはしていないですね。けっこう簡単にやりたいことができました。。
はてなブログ,簡単なファイルアップロード機能あったら,さらに便利なのになぁ( ´Д`)=3
Sub MakeText() Dim FileName As String FileName = ThisWorkbook.Path & "\" & "test.hta" Dim ADODBStream As Object Set ADODBStream = CreateObject("ADODB.Stream") With ADODBStream .Charset = "UTF-8" .Open End With Dim HeaderSheet As Worksheet: Set HeaderSheet = ThisWorkbook.Worksheets("ヘッダ") Dim FooterSheet As Worksheet: Set FooterSheet = ThisWorkbook.Worksheets("フッタ") Dim ConfigSheet As Worksheet: Set ConfigSheet = ThisWorkbook.Worksheets("アンケートシート") Dim 問題名配列文字列 As String, 問題タイプ配列文字列 As String Dim i, j, tmp, tmp2 tmp = "[""No" & ConfigSheet.Cells(4, 1) & """" tmp2 = "[""" & ConfigSheet.Cells(4, 3) & """" i = 5 Do While ConfigSheet.Cells(i, 1) <> "" tmp = tmp & ",""No" & ConfigSheet.Cells(i, 1) & """" tmp2 = tmp2 & ",""" & ConfigSheet.Cells(i, 3) & """" i = i + 1 Loop 問題名配列文字列 = tmp & "]" 問題タイプ配列文字列 = tmp2 & "]" i = 1 Do tmp = HeaderSheet.Cells(i, 1) If InStr(tmp, "【タイトル】") > 0 Then tmp = Replace(tmp, "【タイトル】", ConfigSheet.Cells(1, 2)) If InStr(tmp, "【問題名配列】") > 0 Then tmp = Replace(tmp, "【問題名配列】", 問題名配列文字列) If InStr(tmp, "【問題タイプ配列】") > 0 Then tmp = Replace(tmp, "【問題タイプ配列】", 問題タイプ配列文字列) ADODBStream.writetext tmp, 1 i = i + 1 DoEvents Loop Until HeaderSheet.Cells(i, 1) = "--End--" '各要素 i = 4 Do While ConfigSheet.Cells(i, 1) <> "" ADODBStream.writetext " <tr>", 1 ADODBStream.writetext " <td class=""setsumon"">" & ConfigSheet.Cells(i, 2) & "</td>", 1 ADODBStream.writetext " </tr>", 1 ADODBStream.writetext " <tr>", 1 ADODBStream.writetext " <td class=""kaitou"">", 1 Select Case ConfigSheet.Cells(i, 3) Case Is = "radio" j = 6 Do While ConfigSheet.Cells(i, j) <> "" tmp = ConfigSheet.Cells(i, j) ADODBStream.writetext " <input type=""radio"" name=""No" & ConfigSheet.Cells(i, 1) & """ value=""" & tmp & """>" & tmp & "<br>", 1 j = j + 1 Loop Case Is = "check" j = 6 Do While ConfigSheet.Cells(i, j) <> "" tmp = ConfigSheet.Cells(i, j) ADODBStream.writetext " <input type=""checkbox"" name=""No" & ConfigSheet.Cells(i, 1) & """ value=""" & tmp & """>" & tmp & "<br>", 1 j = j + 1 Loop Case Is = "text" ADODBStream.writetext " <input type=""text"" name=""No" & ConfigSheet.Cells(i, 1) & """ size=""45"" />", 1 Case Is = "multi" ADODBStream.writetext " <textarea name=""No" & ConfigSheet.Cells(i, 1) & """ rows=""5"" cols=""46"" ></textarea>", 1 End Select ADODBStream.writetext " </td>", 1 ADODBStream.writetext " </tr>", 1 ADODBStream.writetext "", 1 i = i + 1 Loop i = 1 Do ADODBStream.writetext FooterSheet.Cells(i, 1), 1 i = i + 1 DoEvents Loop Until FooterSheet.Cells(i, 1) = "--End--" ADODBStream.savetofile FileName, 2 ADODBStream.Close End Sub
excelファイルはアップできなくても,生成したコードぐらいは上げれるので,生成したコードを上げます。中身は推察されるはず
<!doctype html> <html> <head> <meta charset="utf-8"> <title>テストアンケート</title> <style type="text/css"> table{border-collapse: collapse;} table,tr,td{border: solid 2px black;} td.bango{text-align: center;background-color: black;font-weight: bold;color: white;width:15px} td.setsumon{padding-left: 5px;font-weight: bold;background-color: black;color: white;width:400px} td.kaitou{padding-left: 20px;background-color: antiquewhite} </style> <script> function result(){ var mondaiName=["No1","No2","No3","No4"] var mondaiType=["radio","check","text","multi"] var html=[] for (var i=0;i<mondaiName.length;i++){ html.push(i+1 + "_" + getData(mondaiName[i],mondaiType[i])+"◇") } document.getElementById("answer").innerHTML=html.join("") } function getData(name,type){ switch(type){ case "radio": case "check": return getCheck(name); break; case "text": case "multi": 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) } </script> </head> <body> <form name="form1"> <table> <tr> <td class="setsumon">この中で一番好きな食べ物はどれか。</td> </tr> <tr> <td class="kaitou"> <input type="radio" name="No1" value="カレー">カレー<br> <input type="radio" name="No1" value="ラーメン">ラーメン<br> <input type="radio" name="No1" value="うどん">うどん<br> <input type="radio" name="No1" value="そば">そば<br> </td> </tr> <tr> <td class="setsumon">好きなペットは何か。(複数えらんでいい)</td> </tr> <tr> <td class="kaitou"> <input type="checkbox" name="No2" value="犬">犬<br> <input type="checkbox" name="No2" value="ネコ">ネコ<br> <input type="checkbox" name="No2" value="ハムスター">ハムスター<br> </td> </tr> <tr> <td class="setsumon">自分を動物に例えると。</td> </tr> <tr> <td class="kaitou"> <input type="text" name="No3" size="45" /> </td> </tr> <tr> <td class="setsumon">この変なアンケートについて感想をどうぞ。</td> </tr> <tr> <td class="kaitou"> <textarea name="No4" rows="5" cols="46" ></textarea> </td> </tr> </table> <input type="button" href="#" value="送信する" onClick="result()"/> </form> <p>回答</p> <div id="answer"></div> </body> </html>