ページ内にウィンドウを表示してみる。

Ruby on Rails

Spinelz(スピネルズ)というJavaScriptのライブラリがある。これを使うとタブやメニューバー等々のインターフェースが簡単に実現できるようだ。デモページで試してみると、とっても楽しい！Railsで開発するアプリケーションにも是非、取り入れてみたい。機能の一つにブラウザのページ内にウィンドウを表示する機能があるので、それを試してみた。

インストール

ダウンロードして解凍したspinelz/srcフォルダの中身を、publicフォルダのimages、javascripts、stylesheets以下にそれぞれコピーした。

spinelz_0.4.1.zipを解凍したフォルダ
spinelz/
  |-- src/
        |-- images/
        |     |-- spinelz/
        |
        |-- javascripts/
        |     |-- spinelz/
        |     |-- spinelz_lib/
        |
        |-- stylesheets/
              |-- spinelz/

上記フォルダ構成のオレンジ色の部分をpublicフォルダにコピーした。以下のような構成になった。

インストール後のpublicフォルダ
RAILS_ROOT/
  |-- public/
        |-- images/
        |     |-- spinelz/
        |     |-- rails.png
        |
        |-- javascripts
        |     |-- spinelz/
        |     |-- spinelz_lib/
        |     |-- application.js
        |     |-- controls.js
        |     |-- dragdrop.js
        |     |-- effects.js
        |     |-- prototype.js
        |
        |-- stylesheets
              |-- spinelz/
              |-- scaffold.css

javaスクリプトとスタイルシートの取り込み

app/views/layouts/softwares.rhtml
<html>
<head>
  <title>Softwares: <%= controller.action_name %></title>
  <%= javascript_include_tag "spinelz_lib/builder" %>
  <%= javascript_include_tag "spinelz_lib/controls" %>
  <%= javascript_include_tag "spinelz_lib/dragdrop" %>
  <%= javascript_include_tag "spinelz_lib/effects" %>
  <%= javascript_include_tag "spinelz_lib/json.js" %>
  <%= javascript_include_tag "spinelz_lib/prototype" %>
  <%= javascript_include_tag "spinelz_lib/resize" %>
  <%= javascript_include_tag "spinelz_lib/scriptaculous" %>
  <%= javascript_include_tag "spinelz_lib/slider" %>
  <%= javascript_include_tag "spinelz_lib/spinelz_util" %>
  <%= javascript_include_tag "spinelz_lib/unittest" %>
  <%= javascript_include_tag "spinelz/window" %>
  <%= javascript_include_tag "spinelz/window_resizeEx" %>
  <%= stylesheet_link_tag "spinelz/window" %>

  <%= stylesheet_link_tag 'scaffold' %>
</head>
...（以下省略）...

ウィンドウを表示するビューの設定

前回の画像ファイルをアップロードして表示するテストプロジェクトに、ウィンドウ表示の機能を追加してみた。

app/views/softwares/_show_window.rhtml
  • Spinelzデモのソースを参考に、ウィンドウ表示用のパーシャルファイルを作成した。このファイルがウィンドウを表示するコードになる。
  • divで階層化されているのと、ちょっとしたjavaスクリプトが含まれているだけで、構成はとても単純だ。
  • コードの中で、以下のidが一致しないとウィンドウが表示されない。
    • ＜div id="window<%= @software.id %>"＞
    • new Window("window<%= @software.id %>",{width:800, height: 600,modal:false});
  • ウィンドウを複数開く必要が無ければ、以下のようにidを固定してしまってOK。
    • ＜div id="window"＞
    • new Window("window",{width:800, height: 600,modal:false});
<div id="window<%= @software.id %>">
  <div>
    <%# ウィンドウのタイトル %>
    <%= url_for_file_column(@software, :image) %>
  </div>
  <div>
    <%# ウィンドウの中身 %>
    <% for column in Software.content_columns %>
    <p>
      <b><%= column.human_name %>:</b> <%#=h @software.send(column.name) %>
      <%= image_tag url_for_image_column(@software, "image", :large) %>
    </p>
    <% end %>

    <%= link_to 'Edit', :action => 'edit', :id => @software %> |
    <%= link_to 'Back', :action => 'list' %>
  </div>
</div>

<script type="text/javascript">
    normal_win = new Window("window<%= @software.id %>",{width:800, height: 600,modal:false});
    normal_win.open();
    normal_win.center();
</script>
app/views/softwares/list.rhtml
  • Showリンクをクリックすると、ink_to_remoteで更新して、ウィンドウを表示するようにしてみた。
  • リストも表示されているので、次々と選択して内容を確認することが出来る。
<h1>Listing softwares</h1>
<div id="update_window">
  <%# ここにウィンドウが追記される %>
</div>
...（途中省略）...
   <td><%= link_to_remote 'Show', 
                           :update => "update_window", 
                           :url => {:action => 'show_window', 
                                    :id => software} %></td>
...（途中省略）...
app/controllers/softwares_controller.rb
  • link_to_remoteで呼び出されるコントローラー。showメソッドにrender :partial => 'show_window'を追記した。
class SoftwaresController < ApplicationController
...（途中省略）...
  def show_window
    @software = Software.find(params[:id])
    render :partial => 'show_window'
  end
...（途中省略）...


以上で、こんな感じになった。listとshowのアクションを行き来することなく、次々と写真を確認できる。ウィンドウはタイトルバーをドラッグして移動できる。リサイズ、最大化、最小化も可能。OS環境がブラウザの中に表現されたような感じ。


Railsの機能とは関係ないが、こんな表示が手軽にできるSpinelz(スピネルズ)って素晴らしいです！開発するのが楽しくなる。他にも機能はたくさんあるので、今後どうやって活用していくか、楽しみながら試行錯誤中。