トップページ -> 実践知識 -> JavaScript と jQuery UI による Web プログラミング -> jQuery UI, LINQ のダウンロード. Rails で使ってみる.
[サイトマップへ], サイト内検索:

jQuery UI, LINQ のダウンロード. Rails で使ってみる.

金子邦彦研究室: データベース、人工知能(AI)、データサイエンスの融合により不可能を可能にする

この Web ページで行うこと.


jQuery UI, LINQ のダウンロード

◆ Web サイトからダウンロードする場合

  1. JQuery UI の Web ページを開き,JQuery UI のファイルをダウンロード

    http://jqueryui.com

  2. ダウンロードしたファイルを解凍.

    css, development-buldle, js, index.html の 4つができる.index.htmlは邪魔になるので消しておく.

  3. public の下に,いま解凍してできた cdd, development-bundle, js を 3つとも丸ごとコピー

  4. jquery.linq.js ファイルの入手と組み込み


前もって決めておく事項


Rails プロジェクトの作成と JQuery UI ファイル, jquery.linq.js ファイルの組み込み

操作を簡単に行ないたいので Aptana Studio を使っていますが,Aptana Studio に固有の機能は使っていません.

  1. Rails プロジェクトの作成

    ◆ Aptana Studio 3 での操作手順(例)

    ◆ 端末での操作手順(例)

    rails new  -J -d sqlite3 
    

    ◆ 端末での操作手順(例2)

    rails new  -J -d sqlite3 -m http://datamapper.org/templates/rails.rb
    

    ここに登場するオプション

  2. コントローラの生成

    rails g controller main jssample
    

  3. vendor/Gemfile の末尾に 必要な gem を追記

    gem 'jquery-rails'
    gem 'haml-rails'
    gem 'rspec-rails'
    

  4. 必要な gem をインストールしたいので,bundle install の実行

    bundle install
    

  5. jQuery ファイルの生成

    rails g jquery:install 
    

  6. jquery.linq.js を使う. 先ほどのディレクトリ js の下にコピーする.


(オプション) Google の jsapi を使う場合

HTML ファイルのヘッダの中に次のように書く,という手段もある.


<script type="text/javascript" src="www.google.com/jsapi"></script>                                                         <script>                                                                                                                  google.load("jquery", "1.6.2");                                                                                         google.load("jqueryui", "1.8.14");                                                                              </script>    


JavaScript のサンプルプログラム

jQuery, jQuery UI, LINQ のダウンロードがうまく行ったことを確認したいので, JavaScript のサンプルプログラムを動作させてみます.

  • jssample.html.erb の作成

    ※ JQuery の機能も LINQ の機能を使わない単純な見本です.

    ◆ JavaScript の簡単なプログラム(ポップアップウインドウ)

    
    <?xml version="1.0" encoding="Shift_JIS"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
        <head>
    
            <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
            <meta http-equiv="Content-Style-Type" content="text/css" />
            <meta http-equiv="Content-Script-Type" content="text/javascript" />
            <meta http-equiv="MSThemeCompatible" CONTENT="yes" />
    
            <title>
                JavaScript Sample
            </title>
    
            <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery.ui.all.css" />
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
    	<script type="text/javascript" src="js/jquery.linq.min.js" type="text/javascript"></script>
    	<script type="text/javascript" src=//"maps.google.com/maps/api/js?sensor=false"></script>
        </head>
    
        <body>
        <h1>Main#act3</h1>
            <script type="text/javascript">
            <!--
            document.write("Hello World!!");
            // -->
            </script>
    
            <img src="/images/rails.png" id="img1" onDblClick="alert('double-click')"/>
    
        </body>
    </html>
    
    

  • サーバの起動

    rails s
    

  • ためしに動作させてみる.

    ◆ 動作結果の例

    Web ブラウザで,http://localhost:3000/main/jssample を開く