====== 画面関連ファイルの開発 ======

===== HTMLテンプレートファイル =====

erbを採用しています。これもchatサンプルプログラムからコピーして使用します。

<code sh>
cd /usr/local/kitchen_timer
cp controllers.bak/chat/index.rhtml controllers
</code>

コピーしたindex.rhtmlを以下の通り編集します。

<code html index.rhtml>
<%= header_section %>
  <title>Kitchen Timer</title>
  <link type="text/css" rel="stylesheet" href="/kitchen_timer.css">
  <script src="/js/alone.js"></script>
  <script src="/kitchen_timer.js"></script>

<%= body_section %>

<div id="container">

  <div id="time_display"><%=h @values["display_digit"] %></div>
  <div id="digit_key">
    <input type="button" value="1" onclick="ipc.call('digit', {value:1})">
    <input type="button" value="2" onclick="ipc.call('digit', {value:2})">
    <input type="button" value="3" onclick="ipc.call('digit', {value:3})">
    <input type="button" value="4" onclick="ipc.call('digit', {value:4})">
    <input type="button" value="5" onclick="ipc.call('digit', {value:5})">
    <br>
    <input type="button" value="6" onclick="ipc.call('digit', {value:6})">
    <input type="button" value="7" onclick="ipc.call('digit', {value:7})">
    <input type="button" value="8" onclick="ipc.call('digit', {value:8})">
    <input type="button" value="9" onclick="ipc.call('digit', {value:9})">
    <input type="button" value="0" onclick="ipc.call('digit', {value:0})">
  </div>
  <div id="start_stop_key">
    <input type="button" value="開始" onclick="ipc.call('start')">
    <input type="button" value="停止" onclick="ipc.call('stop')">
  </div>

  <audio id="timeup_sound" preload="auto">
    <source src="/timeup.mp3" type="audio/mp3">
    <source src="/timeup.wav" type="audio/wav">
  </audio>
</div>

<%= footer_section %>
</code>

編集のポイントは、以下の点です。

  * タイマーカウンター表示欄は、コントローラで得た@valuesアトリビュートを使って表示する。これによりブラウザが画面表示したタイミングで表示すべき内容が正しく表示される。
  * アクションを起こすボタン類に、ipc.callメソッドで常駐部へIPC通信をするように指示する。
  * 数字ボタンではどの数字かという情報を、valueというアトリビュート名でIPCにパラメータとして渡す。
  * audioタグで、アラーム音のファイルをあらかじめ読み込んでおく。

CSSファイルは、特別関連する物はないので、省略します。