暗記帳

感覚的には余りブラウザアプリは好きじゃなくて、選択の余地があれば JavaScript／DHTML／Ajax よりも専用アプリとか専ブラに傾く感じなんだけど、かなり前からJavaScriptスキルの価値が高まってきているので、やや遅まきながら準備しておく事にした。

勉強のテーマとして捉えると、多分、余り面白くはなさそうな気配というか、逆にかなりイライラしそうな気配が最初からあるので、題材としてちょっと実用的で使って役に立つものを目指して面倒臭さを克服してみる。

以下のようなアプレット様の暗記帳を、JavaScript で作ってみた。

BMM の基本要素

{ "height":200, "width":400, "caption":"暗記帳 アルファ版" }

Meansの直下のBMM要素は？

• Mission
• Strategy
• Tactic

Endsの直下のBMM要素は？

要素数は３個

• Vision
• Goal
• Objective

JavaScriptファイルは別のサーバにおいてある。このブログの JavaScriptコードでは、単にそのJavaScriptファイル中の関数を window の onload イベントで実行するようにリスナを追加するだけ。

このコードは、div タグで構成した以下のような暗記帳データを読み込み、動的にJavaScriptアプレットを生成、暗記帳の出題と解のペアを保持する。実際は改行や余計な空白を取り除いておく必要がある。

<div id="div1" class="memorizer">
  <div class="memo_title">BMM の基本要素</div>
  <div class="memo_config">
    { "height":200,
      "width":400,
      "caption":"暗記帳 アルファ版"
    }
  </div>
  <div class="memo_dataPart">
    <div class="pair">
      <div class="question">Meansの直下のBMM要素は&#65311;</div>
        <div class="answer">
          <ul style="margin-top:0px;">
            <li>Mission</li>
            <li>Strategy</li>
            <li>Tactic</li>
          </ul>
        </div>
      </div>
      <div class="pair">
        <div class="question">Endsの直下のBMM要素は&#65311;</div>
        <div class="hint">要素数は３個</div>
        <div class="answer">
          <ul>
            <li>Vision</li>
            <li>Goal</li>
            <li>Objective</li>
          </ul>
        </div>
      </div>
    </div>
</div>

FireFox 3、InternetExplorer 8、Opera 9、Safari 4で動作確認した。ちょっと見た目が違うところがあるが妥協。

◆今後の課題

• 複数のアプレットがある場合に全部を解釈するまでスレッドを占有したりしないように、一個ずつブラウザに処理をもどす。
• 終了ページで「1回目：n問中m問、2回目:n-m問中l問」という形でレポートを表示する
• コードが汚いのでリファクタ。もうちょっとオシャレなJavaScriptイディオムがかけないとだめ。
• CSS 関連の知識不足から、現状のコードではたまたま動いているところや、冗長な設定があるはず。必要十分なコードを追求する。
• エラーハンドリング
• スピードアップ、効率化

※それにしても、ある程度予想していたがクロスブラウザがこれほど面倒くさいとは。IE の「"colSpan"がOKで、"colspan"がダメ」とか透明の指定法とかって･･･テンション下がるわ。