画面関連ファイルの開発

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

cd /usr/local/kitchen_timer
cp controllers.bak/chat/index.rhtml controllers

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

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 %>

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

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

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