2008年8月29日金曜日

Thumbnail Generator: 好きなサイズのサムネイルを生成するジェネレーター



Thumbnail Generator
(igen.appspot.com)

画像の一部(例えば顔のみ)を切り出して(crop)、サイズを変更する(resize)ジェネレーターです。

登録不要かつ無料でご利用いただけますが、Googleのアカウントをお持ちの方はログイン(sign in)していただくと画像がサーバーにストックされますので、後からもう一度サムネイルを作り直しやすくなっています。アップロードされた画像は他人に見られることはありません。

日本人はあんまり自分の素顔をネットにさらしたりしないけど、アメリカ人はブログとかSNSとかtwitterでバンバンさらしてますよね。そういう人たちに使ってもらえるかなあと淡い期待を込めて…、というのは建前で、Google App Engineimages APIを使ってみたくて習作的に作りました。
ちなみに、Mac & Firefoxでしか動作確認をしていないという超強気仕様です。

参考というかネタ元はこちら
PHP & jQuery image upload and crop

Javascript部分はjQueryを使っています。

使用しているjQueryのプラグイン

jQuery Form Plugin
Ajaxで画像をアップロードするのに使用

imgAreaSelect
画像の一部を選択するのに使用

恥ずかしながらファイルのアップロードをAjaxで実行するのがこんなに面倒だとは思いませんでした。(プラグインだとラクチン)
jQuery Form Pluginのソースをざっと見ると、iframeを使ってたりけっこう無茶をしてるみたいです。

2008年8月20日水曜日

[Ruby on Rails] attachment_fuで参考になりそうなリソースをざっくりまとめ

attachment_fuは画像関係をムニャムニャする時役に立ちそうなプライグイン。

基本

ファイルアップロードプラグイン attachment_fu

File Upload Fu


ファイル名/ディレクトリ名の変更

How to customize attachment_fu file names

更新

Getting attachment_fu to play nice with acts_as_versioned

attachment_fu - update image leaves old database records

その他

Cropped thumbnails in attachment_fu using mini_magick

attachment_fu - more then one attachment in model?

2008年8月7日木曜日

[Ruby on Rails] 数字を整形する便利なViewヘルパー

意外と知られていない(?)便利なヘルパーです。
うっかり車輪の再発明をしそうになったのでメモ。

