IBUSHIKIN: 10月 2010

2010-10-13

javascriptでinput textの内容を表示

[例]以下のテキストボックスに値(xxxx)を表示するとき。javascript文は以下のとおり。

<input id="store_longitude" name="store[longitude]" size="30" type="text" />

[javascript文]

 <script type="text/javascript"> 
 document.getElementById("store_longitude").value = xxxx;
 </script>

2010-10-11

google map マウスホイールで拡大縮小

[目的]google map において、マウスホイールで拡大縮小できるようにする。

以下より参照
GoogleMapsをマウスホイールで拡大・縮小できるようにする

map.enableScrollWheelZoom();

google map 緯度経度取得

[目的]google mapでクリック地点の緯度経度を取得する。

以下から引用
geekなページ

<!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>Google Maps JavaScript API Example - simple</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
        type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="map" style="width: 300px; height: 300px"></div>
    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(37.441944, -122.141944), 13);
    }

    GEvent.addListener(map, 'click', function(overlay, point) {
      if (point) {
        document.getElementById("show_x").innerHTML = point.x;
        document.getElementById("show_y").innerHTML = point.y;
      }
    });

    //]]>
    </script>

    <P id="show_x"></P>
    <P id="show_y"></P>

  </body>

</html>

railsでgoogle mapを表示

[目的]rails3.0でgoogle mapを表示する。
[環境]rails3.0 + ruby1.8.7

(1)プロジェクト作成
rails new googlemap

(2)コントローラ作成
rails g controller maps index

(2)index.html.erbを編集。

    <div id="map" style="width: 500px; height: 500px"></div>
    <script type="text/javascript">
    //<![CDATA[
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(38, 138), 5);
      map.disableDragging();
    }
    GEvent.addListener(map, 'click', function(overlay, point) {
      if (point) {
          alert("x = " + point.x + ", y = " + point.y);
          map.openInfoWindow(point,
          document.createTextNode("openInfoWindow Test"));
      }
    });
    //]]>
    </script>

(3)application.html.erbを編集。
script srcを追加。

<!DOCTYPE html>
<html>
<head>
  <title>Googlemap</title>
  <%= stylesheet_link_tag :all %>
  <%= javascript_include_tag :defaults %>
  <%= csrf_meta_tag %>
  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAABWYMASZTPMzQMXu2alSa6xTvcRCYKSpWpPqDL-sNMuxVdHFI_BTd8zF9kdpV97QhhvGd0NWsQckXsw"
      type="text/javascript"></script>
</head>
<body>

<%= yield %>

</body>
</html>

(4)サーバ起動
rails s

[関連エントリ]
GoogleMapでマッシュアップの練習（Rails編） #2

2010-10-09

file_columnでファイルのアップデート

[目的]画像のアップデート
[環境]Rails3.0, ruby1.8.7

(1)ImageMagickのインストール
　
sudo port install ImageMagick

--あとは、関連エントリのそのまま実行

(2)プロジェクト作成

rails new file_column_test

(3)file_columnプラグインインストール


 cd file_column_test
 rails plugin install git://github.com/tekin/file_column.git

(4)パッチ適用

vendor/plugins/file_column/lib/file_column.rb
Rails.rootを変更。


--- file_column.rb.orig 2010-09-28 00:54:44.000000000 +0900
+++ file_column.rb      2010-09-28 00:55:12.000000000 +0900
@@ -594,7 +594,7 @@
 
     # default options. You can override these with +file_column+'s +options+ parameter
     DEFAULT_OPTIONS = {
-      :root_path => File.join(RAILS_ROOT, "public"),
+      :root_path => File.join(Rails.root, "public"),
       :web_root => "",
       :mime_extensions => MIME_EXTENSIONS,
       :extensions => EXTENSIONS,

(5)Gemfile修正

gem 'rmagick', :require => 'RMagick'

(6)bundle installを実行

bundle install

(7)scaffold雛形作成
rails g scaffold Entry name:string image:string
rake db:migrate

(8)model修正
app/models/entry.rb



class Entry < ActiveRecord::Base
  file_column :image,
    :root_path => "#{Rails.root}/public/store",
    :web_root => "store/",
    :magick => {
      :versions => {
        :thumb => { :crop => "1:1", :size => "50x50" },
          :middle => "150x150>",
          :large => "480x480>"
      }
    }
end

(9)viewを修正。

app/views/entries/_form.html.erb
multipart、file_column_fieldに変更。


<%= form_for(@entry, :html => { :multipart => true }) do |f| %>
  <% if @entry.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@entry.errors.count, "error") %> prohibited this entry from being saved:</h2>

      <ul>
      <% @entry.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :image %><br />
    <%= file_column_field "entry", "image" %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

(10)view修正2
app/views/entries/show.html.erb
image_tagに変更。


<p id="notice"><%= notice %></p>

<p>
  <b>Name:</b>
  <%= @entry.name %>
</p>

<p>
  <b>Image:</b>
  <%= image_tag(url_for_image_column(@entry, "image", :middle)) if @entry.image %>
</p>


<%= link_to 'Edit', edit_entry_path(@entry) %> |
<%= link_to 'Back', entries_path %>

(10)view修正３
app/views/entries/index.html.erb
image_tagに変更。


<p id="notice"><%= notice %></p>

<p>
  <b>Name:</b>
  <%= @entry.name %>
</p>

<p>
  <b>Image:</b>
  <%= image_tag(url_for_image_column(@entry, "image", :middle)) if @entry.image %>
</p>


<%= link_to 'Edit', edit_entry_path(@entry) %> |
<%= link_to 'Back', entries_path %>

(11)サーバ起動
rails s

<関連エントリ>
篳篥日記　[Rails] ruby 1.9.2 + Rails 3.0 + file_column
http://d.hatena.ne.jp/hichiriki/20100927

2010-10-02

[Rails]migrationのやり方

(1)migrationファイルの作成
script/generate migration change_stores_latitude_to_float

(2)migrationファイルの修正

[コマンド一覧]
create_table(name, options)
drop_table(name)
rename_table(old_name, new_name)
add_column(table_name, column_name, type, options)
rename_column(table_name, column_name, new_column_name)
change_column(table_name, column_name, type, options)
remove_column(table_name, column_name)
add_index(table_name, column_name, index_type)
remove_index(table_name, column_name)

(3)migrate実行

[参考]
http://tech.feedforce.jp/railsmigration.html
http://ponk.jp/?p=2374