Railsでlightwindow v2.0 を使ってみる

えー。Railsアプリ作るところからやりますｗ

環境

OS : Windows XP
C:\Rails>ruby -v
ruby 1.8.6 (2007-03-13 patchlevel 0) [i386-mswin32]
C:\Rails>rails -v
Rails 1.2.3

lightwindow.js v2.0
prototype.js Version: '1.5.1.1'
scriptaculous.js v1.7.1_beta2
effects.js  v1.7.1_beta2

ライセンスの確認

使ってみる前に、lightwindowのライセンスはどうなっているのでしょうか？

lightwindow.js のファイルの冒頭に

LightWindow is freely distributable under the terms of an MIT-style license.

と書いてあります。MIT-style license です。
MIT-style license とはなんでしょうか？

ライセンス資料室
こちらに、

BSD License と MIT License のちがい。
BSD Lisence の場合、
Neither the name of the nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.(日本語訳: 特別の許可が無くては、このソフトウェアから派生した製品の推奨や宣伝に、<組織>の名前やその貢献者の名前を使用してはいけない。)
という条項が3番目にありますが、MIT License には、これに相当する条件がありません。というわけで、BSDとMITの違いはこの条件の有無である、としたいのですが……
ちょっと気になるのは The FreeBSD Copyright には、この3番目の条項が無いようです。また、NetBSD のライセンスと再配布についてには、この条項を省略する人もいることに言及しています。Open Source Initiative (OSI)の定義としては、BSDのライセンスには、3つの条項があることになっています。しかし、世間では、この条件の有無でBSDだのMITだのという分け方をしていないようにも思います。ライセンスの内容ではなく、文面でBSD(条項2つ版)とMITを分けているのにすぎないのかもしれません。

なるほど。ほとんどBSDと同じなのですね。。うーん。分かりにくい。

では、BSDとはなんでしょうか。

こちらに、
BSDライセンス - Wikipedia

「無保証」であることの明記と著作権表示だけを再頒布の条件とするライセンス規定。この条件さえ満たせば、BSDライセンスのソースコードを複製・改変して作成したオブジェクトコードを、ソースコードを公開せずに頒布できる。
著作権表示さえしておけば、BSDライセンスのソースコードを他のプログラムに組み込み、しかも組み込み後のソースコードを非公開にできるため、GPLに比べ再配布時のライセンス条件を制限する事もなく、商用化及び標準規格の制定に利用しやすいライセンスである。

なるほど、とりあえず普通に使う分にはまったく問題ないですね。
では、さっそく使ってみましょう。

1.Railsアプリの作成

C:\Rails>rails lightwindow
     create
     create  app/controllers
     create  app/helpers
     create  app/models
     create  app/views/layouts
     create  config/environments
     create  components
     create  db
     create  doc
     create  lib
     create  lib/tasks
     create  log
     create  public/images
     create  public/javascripts
     create  public/stylesheets
     create  script/performance
     create  script/process
     create  test/fixtures
     create  test/functional
     create  test/integration
     create  test/mocks/development
     create  test/mocks/test
     create  test/unit
     create  vendor
     create  vendor/plugins
     create  tmp/sessions
     create  tmp/sockets
     create  tmp/cache
     create  tmp/pids
     create  Rakefile
     create  README
     create  app/controllers/application.rb
     create  app/helpers/application_helper.rb
     create  test/test_helper.rb
     create  config/database.yml
     create  config/routes.rb
     create  public/.htaccess
     create  config/boot.rb
     create  config/environment.rb
     create  config/environments/production.rb
     create  config/environments/development.rb
     create  config/environments/test.rb
     create  script/about
     create  script/breakpointer
     create  script/console
     create  script/destroy
     create  script/generate
     create  script/performance/benchmarker
     create  script/performance/profiler
     create  script/process/reaper
     create  script/process/spawner
     create  script/process/inspector
     create  script/runner
     create  script/server
     create  script/plugin
     create  public/dispatch.rb
     create  public/dispatch.cgi
     create  public/dispatch.fcgi
     create  public/404.html
     create  public/500.html
     create  public/index.html
     create  public/favicon.ico
     create  public/robots.txt
     create  public/images/rails.png
     create  public/javascripts/prototype.js
     create  public/javascripts/effects.js
     create  public/javascripts/dragdrop.js
     create  public/javascripts/controls.js
     create  public/javascripts/application.js
     create  doc/README_FOR_APP
     create  log/server.log
     create  log/production.log
     create  log/development.log
     create  log/test.log

C:\Rails>

2.Railsプロジェクトのディレクトリへ移動

C:\Rails>cd lightwindow

3.Railsの起動

C:\Rails\lightwindow>ruby script/server -p 80
=> Booting WEBrick...
=> Rails application started on http://0.0.0.0:80
=> Ctrl-C to shutdown server; call with --help for options
[2008-06-24 18:54:11] INFO  WEBrick 1.3.1
[2008-06-24 18:54:11] INFO  ruby 1.8.6 (2007-03-13) [i386-mswin32]
[2008-06-24 18:54:11] INFO  WEBrick::HTTPServer#start: pid=2828 port=80

