Page 3

Ruby on Rails 3.2.0 ビヘイビア駆動型開発RSpecのスタートアップ

アプリケーションが複雑になってきて、疎結合でがんばっていてもどうしてもひとつ直すと一方に影響してしまう状況になったので、やっぱりテストもきちんとしなければと思いなおし調べた結果、RSpecというのがどうやらよいらしい。

一応デフォルトのTest:Unitを使っていたのですが、どうせ本格的に導入するならみなさんが「いい」といっているほうがいいにきまってます。

ということでRSpecをはじめました。

が、情報が少ない!いきなりつまずいてしまいました。

ネット上の記事によっていろいろ違うことが書いてあります。どれも環境によって使い方が違うのか、短い間に仕様がいろいろ変わったのかなと想像していますが。
なのであくまで私の環境においてどのようにはじめたかを記述します。

環境は下記のとおり

  • OS:Windows7上にVirtualBoxにてUbuntuをインストール
  • ruby 1.9.2p290 (2011-07-09 revision 32553) [x86_64-linux]
  • Rails 3.2.0

まず、インストールです。Gemfileに下記を記入

gem ‘rspec-rails’, ‘>= 2.6.0′, :group => [:development, :test]

$ bundle installを実行してインストールされたことを確認。

次にプロジェクトにRSpecを初期設定します。
$rails g rspec:install

この状態でscaffoldなどを使うと自動的にspec/のなかにmodels/hoge_spec.rbなどのファイルができます。

これらのファイルは自分で作ってもOKなのですが、だーっと作ってもらえるのはやっぱりうれしい。
ところが私の場合プロジェクトの途中ですのですでにたくさんのモデルやcontrollerを作ってしまっていました。

すでに存在するものに対してspecファイルを作るには以下のとおり。

$ rails generate rspec:model Hogehoge

コントローラも同様に作れる模様。

その後で
$ rake  spec
ですべてのテストを実行できます。

■なやんだところ

一部の記事にはRSpecをインストールした後、
$ spec -v
でインストールされたかどうかを確認する。とありましたが
$ rspec -v
で確認することができました。

Gemファイルとして提供されているものではなくRailsのプラグインとして導入するよいと薦めている記事もあります。 これによってその後の操作が違うようです。

Ruby on Rails Ver.3.2.0: generate scaffoldを取り消す手順

$ rails destroy scaffold 取り消したいScaffold名

でappのmodel,view,controllerの各要素やhelper,javascript,stylesheetなどgenerate scaffoldで作られたものがすべて削除される。

が、DBが残っている。

のでそれも消す。下記はsqlite3でgtoupsテーブルを削除する例

sqlite3 db/development.sqlite3 #接続
sqlite> .tables #テーブルがあることを確認
sqlite> DROP TABLE groups; #削除
sqlite> .tables  #テーブルが削除されたことを確認

 
 

いまさらですがRuby on Railsはじめました。

PHPがなんとなく肌に合わないと感じていました。コードの美しさやオブジェクト指向具合という部分がなんとなくイマイチ。これは主観なので「まったく逆」という意見の人もいるかと思います。私の場合はPHPよりもよっぽどJavascriptのほうがオブジェクト指向に感じてしまうのです。

自社開発のアプリケーションをサーバー側の言語としてPHPを使用すること想定していたのですが、アプリケーションが複雑なだけに仕様をつくることに長い時間をかけており、なかなかはじめられない状態です。アジャイル的にやらないといつまでたってもはじめられないぞ。ということでアジャイルの考えがあらかじめ入っているような言語に思い切って変えてみようということに。

で、Ruby on Railsを選択しました。

言語やフレームワークとして癖のようなものは感じません。Railsの「設定よりも規約」という言葉の意味がようやくわかりました。規約にのっとってやれば設定する手間が省けますよね。というようなことです。なれればスイスイ実装できそうな気配。一方ブラックボックスがその分おおいということなので、トラブルの解決は時間がかかるかもしれませんけどね。

Cassandraにも興味があったのでFacebookで使われているらしいPythonも考えました。でもデータがそれほど大きくなる予定がないのでとりあえずRDBで問題ないということや、Rubyを考えた人が日本人という親近感もあったのでPythonは後回しに。コレが終わったらPythonもかじってみようかと思っています。

ちょっと腰をすえて勉強しないととおもっていたのですが、思った以上に肌が合います。すでに好きになってしまいました。

HTML,Javascript,CSSが本業で、サーバーサイドのプログラムも勉強していきたいという人はだいたいPHPにいくと思うのですが、Rubyにしてみてもよいかもしれません。

 

