四コマ殴り描きサイトについて

四コマ殴り描きサイト　リファクタリング

idoushiki.web.fc2.com

四コマ殴り描きのソースコードを改良した。
もともと、殴り描きのサイトは以下のようにボタン1個につき一行のコードを書いていた。
ボタンを押すと、殴り描きが見られるという仕組みだ。

<p>
    <input type="button" class="button" value=" 171わ " onclick="location.href= 'http://idoushiki.web.fc2.com/img/171.png'">
    <input type="button" class="button" value=" 172わ " onclick="location.href= 'http://idoushiki.web.fc2.com/img/172.png'">
   <input type="button" class="button" value=" 173わ " onclick="location.href= 'http://idoushiki.web.fc2.com/img/173.png'">
   <input type="button" class="button" value=" 174わ " onclick="location.href= 'http://idoushiki.web.fc2.com/img/174.png'">
   <input type="button" class="button" value=" 175わ " onclick="location.href= 'http://idoushiki.web.fc2.com/img/175.png'">
  </p>

１話追加するごとに一行分コードを書き加えていく必要があった。
175話あるので、ボタンを表示するコードだけで175行(

を除く)あるわけだ。
そのため、サイトのソースコードの量が時間とともに膨大になりそうだった。

このコードの追加していくのも面倒なのでjavascriptで動的にこのコードを生成できるようにした。
改良後のコードは以下の通りだ。

<script>
var i;
var name1,name2,name3;
var ne;
for(i=1;i<=175;i++){
name1="<input type=\"button\"class=\"button\"value=\"";
name2="わ \"onclick=\"location.href=\'http://idoushiki.web.fc2.com/img/";
name3=".png\'\">";
if(i%10==1||i%10==6){
  ne="</p>"+name1+i+name2+i+name3;
}
if(i%5==0){
  ne=name1+i+name2+i+name3+"</p>";
}
else {

    ne=name1+i+name2+i+name3;
}
document.write(ne);
}
</script>

このコードが今の状態になるまで、""（ダブルコーテーション）内の文字に関してなんどもエラーが出て困っていた。
そのエラーの内容は、""（ダブルコーテーション）内の''（シングルコーテーション）や""（ダブルコーテーション）に関するものだった。
""内に""や''を記述したい場合、以下のように、内側の"の前にバックスラッシュをつける必要がある。

"\"aaaa\""

このように書かないと、エラーになる。
""内に""をそのまま書きたい場合は、バックスラッシュの代わりに¥マークを使ってもエラーになったので、バックスラッシュ「\」をつけなければならない。

これからは、どんなに話数が増えてもfor内の数字を変えるだけでボタンを追加できるので楽だ。
あとはついでにサイトをhttps化しておいた。