4.アクセス

http://localhost/

Railsお馴染みの画面が出てきましたね。

5.コントローラーの作成

C:\Rails\lightwindow>ruby script/generate controller demo
     exists  app/controllers/
     exists  app/helpers/
     create  app/views/demo
     exists  test/functional/
     create  app/controllers/demo_controller.rb
     create  test/functional/demo_controller_test.rb
     create  app/helpers/demo_helper.rb

6.LightWindow v2.0 をダウンロード

http://stickmanlabs.com/lightwindow/#download こちらから zipファイルをダウンロード。

7.ダウンロードした zipファイルを解凍してRailsアプリに配置する。

スタイルシート

lightwindow\css\lightwindow.css

上記1つのファイルを

C:\Rails\lightwindow\public\stylesheets\lightwindow.css

と配置。

イメージファイル

lightwindow\css\ajax-loading.gif
lightwindow\css\arrow-down.gif
lightwindow\css\arrow-up.gif
lightwindow\css\black-70.png
lightwindow\css\black.png
lightwindow\css\nextlabel.gif
lightwindow\css\pattern_148-70.png
lightwindow\css\pattern_148.gif
lightwindow\css\prevlabel.gif

上記のファイルを

C:\Rails\lightwindow\public\images\ajax-loading.gif
C:\Rails\lightwindow\public\images\arrow-down.gif
C:\Rails\lightwindow\public\images\arrow-up.gif
C:\Rails\lightwindow\public\images\black-70.png
C:\Rails\lightwindow\public\images\black.png
C:\Rails\lightwindow\public\images\nextlabel.gif
C:\Rails\lightwindow\public\images\pattern_148-70.png
C:\Rails\lightwindow\public\images\pattern_148.gif
C:\Rails\lightwindow\public\images\prevlabel.gif

と配置

また、

lightwindow\gallery\ 以下すべてのファイルを

C:\Rails\lightwindow\public\images\gallery\

へ配置する。
デモで使用するため。

Javascriptファイル

lightwindow\javascript\effects.js
lightwindow\javascript\lightwindow.js
lightwindow\javascript\prototype.js
lightwindow\javascript\scriptaculous.js

上記のファイルを

C:\Rails\lightwindow\public\javascripts\effects.js
C:\Rails\lightwindow\public\javascripts\lightwindow.js
C:\Rails\lightwindow\public\javascripts\prototype.js
C:\Rails\lightwindow\public\javascripts\scriptaculous.js

と配置。

※effects.js と prototype.js はダウンロードしたファイルを使いますので、上書きします。

lightwindow.js と lightwindow.css の直書きされているPathをRailsに合わせて修正する

404NotFound | 株式会社ライブレボリューション

上記のページをみて修正する。

8.Viewテンプレートを作成する

C:\Rails\lightwindow\app\views\demo\index.rhtml

9.Viewテンプレートを書く(文字コードはUTF-8です)

http://stickmanlabs.com/lightwindow/#demos の「Images」の「Image - Just an image, a decently one.」を試してみましょう。

C:\Rails\lightwindow\app\views\demo\index.rhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>LightWindow Demo</title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- CSS -->
<%= stylesheet_link_tag "lightwindow" %>

<!-- JavaScript -->
<%= javascript_include_tag "prototype" %>
<%= javascript_include_tag "effects" %>
<%= javascript_include_tag "lightwindow" %>

</head>
<body>


<a href="/images/gallery/image-5.jpg" class="lightwindow page-options" title="What is this Plant?" author="Unknown" caption="Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture."><strong>Image</strong> - Just an image, a decently large one.</a>


</body>
</html>

10.アクセスして試してみる

http://localhost/demo/

おおおぉ、ちゃんと実行されましたね。全然問題ないようですね。

11.今度は、Frame Calls を試してみる。

NEW とか書いてありますので、試してみましょう。

これは、iframe の中に入るデータが必要ですので、もう一つViewファイルを作りましょう。
C:\Rails\lightwindow\app\views\demo\iframe.rhtml
を作成しました。で、中身です。

C:\Rails\lightwindow\app\views\demo\iframe.rhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>LightWindow frame Demo</title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- CSS -->
<%= stylesheet_link_tag "lightwindow" %>

<!-- JavaScript -->
<%= javascript_include_tag "prototype" %>
<%= javascript_include_tag "effects" %>
<%= javascript_include_tag "lightwindow" %>

</head>
<body>

<p>
<a href="http://google.com/" class="lightwindow_iframe_link" ><strong>Open a LightWindow from an iframe!</strong></a>
</p>

<script type="text/javascript">
var links = $$('.lightwindow_iframe_link');
links.each(function(link) {
Event.observe(link, 'click', function() {parent.myLightWindow.activate(null, link);}, false);
link.onclick = function() {return false;};
});
</script>  

</body>
</html>

それで、 C:\Rails\lightwindow\app\views\demo\index.rhtml の方。