Module ActionView::Helpers::NumberHelper
(http://api.rubyonrails.org)

number_to_currency(number, options = {})
通貨のフォーマットに変換。($13.65)

オプション
:precision - 小数点以下何桁まで表示するか (デフォルト 2)
:unit - 通貨の単位 (デフォルトは"$")。ちなみに円マーク(¥)を半角にすると色々面倒なので全角にするが吉。
:separator - ユニットのセパレーター (デフォルト ".")
:delimiter - 桁が3つ繰り上がるごとの区切り文字(デフォルト ",")
:format - 出力される文字のフォーマット (デフォルト "%u%n") %uは通貨の単位 %nは数字部分


number_to_currency(1234567890.50)                    # => $1,234,567,890.50
number_to_currency(1234567890.506) # => $1,234,567,890.51
number_to_currency(1234567890.506, :precision => 3) # => $1,234,567,890.506
number_to_currency(1234567890.50, :unit => "£", :separator => ",", :delimiter => "")
# => £1234567890,50
number_to_currency(1234567890.50, :unit => "£", :separator => ",", :delimiter => "", :format => "%n %u")
# => 1234567890,50 £


number_to_human_size(size, precision=1)
バイトサイズを人間に理解しやすい形式にフォーマットを変換します。(例えば、1500 -> 1.5KB)
ファイルのサイズをユーザーに知らせる時などに便利なメソッドです。数字に変換できない場合はnilを返します。precisionパラメーターで小数点以下何桁まで表示するか指定できます(デフォルトは1)。


number_to_human_size(123)           # => 123 Bytes
number_to_human_size(1234) # => 1.2 KB
number_to_human_size(12345) # => 12.1 KB
number_to_human_size(1234567) # => 1.2 MB
number_to_human_size(1234567890) # => 1.1 GB
number_to_human_size(1234567890123) # => 1.1 TB
number_to_human_size(1234567, 2) # => 1.18 MB
number_to_human_size(483989, 0) # => 4 MB


number_to_percentage(number, options = {})
数字をパーセンテージのフォーマットに変換します(例 65%)。

オプション
:precision -小数点以下何桁まで表示するか (デフォルト 3)
:separator - ユニットのセパレーター (デフォルト ".")


number_to_percentage(100)                         # => 100.000%
number_to_percentage(100, :precision => 0) # => 100%
number_to_percentage(302.24398923423, :precision => 5)
# => 302.24399%


number_to_phone(number, options = {})
アメリカの電話番号のフォーマットに変換します。
詳細は割愛。

number_with_delimiter(number, delimiter=",", separator=".")
3桁ごとに区切り文字を挿入します(例 12,324)

オプション
delimiter - 区切り文字(デフォルト ",").
separator - ユニットのセパレーター (defaults to ".").


number_with_delimiter(12345678)       # => 12,345,678
number_with_delimiter(12345678.05) # => 12,345,678.05
number_with_delimiter(12345678, ".") # => 12.345.678
number_with_delimiter(98765432.98, " ", ",")
# => 98 765 432,98


number_with_precision(number, precision=3)
小数点以下何桁まで表示するか。


number_with_precision(111.2345)     # => 111.235
number_with_precision(111.2345, 2) # => 111.23
number_with_precision(13, 5) # => 13.00000
number_with_precision(389.32314, 0) # => 389

2008年8月4日月曜日

猿真似から入る人にはApp Galleryみたいなサイトがあると刺激になるよね

せっかくGoogle App Engineで作ったんだからApp Galleryで公開してみようってことで、ListCampをApp Galleryに登録してみました
(App GalleryというのはGoogle App Engineで作られたアプリのギャラリーです。)
登録といってもわずらわしいことは何もなくて、フォームに項目を記入して送信すれば審査もなくそのまま掲載してくれます。

このApp Garelley、眺めるだけでもけっこう刺激になります。
個人の手作り感がダイレクトに伝わってくるサイトが多いので「これなら自分でも作れそう」と変な自信が湧いてきたり。
トップページがエラー丸見え(!)になってるサイトがちらほらあるのはご愛嬌。
個人が作ったwebアプリをこうしてまとめて見ることができるサイトって他にないですかね?

Googleでちょろっと調べたらSimple Sparkというサイトを見つけました。
発見した時点で1万点弱のwebアプリが登録されていました。
ざっと見た所、個人が作ったサイトは少なくて、企業が金と手間をかけて作ったようなサイトが多い印象。
webアプリケーションであるなら誰でも登録できるようですが、掲載には審査があるみたいです。

2008年8月2日土曜日

ListCamp: リストを作って情報を共有するwebサービス


新しくWebサービスを作ったのでご紹介。

ListCamp
(listcamp.com)

「これははずせないFirefoxのアドオン」
「ロック史上の隠れた名盤」
のようなリストを作って情報を共有できるサービスです。
投票機能があってコメントも付けられるので
「好きな曜日は?」
「オバマとマケインどっちに投票する?」
のようなアンケートぽい使い方もできます。

ちなみにGoogle App Engine(GAE)で作った初めてのアプリです。
実はGAEどころかDjangoをいじるのも初めて(!)、Pythonを書くのも初めて(!!)、というわけでけっこう四苦八苦しましたが、一気呵成に仕上げた感じです。

2008年8月1日金曜日

Ruby on Rails + jQuery + Ajax で動的にページの一部を更新する

例えばTwitterでブラウザからつぶやきを投稿すると、ページを再読み込みしないで投稿したつぶやきだけが動的に追加されます。
あんな感じの処理をRails + jQueryで書いてみたので、そのメモをば。
Twitterのようなブログ系のアプリを想定しています。

大まかな流れ

1. フォームに記入された入力値をAjaxでサーバーに送信。
2. 入力値を検証。問題がなければ成功フラグを、問題があればエラーフラグをJSONでクライアントに返す。
3. 問題がなければJavascriptで新しい項目を追加。

Ajaxでページの一部を動的に更新する場合は普通こんな流れになると思います。1と3がクライアント(ブラウザー)サイド、2がサーバーサイドの処理です。

1. フォームに記入された入力値をAjaxでサーバーに送信

index.html.erb (railsのview)

<% form_for @post, :html => {:onsubmit => "return save(this);"} do |f| %>
<%= f.text_area :body, 'cols' => 40, 'rows' => 5 %>
<%= f.submit "投稿" %>
<div id="post_status" style="display:none;"></div>
<% end %>

<%div id="posts"%>
<%= render :partial => "post", :collection => @posts %>
<%/div%>

new.html.erbのような投稿専用のviewを用意しないで、ブログの一覧を表示するviewにフォームを設置します。なぜって?そうしなきゃAjaxで投稿するメリットがありませんから。

まずformのonsubmitを指定します。
もちろんjQueryの$(document).ready()で設定することも可能です。
また、送信のステータスを表示するDIV要素を仕込んでいます。

render :partialで_post.html.erb(記事部分)をレンダリングします。:collectionを指定することで@postsの中身をループ処理することができます。この部分はこの一連の処理の隠れたキモになるので注意。

_post.html.erb
<div class="post">
<%=h post.body %>
</div>

partialのviewには記事ひとつ分の記述をします。

Javascript
function save(f){
$.ajax({
url: $(f).attr('action'),
type: 'POST',
dataType: 'json',
timeout: 1000,
data : $(f).serialize(),
beforeSend : function(){ $('#post_status').html('送信中...').fadeIn(200); },
error: function(){alert('Error Occured');},
success: function(obj){
//通信が成功した場合の処理
}
});
return false;
}

saveはform要素を引数にとる関数です。
jQueryのserialize()を使ってフォームのデータをシリアライズ(a=1&b=2の形式)しています。
ちなみにserializeArray()という似たようなメソッドがありますが、こちらはフォームの入力値をハッシュ({a:1, b:2}の形式)にしてくれます。

2. サーバーサイド(Rails)の処理
モデルのバリデーション等はここでは省略します。

posts_controller.rb
def create
return redirect_to '/404.html' unless request.xhr?
post = Post.new(params[:post])
if post.save
html = render_to_string :partial => "post", :collection => [post]
render :json => {:success => 1, :html => html}
else
render :json => {:error => post.errors}
end
end

とりあえずAjax以外のアクセスは弾くという前提で。
return redirect_to '/404.html' unless request.xhr?
と書くと、Ajax以外のアクセスを404.htmlにリダイレクトしてくれます。

render_to_stringがこの一連の処理のキモかもしれません。というかこのメソッドを使わないとJavascirptで一生懸命DOMを書いたりしなければならなくなるでしょう。
さきほど作ったindex.html.erb内のrender :partialで指定したのと同じpartialテンプレート(_post.html.erb)をここで指定していることに注目してください。
記事の中身をpartialでレンダリングすることで、viewを使い回すことができます。
:collectionにpostを配列に入れて渡していることも注意。

3. 新たに投稿された記事部分を更新する

Javascript
function save(f){
$.ajax({
[中略]
success: function(obj){
//通信が成功した場合の処理
if(obj.error){
var html = '';
$(obj.error).each(function(){ html += this[1] + '<br />'; });
$('#post_status').text(html).css(color, 'red');
}else if(obj.success){
$('#post_status').text('正常に登録しました').css(color, 'green');
$('#posts').append(obj.html);
}
}
});
return false;
}

通信や入力値に問題がなければ、htmlを描画します。obj.htmlにはrender_to_stringでレンダリングしたhtmlが丸ごと格納されているので、後はそれをしかるべき場所に挿入するだけです。