フォントビューアWebアプリを制作（その６）

（その５）では、グリフ一覧は直接HTMLファイルにグリフを一つ一つ入力しました。

<section id="glyphs">
  <table>
    <tr><th></th><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th></tr>
    <tr><td class="col">U+002x</td><td> </td><td>!</td><td>"</td><td>#</td><td>$</td><td>%</td><td>&</td><td>'</td><td>(</td><td>)</td><td>*</td><td>+</td><td>,</td><td>-</td><td>.</td><td>/</td></tr>
    <tr><td class="col">U+003x</td><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>:</td><td>;</td><td><</td><td>=</td><td>></td><td>?</td></tr>
    <tr><td class="col">U+004x</td><td>@</td><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
    <tr><td class="col">U+005x</td><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td><td>U</td><td>V</td><td>W</td><td>X</td><td>Y</td><td>Z</td><td>[</td><td>\</td><td>]</td><td>^</td><td>_</td></tr>
    <tr><td class="col">U+006x</td><td>`</td><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td><td>k</td><td>l</td><td>m</td><td>n</td><td>o</td></tr>
    <tr><td class="col">U+007x</td><td>p</td><td>q</td><td>r</td><td>s</td><td>t</td><td>u</td><td>v</td><td>w</td><td>x</td><td>y</td><td>z</td><td>{</td><td>|</td><td>}</td><td>~</td><td> </td></tr>
  </table>
</section>

これでは、漢字領域やギリシア文字領域などを一覧表示する場合は、現実的ではないので、スクリプトを使って、グリフ一覧表示部分を自動化したいと思います。
スクリプトは、JavaScriptで直接コーディングしてもよいのですが、CoffeeScriptが簡潔にコーディングできるので、CoffeeScriptでコーディングしたいと思います。

CoffeeScriptは、Node.jsを使ってJavaScriptコードにコンパイルするのが正式ですが、Node.jsのインストールが多少手間がかかるので、CoffeeScript開発者がリリースしているcoffee-script.jsをブラウザに読み込ませて、CoffeeScriptコードを直接実行させる方法で行きたいと思います。
CoffeeScriptコードを直接ブラウザで実行させるので、Node.jsでJavaScriptでコンパイルさせた場合よりも速度が遅いですが、ここでのアプリでは実用的には特に問題ないので、coffee-script.jsを使って実行させることにします。

エレメントの操作を簡単にしたいので、jQueryを使用します。
jQueryは、現在2バージョンリリースされていますが、jquery1.x系を使うことにします。
http://jquery.com/download/
から最新のjquery-1.11.1.min.jsをダウンロードします。

次に、coffee-script.jsをCoffeeScript作者のページ（http://coffeescript.org）から入手します。
（http://coffeescript.org/extras/coffee-script.js）
このcoffee-script.jsをindex.htmlのヘッダでjavascriptで読み込みます。
その後に、これから作成するCoffeScriptコードのファイルscript.coffeeをファイルタイプをcoffeescriptとして読み込ませます。
以下をindex.htmlのheadタグ内に追加しておきます。

<script type="text/javascript" src="./jquery-1.11.1.mini.js"></script>
<script type="text/javascript" src="./coffee-script.js"></script>
<script type="text/coffeescript" src="./script.coffee"></script>

タグ：webアプリ JavaScript CoffeeScript jQuery