C:\Rails\lightwindow\app\views\demo\index.rhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>LightWindow Demo</title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- CSS -->
<%= stylesheet_link_tag "lightwindow" %>

<!-- JavaScript -->
<%= javascript_include_tag "prototype" %>
<%= javascript_include_tag "effects" %>
<%= javascript_include_tag "lightwindow" %>

</head>
<body>


<iframe id="iframe_test" src="/demo/iframe" frameborder="1" allowtransparency="true" scrolling="no" width="100%" height="100px" ></iframe>


</body>
</html>

では、 http://localhost/demo/ にアクセスして試してみましょう。

おおぉ。ちゃんと表示されましたね！

では、今度は、もう一つ踏み込んで、Frameのリンクをgoogleではなく、ローカルのURLを入れてみましょう。

12.Frame Calls でサイト内URLを試す。

まず、もう一つViewを作りましょう。

C:\Rails\lightwindow\app\views\demo\info.rhtml

で、中身。

C:\Rails\lightwindow\app\views\demo\info.rhtml

インフォメーション！！

こんどは、 C:\Rails\lightwindow\app\views\demo\iframe.rhtml を以下のように。
といっても、リンク先が変わってるだけ。

C:\Rails\lightwindow\app\views\demo\iframe.rhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>LightWindow frame Demo</title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- CSS -->
<%= stylesheet_link_tag "lightwindow" %>

<!-- JavaScript -->
<%= javascript_include_tag "prototype" %>
<%= javascript_include_tag "effects" %>
<%= javascript_include_tag "lightwindow" %>

</head>
<body>

<p>
<a href="/demo/info" class="lightwindow_iframe_link" ><strong>Open a LightWindow from an iframe!</strong></a>
</p>

<script type="text/javascript">
var links = $$('.lightwindow_iframe_link');
links.each(function(link) {
Event.observe(link, 'click', function() {parent.myLightWindow.activate(null, link);}, false);
link.onclick = function() {return false;};
});
</script>  

</body>
</html>

これで、 http://localhost/demo/ にアクセスして実行してみましょう。

あれ？？画面が真っ白です。「インフォメーション！！」という文字列が出てくるはずです。
なぜでしょう？

エラーを見てみると。

ライン: 1366
文字: 4
エラー:catch ステートメントでは適用されますが、throw ステートメントでは適用されません。
コード:0
URL: http://localhost/demo/

とあります。

エラー:catch ステートメントでは適用されますが、throw ステートメントでは適用されません。

とはなでしょうか？

こちらに、

http://msdn.microsoft.com/ja-jp/library/cc391904.aspx

コードに throw ステートメントが記述されていますが、try ブロック内にないか、エラーを検出するための対応する catch ブロックがありません。例外は、try ブロック内で throw ステートメントによってスローされ、try ブロックの外側にある catch ステートメントによって処理されます。

とかいてあります。

では、ライン: 1366を見てみましょう。

lightwindow.js の 1364〜1366 に以下のように書いてあります。

default :
throw("Page Type could not be determined, please amend this lightwindow URL "+this.contentToFetch);
break;

例外・・。
どうも、URLを修正してくれと言っているようです。
ローカルのこのURLを使いたいのですが・・・・。

ローカルのページは表示できないのか？

いえ、そんなことはないようです。

http://stickmanlabs.com/lightwindow/#demos
こちらの

External Sources Look Ma! It's like a popup window! (Other Domains)
Page Treated as External - This page is local to this domain but is placed in an iframe.

に注目してみると、

This page is local to this domain but is placed in an iframe.

と書いてあります。

こちらで、ローカルのページが使えるようです。
さっそく使ってみましょう。

C:\Rails\lightwindow\app\views\demo\index.rhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>LightWindow Demo</title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- CSS -->
<%= stylesheet_link_tag "lightwindow" %>

<!-- JavaScript -->
<%= javascript_include_tag "prototype" %>
<%= javascript_include_tag "effects" %>
<%= javascript_include_tag "lightwindow" %>

</head>
<body>

<a href="http://localhost/demo/info" class="lightwindow page-options" params="lightwindow_type=external">/demo/infoを lightwindow で表示</a>

</body>
</html>

/demo/info というページをajaxで表示させますので、以下のrhtmlファイルを作りましょう。

C:\Rails\lightwindow\app\views\demo\info.rhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>LightWindow Demo</title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- CSS -->
<%= stylesheet_link_tag "lightwindow" %>

<!-- JavaScript -->
<%= javascript_include_tag "prototype" %>
<%= javascript_include_tag "effects" %>
<%= javascript_include_tag "lightwindow" %>

</head>
<body>

<a href="/images/gallery/image-5.jpg" class="lightwindow page-options" title="What is this Plant?" author="Unknown" caption="Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture.">さらにlightwindowでイメージを表示</a>

</body>
</html>

これで、http://localhost/demo/ にアクセスして、クリックしてみましょう。

おおおおぉ。lightwindowでローカルページが表示されます。しかも、lightwindowで開いたページの中で、さらにlightwindowが実行できます。

すばらしいですねー。