アンケートフォームづくり なんとか。
いろいろと試行錯誤をして，たぶんですが
<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>
アンケート部分の例を作ってみました。
どういうコードを吐き出させればいいのかを確かめるため，とりあえずアンケートフォームを作ってみました。
画面はこんな感じ
送信ボタンを押すと，
<div id="answer"></div>
にアンケートの結果をとりあえず出すように作りました。
最終的にはこれを望む場所に放り込むよう作ればいい。
フォーム内部もできるだけシンプルになるように作ってみた。できるだけタグをそぎ落として，必要最小限にし，構造ができるだけ似通うようにして，
マクロでコードを吐く部分が楽になるようにしてみた。
コードを載せます。JavaScriptもすこーしは慣れてきたかな。。
今回のものはhtmlのままでもちゃんといけますし，htaにしても動きます。
<!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=["toi1","toi2","toi3","toi4"] 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">1 授業は全体的にわかりやすいですか。</td> </tr> <tr> <td class="kaitou"> <input type="radio" name="toi1" value="1">とても分かりやすかった<br> <input type="radio" name="toi1" value="2">分かりやすかった<br> <input type="radio" name="toi1" value="2">あまり分からない<br> </td> </tr> <tr> <td class="setsumon">2 好きな科目をいくつか選びなさい</td> </tr> <tr> <td class="kaitou"> <input type="checkbox" name="toi2" value="国">国語<br> <input type="checkbox" name="toi2" value="英">英語<br> <input type="checkbox" name="toi2" value="数">数学<br> <input type="checkbox" name="toi2" value="理">理科<br> <input type="checkbox" name="toi2" value="社">社会<br> </td> </tr> <tr> <ul><td class="setsumon">3 一言メッセージ</td></ul> </tr> <tr> <td class="kaitou"> <input type="text" name="toi3" size="45" /> </td> </tr> <tr> <td class="setsumon">4 ご意見ご要望</td> </tr> <tr> <td class="kaitou"> <textarea name="toi4" rows="5" cols="46" ></textarea> </td> </tr> </table> <input type="button" href="#" value="送信する" onClick="result()"/> </form> <p>回答</p> <div id="answer"></div> </body> </html>
Excel側でテキストコードを吐き出すのも楽にできそうだったので，けっこう進んだ気がします。
アンケート作成 苦戦中です。 愚痴みたいなもの。
アンケートのHTAを最終的にはつくるべく，HTMLやJavaScriptと格闘中です。
あまりホームページ等作ったことはないので，このへんはツールの力でごり押ししていて，タグ打ちとかほぼしたことなくて未知の領域。
進まない進まない。。
ネットや本の力を借り，見た目は テキストボックス，ラジオボックス，チェックボックス，複数行入力できるフィールド等配置したものを作り，送信ボタンをつけてあげる。
そう，サーバーを立てれない環境でしかやっていなかった私にとって 不思議極まりなかったのが Submitボタンです。
送信てどこに送信してるの どんなもの送信してるの 細かい設定はどこでしてるのと
？？？？？？？？？？？
はてなの大行進の内容でした。
ですが，JavaScriptをやり始めてから，外部には何も出さずにJavaScriptでデータを受け取って望みの形に成型して望む場所に出す，ということが現実的になりました。
チェックボックス以外のエレメントに関しては，比較的簡単に制御はわかりましたが，複数選択で使えるチェックボックスについてはかなりてこずりました。
丸一日くらいはそれで引っかかってました。やっとなんとかなりそうではあります。そのうち触れることはあるかと。
わからないことばかりで，本当に困ったものですが，遅々とした歩みではありますが，なんか目標に歩けているようです。
見込みが立ってきたので，望むものを作る方向性だけ書き出しておくことにしました。
１．Excelにアンケートの設問形式，設問の内容，選択肢を書き込めるシートを用意する。
２．VBAでそれに従ったHTAのコードを作らせて，保存までさせる。
３．できあがり ヽ(*´∇｀)ﾉ
UTF-8の文字コードでVBAで保存させるってとこがよくわかってませんが，まぁたぶんできるはず。
form内のname属性を配列で取りたい，というのもずいぶん調べたんですが私には理解できませんでした。getAttributeとかでできるのかなぁと試していましたが，
デバッグの仕方もまだよくわかってないのでとても効率が悪い。
VBAのエディタのローカルウィンドウとかイミディエイトウィンドウが神様のように見えます。 (ﾉД`)
ただ，自分でどうせ設問のコードを吐き出すわけですので，
コードのどこかに配列できちんとname属性を記録しておけばそれに従って処理は可能なわけで，なんとかなるなとは思えています。
または，全エレメントの値を返させて後でゆっくり料理するというのもありですね。
JavaScriptに慣れていけばいろんな手段は思いつきそうですので，がんばろう。
まだ本やネットを見ないとほとんど何も書けない，VBAと比べるととてもひどい状況ですが，
JavaScriptはとても興味をそそられます。
この気持ちがあるうちに，理解度をできるだけ進めたいところです。力尽きたらまたしばらくやらなくなりますしね。。(;´∀｀)
疑似掲示板 その２
TextStreamのCloseをきちんとすると，動きがとてもよくなったので，実際の使用に向けてさらに調整を加えてみました。
各授業で簡単に使えるように，データファイルに当たるbbs.txtを掲示板ファイルの名前を利用してつけるように変更。
同じフォルダにHTAファイルとtxtファイルがあるとごちゃごちゃなるので，bbsフォルダを作成してそこにtxtを保存するように変更。
見た目が悪かったので，CSSで若干調整。
(追記)更新ボタンも付け加えました。
この辺の手を加えてみました。試してみないと本当のとこわかりませんが，うまくいきそうな感じ。
ショートカットをうまく利用して生徒が簡単にアクセスできるようにもう一工夫があるといいのかな
さらにショートカットを固定できるように，仕組みを自分の中でルールづけられれば，面白いのかもしれない。
とりあえず，昨日のものよりは改善していると思うので，コードを載せます。
HTAのお約束で，メモ帳とかに貼って，文字コードを忘れずにUTF-8にして，拡張子htaで保存します。それだけでたぶん使えます。
HTAは手軽でいい。次のVersionのWindowsでも生き残らせてくれないかなぁ ( ´Д｀)=3
<!doctype html> <html> <head> <meta charset="utf-8"> <title>メッセージ</title> <!-- CSS --> <style type="text/css"> .title{background-color: orange;font-size: 20px;display: block;width: 100%;} dt{display:block;width: 80px; float: left;padding-left: 2px;padding-top: 2px; background-color:lime;} dd{display:block;width: 410px;margin-left: 85px;padding-left: 5px;padding-top: 2px; background-color: greenyellow;} .user{display: none;} .form{background-color: beige;display: block;width: 100%-4px;padding: 4px;} </style> <!--JScript--> <script> resizeTo(560,600); // FileSystemObject 用定数 var ForReading = 1; var ForWriting = 8; /** BBS のデータファイルのフルパス */ var thisName=location.pathname thisName=thisName.slice(thisName.lastIndexOf("\\")+1,thisName.lastIndexOf(".")); var BbsFile = ".\\bbs\\"+thisName+"bbs.txt"; var User=new ActiveXObject("WScript.Network").UserName; /** ファイルの読み込み */ function loadText() { var fso = new ActiveXObject("Scripting.FileSystemObject"); var bbs = fso.OpenTextFile(BbsFile, ForReading); var tmp=bbs.ReadAll(); bbs.Close(); return(tmp); } /** 投稿内容のロード */ function load() { var fso = new ActiveXObject("Scripting.FileSystemObject"); if (fso.FolderExists(".\\bbs")==false) fso.CreateFolder(".\\bbs"); if (fso.FileExists(BbsFile)==false){ var bbs = fso.OpenTextFile(BbsFile, ForWriting,true); bbs.WriteLine("<dt style='background-color:limegreen;'>名前</dt><dd style='background-color:limegreen;'>メッセージ</dd><span class='user'>ユーザー名</span>\r"); bbs.Close(); } document.getElementById("data").innerHTML=loadText(); } /** 投稿 */ function post() { var name=document.getElementById("name").value; var msg=document.getElementById("msg").value; var postData = "<dt>" + name + "</dt>" + "<dd>" + msg + "</dd>" +"<span class='user'>" + User +"</span>\r"; var fso = new ActiveXObject("Scripting.FileSystemObject"); var bbs = fso.OpenTextFile(BbsFile, ForWriting); bbs.WriteLine(postData); bbs.Close(); load(); document.getElementById("name").value=""; document.getElementById("msg").value=""; } </script> </head> <body onLoad="load();"> <div class="title">一言メッセージ</div> <span class="form"> 名前 <input type="text" id="name" size="14" value="" placeholder="Name"><br> メッセージ <input type="text" id="msg" size="50" value="" placeholder="Message"><br> <input type="button" id="post" value="送信" onClick="post()"> <input type="button" id="Reload" value="更新" onClick="load()"> </span> <dl id="data"></dl> </body> </html>
動作画面はこんな感じです。
試用後に再調整かな。
今度はアンケートに近いものが作れるようにしてみよう。
疑似掲示板(失敗) JScript & HTA → 成功かも
興味がない分野について，自分の知識が全くないことに気づかせてくれるJSciptの学習。
今日は掲示板ぽいのを作ることをしていました。
こちらの記事を参考に，コードも使わせてもらいながら，自分の環境で作る。
JQueryを自分の環境でいまのところきちんと動かせなかったので，けっこうコードは行き当たりばったりで作ってます。
JScriptの学習と思ってこつこつやっていました。
例によってHTAです。HTMLでは動作しません。
メモ帳にはりつけて，拡張子HTAで保存します。文字コードはUTF-8にしないと動かないようです。
追記 imihitoさんにコメントをいただいて，見直してみたらCloseに()が抜けていましたので修正しました。
失敗を忘れないためにも下のほうの駄文は残しております。コードは書き直しました。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>メッセージ</title> <!-- CSS --> <style type="text/css"> dt{float: left;} dd{margin-left: 80px;} .user{display: none;} </style> <!--JScript--> <script> // FileSystemObject 用定数 var ForReading = 1; var ForWriting = 8; /** BBS のデータファイルのフルパス */ var BbsFile = "bbs.txt"; var User=new ActiveXObject("WScript.Network").UserName; /** ファイルの読み込み */ function loadText() { var fso = new ActiveXObject("Scripting.FileSystemObject"); var bbs = fso.OpenTextFile(BbsFile, ForReading); var tmp=bbs.ReadAll(); bbs.Close(); return(tmp); } /** 投稿内容のロード */ function load() { var fso = new ActiveXObject("Scripting.FileSystemObject"); if (fso.FileExists(BbsFile)==false){ var bbs = fso.OpenTextFile(BbsFile, ForWriting,true); bbs.WriteLine("<dt>名前</dt><dd>メッセージ</dd><span class='user'>ユーザー名</span>\r"); bbs.Close(); } document.getElementById("data").innerHTML=loadText(); } /** 投稿 */ function post() { var name=document.getElementById("name").value; var msg=document.getElementById("msg").value; var postData = "<dt>" + name + "</dt>" + "<dd>" + msg + "</dd>" +"<span class='user'>" + User +"</span>\r"; var fso = new ActiveXObject("Scripting.FileSystemObject"); var bbs = fso.OpenTextFile(BbsFile, ForWriting); bbs.WriteLine(postData); bbs.Close(); load(); document.getElementById("name").value=""; document.getElementById("msg").value=""; } </script> </head> <body onLoad="load();"> <h1>一言メッセージ</h1> <p> 名前 <input type="text" id="name" size="14" value="" placeholder="Name"> メッセージ <input type="text" id="msg" size="60" value="" placeholder="Message"> </p> <p> <input type="button" id="post" value="送信" onClick="post()"> ※エラーが出たら少し待ってもう一度 送信 を押してください。 </p> <dl id="data"></dl> </body> </html>
こんな画面になるとってもシンプルなもの。
送信ボタンを押せば投稿されるよ，ということと ユーザー名を裏で記録してるよ，というもの。
一人で試してても
こういうエラーがまぁまぁ出ます。書き込み時の競合なのかなーと思うけどテキストのファイルサイズもそんなに大きくないし，
なんでそれなりの確率でこいつが出てくるのか不思議です。できる範囲でCloseもやっているのになぁ。WriteLineの直後にClose書いたら拒否されるのでそこはやってません。
複数ウィンドウを開いて試すとさらにダメ。ということは実際の使用には現状はたえない状態のようです。元の記事の方とは書き込み回りも違いますし，そちらに
寄せていけば改善されるのだろうか。 ※追記 Close();をきちんとすることで改善されていると思われます。
とりあえず，この形で作りたかったので，その試しとして記録するとして，今度は各クライアントが一つのテキストを吐き出すようにして，あるフォルダにその小さいテキストを集める。
すでに存在する場合は上書きするという形にして，競合の可能性をなくす。
小さいテキストをかき集めて掲示板のデータにする，という形で今度は作ってみようと思います。
読み込みの際は問題にならないんじゃないかなと思うので，エラーを回避できるかなぁと思ったり。
明日はそれに挑戦してみよう。。
実際使っている授業支援ソフトが，アンケート機能が通信環境の安定性を損ねるということでなくなっています。
その代わりになるものを手にしたいと思っていますので，４０名程度を相手にアンケートぽいものをサーバーレスで作ってみたいと思ってるところなんです。
そこまでたどり着くかどうかはさっぱりですが，楽しいですし，やってみたいところ。。
