2012年12月31日月曜日

textmateのビルドからはじまるミステリーツアー kindle Paperwhite設定編3

前回は辞書の使い方とソーシャルメディアの連携を行いました。
今回は、その他の操作です。

スクリーンショットを取る

  • 右上と左下を同時にタップ、もしくは左上と右下を同時にタップ
  • ルートディレクトリにPNGファイルが生成
保存した画像

画像はUSBでkindleをパソコンに繋いで取り出します

自費出版

Kindle自費出版ガイドが100円で購入できるので、購入してみるといいと思います。

「どうせ、本なんて書かへんし〜」なんて思っている人も、読んどきましょう。
どんな才能が眠っているかなんて、誰にもわかりません。本当にすごい時代になったと思います。

私も一度技術系の電子書籍を出してみたいと思います。そのときはまた報告しますね。

以上でkindle設定編は終わりです。
google musicの設定はまた別の機会にやります(ごめんなさい)

ご挨拶

今年も一年ありがとうございました。
不定期な更新なのに一日300-400くらいの方が訪問してきてくれているようで、とっても励みになります。

来年は今年以上に更新できるように頑張ります。
それではみなさん、よいお年を

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

textmateのビルドからはじまるミステリーツアー kindle Paperwhite設定編2

さて、前回はkindle Paperwhiteで本を購入する流れを説明しました。
続いて、辞書の使い方です。

kindleで本を読む時、あなたは辞書やネットで調べる必要はありません。
これまでは、わからない単語や用語をメモして、あとで詳しく調べるという人も多かったでしょう。
kindle Paperwhiteでは、付属している辞書を使えばOKなのです。

まじすごくない?(キムタク風)

辞書の使い方

  • 本を開いて読む
  • 知らない意味の単語にタップ
  • 単語がマークされ、ポップアップで意味を表示

直感的に操作できます。
特に、洋書を読む時に便利です。これはやばい。文明の利器最高。

ソーシャルメディア連携

ソーシャルメディアとも連携できます。 個人的には不要な機能なのですが、設定だけしておきます。

  • 設定タップ
  • 読書オプションタップ
  • ソーシャルネットワークタップ

twitterとfacebookにアカウントと紐付けができるので入力します。
あと、名前も変更しておきましょう。リンクに本名は嫌でしょう。シャイな日本人としてはw

ツイートする

  • 本を開く
  • 文字(文章)を選択
  • ツイート入力
  • シェアを選択

twitterにログインして確認してみてください。ツイートされているはずです。
そのうえ、kindleのリンクまで作成されています。アフィリエイトの形も変わってくるでしょうね。

Kindleのリンクは以下にようなページで表示されます

My Kindle

どういう本を読んでいるのか一発でわかりますね。

まだ続くよ!

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年12月30日日曜日

textmateのビルドからはじまるミステリーツアー kindle Paperwhite設定編

さて、数週間前に購入したものの、忙しさにかまけてただPDFを見るだけで放置していたKindle Paperwhiteの設定をおこなっていきます。

環境

  • MacOS Mountain Lion
  • Kindle Paperwhite wifi

購入可能に設定(Amazonギフト券の登録)

まずは本を購入できるようにします。
ここでは、Amazonギフト券の登録を行います。
実は私、ituneやamazonでは極力クレジットカードを利用しないようにしているのです。(散財防止のため)
なので、ここではアマゾンギフト券を利用して物品を購入します。

手順

  • amazonにアクセス
  • サインイン
  • アカウントサービス画面へ遷移
  • アカウントに登録する画面へ遷移して、ギフトコードを入力
  • 残高が更新されるのを確認

アドレス帳と1-Click設定の変更

kindleで本を購入するには、1-Click設定にしないといけません。
以下、手順です。

  • 1-Click設定の変更クリック
  • 右横の【1-ClickをONにする】ボタンを押します。(住所の設定が必要)


【1-ClickをONにする】ボタンを押すと、

****さんの1-Clickの注文はONになっています。

となります。これで購入の設定は完了です。
もう用はないので、サインアウトします。

購入

  • kindleからkindleストアにアクセス
  • 商品を選択
  • 「1-clickで買う」ボタンを押下

無事購入できれば成功です。

DL確認

購入後Home画面に戻ると、まだDL中の場合は%表示になっています。
DLの間はおとなしく本でも読んで待っていましょう。

ちなみに、このブログを書きながら閲覧しているうちに以下の二冊を購入しました。

エンゼルバンク

MEDIA MAKERS―社会が動く「影響力」の正体

価格はエンゼルバンクが99円

MEDIA MAKERS―社会が動く「影響力」の正体が900円でした。

kindleストアは定期的に安売りするので、頻繁に欲しい本をチェックするのがお薦めです。

購入確認

さて、無事 DLが終了したら購入履歴をチェックしましょう。

  • PCでもう一度amazonに接続
  • サインイン
  • 注文履歴をクリック

今購入した商品が一覧で表示されているはずです。
MyKindleでも購入した本のデータが確認できます。

以上が購入の流れとなります。

まだまだ続きます。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

textmateのビルドからはじまるミステリーツアー textmate導入編

さて、前回のゴタゴタ件で、環境を整頓しようと決めたので、まずはOSの変更。

Mauntain Lion update

LionからMauntain Lionにupdate。
AppStoreで料金は1,700円。所用時間は1.5hってとこでした。
次のOSのupdateはマシン自体を買い替えですかね。

Xcode update

続いて、Xcodeを最新にします。
AppStoreを立ち上げて、アップデートを選択。
すると、Xcode4.5.2を発見。

アップデートボタンを押して、XcodeをUpdate。

update完了後、下記のコマンドを入力


  xcrun clang --version
  Apple clang version 4.1 (tags/Apple/clang-421.11.66) (based on LLVM 3.1svn)
  Target: x86_64-apple-darwin12.2.0

おお、versionが変更されましたね。


  ./configure && ninja
  /usr/bin/clang is too old to build this project.
  

?????。なぜwhy!!


  /usr/bin/clang --version
  -bash: /usr/bin/clang: No such file or directory
  

これは、 configureのシェルに問題があるっぽい。
シェルを書き換えようと思っていたら、https://github.com/textmate/textmate/downloads
にビルドしたappファイルがダウンロードできるようになっていたことに気づきました。

というわけで全て解決w

念のためにxcodeを起動して昔作ったプロジェクトを起動して動作を確認。
最新のxcodeの環境も特に問題なさそう。

追記1

xcodeを入れ直したら、command line toolsも再installしましょう。
which makeでmakeのpathが通っていることを確認してください。でないとrailsが動きません


というわけでtextmateの導入完了です。
ひどい落ちですねw

さて、次は初期設定のまま放置しているkindle paperwhiteの設定です。

というわけでtextmateのビルドからはじまるミステリーツアー日記はまだ続きます

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年12月29日土曜日

textmateのビルドからはじまるミステリーツアー ビルド失敗編

textmateがオープンソースになって、フリーで使えるようになったので導入しました。
そしてそれがきっかけで大掛かりな環境構築になりました。

環境

  • MacOS Lion → Mountain Lion(update)
  • Xcode4.3.1 → 4.5.2(update)

textmateダウンロード


  $ ./configure && ninja
  sh: /Developer/usr/bin/xcodebuild: No such file or directory
  /Developer/usr/bin/xcodebuild fails with 32512 - Unknown error: 32512
  sh: /Developer/usr/bin/xcodebuild: No such file or directory
  /Developer/usr/bin/xcodebuild fails with 32512 - Unknown error: 32512
  /usr/bin/clang is too old to build this project.

  Please see README.md for build instructions.

ビルドに失敗しました。原因はざっくりいうとXcodeが古いから。最近動かしていなかったから当然ですね。

Xcodeを起動して、preference → Downloadタブ → commnad line Toolsをダウンロード
ダウンロードを終えたら、環境を変更します。

Xcodeのpathを変更


  $ xcode-select -print-path
  /Developer 

  xcode-select -switch /Applications/Xcode.app/Contents/Developer
  

pathが/Applications/Xcode.app/Contents/Developerに変更されたか確認します。


  $ xcode-select -print-path
  /Applications/Xcode.app/Contents/Developer

  xcrun -find gcc
  /Applications/Xcode.app/Contents/Developer/usr/bin/gcc
  

gccも変更されています。というわけで再ビルド


  $ ./configure && ninja
  /usr/bin/clang is too old to build this project.
  

おい(怒)。なんだclangって。

clang
clangは、Cをターゲットとした新しいコンパイラで、LLVM 上で動作することを意図して設計(from wiki)

ほう。ということで調査


  which clang
  /usr/bin/clang

  xcrun -find clang
  /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang

  xcrun clang --version
  Apple clang version 3.1 (tags/Apple/clang-318.0.54) (based on LLVM 3.1svn)
  Target: x86_64-apple-darwin11.4.0
  

古いままやんけ。調査すると、xcodeが古いのが原因っぽい。最新の4.5.2にしないといけないようです。
brewでもいつもおこられるし、年貢の納め時ですかね。
というわけで、年末ということもあって環境周りを色々整理することに決定。
Lionのまま放置していたOSもupdateしちゃうぞー。最近買ったkindleも色々整備したいし、google musicも使いたいし!
まあ、こんなもんっすよね。世の中。

というわけで続きます。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

scala雑感と今後のWEB開発技術

こんにちわわ。

最近scalaのplayというフレームワークを使っています。
一通りの機能を実装してみたのですが、メジャーになる可能性は低いだろうなあという印象です。

scala自体はとっても良い言語なのですが、フレームワークがちょっと...という感じですね。今のplayだとrailsの劣化コピーです。スタートアップで開発するなら、しばらくはrails一択だと思います。

とはいえ、色々と知識を得ることは出来たので、まとめて技術は公開していこうと思います。
twitterもscalaからjavaに変更している今、scalaの未来は暗そうです。

そんな僕が、今はまっているのは

fluentd
arduino

という技術です。
この二つはいずれメジャーになる技術だと思います。よかったらみなさんも試してみてはいかがでしょうか。fluentdはrailsとも相性良いです。

あと個人的な注目はBackbone.jsです。
jsmineなどと連携すればCIでの開発にも使えるのでしょうか?

時間をみて携帯サイトでも作ってみようかなと思います。

WEB開発言語は、rubyの次は、scalaじゃなくjavaScript系がくると思うんですけどね。
javaのstrutsやrubyのrailsのようなものがそろそろ現れてもおかしくないスパンですね。

でわ。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年12月28日金曜日

Ruby1.9.3以降のタブ区切り処理

Ruby1.9.3で、以前に作成したタブ区切りのファイル処理を行ったら盛大にこけました。
Ruby1.9.3は、FasterCSVを標準で使っているようです。ということで以下に仕様メモ

環境はruby-1.9.3-p0

難易度★★☆☆☆

タブ区切りのファイルを読み込む


    # read tab separate file 
    CSV.open(fileName, 'r', :col_sep=>"\t") do |tsv|
      #something
    end

上記ではタブファイルはが正常に読み込まれると、ブロックのtsv変数にファイルデータが格納されます。
ファイルの列ごとのデータを取り出す場合は以下のようにします。


    # read tab separate file 
    CSV.open(fileName, 'r', :col_sep=>"\t") do |tsv|
      tsv.each { |row|
        # row's class is Array.
        
        # something
      }
    end

上記のrowにはタブ区切りの各種データ配列が格納されています。
例えば["test1", "test2", "test3", "test4"]のような感じです。

さらにデータを取りだすときはrowをeachメソッドで呼び出します。

個人的にはFasterCSVを使って速度が劇的に速くなった感じはしませんでした。データ件数が増えれば変わるのでしょうか。

以上です。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年12月24日月曜日

railsアプリ作成時に設定しておくべきこと

railsでアプリを作成する場合に初期設定でやっておいたほうがいいことを以下にメモ。

環境はruby-1.9.3-p0, rails3.2.9, postgresです。

難易度★★☆☆☆

railsアプリを作成するには以下のコマンドを実行します。


rails new project

しかし、開発のことを考えると、


rails new project -T

とするべきです。
テストコードの作成はTest::Unitではなく、Rspecを使うべきです。
-TはTest::Unitを含まないようにするオプションです。

Rspecの導入には、Gemfileを開いて、以下を記述します。


group :development, :test do
  gem 'rspec-rails'
end

記述したらbundle updateを実行します。
updateが完了したら、続けて環境設定を行います

{railsフォルダ}/config

に移動して
application.rb を開きます。

application.rbは、すべての環境で共通の設定をおこなうファイルです。

タイムゾーンを東京にします。


config.time_zone = 'Tokyo'

デフォルトの言語を日本語にします。


config.i18n.default_locale = :ja

ログの設定をinfoにします(これは好みでdebugでもよいと思います)


config.log_leval = :info

デフォルトで読み込むjavaScriptを記述します(下の例ではjqueryとbootrapを読み込んでいます)


config.action_view.javascript_expansions[:defaults] = %w(jquery.min jquery_ujs bootstrap)

他にはjenkins等でプロジェクトの作成もしておきましょう。

railsは強力なフレームワークですが、startするまでの敷居はそれなりに高いです。

