22種類の定番レイアウトを簡単に実装できるCSSフレームワーク『Primary』
「Primary」は22種類の定番レイアウトをフレームワークとしたスタイルシートをダウンロードできるサイト。予め定義されたスタイルに合わせてHTMLを作成していくだけで、以下のようなレイアウトを作成できるようになる。
たとえば、3ペイン(ヘッダ＋左メニュー＋コンテンツ)の場合、HTMLは以下のように書く。
<link href='Primary.css' rel='stylesheet' type='text/css' /> <div class=templateholder> <div class=Layout2_header></div> <div class=Layout2_1 ></div> <div class=Layout2_2 ></div> </div>
↓ダウロードはこちらから
■Primary
http://www.primarycss.com/
Rails無料PaaS「Heroku」を使ってWEBアプリを公開してみた
GAEなどもまだRubyでのサービスを開始していないが、ずいぶん前にブラウザでRailsアプリが構築できるといって話題になったHerokuが、これもまたずいぶん前に本格的にRailsのPaaSを始めていたらしいので今更ながら環境作りにトライしてみた。
■Heroku
http://heroku.com/
Ruby専用だけあってかサービスのプランもBlossom(桜)、Koi(鯉)、Ronin(浪人)、Fugu(河豚)、Zilla(ゴジラ)と日本由来(?)の名称となっている。（なんでSakuraじゃないのか？なぜSamuraiではなくRoninなのかはちょっと疑問だが・・・）
Herokuの特徴は以下のとおり
・Rails 1.2.x, 2.x and 3.0.0betaをサポート
・DBはPostgreSQL（無料版での全体の容量5MB）
・MySQLもオプションで可能（AmazonRDSとの連携のみ）
・データバックアップ(世代バックアップは有料)
・デイリーのCron利用可能(デイリー以下の周期は有料)
・SSLも可(独自ドメイン等にする場合は有料)
・CouchDBとMongoDBもアドオンで利用可
・全文検索はSolrをサポート
・Memcachedもサポート
・大量メール送信も可能
・そのほかにもアドオンが用意されている
など機能も満載で商用利用でも問題なさそうです。
※ちなみ共同購入クーポンの「ミナワリ」もHeokuを使って構築しているとか。http://www.publickey1.jp/blog/10/rorpaasheroku.html
■ミナワリ
http://www.minawari.jp/
では、そろそろ本題に・・・
Documentを見る限り以下のように
・gemでherokuコマンドツールをインストール
・heroku createでアプリを作成
・Gitでソースをアップロード
という感じで構築できるらしい。
ここではタイトルと本文を登録する程度の簡単なノートアプリを作ってみた。
■ユーザ登録する
http://api.heroku.com/signup
■Gitをインストール
以下からGitをインストール
Windows： http://code.google.com/p/msysgit/
Mac： http://help.github.com/mac-git-installation/
■gemでHerokuのコマンドツールをインストール
$ gem install heroku
■Railsのプロジェクトを作成（ローカル）
$ rails mynote -d postgresql
※Heroku側がPostgreSQLなので"-d postgresql"を付けてみたがなくても問題なさそう。
■共有リポジトリを作成
cd mynote $ git init $ git add . $ git commit -m "new app"
■SSHKeyを作成
Gitで接続する際にSSHKeyが必要なので作成する
メモ：ここでPuTTYgen.exeを使ってキーを作ってみたものの、アップロードすると「Fingerprint can't be blank」など以降の工程でエラーになって進めなかった。いろいろググッていたら、Windowsの場合、「GitBash.exe」の中にssh-keygenコマンドがあり以下のコマンドでキーを作ったらうまくいった。
$ ssh-keygen -C (Herokuに登録したメールアドレス) -t rsa
■「heroku create」でアプリを作成
heroku create Enter your Heroku credentials. Email: (Herokuに登録したメールアドレス) Password: Uploading ssh public key C:\Documents and Settings\Owner/.ssh/id_rsa.pub Creating hollow-sword-87..... done Created http://hollow-sword-87.heroku.com/ | git@heroku.com:hollow-sword-87.git Git remote heroku added
上記のように「heroku create (何も指定しない)」とすると、自動的にhollow-sword-87のようにランダムなアプリ名が割り当てられ、そのままドメインとされる。hollow-sword-87.heroku.com
「heroku create hogehoge」と指定すると、hogehoge.heroku.comとなる。
アプリ名は管理画面からでも変更可能。
管理画面にログインするとすでに作成されたアプリが表示されている。
■「git push」でローカルのソースをアップロード
$ git push heroku master
http://xxxx.heroku.com/ にアクセスしてpublic/index.htmlが表示された。
■次にDB接続を確認するためメモ機能をscaffoldで作成してみた
$ ruby script\generate scaffold note subject:string body:text
exists app/models/
exists app/controllers/
exists app/helpers/
create app/views/notes
exists app/views/layouts/
exists test/functional/
exists test/unit/
[f:id:nzm_o:20100811024308j:image]
create test/unit/helpers/
exists public/stylesheets/
create app/views/notes/index.html.erb
create app/views/notes/show.html.erb
create app/views/notes/new.html.erb
create app/views/notes/edit.html.erb
create app/views/layouts/notes.html.erb
create public/stylesheets/scaffold.css
create app/controllers/notes_controller.rb
create test/functional/notes_controller_test.rb
create app/helpers/notes_helper.rb
create test/unit/helpers/notes_helper_test.rb
route map.resources :notes
dependency model
exists app/models/
exists test/unit/
exists test/fixtures/
create app/models/note.rb
create test/unit/note_test.rb
create test/fixtures/notes.yml
create db/migrate
create db/migrate/20100809091958_create_notes.rb
■scaffoldでされたソースを再びアップロード
$ git add . $ git commit -m 'add new sources' $ git push heroku master
■heroku rakeコマンドにてテーブルを作成
$ heroku rake db:migrate (in /disk1/home/slugs/255381_50716a9_55a7/mnt) == CreateNotes: migrating ==================================================== -- create_table(:notes) -> 0.1196s == CreateNotes: migrated (0.1197s) ===========================================
※database.ymlは特に編集していなかったのだが問題なくmigrateできた。ここら辺の仕組みは別途調べようと思う。
http://xxxx.heroku.com/notes にアクセスして登録/変更/削除してみたが、問題なく動作した。
有料版はGAEに比べて若干高いが、開発合宿などでアプリを作ってサクッと公開したり、DBに付加をかけないマッシュアップ系アプリを公開したり、無料の範囲でもだいぶ利用価値が高いかもしれない。
今後、アドイン機能も少しずつ試していこうと思う。
おすすめ度の平均: 
内容が簡易で理解しやすい 簡潔でわかりやすい 網羅的でGit初心者にはお勧めRails+Gruffでグラフ画像を生成・表示させる
ちょっと仕事でグラフ表示が必要になったので、メモ。
前提としてRmagickがインストールされている必要がある。インストール方法は割愛。
Rmagickがインストールされたら、gemでGruffをインストール
$gem install gruff
※自分の環境を参考まで。
- ruby 1.8.7
- Rails 2.3.4
- rmagick (2.12.0)
- gruff (0.3.6)
ここでは、画像をローカル上に生成保存するのではなく、imgタグから指定できるよう画像のバイナリをsend_dataでレスポンスする方法とする。
Controller class GruffController < ApplicationController require 'gruff' def image g = Gruff::Line.new 500 g.title = "My Graph" g.theme_37signals g.data("data1", [1, 3, 3, 6, 4, 3]) g.data("data2", [7, 8, 7, 10, 8, 9]) g.data("data3", [1, 2, 3, 5, 9, 8]) g.data("data4", [9, 9, 8, 9, 10, 9]) g.labels = {0 => '2010/01', 2 => '2010/03', 4 => '2010/05'} send_data(g.to_blob, :type => 'image/png', :disposition=>'inline') end end
View
<%= image_tag url_for(:controller => 'gruff', :action => 'image') %>
こんなグラフが表示される
解説--
はじめにグラフオブジェクトのインスタンスを生成(引数は横幅)
Gruff::Line.new 500
- 折れ線グラフ:Line
- 円グラフ：Pie
- 棒グラフ：Bar
- 横棒グラフ：SideBar
など、詳しくは、Documentを参考⇒http://gruff.rubyforge.org/
背景色やグラフの色はテーマ(theme)としては以下が用意されている。
g.theme_37signals g.theme_keynote g.theme_rails_keynote g.theme_odeo g.theme_pastel g.theme_greyscale
テーマ以外の自分で背景やグラフ線の色を変更したい場合は以下のようにする
theme = {
:colors => ["#000", "#111" , "#222", "#333", "#444", "#555"],
:maker_color => "#999",
:font_color => "#000",
:background_colors => %w("#FFF" "#CCC")
}
g.theme = theme
titleなど日本語フォントを利用する場合は、フォントファイルへのパスを指定する
g.font="/usr/share/fonts/sazanami-fonts-gothic/sazanami-gothic.ttf"
■Gruff Graphs for Ruby
http://nubyonrails.com/pages/gruff
■Gruff Documentation
http://gruff.rubyforge.org/
Railsレシピブック 183の技
posted with amazlet at 10.07.25
bit.lyでURLを短縮化してからtweetするブックマークレットを作る
高速コーディングが可能なVim+Zen-Codingのメモ http://d.hatena.ne.jp/nzm_o/20100605/1275747401
ではなく、
高速コーディングが可能なVim+Zen-Codingのメモ http://bit.ly/xxxxx
とURLを短縮化しつつtweetするようなブックマークレットを作る方法。
▼作成方法
APIを利用するため、まずbit.lyでアカウントを作成
http://bit.ly/a/sign_in
アカウントを作成すると、API Keyが発行されるので、これをメモっておく。
例）アカウントID : hogehoge
例）API Key： R_6819xxxxxxxxxxxxxxxxxxxxxxx3bc4
以下のAPIを呼ぶと短縮化されたURL（赤字部分）がレスポンスされる
レスポンス(json)
callback({ "status_code": 200, "status_txt": "OK", "data": { "long_url": "http:\/\/yahoo.co.jp\/;", "url": "http:\/\/bit.ly\/dafBEu", "hash": "dafBEu", "global_hash": "92Bolp", "new_hash": 0 } })
上記を踏まえ次のようなスクリプトを改行なしでブックマークに登録すれば完成。
javascript: var i='(アカウントID)'; var k='(API Key)'; var d=document; var h=location.href; var u='http://api.bit.ly/v3/shorten?format=json&callback=callback&login='+i+'&apiKey='+k+'&longUrl='+encodeURIComponent(h); st=d.createElement('script'); st.type='text/javascript'; st.src=u; d.body.appendChild(st); function callback(r){ t=d.title; location.href='http://twitter.com/home?status='+encodeURIComponent(t+' '+r.data.url); }
※上記のjavascriptのアカウントIDとAPI Keyを書き換えてお使いください。
できる100ワザ ツイッター Twitterパーフェクトテクニック (できる100ワザシリーズ)
posted with amazlet at 10.07.16
おすすめ度の平均:
基本は全て学べますので、超おすすめ！IE6で透過png画像ファイルを表示させるJavascriptライブラリ「DD_belatedPNG」
IE6以下は透過(アルファチャネル)PNGファイルに対応していなく、きれいに透過されない。
一般的にはDirectXのAlphaImageLoaderを使ってこの問題を解決するのだが、表示が遅くなる...background:repeatに対応していない...など制約があるらしい。
IE6だと透過部分がグレーで表示され透過されない
「DD_belatedPNG」というJavascriptライブラリは、AlphaImageLoaderではなくVMLという言語を用いることで、高速かつ制約なしでPNG画像を透過できる。
使い方は簡単。
次にHTMLに以下のように透過させたいエレメントのセレクタをDD_belatedPNG.fix('xxx');で指定する
<!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('.png_bg'); </script> <![endif]-->
CSSのようにidや(カンマ区切りで)複数の指定ができる。
DD_belatedPNG.fix('#png'); //idを指定
DD_belatedPNG.fix('.png1, .png2, .png3'); //複数指定
■DD_belatedPNG
http://www.dillerdesign.com/experiment/DD_belatedPNG/
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
posted with amazlet at 10.07.01
Inkscapeの文字化けを直す
Inkscapeの文字化けを直す方法（メモ）
C:\Program Files\Inkscape\etc\pango\pango.aliasesを下記に修正。
courier = "courier new,ms gothic" #Tahoma = "Tahoma,browallia new,mingliu,simhei,gulimche,msgothic,latha,mangal" Tahoma = "Tahoma,MS UI Gothic,browallia new,mingliu,simhei,gulimche,latha,mangal" sans = "arial,browallia new,mingliu,simhei,gulimche,ms gothic,latha,mangal" serif = "times new roman,angsana new,mingliu,simsun,gulimche,ms gothic,latha,mangal" monospace = "courier new,courier monothai,mingliu,simsun,gulimche,ms gothic,latha,mangal"
C:\Program Files\Inkscape\etc\gtk-2.0\gtkrc
gtk-icon-sizes="gtk-menu=14,14:gtk-small-toolbar=16,16:gtk-large-toolbar=24,24:gtk-dnd=32,32"
gtk-toolbar-icon-size=large-toolbar
gtk-button-images=1
style "msw-default"
{
GtkWidget::interior_focus = 1
GtkOptionMenu::indicator_size = { 9, 5 }
GtkOptionMenu::indicator_spacing = { 7, 5, 2, 2 }
GtkToolbar::shadow-type = etched-in
GtkHandleBox::shadow-type = etched-in
GtkSpinButton::shadow-type = in
GtkComboBox::add-tearoffs = false
GtkTreeView::allow-rules = 0
GtkTreeView::expander_size = 11
font_name="Tahoma 9"
engine "wimp"
{
}
}
class "*" style "msw-default"
style "my-font"
{
# フォントサイズ（ツールチップ以外）
font_name="Tahoma 10"
}
widget "*" style "my-font"
GIMPも同様。
Inkscapeスーパーテクニック―無料で使える高性能ベクタードローツール (100%ムックシリーズ)
posted with amazlet at 10.06.27
おすすめ度の平均: 
評価したい なかなか
初心者にはこの本だけでは基礎から応用まで完全習得は無理！
解説書とは？ テクニック満載で分かり易いプロジェクトマネージャーにおすすめする会社のPCに入れておくと作業効率がアップするフリーソフト(Win)
ここ数年で会社のPCには必ず入れるようになったフリーソフトをご紹介。
資料を作ったり、メールを打ったりと忙しいPMの方には、多少なりとも作業効率UPとなるはずなのでオススメ。
ソフト選びのポイントは、
・起動がはやい
・動作が軽い
・作業効率が上がる
を追求した結果残ったファイルたち。
※ブラウザのエクステンションやEvernoteなどはあちこちで紹介されているし、
そもそも仕事中のブラウジング自体"悪"ではないかと思っているので、あえて除く。
■ランチャー/ファイラ
Orchis
http://www.eonet.ne.jp/~gorota/
動作が軽い上、カスタマイズ性・操作性に富んだランチャー。
あらかじめドラック＆ドロップで登録したアプリをホットキーで登録できる。
自分の場合はAlt+Qでランチャー起動、"O"でOutolook、"C"でChromeといった感じでアプリを立ち上げている。
Orchisにはアプリだけではなく、フォルダも登録できるのでファイラとしても利用でき、←→キーでフォルダ階層を行ったり来たり出来る。
右クリック、コピー＆ペーストにも対応している。
■カレンダー
j-calender
http://www.j-flat.com/software
デスクトップに貼れるシンプルな常駐型カレンダーアプリ
「じゃあこの資料いつまでに作る？」ってなったときにスッとカレンダーが見れる手軽さがGood！！
シンプルだけど、色や表示のカスタマイズができるので、
壁紙に違和感なく置いておけるのが個人的に良かったりする。
■メモ帳
EssentialPIM
http://www.essentialpim.com/
打ち合わせ等でのメモは「さくらエディタ」や「Vim」などだったが、ファイルでの管理となり面倒くさい、図や画像をメモに添付できないというのが不便で、Evernoteなんかも使ってみたものの、テキストエディタなどと比べて起動や若干動作が重いのがストレスで両方を解決してくれるツールを探していたところ見つけたフリーソフト。
メーラーやスケジュール帳、TODOなどを持つ多機能ソフトだが、主にメモ帳として使用している。
メモを階層的に管理でき、リッチテキストで書き込めるので画像などもメモの中に残せるのが便利
自分の場合、ホワイトボードに書いた図をiPhoneで撮って、メモにそのまま貼って議事メモを残している。
■ファイル検索
Everything
http://www.voidtools.com/
Googleデスクトップのようなインデックス型ファイル検索ソフト。
なにより軽量で、動作が速い。Googleデスクトップのようにファイル内検索はできないもののファイル名だけで十分な人にはこっちの方が良いかも。
HTTPサーバとしても動作し、他のPCから検索することもできるので、共有ファイルサーバなどにインストールして利用することもできる。
■画面キャプチャー
WinShot
http://www.woodybells.com/winshot.html
画面キャプチャーを撮るときに使用しているソフト。
選択範囲のみをクリップボードに保存できるので、Webページのキャプチャーをコピーしてエクセルやパワポに貼るといった作業に便利。
■マウス操作支援
かざぐるマウス
http://www.staticflower.net/
IEやChromeなどの各種ブラウザ、エクスプローラなどでマウスジェスチャーが使えるようになるソフト。
Firefoxだけ動作をOFFにして、マウスジェスチャーはFirefoxのエクステンションまかせることもできる。
会社のPCがIEしかダメなので、非常に重宝している。
■キーボード入力/クリップボード操作支援
クリップNOTE
http://www.ost-net.com/clipnoteA/clip01.html
登録した定型文をShift2回連打(変更可能)で入力できる
定型文の中に毎回入力をしたい箇所や日付などマクロ変数を登録することができる。
メールの挨拶文、議事録のヘッダ(固定文言や日付など)入力などに利用している。
■ファイルコピー支援
TeraCopy
http://www.codesector.com/teracopy.php
独自の方式によりWindows標準のファイルコピーよりも高速にコピーが行えるツール。
大きなファイルを移動、コピーすることが多い人はこれを入れておくと、通常の移動やコピーがTeraCopyに置き換わり、高速になる。
■印刷支援
FinePrint
http://www.nsd.co.jp/share/fineprint/
印刷コストの削減を目的とした支援ソフト。インストールするとプリンタドライバとして認識され、FinePrintを介して印刷することで、複数ページ印刷やconfidential(社外秘)の印字、空白ページの削除など、印刷前にさまざまな編集を加えることができる。
試用版の場合、印刷するとフッタに製品名がでるが、社内利用であれば問題ないかと思う。
自分の場合は、社外の場合でも資料程度の場合はFinePrintで印刷したものを使っている。
出来ることなら、会社や所属部署に導入を提案してみるのも良いかもしれない。
Windowsフリーソフト大全集 2010年度版 (100%ムックシリーズ)
posted with amazlet at 10.06.27
おすすめ度の平均:
斜め読みしておくと、いざという時に役立つ本