サイト制作のテスト環境をwindowsからlinuxへうつしたのでメモ

サイト制作のためにwindows&xamppからlinux&lampにしました。

方針
1:なるべく本番環境に近い状況を作り出すため、仮想Linuxサーバーを使う。
2:なるべく本番環境への操作に近い状態を作り出すため仮想サーバーへはSSHかFTPを使用する。
3:マルチドメイン的に使用する。
4:実際のドメインで見られるように。
5:個人的なテスト環境にするため仮想サーバーは自身のコンピューターにインストールし、外部からは接続しないようにする。

ということで選択した方法が下記になります。

1:仮想化にはVirtualBoxを使用。
2:linux はUbuntuを使用(デスクトップ版。特に意味はないが使いやすそうだったから)
3:webサーバーはLAMP。
4: FTPサーバーにvsftp。
5:ウィンドウズからブラウザで見るときはhostsファイルを操作。

以下参考にさせていただいたサイトです。
■VirtualBoxの構築からウェブサーバーの設定まで
考えてる途中[テスト環境作り]
途中、VirtualBoxとUbuntuのファイル共有のやり方も載っています。
■さらにマルチドメイン的に動作させたかったので、
この辺りを参考に。
■Windowsからテストサイトを実際のドメインで見たかったかったので
ココを参考(CentOSでしたがほぼ同じ)にVirtualBoxのネットワークを設定し、UbuntuのIPを固定しました。
ブリッジ接続を使う方法も考えましたがプライベート具合という部分と、LANによってIPが変化せざるを得ない面倒くささからNAT+ホストオンリーという方法を選択しました。
■テストサイトと本番環境をすばやく切り替えたかったので Hosts Managerをインストールして使用します。
■どうせプライベート環境なので使いやすいFTPでの接続にすべく、こちらを参考にvsftpを設定

ひとまずOKですが、もう少しやりたいことが

■phpmyadminをインストール→shinodogg.com[Ubuntuにphpmyadminのインストール]
■.htaccessを有効にする。→UbuntuのApacheで.htaccessを有効にする方法・コマンド

これでやっと大体レンタルサーバーと同じようなことができる環境が整いました。初めてのことは何でも時間がかかりますね。

wordpress + chromeで編集時に文字化けが起こる現象について。

ちょっと前から気がついていたのですが、Wordpressをchromeで編集するときに「&」とかが「.」になっちゃったりする現象がありました。

ググるとちょこちょこと情報が。ただ、現象が起こりうる条件が結構厳しいらしく、症状はまれなケースらしいです。

どうやらfont-familyが原因みたいで、chromeの「要素を検証」で一部のfont-familyを消してみるときちんと表示されました。
つまりそのフォントが入っているPCというのもひとつの条件ということです。
じゃあスタイルを適応しなおせばいいですね。ということで犯人のCSSを調べたところ、

/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

に記述されているbodyに指定されたfont
font: 13px/19px Georgia, “Times New Roman”, “Bitstream Charter”, Times, serif;
の下にあらためて
font-family:”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
と指定してアップしたら直りました。日本語で見やすくなるというおまけつき。

wordpressのアップデート時に再び元に戻る可能性はありますが、とりあえず直った。よかった。

jQueryの$.css(‘width’)や$.css(‘height’)取得はcssを設定していなくても実際の値が返ってくる

jQueryので幅や高さを取得する場合はwidth()メソッドやheight()メソッドが便利だが、
css()メソッドを使用して$.css(‘width’)や$.css(‘height’)でも取得できる。
でも単純にcssで設定されている値を取得したい場合には邪魔になる機能だったりする。
css()メソッドはCSSとして設定していないのに数値pxが返ってくるらしい。(jquery1.7.1で検証)

この場合はget()メソッドを使用して一度DOMを取得してからDOM.style.widthやDOM.style.heightを参照するとよい。