進化の速度も速いので、定期的にオリジナルのアプリを作る等して知識と技術のupdateをはかると良いと思います。

以上です。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年10月30日火曜日

英語の勉強

英語の勉強を本格的にしようと考えています。
なぜなら、もう逃げられないと悟りました。

私が今読みたい本は、

Refactoring Redmine
Programming Scala
Practical Common Lisp

等です。
他にスマホ開発の技術動画等もみたいし、周りにも外国人の労働者が増えてきました(主にアジア系だけど)。今の適当な英語力じゃ知識の吸収があいまいで理解も遅いのでつらいです。なので、本格的に英語の勉強をすることにしました。

友人の中国人には中国語もちゃんとやれといわれてますがとりあえず後回しです(多分私の中国語力は4級レベルあるかないか)。

ここを読んでいる若いエンジニアのみなさん。
私のように本当に必要になってからあわてるんじゃ遅いですよ!
今の時代、大学卒業するまでにはTOEIC950超、英検1級くらいまでの基礎力は取得しておきましょう。あとあと便利です。

もうまにあわないよ!ってかたは僕と一緒に勉強しましょう。
エンジニアでない方も是非一緒に勉強しましょう。英語必要になっちゃった人は。
そういうわけで、ちょこちょこ進捗報告していきます。
目標は大きくTOEIC950と英検1級かな。2,3年でなんとかしたい。
資格とか嫌いなんですけど目標があったほうがやる気でますからね。
そんな感じ。
でわ。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年10月20日土曜日

悩む

突然ですが、わたくし悩んでいます。
もう30代としてのエンジニアとしての過ごし方を決めないといけません。
ギークな性格なのでどんな道を歩もうと、プログラムは続けるつもりですが、表向きは別の顔をもたないといけない年齢に今後なるのは避けられません。

さてさてどうしましょうか。
色々考えましたが、とりあえず利益をあげるという考え方にもっと取り組まないといけないのは明白です。

あとは勉強方法ですね。
空論ばっかりでろくなビジネス本が見つかりません。
とりあえず名書と呼ばれる本をあさっていこうと思います。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年9月24日月曜日

Error generating final archive: Debug certificate expired on ... via mac

半年ぶりにandroid開発をやろうとしたらタイトルのエラーが発生しました。
「期限が切れているので、コンパイルできないよ」ってことらしいです。
修正方法は、以下の通りです。


terminal起動
↓
cd /Users/{username}/.android/
↓
rm debug.keystore
↓
eclipse 再起動

debug.keystoreを削除して、eclipseを再起動するとコンパイルできるようになります。

なんの意味がある仕様なのかちょっと謎ですが、調べるまでもないような気がするので放置で。

でわ。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年9月21日金曜日

Herokuでアイドリングを防ぐ

Herokuは無料でとっても良いサービスなのですが、一時間以上アクセスがないとサイトがアイドリング状態に陥ってしまいます。
Herokuは無料だと1dyno(ダイノ)しか利用できません。
1dyno(ダイノ)だと、一時間以上アクセスがないとサイトがアイドリング状態になります。一度アイドリング状態になると、再度サイトを表示するまでに10-20秒くらいかかってしまいます。 これではせっかく来てくれたユーザーの足が遠のいてしまいます。(ただでさえ最初は人こないですからね)
有料にして2dynoになるとアイドリング無く動作しますが、それなりのアクセスがないと2dynoにする必要はありません。

それに、スタートアップで資金カツカツの場合、出費は最小限に押さえたいでしょう。

そこで、おすすめするのがping domです。有名なツールなので利用したことがある人も多いと思いますが、ping domでサイトを監視することで、アイドリングを防ぐことが出来ます。ちょっとしたアクセスのサイトならフリーアカウントで十分ですが、アクセスの多いサイトを運営しているならbasicアカウント(月10ドル(800円)くらい)を利用したほうが良いかもしれません。いくらスタートアップでも月10ドルが厳しいことはさすがにないでしょうw。

私の場合、現在Herokuで稼働中のNeighborでping domを利用しています。

一人で色々とやっている場合は、Herokuで自動スケールして、ping domで監視する手法が一番コストパフォーマンスが良いと思います。
本当に便利な時代になりました。エンジニアのみなさん、個人でもサービスを構築しましょう。もったいないです(貧乏性かな)

そんな感じです。でわ。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年9月15日土曜日

Twitter BootstrapでSticky Footerを作成するその2

Twitter Bootstrapで画面下部に固定するfooterを作成したのでメモ

環境

Twitter Bootstrapv2.1

IE7.0以上,opera,firefox,chorome等Twitter Bootstrapに対応しているブラウザ対応

以前、Twitter Bootstrapを使ってfooterを画面下に配置する方法を記述したのですが、ちょっとミスがあったので追加します。

footerの仕様

  • HTML画面の下部にfooterを表示する。
  • 画面の表示量が少ない場合は、画面最下部にfooterを表示する。
  • 画面の表示量が多い場合は、スクロールして画面最下部に到着してからfooterを表示する。

仕様は以前と同じです。
しかしこの実装だと、メイン画面の表示量がスクロール位置の限界まである場合、フッターがメイン画面に覆いかぶってしまうという問題が発生します。
なので、以前のコードを以下のように変更します。

html version1.1


<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <meta charset="utf-8"> 
    <title> ProjectName</title> 

    <!-- Le styles --> 
    <link href="./develop/css/bootstrap.css" rel="stylesheet"> 
    <link href="./css/common.css" rel="stylesheet"> 
    <link href="./develop/css/bootstrap-responsive.css" rel="stylesheet"> 
  </head> 
<body> 
  <div class="wrapper"> 
    <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container-fluid"> 
          <a class="brand" href="#"> <span class="header_title"> ProjectName</span> </a> 
        </div> 
      </div> 
    </div> 
    
    <div class="container top_start_point content_end_point"> content_end_pointクラス追加
      test!!
      <div id="push"><!--//--></div>
    </div> <!--/.container--> 
  </div> <!--/.wrapper--> 
  <footer> 
      footer content
  </footer> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> 
  <script src="./develop/js/bootstrap.js"> </script> 
</body> 
<</html> 

content_end_pointはコンテンツの終了する位置を指定するクラスです。

CSS version1.1

上記のhtmlで指定したcommon.cssの内容です。


html {
  height: 100%;
}

body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -2.3em;
}

footer {
  height: 2.3em;
}

.push {
  height: 2.3em;
}

.top_start_point {
  padding-top: 60px;
}

.content_end_point {
  padding-bottom: 30px;
}

フッターの表示サイズだけpadding-bottomを指定しています。これで、フッターがメイン画面に覆いかぶさらなくなります。

以上

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年9月11日火曜日

エンジニアに見てもらいたい動画の紹介

エンジニア、ノマド、小さな会社の経営者など、個人の力量で生活が大きく左右される人にみてもらいたい動画の紹介です。

島田紳介 才能と努力


島田紳介 XとYの分析



芸能界を引退した島田紳介氏の講演です。
ビジネスの基本的な思考方法を本人が説明しています。
時間がある人は、全部見てみましょう。

アジアで勝負したい若者たち



若い起業家の特集です。
起業はしんどいです。でも楽しいです。
特に未婚で向上心のある人は、一度は起業してみると良い思います。
ただし、自己資金でw

加藤嘉一氏×田村耕太郎氏 中国・インドの今後とビジネスに必要なもの



ちょっと長い動画なので時間のある時に見るとよいと思います。
アジアで働くことを考えている人、40歳より若い人は世界の現状の理解しておくとよいと思います。

以上
役に立つと幸いです。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年9月8日土曜日

Note that jquery.pageless on Rails3 and Twitter Bootstrap

Environment

ruby-1.9.3-p0, rails3.2.2, postgres, Twitter Bootstrap v2.1


If you want to implement data loading like twitter, I recommend that you use jquery.pageless.
But if you use jquery.pageless, you have to use care when set script file.
I was wrong when I had used with Twitter Bootstrap.

put the script file at the end of the document body

you should put the script file at the end of the document body so you don't block rendering of the page.

Twitter Bootstrap uses bootstrap.js. This file ought to put at the end the document body.
But jquery.pageless.js is not be so. jquery.pageless.js must put the under css link. otherwise, you fail to rendering.

how to put jquery.pageless.js and bootstrap.js

you should put script file like next way.

before

<head>   

  <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
  // something

  <script src="/javascripts/jquery.min.js" type="text/javascript"> </script> 
  <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> 
  <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>     
</body> 

fixed code

<head>   

  <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" />
  
  <script src="/javascripts/jquery.min.js" type="text/javascript"> </script>// download in head
  <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>// download in head

</head> 
<body> 
  // something


  <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> 
</body> 

Above code can work. jquery.pageless.js should put at the before of the document head

thanks for reading.

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

Ruby on Rails3でtwitter風データロード作成時の注意点

twitter風のデータロード画面を作成した時にはまったので対処メモ

環境はruby-1.9.3-p0, rails3.2.2, postgres, Twitter Bootstrap v2.1です。

難易度★★★☆☆

rails3でtwitterのように画面をスクロールしてデータを自動ローディングするには、 jquery.pagelessを使うのがお薦めです。
しかし、jquery.pagelessを利用する場合には、ファイルの配置場所に注意する必要があります。
Twitter Bootstrapと連携する時に少しはまってしまったのでメモを残します。

スクリプトは最後に置く

WEBページでプログレッシブ・レンダリング(ページを徐々に読み込むこと)を実現するには、なるべくページの下でスクリプトファイルを読むようにします。
なぜなら、スクリプトは下に配置した全てのコンテンツをブロックします。つまり、コンテンツのダウンロードもコンポーネントのダウンロードも中断されることになります。
逆にスクリプトをページの下に配置すれば、より多くのコンテンツが中断されずに逐次的にレンタリングされるようになります。

Twitter Bootstrapでは、bootstrap.jsを指定します。このスクリプトファイルはページの下で読むべきスクリプトファイルです。
しかし、jquery.pageless.jsはページの下で読んではいけません。cssリンクの下で読むようにしないといけません。レンダリングの前にスクリプトを読む必要があります。そうでない場合、レンダリングに失敗してしまいます。

jquery.pageless.jsとbootstrap.jsの配置の仕方

画面を正常にレンダリングするには、以下のようにします。

変更前

<head>   

  <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
  // something

  <script src="/javascripts/jquery.min.js" type="text/javascript"> </script> 
  <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> 
  <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>     
</body> 

変更後

<head>   

  <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" />
  
  <script src="/javascripts/jquery.min.js" type="text/javascript"> </script>// head内でダウンロード
  <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>// head内でダウンロード

</head> 
<body> 
  // something


  <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> 
</body> 

上のようにすることで、jquery.pageless.jsが正常に作動します。

以上です。


参考書籍

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年9月7日金曜日

エストニアのプログラミング教育に思ふ21世紀の教育

エストニアの公立学校で、初等教育の1年目からアプリ開発を教えるカリキュラムがスタートするようです。

エストニア、小学1年生からプログラミングの授業実施へ

個人的にこれはとっても良い取り組みだと思います。なぜなら、プログラミングを学ぶことで、数学的な考え方や言語表現の大切さも理解できるようになる可能性が高いからです。
プログラマーを確保するという点はおいといて、思考力を鍛えるという点でプログラミングは良い教育方法です。

さて、こうなるとプログラミング教育は日本でも小学生から取り入れるべきだという意見が出てくるでしょう。
でも日本で実際に実現するにはかなりの困難がつきまとうことが予想されます。
私は教師に転職しようと考えていた時期があって、小学校教諭のカリキュラム(1種)を半分(30単位)くらいこなしたことがあります(2年目は未履修)。
その時の教育内容を思い出しても、今の日本の小学生教師のシステムにプログラム教育まで組み込むのは難しいと思います。

例えば、小学校教諭になるための学習で時間がかかる技術にピアノがあります。私は昔から習ってたので問題なかったのですが、経験のない人は悪戦苦闘してました。(YAMAHAとかに通っているひともいました)
今はさらに英語も必要です。それにプログラミングまで加えるとなるとかなりの負担です。
たとえ全部それなりにこなせる人がいても、最終的に教師を選択する人は少ないでしょう。
働く環境は閉鎖的で劣悪だし、どう考えても割に合いません。高いコミュニケーション能力や教える技術も求められます。全部こなせるような人材は、ビジネスマンになったほうがずっと稼げます。

とはいえ、これからの時代を生きる子供達は、基本的な英語やプログラミングは知っておく必要があるでしょう。さらには金融の仕組みやゲノムについても理解しておく必要があります。
もちろん、既存の学習も大切です。

そんな時代の教育に対応するには、一人の教師が全てを教えるのではなく、専門性をもった人を小学生教師として迎え入れることも必要でしょう。

現場を離れたプログラマー。通訳だけでは食べていけない英語教育関係者。安月給の大学講師。
そういった人たちをそれなりの待遇で臨時教員として雇うと良いのではないでしょうか。個人にお金も回るし、国の底上げにもあります。問題は財源をどうするかでしょうか。

私はまだ日本は復活できると信じています。
次世代を担う子供達が世界で活躍できる可能性が広がるような教育になってほしいと願っています。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年9月5日水曜日

RailsアプリでTwitter Bootstrapを利用する

既存のRailsアプリにTwitter Bootstrapを対応させる場合の注意点のまとめです

環境

Twitter Bootstrap v2.1, ruby-1.9.3-p0, rails3.2.2, postgresです。

既存のRailsアプリにTwitter Bootstrapを対応させる場合、新しい画面モックをhtmlで作成してviewだけ変更するのが基本になると思います。
以下、使用方法のメモです。

bootstrap.jsをデフォルトで読み込むようにする

Twitter Bootstrapを正常に動作させるにはbootstrap.jsが必要です。
<%= javascript_include_tag :defaults %>でjavaScriptタグが出力できるようにapplication.rbに以下のように設定します。


config.action_view.javascript_expansions[:defaults] = %w(jquery.min jquery_ujs)

↓

config.action_view.javascript_expansions[:defaults] = %w(jquery.min jquery_ujs bootstrap)

classの指定

cssを適用させるにはclass属性を利用します。各タグに:classを付加して指定することになります。

文字列中にタグ文字を追加

railsのタグは特殊文字をエスケープします。タグ文字を利用したい場合はHelperメソッドを自分で作成して対応します。
link_toの場合はブロックを利用した記述で対応できます。


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年9月1日土曜日

Twitter BootstrapでIEブラウザに対応する

Twitter BootstrapでのIEブラウザ対応の注意点

環境

Twitter Bootstrap v2.1

WEB開発をするときに困るのがIEブラウザの対応です。 もっとも普及しているブラウザでありながら、もっとも品質の悪いブラウザであることは開発者のみなさんが一番認識しているでしょう。
現在(2011年8月1日〜2012年8月1日)のブラウザのシェアは以下のようになっています。
ブラウザシェア
ブラウザシェア

約6割のユーザーがIEを使用しています。なので、余程のことがない限り対応しないわけにはいきません。
この面倒な対応を最小限の労力にしてくれるのがTwitter Bootstrapです。

IE7以降に対応

Twitter BootstrapはIE7以降に対応しています。メインマーケットが中国のWEBを作成するのでないなら特に問題ないと思います。
どうしてもIE6に対応させたい場合は、以下のツールを利用します。

Bootstrap-IE6

上記のツールを利用することでIE6にも対応できます。
しかし、試してみれば分かるのですが、やはりIE6では表示できることに限界があります。
他のブラウザでは発生しないズレが結構生じます。
正直、シェア的に意味はないと思うのですが、IE6に完全対応させたい人は、最初からIE6を使って画面を設計したほうが良いでしょう。
おまけ程度の対応で良いなら、ファイルだけ設定して細かなズレは放置して問題ないと思います。

Bootstrap-IE6は、中国対応のサイトを作成する時に重宝するのではないでしょうか。

でわ。

参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年8月31日金曜日

Twitter BootstrapでSticky Footerを作成する

Twitter Bootstrapで画面下部に固定するfooterを作成したのでメモ

環境

Twitter Bootstrapv2.0.4

IE7.0以上,opera,firefox,chorome等Twitter Bootstrapに対応しているブラウザ対応

Twitter Bootstrapは便利なツールなのですが、footerを画面下に配置するcssの設定が見当たらなかったので、実装しました。

footerの仕様

  • HTML画面の下部にfooterを表示する。
  • 画面の表示量が少ない場合は、画面最下部にfooterを表示する。
  • 画面の表示量が多い場合は、スクロールして画面最下部に到着してからfooterを表示する。

このようなフッタをSticky Footer(スティッキフッタ)と呼びます

html


<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <meta charset="utf-8"> 
    <title> ProjectName</title> 

    <!-- Le styles --> 
    <link href="./develop/css/bootstrap.css" rel="stylesheet"> 
    <link href="./css/common.css" rel="stylesheet"> 
    <link href="./develop/css/bootstrap-responsive.css" rel="stylesheet"> 
  </head> 
<body> 
  <div class="wrapper"> 
    <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container-fluid"> 
          <a class="brand" href="#"> <span class="header_title"> ProjectName</span> </a> 
        </div> 
      </div> 
    </div> 
    
    <div class="container top_start_point"> 
      test!!
      <div id="push"><!--//--></div>
    </div> <!--/.container--> 
  </div> <!--/.wrapper--> 
  <footer> 
      footer content
  </footer> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> 
  <script src="./develop/js/bootstrap.js"> </script> 
</body> 
<</html> 

divで囲むwrapperクラスを用意します。これはbodyタグのfooterタグ以外を囲むタグです。
footerタグをdivで囲むwrapperクラスの外に設定します。

CSS

上記のhtmlで指定したcommon.cssの内容です。


html {
  height: 100%;
}

body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -2.3em;
}

footer {
  height: 2.3em;
}

.push {
  height: 2.3em;
}

.top_start_point {
  padding-top: 60px;
}

wrapperクラス内のmin-heightは領域の高さの最小値を設定します。
marginのautoはセンタリングを設定します(margin 上マージン auto 下マージン)
footerタグをdivのwrapperクラスの外に設定します。

top_start_pointクラスは画面の内容が開始する位置を指定しています。
ヘッダーを使用する場合に必要になるので注意してください。

私はTwitter Bootstrapを使うのは、まだ次期尚早かなと思うのですが、個人開発者はもう使ってのもよい段階に入っていると思います。
私も自分のWEBアプリをTwitter Bootstrapに差し替えるつもりです。(完了したら報告します)

個人実装で全てのブラウザに対応するのは苦しいので、Twitter Bootstrapのようなcssフレームワークは今後はやると思います。

でわ


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年8月28日火曜日

遺伝子治療革命の感想とゲノム時代の到来

これからはゲノムの時代だとよく言われています。しかし、実際ゲノムについて知識のある人はほとんどいないのが現状です。
近い未来、現代のIT技術のようにゲノム技術が当然のように利用されるのは間違いありません。
そんなゲノムの現在と簡単な知識を得るのに適した本が以下の本です。

基本的なゲノムの知識は、現在のパソコン知識のように普通の人も必要となる時代になるでしょう。
遺伝子スクーリニングから取得したゲノム情報からゲノム検索し、医療対策を行う時代は必ずやってきます。
上記の本はとってもわかりやすく記述されているので、知っておいた方が良いと思った基礎知識は学生時代のように丸暗記してしまうのがお薦めです。
私はルーズリーフで重要な箇所を抜き出して丸暗記しました。おかけで、wired等のゲノム関連の記事がとっても読みやすくなりました。

さて、パーソナルなゲノム治療が定着するのは、日本では欧米より時間がかかるような気がします。
まずは、自分のリスクを知りたいかという問題があります。
普通の人より発症リスクが高い病気にどう向き合うのか。また、介入予防措置ができない病気(アルツハイマー等)の発症リスクが高いと分かった場合にどう向き合うのか。自暴自棄にならないか。さらには、保険料の値上げや加入の拒否も考えられます。
日本人は人からどう見られるかというのを異常に気にするのでこのへんは揉めるのではないでしょうか。

だだし、病気の発症前に予防するチャンスが生まれるのも事実です。
リスクはコントロールできれば最大の武器となります。この辺はスポーツやビジネスと同じですね。

あと、DNAのリスク予測の現在のデータは北ヨーロッパ出身者を対象とした研究です。日本人のデータも沢山蓄積して欲しいところですが、嫌がる人が多いでしょうからデータの収集に苦労するような気もします。

とはいえ、未来は出生時に強制的に遺伝子スクーリニングを行うことになるでしょう。
ゲノム時代を迎えると、さらにソフトウェアの技術が重要となりそうです。
ゲノムは、プログラマーにとっても興味深い技術だと思うので、是非勉強してみてください。
将来、ゲノムに関わって巨万の富を得るプログラマーが出てくると思います。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年8月21日火曜日

Get data Like a twitter scroll on Ruby on Rails3

Environment

ruby-1.9.3-p0, rails3.2.2, postgres

Grade

normal


I created a mechanism that Application get data like a twitter scroll.
In case of Rails 3, you should use jquery.pageless. This is help you to create Endless Page Scrolling.

If you search Endless Page Scrolling way on Internet, you find Endless Page on rails cast or Endless Page Scrolling with Rails 3 and jQuery.
But, you should avoid using these ways.
Because "Endless Page" article does not support jquery on rails3. If you use rails2.x, this way is very good.
"Endless Page Scrolling with Rails 3 and jQuery" article is not simple. This code is complicated.

how to use jquery.pageless

Download jquery.pageless file. set some files on your application. you have only to imitate sample.
But, if will_paginate gem does not exist, this tools does not work.
jquery.pageless need will_paginate gem.

how to change loading view

If you use jquery.pageless, you are able to create view like a twitter scroll. but I think you want to change load view.
At that case, you should change part of jquery.pageless.


  var loaderHtml = function () {
    return settings.loaderHtml || '\
<div id="pageless-loader" style="display:none;text-align:center;width:100%;">\
  <div class="msg" style="color:#000000;font-size:1.1em"></div>\
  <img src="' + settings.loaderImage + '" alt="loading more results" style="margin:10px auto" />\
</div>';
  };

you can change here font size, color, load view.

This is very useful. I will recommend.

Thanks for reading. bye!


helping site

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

Ruby on Rails3でtwitter風データロード

twitter風のデータロード画面を作成したのでメモ。

環境はruby-1.9.3-p0, rails3.2.2, postgresです。

難易度★★★☆☆

twitterのように画面をスクロールしてデータをローディングする仕組みを作りました。
結論を言うと、Rails3の場合はjquery.pagelessを使うと簡単に作ることができます。

しかし、ネットで検索するとrails castのEndless PageEndless Page Scrolling with Rails 3 and jQueryばかりがHITすると思います。
しかし、これらを使うのは避けてください。
まず、rails castのEndless Pageの記事内容はrails3のjqueryには対応していません。rails2.xならこちらで良いでしょう。
Endless Page Scrolling with Rails 3 and jQueryの記事内容はシンプルでなく、おせじにも良いコーディングとは言えません。

jquery.pagelessの使い方

ダウンロードして、サンプルと同じようにファイルを配置するだけでOKです。
注意する点として、will_paginateがないと動作しないのでgemにwill_paginateも必ず設定してください。

loading表示の変更

あっさりとtwitter風のロード画面が作成できると思いますが、ロードの表示方法は変更したいと思うでしょう。
その時は、jquery.pageless.jsの以下の部分を変更します。


  var loaderHtml = function () {
    return settings.loaderHtml || '\
<div id="pageless-loader" style="display:none;text-align:center;width:100%;">\
  <div class="msg" style="color:#000000;font-size:1.1em"></div>\
  <img src="' + settings.loaderImage + '" alt="loading more results" style="margin:10px auto" />\
</div>';
  };

文字のサイズ、色、ローディング画像はここで変更できます。

本当に便利なツールなので、是非使ってみてください。
ページングのほうが使いやすいページは、通常のwill_paginateもを利用すると良いでしょう。

以上です。


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年8月19日日曜日

Herokuのwebサーバをthinに変更する

Ruby on Rails3で作成したアプリをHeroku上でthinを利用して動作させるためのまとめです。

環境はruby-1.9.3-p0, rails3.2.2, postgres, Herokuです。

難易度★★★★☆

thinに変更したほうが良い理由

Heroku上のrailsアプリは、デフォルトだとWebrickが動いています。
Webrickはデフォルトで使われるWEBサーバーですが、パフォーマンスがかなり悪いです。
Herokuでも実運用ではthinを使うように推奨しています。
thinはコンパクトでWEBrickよりも速く技術的にも枯れていて、普通のWEBサイトであれば十分な性能をもっています。

フリー(無料)で変更できるの?

現在(2012/8月)確認した限りは無料で変更できます。add-onと異なりクレジットカードの登録をしていなくても大丈夫です。

利用しているWEBサーバーを調べる

Heroku上のrailsアプリは、デフォルトだとWebrickが動作しているはずです。
herokuにログインしてコマンドで確認してみましょう。


heroku ps

以下が結果です。


Process  State       Command
-------  ----------  ---------------------------------
web.1    up for 45m  bundle exec rails server -p $PORT

上記表示の「bundle exec rails server -p $PORT」の場合はWebrickが動作していることを示しています。

アプリのGemfileにthinを設定

さっそくthinを導入しましょう。アプリのフォルダに移動します。


vi Gemfile

gem 'thin'

bundle install

installに成功したら、ローカルでthinサーバーの動作を確認すると良いでしょう。
ローカルで動かす場合はrails server thinでthinを起動することができます。

Procfile(プロックファイル)を変更する

HerokuでWebrickをthinに変更するには、Procfileを変更する必要があります。
Procfileには、アプリケーションで動かすプロセスタイプのリストを記述します。
プロセスタイプには、web, worker, urgentworker, clock等があります。
先ほどのWebrickのプロセスはwebプロセスになります。


Process  State       Command
-------  ----------  ---------------------------------
web.1    up for 45m  bundle exec rails server -p $PORT

foremanを導入

Procfileの変更は、foremanというgemを利用して確認します。
この情報はかなり少なかったので苦労しました(Heroku使っている人はWebrickのままなのかな?)
これは、HerokuのDavid Dollar氏が作成したgemで、Herokuでも採用されています。
このforemanは依存するバックグラウンドプロセスを簡単に管理できます。
それでは、アプリに導入しましょう。


vi Gemfile

gem 'foreman'

bundle install

installに成功したらProcfileを作成します。


vi Procfile

以下の行を追加します。


web: bundle exec rails server thin -p $PORT -e $RACK_ENV

Procfileが完成したら、内容が正当かどうかをforeman checkコマンドを実行してチェックします。


foreman check

valid procfile detected (web)

上記のメッセージが出れば正常です。$RACK_ENVをセットするファイルを作成します。


echo "RACK_ENV=development" >>.env

準備完了です。プロセスを起動します。


foreman start

06:10:13 web.1  | started with pid 2027
06:11:50 web.1  | => Booting Thin
06:11:50 web.1  | => Rails 3.2.2 application starting in development on http://0.0.0.0:5000
06:11:50 web.1  | => Call with -d to detach
06:11:50 web.1  | => Ctrl-C to shutdown server
06:11:50 web.1  | >> Thin web server (v1.4.1 codename Chromeo)
06:11:50 web.1  | >> Maximum connections set to 1024
06:11:50 web.1  | >> Listening on 0.0.0.0:5000, CTRL+C to stop
06:11:50 web.1  | >> Stopping ...
06:11:50 web.1  | >> Stopping ...
06:11:50 web.1  | Exiting
06:11:50 web.1  | exited with code 0

OKですね。ローカルでアプリの動きを確認する場合はportを5000にして接続します。

コミット

確認を終えたら、上記の変更をgitでコミットします。
このとき.envファイルはgitで記録しないようにします。

heroku更新

あとはいつもと同じgit push heroku masterでherokuを更新します。

thinで動作していることを確認


heroku ps

Process  State       Command
-------  ----------  ------------------------------------
web.1    up for 43s  bundle exec rails server thin -p $..

Commandがbundle exec rails server thinになっています。
thinでアプリが動作しているのが確認できますね。
変更後は動きを確認してみると良いでしょう。Webrickよりサクサクと動くはずです。

今回はちょっと長くなりましたね。お疲れさまでした。
以上です。


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年8月17日金曜日

NYヤンキース黒田投手の思考とプログラマの思考


NYヤンキースで活躍している黒田選手の記事でとても良い記事があったので紹介します。

記事の内容は、松坂大輔選手やダルビッシュ有選手など、メジャーに来て制球に苦しむ日本人投手が多い中で、なぜ黒田選手が安定した投球を続けられるかについてです。

「こんなものかなと思ってやるしかないですからね。日本で投げていたイメージなんて追い求めていたら、こっちではやっていられない。ボールの違いや中4日の環境にしてもそう。その環境は変わらないんですから、気にしても仕方ない。こっちでも安定しているボールもあれば、まったく使いものにならないボールもある。その中で自分がどうやっていくか。頭を切り替えてやっていくしかない」

「こんなところでやっていけるのかと思うほど、1年目のキャンプは困ったことだらけでした。何もかもすべてでした。でも僕らは無理やりここに連れて来られたわけじゃない。自分で決めてここに来たんです。ボールの違い、中4日での登板、トレーニング環境の違い、すべてを理解した上で『腹をくくって』ここに来たんです。だから、環境の違いを気にすることは趣旨が違うと思っていました。日本と同じ感覚で投げられていないのは確かです。でも、それは求めるものではないと思います」

自分の能力を高めて異なる環境に挑戦していくのではなく、異なる環境に合わせて自分の能力を高めていく
グローバル化(アメリカ化)で最も大切な考え方を黒田選手はもっていて、さらに実現できています。

IT系のスタートアップでよく利用されるWEBフレームワークにRuby on Railsというツールがあります。このフレームワークの設計哲学は以下の二つです。

DRY(Don't Repeat Yourself)=同じ記述を繰り返さない
CoC(Convention over Configuration)=設定よりも規約


railsでWEBアプリを作る場合、フレームワークに合わせた仕様にすればするほど素晴らしく高い生産性を発揮することができます。「ああしたい」「こうしたい」とフレームワークの制約を外れれば外れるほど生産性は落ちます。

railsがスピード重視のスタートアップで使われ、顧客の要求が多い受注で利用されないのはこういった理由からです。

railsに限らず、iphoneやandroid等のアプリ開発でもプラットフォームの標準ルールに沿って作ると使いやすい物になります。


標準化された環境を受け入れ、その中でどうするかというのはとても重要なのです。

黒田選手はメジャーという環境を受け入れ、メジャーで力を出せる投球術を身につけたのでしょう。もしかしたらその投球術は日本では通用しないかもしれません。

ITの世界でも色々と便利なツールが作成されています。利用していると「ここはこうするべきだろ」「わかってねえな」と思うことがしばしばあります。
しかし、自分の思い込みで変更してしまうより、標準化されたものをそのまま利用することで最新技術の導入や後々のバグの対応が楽になります。
制約のある中で対応していくのも立派な技術です。

定期的に自分がおかれている状況と環境を考える習慣は身につけておきたいと思わされた良い記事でした。

「日本人投手がメジャーで生き抜くために必要な哲学」
黒田博樹の成功と松坂大輔の蹉跌

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年8月15日水曜日

WEBアプリやスマートフォンアプリを量産し思ふこと


ここ2,3年でWEB,スマホアプリを量産して思ったことの一つは、基本の理解と暗記の大切さです。

開発は時間に追われます。最初に引いたスケジュールとリリース日は第三者の「願望」であり、計画通りに進むことはまずありません。
仕様の追加や変更は当たり前、計画通りに進めるというよりは帳尻を合わせるといったほうが適切でしょう。プロジェクトは常に不安定です。

そんな忙しい日々が続くと、成果(アウトプット)とリリース日のみに気を取られ、自分の能力を高めることを忘れがちになります。
もちろんあなたが企業の従業員であるならアウトプットは最も重視しないといけません。
しかし同時に、「理解する」「暗記する」という作業は怠らないようにしないといけません。特に「暗記する」ことは大切です。

進捗に追われると今後につながる重要な調べ物を「理解した」だけで終わらせてしまうことが少なくありません。でも、「理解した」つもりでも人はすぐに忘れてしまいます
大切なことは「暗記」して血肉にしないといけません。「暗記」は「理解」のベースになります。できる人というのは「理解」と「暗記」のバランスが抜群なのです。

今のアプリ作成はフームワークとモジュールを組み合わせることが一般的です。
例えばログイン処理を実装する場合、railsではdeviseを利用するのが一般的です。
しかし、deviseを使わず自分でゼロから実装し、ログインの仕組みを理解し、処理の考え方を暗記することはとても大切です。
ログイン処理一つでも、CSRF,SQLインジェクション,メッセージダイジェストとソルトを利用したパスワード処理等を学べます。
基本の知識を身につけると、他の言語での開発はもちろん、その他の技術の理解にも役立ちます。

最近の技術の進歩と速度は素晴らしいです。
だからこそ、きちんとした基礎を積み上げることが理解を助け、良い成果を出すことに繋がります。
なので開発者は、少しの時間でよいので、基礎を勉強する時間を捻出すると良いと思います。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年8月11日土曜日

Ruby on Rails3で作成したアプリのセキュリティチェック その2 HTTPヘッダインジェクション

Ruby on Rails3で作成したアプリのテスト時にチェックするセキュリティについてのまとめです。

環境はruby-1.9.3-p0, rails3.2.2, postgresです。

難易度★★☆☆☆

HTTPヘッダインジェクション

リダイレクトやクッキー発行など、外部からのパラメーターを元にHTTPレスポンスヘッダを出力する際に発生する脆弱性です。
クッキー発行はガラケーの開発以外では関係ないことがほとんどなのでここでは説明しません。
HTTPヘッダインジェクションが発生するのは、リダイレクト時の処理が一番多いでしょう。

パラメーターからurlを取得してリダイレクト

パラメーターからurlを取得する場合に、HTTPヘッダインジェクションの発生に注意する必要があります。

parameter

http://www.yourapplication.com/controller/action?referer=path/at/your/app%0d%0aLocation:+http://www.malicious.tld

上記は?以降にクエリパラメーターを設定しています。%0d%0aは改行のパーセントエンコードです。

code

redirect_to params[:referer]

結論から言うと、railsの場合は上記のようなコードでもHTTPヘッダインジェクションは発生しません。フレームワーク側で対策がしてあります。
railsの開発ではHTTPヘッダインジェクションを意識するケースはあまりないと思います。

HTTPヘッダインジェクションが発生する原因

HTTPヘッダインジェクションは、レスポンスヘッダの改行には特別な意味があるのに、外部から指定された改行コードをそのまま出力するのが問題となります。
parameterの例の場合は後半のURLがLocationに設定されます。つまり、後半のURLページにリダイレクト遷移されてしまいます。
例えば、後半のurlに悪意の第三者が罠のページを仕込むと、利用ユーザーはそちらの罠ページに遷移してしまいます。その罠ページでパスワードやログインIDを入力させることもできます。

urlは仕様として改行文字を使うことができません。なので、本体urlには改行チェックをおこなわないといけません。
しかし、自分で実装して改行をチェックするより、ライブラリを用いて処理するのがもっとも安全です。

railsのredirect_toはHTTPヘッダインジェクションに対応されています。

自分で実装するのを控えるのがHTTPヘッダインジェクションセキュリティ対策の基本です。


参考サイト
参考書籍

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年8月10日金曜日

Ruby on Rails3で作成したアプリのセキュリティチェック その1

Ruby on Rails3で作成したアプリのセキュリティチェックのまとめ記事その1。

環境はruby-1.9.3-p0, rails3.2.2, postgresです。

難易度★★★☆☆

SQLインジェクション

SQLインジェクションは、パラメーターとして指定された文字列の一部がリテラルをはみ出すことにより、SQL文が変更されることです。

SQLインジェクション対策

静的(動的)プレースホルダを利用してSQLを呼び出す

例:ログイン

メールアドレスとパスワードでログインするアプリの場合を考える

1.インジェクションサンプル

入力値

mail: test@co.jp(正しいメールアドレス) 

password: '' or 'a' = 'a'

ログインコード

Users.where("mail = " + params[:mail] + " and password =" + params[:password])
↓
select * from users where mail = test@co.jp and password = '' or 'a' = 'a'

上記のようなログイン処理の場合、パスワードを知らない悪意のあるユーザーがログインできてしまいます。
SQLインジェクションの原因は、パラメーターとして指定した文字列の一部がリテラルをはみだすことでSQL文の文字構造が変化してしまうことにあります。(そもそも上記のようなログイン処理を実装してはいけません)
SQLインジェクションの対策方法は、プレースホルダを利用することです。

ログインコード改良

×Users.where("mail = " + params[:mail] + " and password =" + params[:password])

○Users.where("mail = ? and password = ?", params[:mail], params[:password])

もしくは

◎Users.where(:mail => params[:mail], :password => params[:password])

Hashを使ったコードの方が個人的には読みやすいと思います。

以上です。


参考書籍

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年8月8日水曜日

WEBサービス【Neighbor】公開

新しいWEBサービスを公開しました。
その名も

Neighbor

です。

Neighborは地域で繋がるコミュニティSNSです。

  • 地元の遊び場、デートスポットの紹介
  • 住環境に関する質問やトーク
  • 医療施設などについてのぶっちゃけトーク

のようなことに利用すると便利だと思います。

また、twitter, yahoo, googleアカウントがある人はより簡単に登録できます。

他にも色々と素早く対応していきたいと思います。
よろしくお願いします。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年8月3日金曜日

Herokuのエラー処理

Ruby on Rails3で作成したアプリをHeroku上で動かす際のエラー処理についてのまとめです。

環境はruby-1.9.3-p0, rails3.2.2, postgres, Herokuです。

難易度★★★☆☆

はじめに

この記事はHeroku上で動くアプリのエラーをどう扱うかを試行錯誤したまとめです。正直、あまり良い方法とは思えなかったのですが、現在は記事の内容で対応しています。

対応方法

アプリに例外が発生したらエラーのメールを投げることでエラーを管理者が確認できるようにしました。
exceptional_notificationというpluginが例外を自動キャッチしてメールを投げてくれるのですが、私のアプリは独自処理で例外をキャッチしていたのでexceptional_notificationを使用できませんでした。なので、自分で実装することになりました。

詳細

Heroku

Herokuは,Ruby on Rails/RubyのWebサービスのホスティングサービスです。無料で手軽にWEBサービスを構築することができ、アプリケーションの負荷が高くなれば有料にすることもできます。
小さくはじめるスタートアップに非常に向いているサービスです。

Herokuログ

Herokuのlogはターミナルから「heroku logs」で確認できます。logの内容はproduction.logです。

Herokuログの問題点

log rotateができません。なのにアプリが動作している限りログは追記されていくので、後でエラーの原因を調査しようと思っても、ログを追うことができません。

エラー処理仕様

  • 例外はキャッチして独自のエラーページを使用する。しかし、例外を独自処理でキャッチした場合exceptional_notificationは使えない。
  • exceptional_notificationのようにエラー発生時にメールを送りたい。でも、独自で例外を補足したい。
  • 有料のadd-onやサービスは利用したくない。なるべく無料が良い。
  • 無料のheroku logsだけでは不安である。エラーは発生時に知りたい。

我がまま過ぎるって?でも、そんなもんです人間は。金がないなら知識と技術で解決しましょう。さあ実装です。

Gmailを使う

エラーメッセージのお知らせにはgmailを利用します。無料で一日500件まで使えます。500件以上利用する場合は、あきらめてメールサーバーを立てるか有料サービスを使いましょう。サービス立ち上げ時には十分な件数のはずです。

/config/environments/production.rbに設定を記載します。


  config.action_mailer.default_url_options = { :host => 'your_app.heroku.com' }
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    :address => 'smtp.gmail.com',
    :port => 587,
    :domain => 'your.host.name', # if local,  localhost.localdomain    
    :user_name => "your_username", # full email address (user@your.host.name.com)
    :password => "your_password",
    :authentication => 'plain',
    :enable_starttls_auto => true,
  }

開発環境でも利用したい場合は/config/environments/development.rbにコピーしてください。
GmailでIMAPが利用できるように設定されていることも確認してください。
GmailでIMAPを有効化にする

mailerを作成


  rails g mailer TestMailer sendmail_confirm

メーラーを作成します。作成されたコントローラー/app/mailers/test_mailer.rbに処理を記述します。


class TestMailer < ActionMailer::Base
  default :from => 'full email address'

  # Subject can be set in your I18n file at config/locales/en.yml
  # with the following lookup:
  #
  #   en.notice_mailer.sendmail_confirm.subject
  #
  def sendmail_confirm(exception)
    @exception = exception
    mail :to => "send_email_address", :subject => '[Web application Error]'
  end
end

sendmail_confirmアクションは引数で例外を受け取っています。
mailメソッドを呼び出すタイミングで、テンプレートtest_mailer/sendmail_confirm.text.erbが呼び出されます。
text.erbには、メールの内容を記述します。

text.erbを作成


エラーが発生しました、

<%= @exception.message %>

エラーの内容を出力するようにしています。他にも欲しい情報があれば、ここに記述します。

独自エラー処理に追加

独自エラー処理はapplication_controller.rbで処理するのが一般的です。なので、ここに作成したメール処理を追加します。


  # 例外ハンドル
  # ルーティングエラーと、データが見つからない場合は404エラー扱い
  rescue_from ActionController::RoutingError, ActiveRecord::RecordNotFound, :with => :render_404
  rescue_from Exception, :with => :render_500

  # 404エラーはログを取りエラー画面を表示
  def render_404(exception = nil)
    if exception
      logger.info "Rendering 404 with exception: #{exception.message}"
    end

    flash[:msg] = 'ページは見つかりませんでした。'
    render 'shared/error' , :status => 404
  end

  # 500エラーはログを取りエラー画面を表示
  def render_500(exception = nil)
    if exception
      NoticeMailer.sendmail_confirm(exception).deliver 
    end

    flash[:msg] = 'サーバーエラーが発生しました。'
    render 'shared/error', :status => 500 # statusがないとcompleted OKになってしまう。
  end

赤い太文字の箇所が追加した処理です。メールでエラーを投げて、独自のエラー画面に遷移するようにしています。

ユーザーは大きな不具合以外は意外と報告してくれないので、メールでエラーが送信される仕組みはあると便利だと思います。

以上です。


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年7月31日火曜日

Point of initial data insertion on Ruby on Rails3

Environment

ruby-1.9.3-p0, rails3.2.2, postgres

Grade

normal


seeds.rb uses to insert initial data for a new application.
for example, you can insert specified id (as id => 1) on postgres table. but sequence is not changed.
therefore, if you insert a new data on admin view, you will get duplicate key error.
you should set the sequence.

seeds.rb


obj1 = TestMaster.new(:id => 1, name => "test")
obj1.save
obj2 = TestMaster.new(:id => 2, name => "test")
obj2.save
// continue until 100

In the above seeds.rb, TestMaster table register the data from 1 to 100.
but, sequence id is not changed. primary id already exists and you will get duplicate key error.
The sequence is a special value that gets nextval function.
you need to add sequence update.

set sequence_id



obj1 = TestMaster.new(:id => 1, name => "test")
obj1.save
obj2 = TestMaster.new(:id => 2, name => "test")
obj2.save
// continue until 100

// set seq
connection = ActiveRecord::Base.connection();
connection.execute("select setval('test_master_id_seq',(select max(id) from test_master))")

As above, sql execute and set sequence value.
you can get correct primary key.

Thanks for reading.
bye!

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

Ruby on Rails3で初期データ投入の注意点

環境はruby-1.9.3-p0, rails3.2.2, postgresです。

難易度★★★☆☆

railsアプリで初期データを投入する場合は、seeds.rbファイルを利用します。
しかし、初期データとしてpostgresのテーブルにidを指定したデータを投入すると、postgresのsequenceがセットされません。
そのため、管理画面等を作成してマスタに追加登録しようとすると、insertのときに失敗します。
そのため、sequenceの更新処理も同時におこなう必要があります。

seeds.rb


obj1 = TestMaster.new(:id => 1, name => "test")
obj1.save
obj2 = TestMaster.new(:id => 2, name => "test")
obj2.save
// continue until 100(100まで継続)

上記のseeds.rbでは、TestMasterテーブルにid1から100までのデータをinsertしています。
しかし、sequenceは変更されていないので、このまま新規登録処理をおこなうとsequenceがidに1を割り当て、重複キーエラーが発生してしまいます。
なので、seeds.rbにシーケンス更新する処理を追加する必要があります。

set sequence_id



obj1 = TestMaster.new(:id => 1, name => "test")
obj1.save
obj2 = TestMaster.new(:id => 2, name => "test")
obj2.save
// continue until 100(100まで継続)

// set seq
connection = ActiveRecord::Base.connection();
connection.execute("select setval('test_master_id_seq',(select max(id) from test_master))")

上記のように直接SQLを発行してシーケンスを設定します。
これでidとsequenceの同期が取れたことになります。

以上です。

参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年7月26日木曜日

how to fix undefined method `per' on Ruby on Rails 3

Environment

ruby-1.9.3-p0, rails3.2.2, postgres

Grade

easy


Active Admin uses kaminari for pagination. My app uses will_paginate for pagination. So I got error.

undefined method `per' for #<ActiveRecord::Relation:0x007feba7775fe8>

I fixed this.

Open Gemfile


vi Gemfile

gem 'kaminari'

bundle install

adding the kaminari gem to app Gemfile. Confirm install.


gem list

kaminari (0.13.0)
...
will_paginate (3.0.pre4)

There are both will_paginate gem and kaminari gem in app. but this does not work. Need to create config/initializers/kaminari.rb. adding description.

kaminari.rb


Kaminari.configure do |config|
  config.page_method_name = :per_page_kaminari
end

You reboot server and login. Your app will operate normally.
Thanks for reading. bye!


helping site

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

Ruby on Rails3でActive Adminを使ったページングエラーの対処

Active Adminでページングエラーが発生したのでメモ。

環境はruby-1.9.3-p0, rails3.2.2, postgresです。

難易度★★★☆☆

Active Adminは、デフォルトでkaminariを使ってページング処理を利用しています。私のアプリではページング処理にwill_paginateを利用していたので以下のエラーが発生しました。

undefined method 'per' for ##<ActiveRecord::Relation:0x007feba7775fe8#>

methodが定義されていないと警告されています。なので、kaminariを導入します。

Gemfileに記述


vi Gemfile

gem 'kaminari'

bundle install

gemを確認します。


gem list

kaminari (0.13.0)
...
will_paginate (3.0.pre4)

will_paginateとkaminariが両方入ったことになります。
しかしこのままでは動きません。config/initializers/kaminari.rbを作成し、以下の記述を行います。

kaminari.rb


Kaminari.configure do |config|
  config.page_method_name = :per_page_kaminari
end

あとはサーバーを再起動すれば動くはずです。

Active Adminは、管理画面を作成するのに本当に便利です。是非、使ってみてください。

以上です。


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年7月24日火曜日

エンジニアに読んでもらいたいエントリーのまとめ

今日はちょっと趣向を変えて、エンジニアに読んでもらいたいエントリーをまとめてみました。

1.零細IT企業の社長だけど、何か質問ある?

2chのまとめかな?2009年頃の記事です。調べものしている時にひっかかった記事だけど、全部読んじゃいました。
内容が少し古めだけど悪くないです。起業は失敗から学び、修正し続けることが重要です。

2.いいアジャイルと悪いアジャイル

これも古い記事です。2006年頃の記事です。内容は今でも通用します。読めば、海外も日本も基本は一緒ってことがわかると思います。
ただ、海外は間違いを認めて行動を修正する速度が違うんですよね。
あなたの勤める企業にも「テクニカルリード信奉者」のマネージャーがいるんじゃありませんか?

3.Getting Real

WEBアプリを開発するなら必ず読んで欲しいエントリー。37signalsの開発手法ですね。

4.ぼくはこうしてプログラミングを覚えた

フェイスブックのエンジニアで史上ベスト3に入るといわれるEvan Priestley氏への質問「どうやってプログラミングを覚えましたか」に対する本人からの答えです。本当にEvan氏の言う通りだと思います。

5.「基礎が大事」という本当の意味を理解しているか?

超良エントリー。継続的な勉強が必要なエンジニアさんは読んどきましょう。


とまあ、5つほど紹介してみたのですがどうでしょうか?
技術onlyでなく、たまにはこういうのもいいかなと思ってまとめました。

ネタがたまったらまた紹介したいと思います。
んじゃ

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年7月23日月曜日

Ruby on Rails3でActive Adminを使う

管理画面の作成にActive Adminを使ったのでメモ

環境はruby-1.9.3-p0, rails3.2.2, postgresです。

難易度★★★☆☆

Active Adminは、railsのプロジェクトで管理画面を作成します。
以下手順です。

Gemfile記述

gem "activeadmin"
gem 'sass-rails'
gem "meta_search",    '>= 1.1.0.pre'

install

rails g active_admin:install

以下が出力

      invoke  devise
    generate    devise:install
      create    config/initializers/devise.rb
      create    config/locales/devise.en.yml
  ===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here 
     is an example of default_url_options appropriate for a development environment 
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { :host => 'localhost:3000' }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root :to => "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       

<%= notice %>

<%= alert %>

4. If you are deploying Rails 3.1 on Heroku, you may want to set: config.assets.initialize_on_precompile = false On config/application.rb forcing your application to not access the DB or load models when precompiling your assets. =============================================================================== invoke active_record create db/migrate/20120722192139_devise_create_admin_users.rb create app/models/admin_user.rb invoke rspec create spec/models/admin_user_spec.rb insert app/models/admin_user.rb route devise_for :admin_users gsub app/models/admin_user.rb gsub config/routes.rb insert db/migrate/20120722192139_devise_create_admin_users.rb create config/initializers/active_admin.rb create app/admin create app/admin/dashboards.rb route ActiveAdmin.routes(self) generate active_admin:assets create public/javascripts/active_admin.js create public/images/active_admin create public/images/active_admin/admin_notes_icon.png create public/images/active_admin/datepicker/datepicker-header-bg.png create public/images/active_admin/datepicker/datepicker-input-icon.png create public/images/active_admin/datepicker/datepicker-next-link-icon.png create public/images/active_admin/datepicker/datepicker-nipple.png create public/images/active_admin/datepicker/datepicker-prev-link-icon.png create public/images/active_admin/loading.gif create public/images/active_admin/nested_menu_arrow.gif create public/images/active_admin/nested_menu_arrow_dark.gif create public/images/active_admin/orderable.png generate jquery:install --ui remove public/javascripts/prototype.js remove public/javascripts/effects.js remove public/javascripts/dragdrop.js remove public/javascripts/controls.js copying jQuery (1.7.2) identical public/javascripts/jquery.js identical public/javascripts/jquery.min.js copying jQuery UI (1.8.18) create public/javascripts/jquery-ui.js create public/javascripts/jquery-ui.min.js copying jQuery UJS adapter (caabad) remove public/javascripts/rails.js identical public/javascripts/jquery_ujs.js rake bourbon:install create public/stylesheets/sass/_bourbon.scss create db/migrate/20120723042152_create_admin_notes.rb create db/migrate/20120723042153_move_admin_notes_to_comments.rb

deviseなんかも勝手に入ります。認証周りをdeviseに移行したい衝動に駆られるが無視。

エラーメッセージ対応

このままweblickを立ち上げるとエラーメッセージが出力されるので、config/application.rbに以下のおまじないを記述


config.i18n.locale = :ja

さらにdevise.ja.ymlが必要です。devise.ja.ymlは/config/localesに配置します。ここのサイトからdevise.ja.ymlをダウンロードします。


config.i18n.locale = :ja

準備完了です。サーバーを立ち上げて、domain/adminで接続すると管理画面が表示されます。devise_create_admin_users.rbに記述してあるメールアドレスとパスワードでログインします。

ログインが出来て、ダッシュボードに遷移できれば成功です。あとは、必要なテーブルの管理画面を作成していきます。

サンプルとしてUsersテーブルの管理画面を作成してみましょう。

rails g active_admin:resource users

再びサーバーを立ち上げて、管理画面にログインしましょう。ダッシュボードにUsersリンクが表示されているはずです。
このように管理が必要なテーブルを作成していきます。カスタムが必要な場合は、変更も可能です。

以上です。


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年7月20日金曜日

Ruby on Rails3で文字数を数える

実行環境はruby1.9.3p0,rails3.2.2,postgres

難易度★★☆☆☆

railsアプリでテキストエリアに入力可能な残りの文字数をクライアント(ブラウザ)側でカウントしたかったので実装しました。

やり方

jqueryを利用します。テキストエリアに入力できる残りの文字数を表示します。

htmlコード


<textarea cols="50" id="text" maxlength="1000" name="text" placeholder="内容" rows="10"></textarea>
<div id="count_up">1000</div>

jqueryコード


$(function(){
  $("textarea").keyup(function(){
    var counter = $(this).val().replace(/\n|\r\n/g,"aa").length;// 改行を適当な二文字で置換
    $("#count_up").text((1000 - counter));
    if(counter === 0){
      $("#count_up").text("1000");
    }
  });
});

コードの説明

さて、上記のコードを見ると「おや?」と思った部分があると思います。おそらくreplace(/\n|\r\n/g,"aa")の部分だと思います。
この部分では、テキストエリア内に改行文字が含まれているとき、改行文字をaaという任意の2文字に置換しています。
なぜなら、railsは改行文字を二文字として認識するからです。
しかし、javaScriptでは一文字にしかカウントされません。
そのためこうしないと、rails側のvalidationの文字数とクライアント(ブラウザ)側の文字数が一致しなくなってしまいます。

railsで文字数取得


count = params[:text].split(//).size

lengthだとバイト数の取得となるので、上記のように配列にして正規表現で取得します。このとき、改行は二文字として認識されます。

最後に

入力文字数の多いテキストエリアで、残りの入力文字数を表示するのは良いインターフェースです。
それでわ。


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年7月12日木曜日

Ruby on Rails3でtwitter,google,yahooで認証する

実行環境はruby1.9.3p0,rails3.2.2,postgres

難易度★★★☆☆

rails3アプリにtwitter,google,yahooでの認証機能が欲しかったのでOmniAuthを使いました。

色々と勉強することが多かったです。以下に補足説明やリンク等をまとめました。

OmniAuthとは?

railsアプリでtwitter, faceBookのような第三者の認証方法を統合する方法です。

サンプルで勉強

まったく利用したことがない人は、ここでサンプルプロジェクトを作成しましょう。
一読して理解できる人はそのまま実装してしまいましょう。

twitter developerに登録

twitter developerに遷移し、create a new applicationで作成するアプリケーション用に新しいapplicationを作成します。これは幾つでも(?)作成できます。

twitterOAuth認証実装

ここのサイトの通りに実装します。詳細に記述されています。

twitterのOAuthについて理解しておくこと

参考サイトを見れば結構すんなりと実装できると思います。OAuthの仕組みを全く理解していなくてもなんとかなります。
しかし、それではまずいです。
OAuthは便利ですが、問題点も多くあります。openIdからOAuth、そしてOAuth2の基本は理解しておきましょう。
以下のサイトで知らないことはきっちりと勉強しましょう。僕は、ノートと問題を作って、繰り返し暗記と学習ができるようにしました。

google, yahooのopenId認証実装

ここのサイトの通りに実装します。詳細に記述されています。
上記のサイトでは、URIが大きすぎるというエラーがでると記載されていましたが、私の環境ではでませんでした。

googleをOAuth2で認証

ここのサイトの通りに実装します。詳細に記述されています。
googleでOAuth2を利用するにはGoogle APIs Consoleを利用できるようにする必要があります。
ここでKEY, SECRETを取得します。
しかし私の環境ではcallback時にURI did not matchがでてしまい、どうしても解決できませんでした。rails以外ならうまくいきます。ここはまだ解決できていません。
私は今回yahooとgoogleはopenIDで認証することにしました。

大事なこと

とにかく連携するソーシャルメディアを使いまくりましょう。
はっきりいって一番大事です。連携するソーシャルメディアで何ができるのか、そして何の情報を取得できるのか。この情報の取得は必要あるのか等等。とにかく使いまくりましょう。
どうしても日々の忙しさにかまけてしまい、利用する側としての時間が少なくなる人は多いでしょう。
私が今回facebook認証を実装しなかたのは、日本で利用するアプリではfacebookは不要と判断したからです。お年寄り専用アプリとかなら必要だと思います。この辺はがっちり利用していないと判断できません。

最後に

googleのOauth2, yahooのOAuth認証はなるべくはやめに実装したいと思います。
その時はまたまとめたいと思います。
それでわ。


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

ピンタレストを使ってみた

SNSサービスのPinterest(ピンタレスト)を導入したので色々とメモ

ピンタレストって何?

画像系のSNSです。
twitter, facebookに次ぐSNSになるのではと言われています。

登録方法

このサイトの動画でとても詳しく説明されています。
現在は招待制で、私は登録一日後に招待メールが届きました。

とりあえず色々と使ってみましたが、シンプルでおしゃれな感じが好印象です。日本人にはこっちのほうが合っていると思いました。

なので、製品の紹介は、twitterやfacebookページでなく、こっちをメインに利用していこうと思います。
その際は、URLを貼付けるので確認してみてください。

参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年7月8日日曜日

Ruby on Rails3で二重送信を防ぐ

実行環境はruby1.9.3p0,rails3.2.2,postgres

難易度★☆☆☆☆

Ruby on Rails3では、二重送信を防ぐ機能が備わっています。

submitタグに以下のようなoptionを追加します。

二重送信を防ぐsubmit_tagにする


<%= submit_tag '送信する', :data => {:disable_with => "保存中..."} %>

:disable_withは、submit時にボタンを無効化した時に表示するテキストです。 rails3.2より前の場合は:disable_withのみでも動いたようですが、3.2以降では動作しません。
必ず:data => {:disable_with => "{#text}"}と指定してください。以上です。

参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年6月28日木曜日

Ruby on Rails3でbutton_toタグでgetメソッドが使えない問題の解決

実行環境はruby1.9.3p0,rails3.2.2,postgres

難易度★★★☆☆

Ruby on Rails3でbutton_toタグをリンクボタンとして利用しようとしたところ、getメソッドが利用できないことがわかりました。
button_toタグをカスタムして強引にgetメソッドで利用しようとしている記事をいくつか見つけましたが、その手法はあまりやりたくないのでやめました。

なぜなら、ボタンはリンクではないからです。
ボタンはあくまでアクションを行うものです。そして、リンクはページ遷移やナビゲーションで利用します。
とはいっても、リンクをボタンのように表示したいという事情もあります。

そこで、link_toタグとcssを利用してボタン風のリンクを作ることで解決しました。以下、やり方です。

buttn_toをlink_toにする


<%= button_to "画面遷移", next_path %>

↓

<%= link_to "画面遷移", next_path %>

リンクタグをspanタグで囲みます。


<span><%= link_to "画面遷移", profile_path %></span>

ボタン風のcssを作成します。ボタンデザインはTwitter Bootstrapを利用すると便利です。
ただし、全てを適用すると、全体のデザインまで変更されてしまうので、.btnだけ抜き出し、自前のcssにコピーします。


.btn{display:inline-block;*display:inline;margin-bottom:0;*margin-left:.3em;font-size:13px;line-height:18px;*line-height:20px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;background-color:#f5f5f5;*background-color:#e6e6e6;background-image:-ms-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(top,#fff,#e6e6e6);background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-repeat:repeat-x;border:1px solid #ccc;*border:0;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);filter:progid:dximagetransform.microsoft.gradient(enabled=false);*zoom:1;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)}.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{background-color:#e6e6e6;*background-color:#d9d9d9}.btn:active,.btn.active{background-color:#ccc \9}.btn:first-child{*margin-left:0}.btn:hover{color:#333;text-decoration:none;background-color:#e6e6e6;*background-color:#d9d9d9;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-ms-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.active,.btn:active{background-color:#e6e6e6;background-color:#d9d9d9 \9;background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}

spanに適用します


<span class="btn" ><%= link_to "画面遷移", next_path %></span>

以上で完了です。あとは好みに応じてカスタマイズします。リンクのクリック範囲を広げる場合は以下のようにします。


.btn a {
  display:block;
  padding: 8px 10px 8px;
}

paddingを使うのがコツです。文字だけだとクリック範囲が狭いので、UI向上のためになるべく適用するべきです。

以上です。buttonでリンクの作成がおすすめ出来ない理由は以下の参考サイトなどを読んでください。

参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年6月27日水曜日

Ruby on Rails3で文字列中のURLにリンクを追加する

実行環境はruby1.9.3p0,rails3.2.2,postgres

難易度★☆☆☆☆

Ruby on Rails3で文字列中のURLにリンクを追加する場合は、rails_autolinkというgemを利用します。
Rails 3.1になるまでは、auto_linkというヘルパーメソッドを利用していたらしいです。(知らないけどw)。でも3.1からは廃止になったので、gemでrails_autolinkかRinkuのどちらかを利用します。

僕の環境は3.2なので、rails_autolinkを使いました。3.2でRinkuだとsimple_formatと一緒に使うと不具合があるようです。

rails_autolinkの導入

アプリケーションフォルダ配下のGemfileに以下を追記します。


vi Gemfile

gem "rails_autolink", "~> 1.0.9"

保存したらbundleインストールします。


bundle install

以上で準備OKです。
あとはviewで以下のように変更します。

変更前
<%= simple_format obj.text  %>

↓

変更後
<%= auto_link(simple_format(obj.text), :html => { :target => "_blank" }) %>

これで文字列中にリンクがあれば、リンクタグが追加されます。
簡単で便利なので、重宝すると思います。
以上です。

参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年6月17日日曜日

Ruby on Rails3ではじめるRspec

今回のプロジェクトではRspecでテストコードを書こうと思って調べてみました。

環境はruby-1.9.3-p0, rails3.2.2, postgresです。

難易度★★☆☆☆

ここでは、railsのプロジェクトを作成する時に、rspecを利用することを前提にプロジェクトの作成をしていることを想定しています。
それ以外の場合は、デフォルトで用意されるUnit::Test周りでエラーが発生するみたいなので、テスト周りの設定を変更してから次の作業を行ってください。

Gemfileに記述

まずGemfileを開きます。


vi Gemfile

ファイルに以下を記述します


group :test, :development do
  gem "rspec-rails", "~> 2.4"
end

Gemfileを保存したらbundle installでgemを最新にします。

gemを最新にしたら以下のコマンドを入力します。


rails generate rspec:install

.rspec, spec_helper.rbが作成されます。
以上で準備完了です。

Modelのテストを記述

さて、ではModelのテストを記述しましょう。UserというModelがあるとします。
spec/models/user_spec.rbのファイルを作成します。内容は以下のように記述します。


# coding : utf-8
require 'spec_helper'

# emailバリーデーションテスト
describe User, "validate_email? methods" do

  it "should be validate_type VALIDATE_TYPE_SIGN_IN" do
    user = User.new
    user.validate_type = User::VALIDATE_TYPE_SIGN_IN
    user.validate_email?.should be_true
  end

end

RSpecは「プログラムの振舞 (behaviour)」を記述するためのドメイン特化言語 (DomainSpecific Language:DSL) を提供するフレームワーク」です。
まったくさわったことのない人にはなんのことかさっぱりだと思います。そういう人はここを一読する必要があります。

内容を記述したら、テストを実行します。


rspec spec/models/user_spec.rb

↓

Finished in 0.27 seconds
1 examples, 0 failures

0 failuresなので成功です。失敗した場合は、エラー内容が詳細に表示されます。
あとはひたすらテストコードを記述していくだけです。他にもテストを便利にする色々なツールがあるようですが、とりあえずここまでです。

それにしても、最初はrailsの覚えることの多さを批判していましたが、結局は色々なツールを併用するようになってしまいました。

もう少し学習コストが低くなってほしいものですね。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

postgresの基本知識

Herokuでpostgresをよく使うようになったので、開発でよく使う基本操作をまとめてみました。

データベースの一覧を表示する


psql -l

データベースの一覧を表示した時、template0,template1というデータベースが表示されるはずです。 これらはテンプレートデータベースと呼ばれるものです。
これらのデータベースは、作成した覚えがないからと削除してはいけません。

これらのデータベースを操作する場合は、テンプレートデータベースの内容をしっかり理解してから変更してください。

データベースを作成する


createdb データベース名

例えばデータベース「company1」を作成する場合は、createdb company1と記述します。
デフォルトでは、新しいデータベースは標準システムデータベース template1 を複製することによって作成されます。

ユーザーを指定してデータベースを作成する


createdb データベース名 -O ユーザー名

例えばデータベース「saiyajin」をユーザー「vegeta」で作成する場合は、createdb saiyajin -O vegetaと記述します。
-0 [オーナー名]でデータベースの所有者となるユーザーを指定します。

データベースにアクセスする


psql -U username database

例えばデータベース「company1」にスーパーユーザー「super」でアクセスする場合は、psql -U super company1と記述します。

テーブルの一覧を表示する


\d

データベースに接続後、上記のコマンドを打ち込みます。

テーブルのカラム情報を表示する


\d テーブル名

例えば「employee」テーブルの情報を確認する場合は、\d employeeとします。

ユーザーを作成する


createuser ユーザー名

例えば新規ユーザー「goku」を作成する場合は、create user gokuとします。

作成したユーザーの情報はpg_shadowテーブルで確認することができます。
接続するデータベースはどれでも構いません。select * from pg_shadowを発行します。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年6月16日土曜日

Ruby on Rails3でlink_toでAjax処理

rails3でlink_toタグを使ってAjaxを利用する場合のメモ書きです。

実行環境はruby1.9.3p0,rails3.2.2,postgres

難易度★★★☆☆

rail3でajax処理をおこなう時に一番困ったのが、ググるとremote_functionタグを使ったやり方が多かったことです。
この機能はrail2.Xまでは一般的だったらしい(知らないけど)のですが、remote_functionタグはrails3では利用できません。

色々と調査したのですが、rails3ではjqueryを使ってajax処理を行うのがよいみたいです。以下に実装してみました。

jqueryの導入

アプリケーションフォルダ配下のGemfileにjqueryの記述を追記します。


vi Gemfile

gem 'jquery-rails'

保存したらjqueryファイルをインストールします。


bundle install

rails generate jquery:install

上記のコマンドでjqueryのファイルがpublicフォルダにinstallされます。
[jquery_ujs.js],[jquery.js],[jquery.min.js]がありますが、最初に読み込むファイルはjquery_ujs.jsにする必要があります。

なので、デフォルトで読み込まれるJavaScriptファイルを設定するためにconfig/application.rbを編集します。


config.action_view.javascript_expansions[:defaults] = %w(jquery.min jquery_ujs)

これで読み込めるようになります。あとはviewでファイルを読み込めるようにします。


<%= javascript_include_tag :defaults %>

これでjqueryが利用できるようになります。
application.jsファイルにサンプル関数でalert("hello ruby jquery")とでも記述して動作を確認してください。
動作しない場合は、pathの設定やファイルの名前をよく調べてみましょう。

link_toの設定

続いてリンクを作成します。viewにlink_toタグを記述します。


<%= link_to "リンク名称", {}, :onclick=> "test(1);return false;" %>

上記のようにタグを記述すると、以下のようなhtmlタグが出力されます。


<a href="/home/main" onclick="test(1);return false;">リンク名称</a>

hrefの内容は無視して構いません。重要なのはonclickの内容です。上記では、リンククリック時に関数test()が呼び出されます。
というわけでtest関数に処理の内容を記述します。

ajax処理を利用した関数

では、上記で設定した関数testを記述しましょう。
関数はなるべくjsファイルに記述しましょう。


function test(test_id) {
  $.ajax({
        url: "/home/test", 
        type: "POST", 
        data: 'test_id=' + test_id + '&authenticity_token=' + $('#authenticity_token').val(),
        success: function(data) {

        },
        error: function() {
          alert("通信エラーが発生しました。時間をおいてもう一度操作をおこなってください。") 
        }
   })
}

url:コントローラーとメソッドを指定しています。上記の例ではHomeControllerのtestメソッドが呼び出されます。
type:データの送信方法。POSTを指定してます。
data:HomeControllerのtestメソッドに送るパラメーターです。authenticity_tokenはhidden_tagを利用して埋め込んで取得します。
これを送らないとエラーになるので注意してください。

さて次はrails側の処理を記述します。

コントローラーの処理とjs.erbファイルとrbファイルの作成

関数を記述したら次はrailsのコントローラーの処理を記述します。
/home/testなのでHomeControllerにtestメソッドを記述します。


  def test
    // something
  end
  

このメソッドを通過後、test.js.erbが呼び出されます。
test.erbではなく、test.js.erbファイルであることに注意してください。
中身は行いたい内容によって変化しますが、idタグを設定して内容を書き換えるのが一般的でしょう。


$('#test_id').html("<%= escape_javascript(@test_name) %>");
$('#test_id2').html("<%= escape_javascript(render :partial => 'test_data_list') %>");
  

更新コンテンツの生成は、部分テンプレートにコードを記述しましょう。
.js.erbファイルにはページ更新のためだけのコードを上記のように記載しましょう。
上記の例だと、_test_data_list.erbが部分テンプレートになります。

終わりに

rails3とjqueryの相性はなかなか良いと思います。
ただ、ある程度jqueryの知識がないと処理が書けないのは苦しいところです。
coffeeScriptとかで記述している人もいるし、この編の覚えることの多さと敷居の高さはrailsに今後づっとつきまとう課題でしょうね。

こんな感じです。でわ

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年6月12日火曜日

Ruby on Rails3でラジオボタンとラベルを生成する


rails3でラジオボタンを利用する場合のメモ書きです。

実行環境はruby1.9.3p0,rails3.2.2,postgres

難易度★☆☆☆☆

まずは基本的なこととして、ラジオボタンを使用する場合は、labelタグも一緒に使うことを理解しておきましょう。

なぜなら、ラベルを設定することで、ラベルをクリックしてもラジオボタンをチェックしたのと同じ効果をもたせることができます。
これはユーザーの操作性を大きく向上させるので必ずやっておくべきです。

ラジオボタンとラベルの記述とフォーム作成


ラジオボタンを利用する場合はフォームに関連づける場合がほとんどでしょう。ということでviewには以下のように記述します。

<%= form_for @user do |f| %>
  <label><%= f.radio_button :sex, "1" %> 男</label>
  <label><%= f.radio_button :sex, "2" %> 女</label>
  <label><%= f.radio_button :sex, "3" %> 秘密</label>
<% end %>

ここではuserモデルを関連づけてます。

:sexはプロパティです。@userオブジェクトのsex属性と関連づけてます。

""で囲んでいる箇所はvalueの値です。

ラベルはradio_buttonタグを囲んで利用します。

上記の場合、コントローラー側での値の取得はparams[:user][:sex]になります。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年5月18日金曜日

開発者視点から見るFacebook株祭り

FaceBookの株式上場を控え、マーケットが狂気に包まれています。
需要が供給をはるかに上回り、公募価格がガンガン上昇しています。
企業の時価総額は8兆3000億円になるとNHKの報道もありました。

私は株にはあまり興味がなく、インデックス投資を少々と、時々安い株を買っては中長期保存して2-3割上昇したら売却するくらいのことしかしていません。
だから断言はできません。しかし、これはちょっと異常な価格なのではないでしょうか。

もちろん、このFaceBook株祭りは、色々なサービスやアプリを開発している私から見るとうらやましい限りです。
この狂想曲は、FaceBookをそれだけ多くの人が使って価値をみいだしている結果ともいえるからです。
自分の作ったサービスが多くの人に使われるのは、本当にうれしいことです。酷評されれば落ち込むこともありますが、褒められ感謝されると、徹夜をも頑張れるパワーをもらえます。
エンジニアでもあるザッカーバーグ氏もきっとそうだと思います。

しかし、僕が異常だと思うのは、エンジニアとしてのザッカーバーグ氏ではなく、アントレプレナーとしてのザッカーバーグ氏です。
「価格は市場が決める」という言葉があります。
よく聞く言葉ですが、これは多分アントレプレナーとしての経験がある人は、一笑するでしょう。正しくは、

「価格はアントレプレナーと市場で決める」

です。

「価格は市場が決める」という言葉は雇われビジネスマンや消費者等にのみ当てはまります。
アントレプレナーは比較的自由な価格設定ができます。原価がうんちゃらとか、関係ないです。自分の納得できる価格で販売し、サービスを提供してビジネスを運営します。
僕はザッカーバーグ氏のビジネス手法について無知ですが、ザッカーバーグ氏は錬金術の天才でもあるということはわかります。
いくらFaceBookが優れたツールであっても、8兆3000億円という時価総額は異常すぎます。
ザッカーバーグ氏が、FaceBookを8兆3000億円という値段まで引き上げたというほうが正しいと思います。僕はいくらなんでもやりすぎだと思います。

これは断言しても良いですが、多くの人がこの評価額を理解出来ていないはずです。
もっともらしい説明を聞いて、「なるほど。そういわれればそうかもしれない、時代は変わったのだ。」と自分を思い込ませているのが本当のところでしょう。
しかし、その疑念は正しいのです。説明を受けてもほとんどの人が疑問を抱くような価格設定が正しいわけないでしょう。
逆に言うと、このサービスが無料で良いのか?と思うようなサービスがあるとすると、それは無料であることは正しくないのです。必ずしわよせがどこかにいきます。

しかし、市場にじゃぶじゃぶと溢れているお金を回すのにこれほど適した企業は他にないのも確かです。
世界中の人が集まる場を提供してるわけですから。ここでのサービスの立ち上げの成功は巨万の富を生むでしょう。

せっかくだから、僕もfacebookのアプリを手がけてみましょうかねw
ジンガのように大成功するかもしれませんしね。

さて、これくらいで久しぶりの雑談を終了にしましょう。
書きたいネタがたまっているので、ちょこちょこ書いていきたいと思います。

でわ。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

rails3でsqlのcountとgroupを同時に利用する

どつぼにはまったので以下にメモ。

環境はruby-1.9.3-p0, rails3.2.2です。

テーブルtestのカラムuser_idでグループ化してデータ件数も一緒に取得したい場合は、普通に考えると以下のようになります。


  Test.group(:user_id).count

実際、上記の記述をすると、以下のような正常なsqlが発行されます。


SELECT COUNT(*) AS count_all, user_id AS user_id FROM tests GROUP BY user_id

しかし、上記のsqlをモデルで発行すると、取得する配列が妙な形になります。戻り値がRecordのクラスで返却されるからですかね?Modelクラスにcount_allというアクセサーを設定してやってもうまくいきませんでした。
試行錯誤した結果、以下のようにやることにしました。


Test.connection.select_all("select COUNT(*) AS count_all, user_id AS user_id FROM tests GROUP BY user_id")

上記では、直接sqlを指定して、配列(Array)でデータを取得しています。
つまりのところ、

ActiveRecordではcountとgroupを同時に利用するsqlなんて想定してないよ!!

ということです。さらに最近わかったことは、

困った時は、ごりごりと生sqlを書くと楽になる

ってことです。美を求めすぎるのは、時間の無駄です。結局

動作すること > 生産性 > きれいなコード

ということですな。なっはっはっは。

でわ。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年5月11日金曜日

rails3 select_dateタグの使い方

select_dateタグを使おうとしてめちゃくちゃはまったのでメモ

環境はruby-1.9.3-p0, rails3.2.2です。

サンプルとして、日付の検索をセレクトボックスで選ぶことを想定しています。

最初のcontroller


    year = Time.now.year.to_s
    month = Time.now.month.to_s
    day = Time.now.day.to_s
    
    @search_date = Date::new(year.to_i, month.to_i, day.to_i)

view


<%= select_date(@search_date, :prefix=>"search") %>

上記のように表示されます。選択したら検索処理を行うcontroller側で以下のようにパラメーターを取得します。


    year = params[:search][:year]
    month = params[:search][:month]
    day = params[:search][:day]

    from = Date::new(year.to_i, month.to_i, day.to_i)
    @search_date = from

上記のようにパラメーターを設定すると、検索したパラメーターが画面に表示されます。
日付計算はDateで加算や減算をしてtimeオブジェクトに変換することが多いと思いますが、それはまた次の機会で。

でわ。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年5月5日土曜日

Rails3でWEBサービスを作ってみました。@railの感想

とりあえず、はじめてrails3でWEBサービスを作ってみました。

Dinet

というWEBサービスです。ざっくり説明すると、ダイエットについて議論する掲示板です。もしよかったら使ってみてください。
今は適当なメールアドレスでも登録できるようになってますw

TOP画面へ遷移する


環境はruby1.9.3,rails3.2,postgres9.1。PaaSはHerokuを利用しました。
開発期間は企画からリリースまで1ヶ月半ほど。時簡にして400時間くらいです。

rails3を選んだのは、一人で全て開発するのでコーディングの量を減らし生産性を高めたかったからです。
他にはpythonのdjangoやscalaのplay!も考えましたが、とりあえず今風のrailsにしました。

で、railsの感想です。

いいところ
  • 短期間でWEBサービスがつくれちゃう
  • Herokuとか無料やで。しかもaddonでバッチとかも使えちゃう
  • rails3はrails2.xまでに比べると格段に良くなっているようである(知らんけど)
悪いところ
  • 最初に覚えること多すぎ
  • 開発環境がMacかLinuxじゃなきゃしんどい
  • Weblickめっちゃ遅い。(thinってのにすればいいのかな?)

総合的に見ると、railsはかなり「良い」開発環境です。特にサービスの立ち上げに力を発揮するでしょう。 ある程度仕組みを覚えてしまえば、色々なサービスを量産してtry&errorを行えます。ベンチャー企業ならほぼこれで決まりですかね。
ただ、SI系でがっつりやってきた人は気持ち悪さを感じるでしょう。もうこれは文化が違うのでどうしようもないですね。

今回のサービスは色々妥協したので、ちょっとづつメンテナンスして直していきたいと思います。 こういったことが手軽に出来るのもHerokuの利点ですね。

ずっとアプリ開発だったので久しぶりのWEB開発は面白かったです。もう1作品くらいつくってみようと思います。

djangoかplay!にする予定(予定は未定)ですが、そのうち報告します。

あーなんか、疲れました。それでわ。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年4月19日木曜日

Ruby on Rails3でdeviseの利用を中止

さて、過去3回にわたってスクラッチから認証のシステムを作成しました。
これで認証の理解はバッチリなので、いよいよdiviseを使った認証をおこなっていきたいと思います。 環境はruby-1.9.3-p0, rails3.2.2, sqlite3です。

と、ここまで記述したのですが、結局deviseは利用しないことにしました。
一週間くらい検証に時間を費やしたのですが、今の力量で使うには危険すぎると判断しました。
少しカスタマイズするだけで影響が大きく、自分で実装した方が安全だからです。

rails初心者にはあまり薦められないツールのような気がします。ブラックボックスすぎて怖いです。

そんなわけで、僕はrails初心者がdiviseを使用するのはおすすめしません。ページングのkaminariもそうだったのですが、rails3のデファクトで良いとされている ツールは正直汎用性が低すぎるのではないかという印象です。もっとrubyとrailsに慣れればそうでもないのかもしれませんけどね。
僕の設計がrailsに合ってないのが原因もあると思います。

しかし、railsは生産性の高い万能フレームワークのようにいわれていますが、思うところが多々あります。

その内容は今度まとめて書きます。

以上です。でわ。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2012年4月11日水曜日

Ruby on Rails3でdeviseを使う前準備その3ログアウト

さて、前回の記事では、ログインの仕組みを作成しました。今度はログアウトの仕組みを作成します。
この記事は前回の続きなので、前回を読んでいないと、多分理解できません。
環境はruby-1.9.3-p0, rails3.2.2, sqlite3です。

ルーティングの設定


  get "log_out" => "sessions#destroy", :as => "log_out" # 今回追加
  get "log_in" => "sessions#new", :as => "log_in"
  get "sign_up" => "users#new", :as => "sign_up"
  root :to => "users#new"
  resources :users
  resources :sessions

設定ができているかをrake routesコマンドで確認します。


     log_out GET    /log_out(.:format)           sessions#destroy
      log_in GET    /log_in(.:format)            sessions#new
     sign_up GET    /sign_up(.:format)           users#new
        root        /                            users#new
       users GET    /users(.:format)             users#index
             POST   /users(.:format)             users#create
    new_user GET    /users/new(.:format)         users#new
   edit_user GET    /users/:id/edit(.:format)    users#edit
        user GET    /users/:id(.:format)         users#show
             PUT    /users/:id(.:format)         users#update
             DELETE /users/:id(.:format)         users#destroy
    sessions GET    /sessions(.:format)          sessions#index
             POST   /sessions(.:format)          sessions#create
 new_session GET    /sessions/new(.:format)      sessions#new
edit_session GET    /sessions/:id/edit(.:format) sessions#edit
     session GET    /sessions/:id(.:format)      sessions#show
             PUT    /sessions/:id(.:format)      sessions#update
             DELETE /sessions/:id(.:format)      sessions#destroy
  

準備OKです。続いてsessions_controllerコントローラーにログアウト処理を実装します。

ログアウト処理


  def destroy
    session[:user_id] = nil
    redirect_to root_url, :notice => "Logged out!"
  end

以上で完了です。サーバーを起動して、http://localhost:3000/log_outにアクセスしましょう。
ログアウトされるはずです。
アプリケーションでは、viewでログイン、ログアウトの状態を切り替えられるようにすると良いでしょう。

さて、これで認証のコーディングは終わりです。
確かに、一度はくらいはスクラッチから認証の仕組みはつくっておいたほうが良さそうですね。
他の認証系のgemも同じような作りでしょうから。

僕が今回参考にしたのは
http://railscasts.com/episodes/250-authentication-from-scratch
です。

英語のサイトですが、この記事と組み合わせれば特に問題ないでしょう。

それでは、また。長い時間お疲れさまでした。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

Ruby on Rails3でdeviseを使う前準備その2ログイン

さて、前回の記事では、ユーザー登録の仕組みを作成しました。今度はログインの仕組みを作成します。
この記事は前回の続きなので、前回を読んでいないと、多分理解できません。
環境はruby-1.9.3-p0, rails3.2.2, sqlite3です。

コントローラーの作成


cd auth // プロジェクトフォルダへ移動

rails generate controller sessions new

sessions_controllerとsessions/view/new.html.erbのviewを作成します。

new.html.erbを変更

<h1>Log in</h1>
<%= form_tag sessions_path do %>
 <p>
   <%= label_tag :email %><br/>
   <%= text_field_tag :email, params[:email] %>
 </p>
 <p>
   <%= label_tag :password %><br/>
   <%= password_field_tag :password %>
 </p>
 <p><%= submit_tag %></p>
<% end %>

viewを作成。emailとパスワードの入力フィールドを表示します。

ルーティングの設定


  get "log_in" => "sessions#new", :as => "log_in" # 今回追加
  get "sign_up" => "users#new", :as => "sign_up"
  root :to => "users#new"
  resources :users
  resources :sessions # 今回追加
 

設定ができているかをrake routesコマンドで確認します。


      log_in GET    /log_in(.:format)            sessions#new
     sign_up GET    /sign_up(.:format)           users#new
        root        /                            users#new
       users GET    /users(.:format)             users#index
             POST   /users(.:format)             users#create
    new_user GET    /users/new(.:format)         users#new
   edit_user GET    /users/:id/edit(.:format)    users#edit
        user GET    /users/:id(.:format)         users#show
             PUT    /users/:id(.:format)         users#update
             DELETE /users/:id(.:format)         users#destroy
    sessions GET    /sessions(.:format)          sessions#index
             POST   /sessions(.:format)          sessions#create
 new_session GET    /sessions/new(.:format)      sessions#new
edit_session GET    /sessions/:id/edit(.:format) sessions#edit
     session GET    /sessions/:id(.:format)      sessions#show
             PUT    /sessions/:id(.:format)      sessions#update
             DELETE /sessions/:id(.:format)      sessions#destroy
  

準備OKです。続いてsessions_controllerコントローラーにログイン処理を実装します。

ログイン処理

class SessionsController < ApplicationController

  def new
  end
  
  def create
    user = User.authenticate(params[:email], params[:password])
    if user
      session[:user_id] = user.id
      redirect_to root_url, :notice => "Logged in!"
    else
      flash.now.alert = "Invalid email or passsword"
      render "new"
    end
  end
  
end

上記の処理ではユーザーデータが取得できた場合はセッションにユーザーIDを保存し、画面遷移します。
ユーザー情報がない場合は、エラーメッセージを表示しています。

Userクラス

コントローラーで宣言したUserのauthenticate処理を実装します。


  def self.authenticate(email, password)
    user = find_by_email(email)
    if user && user.password_hash == BCrypt::Engine.hash_secret(password, user.password_salt)
      user
    else
      nil
    end
  end
  

メールと、ハッシュパスワードが等しい場合は、userオブジェクトを返しています。

さて、ここまでできたら、サーバーを起動して、http://localhost:3000/log_inにアクセスしましょう。
ミスがなければ画面が表示されるはずです。入力チェックと、正常入力を試してみてください。
loginが正常に働いて、画面遷移できれば成功です。

さて、次回はログアウトの仕組みを作成していきましょう。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

Ruby on Rails3でdeviseを使う前準備その1ユーザー登録

さて、前回の記事では、diviseを使う前に、railsで認証の仕組みを一度スクラッチから組むべきだというReadMeの内容を紹介しました。
そんなわけで今回は、railsで認証の仕組みをスクラッチから作成していこうと思います。
環境はruby-1.9.3-p0, rails3.2.2, sqlite3です。
この記事の対象者は、railsのド基礎を理解している人です。つまり、controllerでviewからのパラメーターを取得して、DBにデータを格納する流れがわかるレベルでOKです。中級者と上級者は帰ってください。僕が恥ずかしいからw

しかし、本当に覚えること多すぎじゃね、Rails。javaのEJBより敷居高いかも。

というわけでLet's start!!

プロジェクトの作成


rails new auth 

コントローラーの作成


cd auth // プロジェクトフォルダへ移動

rails generate controller users new

users_controllerとusers/view/new.html.erbのviewを作成します。

テーブルモデルの作成


rails generate model user email:string password_hash:string password_salt:string

emailはメールアドレスです。password_hashはパスワードハッシュのことです。意味はこういうこと。
password_saltはパスワードハッシュ値を作成する時に、パスワード文字列と共に用いられる任意の文字列のことです
なに言っているかわかね〜って人は認証のシステムを作る前に、セキュリティの勉強からはじめてください。

テーブルの作成


rake db:migrate

テーブルが作成されます。これで準備OK。続いて、コードを記述していきます。

UsersControllerを記述

# coding : utf-8
class UsersController < ApplicationController
  def new
    @user = User.new
  end
  
  def create
     @user = User.new(params[:user])
     if @user.save
      redirect_to root_url, :notice => "signed up!"
     else
       render "new"
     end
  end
end

createメソッドは、userのパラメーターを取得してDBの保存に成功したら、root_urlへ遷移し、メッセージを表示します。失敗した場合は、エラーメッセージと共にnew.html.erbを再表示します。

new.html.erbを変更

<h1>Sign Up</h1>
<%= form_for @user do |f| %>
 
 <!-- error msg -->
 <% if @user.errors.any? %>
   <ul>
     <% @user.errors.full_messages.each do |msg| %>
     <li><%= msg %></li>
     <% end %>
   </ul>
 <% end %>
 
 <!-- display field -->
 <p>
   <%= f.label :email %><br/>
   <%= f.text_field :email %>
 </p>
 <p>
   <%= f.label :password %><br/>
   <%= f.password_field :password %>
 </p>
 <p>
   <%= f.label :password_comfirmation %><br/>
   <%= f.text_field :password_comfirmation %>
 </p>
 <p><%= f.submit %></p>
<% end %>

viewを作成。emailとパスワード、パスワードの確認を表示します。保存失敗の場合のエラーメッセージも表示します。

ルーティングの設定


  get "sign_up" => "users#new", :as => "sign_up"
  root :to => "users#new"
  resources :users
  

getはHTTPメソッドです。=>は:controllerと:actionの短縮生です。:asはルート名です。詳しい説明はここが理解しやすいです。

設定ができているかをrake routesコマンドで確認します。


  sign_up GET    /sign_up(.:format)        users#new
     root        /                         users#new
    users GET    /users(.:format)          users#index
          POST   /users(.:format)          users#create
 new_user GET    /users/new(.:format)      users#new
edit_user GET    /users/:id/edit(.:format) users#edit
     user GET    /users/:id(.:format)      users#show
          PUT    /users/:id(.:format)      users#update
          DELETE /users/:id(.:format)      users#destroy
  

はい準備OKです。続いてUserクラスを修正します。

Userクラス

必要なのは、パスワードのアクセサー、バリデーションの処理です。


  attr_accessor :password, :password_comfirmation
  
  validates email,
    :presence => true,
    :uniqueness => true
  validates password,
    :presence => true,
    :length => {:minimun => 7, maximum => 15}
  

メールは一意で入力必須。パスワードは、入力必須で7-15文字制限にします。

続いてパスワードの暗号化を行います。暗号化にはbcrypt-rubyを使います。Gemfileに記述してライブラリを利用できるようにします。


  vi Gemfile
  
  gem "bcrypt-ruby", :require => "bcrypt"

暗号化処理

続いて、暗号化処理を実装します。パスワードの暗号化はvalidationのチェックの終了後、つまりテーブルに保存する前におこないます。


  attr_accessor :password, :password_comfirmation
  before_save :encrypt_password
  
  validates email,
    :presence => true,
    :uniqueness => true
  validates password,
    :presence => true,
    :length => {:minimun => 7, maximum => 15}
  

暗号化処理を実装します。


  attr_accessor :password, :password_comfirmation
  before_save :encrypt_password
  
  validates :email,
    :presence => true,
    :uniqueness => true
  validates :password,
    :presence => true,
    :length => {:minimun => 7, :maximum => 15}

  def encrypt_password
    if password.present?
      self.password_salt = BCrypt::Engine.generate_salt
      self.password_hash = BCrypt::Engine.hash_secret(password, password_salt)
    end
  end
 

bcrypt-rubyの処理内容はここで確認できます。

さて、ここまでできたら、サーバーを起動して、http://localhost:3000/sign_upにアクセスしましょう。
ミスがなければ画面が表示されるはずです。入力チェックと、正常入力を試してみてください。
正常入力がうまくいったら、dbを確認してみましょう。

1|test@test.co.jp|$2a$10$BLJBZXyvzecoZJeiZrMYhOuZbRQJQDyESfMjrcwkofvB2UGGBvdPK|$2a$10$BLJBZXyvzecoZJeiZrMYhO|2012-04-11 06:29:23.361652|2012-04-11 06:29:23.361652

おお。見事に入力されていますね。暗号化も完璧です。

さて、次回はログインの仕組みを作成していきましょう。

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加
Related Posts Plugin for WordPress, Blogger...