Paperclipでadd_attachmentする時にafterを指定したい

これを実行すると

class AddAttachmentToUsers < ActiveRecord::Migration
  def change
    add_attachment :users, :avatar, after: 'name'
  end
end

usersテーブルに下の列が追加されてしまいます。

• avater_file_name
• avater_content_type
• avater_file_size
• avater_updated_at
• {:after=>"name"}_file_name
• {:after=>"name"}_content_type
• {:after=>"name"}_file_size
• {:after=>"name"}_updated_at

add_attachmentの実装を見てみると、こんな感じ。

# gems/paperclip-3.5.2/lib/generators/paperclip/paperclip_generator.rb

module Paperclip
  module Schema
    COLUMNS = {:file_name    => :string,
               :content_type => :string,
               :file_size    => :integer,
               :updated_at   => :datetime}

    # 間省略

    module Statements
      def add_attachment(table_name, *attachment_names)
        raise ArgumentError, "Please specify attachment name in your add_attachment call in your migration." if attachment_names.empty?

        attachment_names.each do |attachment_name|
          COLUMNS.each_pair do |column_name, column_type|
            add_column(table_name, "#{attachment_name}_#{column_name}", column_type)
          end
        end
      end
               
    # 間省略

    end
  end
end

オプションを指定することができないので、仕方なくこうやりました。

class AddAvaterToUsers < ActiveRecord::Migration
  def change
    Hash[*Paperclip::Schema::COLUMNS.to_a.reverse.flatten].each_pair do |column_name, column_type|
      add_column(:users, "avater_#{column_name}", column_type, after: 'name')
    end
  end
end

カラムのhashの定義は直接書いてしまってもよかったかも。

連休を使ってJavaScriptまわりを勉強する

underscore.js

メソッド名がRubyっぽいJavaScriptのライブラリくらいの認識しか無かったが、
使ってみるとこれは相当便利。
今まで使っていなかった事を本気で悔やみました。

Underscoreドキュメント日本語訳

便利機能満載のライブラリUnderscore.js - にのせき日記

Underscore.js入門 (全10回) - プログラミングならドットインストール

Backbone.js

JavaScriptで大規模なアプリケーションを作成するためのフレームワーク。
今回勉強する一番の目的。

Backbone.js 日本語リファレンス

Backbone.js入門 – 初学者の為のロードマップ | mawatari.jp

Backbone.js入門 (全22回) - プログラミングならドットインストール

実践！Backboneの記事一覧 - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル

この本もBackbone.jsの作法みたいなものが分かってよかったです。
Amazonでは低評価の方も多かったのですが、ブログで高評価の方も多くいたので読んでみて正解でした。

Backbone.jsガイドブック

JavaScript全般

最強オブジェクト指向言語 JavaScript 再入門！

勉強を終えてみて

JavaScriptの勉強を始めたはずなのに、結局周辺知識のほうが収穫があったかも。

オマケで学んだこと

• デザインパターンのMediatorやObserver(Pub/Subモデル含む)
• Comet、WebSocketなどのPush型Webアプリケーションに関するもの
• nodebrewを使ってnode.jsの環境構築と簡単なアプリ作成

特にデザインパターンは何度本を読んでも頭に入らず困っていました。ところが最近使われている実例を見ることが多くて、ソースを読むとあぁそういうことかとすぐ理解できる。
やっぱりいろんなプロダクトのコードを読むことが大事だなと改めて実感しました。

lazy_high_chartsでlabelsにformatterを使う場合

こんな感じにすればOK

f.yAxis[ {:title => {:text => '降水量'}, :labels => {:formatter => %q|function(){return this.value +'mm';}|.js_code}} ]

参考
:formatter not working for dataLabels · Issue #73 · michelson/lazy_high_charts · GitHub

Rails4でActiveAdminを使ってみる

Railsで簡単に管理画面を作れる系のgem。

Ruby Toolboxを見たところActiveAdminが一番人気があるっぽい。
使ったことがあるRailsAdminにしようかと思ったが、せっかくなので試してみた。

gregbell/active_admin · GitHub

Gemfileに記入

RubyGems.org のはバージョンが古いようで（2013/12/30時点）
依存性チェックで引っかかったため、githubからソースを持ってくる。