[HTML]
<div id=”test”>TEST</div>
<script>
console.log($(‘#test’).css(‘width’));//出力:’1345px’ (実際の大きさ)
console.log($(‘#test’).get(0).style.width);//出力:” (空)
</script>

[/HTML]

Flasherの衰退と今後の人材と教育について

以前勤めていた会社ではFlasher(Flashコンテンツを作成する人)として働いていました。
当時はFlashがリッチコンテンツを作るうえでとても手軽なことがあり、
ブラウザ上だけでなく、SONYのVAIOに標準搭載されるアプリケーションのUI部分の作成など、
Flashを作成する技術が世の中で重要なスキルだったとおもいます。

「Flashが今後なくなることはないけれども、モバイル機器用のは開発しない」というアドビの発表。

さて、それに代わるのがHTML5だというのですが、これは話を少々単純にしすぎです。
「一部ではそう」ですが、ほんの一部です。もっというとHTML5で新しくできることって厳密に言うとそんなにないのではないかと思います。

ビデオが見れる。絵が描ける。などの実現はFlashではなくてもQuickTimeやJavaアプレットなどでできました。HTML5の厳密な見方はこのような「プラグインに任せていた部分をブラウザがやりますということになった」ということだと思います。
実際HTML5として紹介されている多くの部分をAjaxが担っています。
Ajaxが登場したときも同じでした。Ajaxは通信する方法の名前でしかなく、開発はほぼjavascriptです。

カートにドラッグできるショッピングサイトなんかをFlashで作るようなことは
ずいぶん前からなくなっていて、Ajaxで作ります。
その時点でFlashの役割のかなりの部分はAjaxに取って代わっていました。

CSS3もそうですね。

このように、Flashは急に役割を取られたのではなく、徐々にそうなっていったのです。

それなのに突然な印象を与えたのは、Apple社のモバイル製品がフラッシュを非対応にしたときです。
正直「えぇ?」と思いました。それは二つの理由からです。
ひとつはまだまだFlashで作られたサイトやサービスがたくさんある状況でお客さんがどのように反応するだろうという不安。
二つ目はFlashが(Flasherという職が)なくなってしまうのではないかという危惧。

一つ目の理由については、本当に驚きました。一流の先導者の凄み、出てました。
二つ目の理由についてはそれほど意外なことではなかったです。

さて、HTML5の時代にこれから入ります。
今後Flasherは普通にやっていたら食べれないと思います。

進路のパターンとしては、
1:他の技術も習得してポリバレントな技術者になる。
2:さらに進化していくだろうFlashの最先端をひたすら追い続け、職人として生きる。

どちらかというと私は1のパターンです。デザインやアニメーションが強い人は2のパターンになるのかな。

媒体で言うと、1のほうが圧倒的に舞台が多い。

そういうわけで就職も1の人材のほうが就職しやすいでしょうね。
2は会社を選びます。故に狭き門。職人の淘汰がされるでしょうね。

HTMLコーダーと呼ばれている職業の人がHTML5という名前だけを理由に、それをやらされているとも聞きます。
FlashでActionScript書いてた人のほうが簡単に習得できる技術だと思うので、
HTML5の表面の部分(マークアップとCSS)と動作部分(Javascript)で職種名を分けて、
Javascript側をやる人として再就職とかお勧めです。Javascripterとか、Ajaxianとか。

現在の教育の現場でもいまだにHTMLとかFlashとか分けて教えられていますが、
それらの境目を作るのは早くやめてほしいと思います。
まずウェブサービスが動いている全体を感じられる指導をしてほしい。

1:ネットワークを組む。(プラモデル方式に)
2:サーバーを立ち上げる。(ざっと)
3:データベースを作成(いわれたとおりに)
4:サーバー側の簡単なプログラム(一応内容を把握)
5:クライアント側の簡単なプログラム(アレンジしてみる)
6:それらを動かす。

これを一度体験しておくことで、その後どんな専門を持ったとしても、
技術革新が早いこの業界においても自分を変えながら生きていける絶滅しない人材になれると思います。

DeAGOSTINIさんあたりで出ないかな。ニッチすぎるか。。

javascript php ajaxでphpからjavascriptへのリスポンス(jquery使用)

1:javascriptからPHPは$.ajaxを使用

$.ajax(ajaxOption);

2:PHPからjavascriptはjson形式で返す

$json = json_encode($result);
echo $json;

3:受け取り側javascriptでjsonにパース

json = null;
try{json = $.parseJSON(msg);}catch(e){}
if(json){
//処理
}

Smarty:html_optionsで出力される改行を出力しないようにする。

いったん定義してからエスケープする。

{capture assign="opt"}{html_options ...}{/capture}
{$opt|escape:javascript}

BEAUJOLAIS-VILLAGES NOUVEAU GOLD


さっぱりしたボジョレー。すごくおいしかったです。
パッケージが金。近所のエノテカさんで買いました。

銀もあって、セットで買いました。そっちはまだ飲んでないですケド。

日本初上陸なんだそうですが、このボジョレーは和食によくあうと思います。鍋とか。

金と銀とどう違うんですか?との問いに店員さん「赤と白です」とのこと。

もっかい金買ってクリスマスにでも飲もう。