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

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

jQuery UI, LINQ のダウンロード
Rails プロジェクトの作成と JQuery UI ファイル, jquery.linq.js ファイルの組み込み

jQuery UI, LINQ のダウンロード

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

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

https://jqueryui.com

ダウンロードしたファイルを展開（解凍）．

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

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

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

http://linqjs.codeplex.com/ （現存しない）を開く
フォークされています: https://github.com/mihaifm/linq
「Downloads」をクリック
linq.js_ver2.2.0.2.zip をダウロード
ライセンス条項の確認（納得出来る場合のみダウンロード）
解凍

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

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

Rails プロジェクトの作成

◆ Aptana Studio 3 での操作手順（例）

◆ 端末での操作手順（例）

rails new  -J -d sqlite3

◆ 端末での操作手順（例2）

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

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

-J: prototype.js を使わない
-d sqlite3: データベース管理システムの指定
--m http://datamapper.org/templates/rails.rb: ActiveRecord ではなく DataMapper を使う
ActiveRecord では rake db:migrate, DataMapper では rake db:automigrate のようです

コントローラの生成

rails g controller main jssample

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

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

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

bundle install

jQuery ファイルの生成

rails g jquery:install

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 を開く

本サイトは金子邦彦研究室のWebページである．

資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには，「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明再配布や資料改変の際には，そのページをご確認ください．

サイトマップは，サイトマップのページをご覧下さい．本サイト内の検索は，サイト内検索のページをご利用下さい．

問い合わせ先：金子邦彦（かねこくにひこ） [image]

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