gem 'activeadmin', github: 'gregbell/active_admin'

セットアップ

ジェネレータを実行。

rails g active_admin:install

DB作成してサーバ起動。

rake db:migrate
rails s

http://localhost:3000/admin にアクセスするとログイン画面が表示される。

デフォルトユーザーでログイン。

• User: admin@example.com
• Password: password

ダッシュボードが表示される。

modelを追加

サーバを止めてmodelを作成。

rails g model building name:string address:string
rake db:migrate

ActiveAdminの画面を追加。

rails generate active_admin:resource building

管理画面から編集可能なパラメータを設定。

# app/admin/building.rb

ActiveAdmin.register Building do
  permit_params :name, :address
end

サーバを起動するとメニューにBuildingが追加されている。

第2回アフィリエイトソンに参加してきました

6月に行われたアフィリエイトソンの結果が発表され、なんと準優勝しました！

商品の世界のビール詰め合わせが届いたのですが1ヶ月半くらいお預け。。。
お酒が解禁されたら飲みますのでビール好きの方はご連絡ください。

サイトはこちら
楽天で高評価のワインだけを狙いうち！ | 高評価ワインならPocketSommelier(ポケットソムリエ)

ソースこちら
zakihaya/pocket_sommelier · GitHub

アクセス数、売り上げなど

せっかくなのでどれくらい売り上げがあったか公開しようと思います。
問題ありそうだったらどなたかご連絡ください。

7月分

100円も入ってくればいいかなと思っていたので、上出来なのではないかと。
ただ7/22が集計の締めきりだったのに、、、7/26の分が悔しい！
これ入ってたら優勝できたんじゃないかと思ったり。

8月分

初速が意外と良かったので2ヶ月目はもっと伸びたのでは・・・

見事に0円でした！
ちなみにこの後はずっと売り上げ0です。

原因は明らかで、8月に入ってから何もいじらなくなってしまったんですねー。
7月中はデータ更新したりtwitterで宣伝してたりしたので、やっぱ日々の積み重ねが大事なんだなーと実感。

次回もあったらまた参加してみようと思います。

hamlで行末に改行を表示しないようにする

タグの周囲の改行を表示しないようにするには > を使う。
タグ内のスペースなどを除去する場合は < を使う。

何もしない書き方

haml

%div
  %span
    a

html

<div>
  <span>
    a
  </span>
</div>

> を使う

haml

%div
  %span>
    a

html

<div><span>
    a
  </span></div>

< を使う

haml

%div
  %span<
    a

html

<div>
  <span>a</span>
</div>

参考
http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_

Webサイトにストリートビューを表示する

どんどん便利になっていくなぁ。

【仕様】
#mapAddressに住所が入っている
#gMapに地図を表示する
#gViewにストリートビューを表示する

var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': $('#mapAddress').val(),'region': 'jp'},
  function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      // 緯度・経度取得
      var latlng=results[0].geometry.location;
      // 地図のオプション設定
      var mapOptions = {
        zoom: 16, /*初期のズーム レベル */
        center: latlng, /* 地図の中心地点 */
        mapTypeId: google.maps.MapTypeId.ROADMAP /* 地図タイプ */
      };
      // 地図表示
      var map=new google.maps.Map(document.getElementById('gMap'), mapOptions);

      // 地図のマーカーオブジェクト 
      var marker = new google.maps.Marker({
        position: latlng, /* マーカーを立てる場所の緯度・経度 */
        map: map /*マーカーを配置する地図オブジェクト */
     });

      // ストリートビュー表示
      var svp = new google.maps.StreetViewPanorama(
        document.getElementById('gView'),{
          position : map.getCenter()
        }
      );

      // ストリートビュー調整
      var nearestLatLng = null, nearestPano = null;
      var client = new google.maps.StreetViewService();
      var radius = 100;
      client.getPanoramaByLocation(latlng, radius, function(result, status) {
        if (status == google.maps.StreetViewStatus.OK) {
          var location = result.location;
          nearestLatLng = location.latLng;
          svp.setPosition(nearestLatLng);
        }else{
          //近くにストリートビューがない場合表示箇所隠す
          document.getElementById("gView").style.display = 'none';
        }
      });
    }
  }
);

head内にこれを入れる。

<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで