昨今のウェブアプリでは、JavaScriptによるクライアントサイドプログラムとの協業が欠かせません。 ここでは、サーバサイドにRESTインタフェースを作り、AJAXによる画面更新の例を紹介します。

• 数字入力欄を４つ用意する。
• 数字を入力すると、即座にその値を表した棒グラフが表示される。
• 数字を変えると、棒グラフもリアルタイムに変わる。

hello worldをベースにします。リスト表示の時ややこしいので、READMEファイルは削除しておいてください。

cd controllers
cp -r 00_hello ajax
cd ajax
rm README

コントローラ名を、変更します。併せてrequireを以下の通り修正してください。

main.rb

require "alone"
require "al_graph"
 
class AjaxSampleController < AlController

コントローラは、不要なコードを削除した程度で、機能の変更はありません。

main.rb

  def action_index()
    AlTemplate.run("index.rhtml")
  end

デフォルトの画面は、今回静的なものなので、本来ならばテンプレート化する必要もありません。

index.rhtml

<%= header_section %>
<style>
  input[type=text] { text-align: right; }
</style>
 
<%= body_section %>
 
<div id="graph"></div>
 
値１<input type="text" name="v1" value=""><br>
値２<input type="text" name="v2" value=""><br>
値３<input type="text" name="v3" value=""><br>
値４<input type="text" name="v4" value=""><br>
 
<%= footer_section %>

Aloneでは、サーバサイドとの連携のためのJavaScriptライブラリ、"alone.js" を同梱していますので、それを使います。 また、今回はクライアントサイドの補助ライブラリとして、jqueryを使っています。

JavaScriptでは、各テキストボックスに値が入力されたことをトリガーに動作を始めます。 そのハンドラでは、AJAX通信を使ってグラフ生成のREST-APIを使い、結果を <div id="graph"> へ、挿入します。 REST-APIはアクション名 get_graph を使い、追加パラメータとして v1 から v4 の4つの入力値を与えています。

index.rhtml

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/js/alone.js"></script>
<script>
$("input").change( function() {
  var v1 = $("input[name=v1]").val();
  var v2 = $("input[name=v2]").val();
  var v3 = $("input[name=v3]").val();
  var v4 = $("input[name=v4]").val();
 
  var uri = Alone.make_uri({action:"get_graph", v1:v1, v2:v2, v3:v3, v4:v4});
  $("#graph").load( uri );
});
</script>

実際にグラフを描画する機能を、REST APIとして実装します。

Aloneでは、ブラウザからのアクセスは全て action に割り当てられます。先ほど、JavaScriptのコード中で、"get_graph"と名前をつけていますので、def action_get_graph と定義することになります。

main.rb

  def action_get_graph()
    form = AlForm.new(
      AlText.new("v1"),
      AlText.new("v2"),
      AlText.new("v3"),
      AlText.new("v4"),
    )
    form.validate()
    ydata = [ form[:v1].to_f, form[:v2].to_f, form[:v3].to_f, form[:v4].to_f ]
 
    graph = AlGraph.new()
    graph.set_mode( :NO_XML_DECLARATION )
 
    graph.add_data_bar(ydata)
    graph.draw()
  end

パラメータとして渡された v1からv4を取得するために、AlFormを定義します。 AlGraphオブジェクトを作り、formから得た値を add_data_bar()メソッドに与えることで、棒グラフを生成します。

set_mode()メソッドで、:NO_XML_DECLARATION モードを設定していますが、この指示をすることでグラフ生成結果にDOCTYPE宣言とxml宣言をしなくなります。 現在のブラウザでは、この指示をしてもしなくても正しく動作するものがほとんどですが、念の為つけています。

これで完了です。

プログラム全体を再掲します。

• コントローラ main.rb
• テンプレート（ビュー） index.rhtml

main.rb

require "alone"
require "al_graph"
 
class AjaxSampleController < AlController
  def action_index()
    AlTemplate.run("index.rhtml")
  end
 
  def action_get_graph()
    form = AlForm.new(
      AlText.new("v1"),
      AlText.new("v2"),
      AlText.new("v3"),
      AlText.new("v4"),
    )
    form.validate()
    ydata = [ form[:v1].to_f, form[:v2].to_f, form[:v3].to_f, form[:v4].to_f ]
 
    graph = AlGraph.new()
    graph.set_mode( :NO_XML_DECLARATION )
 
    graph.add_data_bar(ydata)
    graph.draw()
  end
end

index.rhtml

<%= header_section %>
<style>
  input[type=text] { text-align: right; }
</style>
 
<%= body_section %>
 
<div id="graph"></div>
 
値１<input type="text" name="v1" value=""><br>
値２<input type="text" name="v2" value=""><br>
値３<input type="text" name="v3" value=""><br>
値４<input type="text" name="v4" value=""><br>
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/js/alone.js"></script>
<script>
$("input").change( function() {
  var v1 = $("input[name=v1]").val();
  var v2 = $("input[name=v2]").val();
  var v3 = $("input[name=v3]").val();
  var v4 = $("input[name=v4]").val();
 
  var uri = Alone.make_uri({action:"get_graph", v1:v1, v2:v2, v3:v3, v4:v4});
  $("#graph").load( uri );
});
</script>
 
<%= footer_section %>