こんにちは。Ruby（とRails）を担当している石原です。
ひとりで Web サービスを作る過程を記録していく2回目です。前回、ログイン機能を作っただけ(と言ってもプラグインを導入しただけなのですが。。。)で終わってしまい、2週間が経ってしまいました。こんなペースでやっているといつまで経っても出来上がらないので、前回より少し飛ばしていきます。
そういえば、まだどんなサービスを作るかも決まっていませんでした。
1) みんなで情報を共有できる、2) 世界に発信できる、というのが Web のすばらしい特徴だと思っています。なにかをみんなで共有する、というのと、まずは英語版でも展開できるサービスというのを考えてみました。
前からあたためていたアイデアなのですが、「OSを入れた後にインストールする10のアプリケーション」をみんなで共有できるサービスなんていうのはどうでしょう?筆者は、他人がどんなアプリケーションをインストールしているのかって結構興味があります。共有することによって、誰のリストにも入ってくる定番のアプリケーションがわかったりするかもしれません。コメントや点数評価、タグ付けといったいわゆる Web 2.0 的な機能も付け加えたいですね。
今回は、基本的なレイアウトを決め、英語版もすぐリリースできるよう多言語化の用意もしておき、ログイン機能を整えた上で、ひとりサービスの雛型として次のサービスを作るときにも再利用できるものを作ります。
レイアウトを用意する
Ruby on Rails の話から少し逸れますが、Web サービスを作る上でかなり大事な要素である見た目の話。
決して CSS エキスパートでない筆者がとりあえず公開してもはずかしくないレイアウトのテンプレートを探すのに参考にしたのが、HTML/CSSまとめノート -つくるぶ まとめで紹介されていた、そのままずばり CSS Layouts というサイトです。
750px、950px、100%の3つの中から、ウィンドウの幅が変わってもある程度見た目が変わらなくてユーザーにやさしいと言われている 100%(リキッドレイアウト) のテンプレートを選びました。シンプルな Full Main Column Layouts の左メニュー 180px のLayout 02 です。
テンプレートを Rails のビューにあてはめていきます。
layouts/application.rhtml にベースの HTML を書き、そこにヘッダー(shared/_header.rhtml)、左メニュー(shared/_left.rhtml)、フッター(shared/_footer.rhtml)の各部分テンプレートを
<%= render(:partial => "shared/header") -%>
のようにして読み込む構成です。
フォルダ・ファイル構成は以下の通り。
表示させてみた結果が以下の通りです。
ロゴは controllers/application.rb で $SITE_NAME = "alpha" のようにグローバル変数に代入したサイト名を元にして、
<%= image_tag "http://www.h-master.net/web2.0/image/(reflect)#{$SITE_NAME}BETA.png" %>
のように、Web2.0 Logo Creator by Alex Pというロゴジェネレーターを使って動的に作成して表示しています。
フッターにはさっそく copyright を表示。
こういった最低限の見た目を最初に整えておくと、開発するモチベーションを高めることができます。ひとりで開発していく上で、結構大事な点だと思っています。
Ruby-GetText で多言語対応
世界に通用するサービス(?)を目指し、次は多言語対応です。
Ruby-GetText を導入します。
» Ruby-GetText の導入 - Rails で行こう！ - Ruby on Rails を学ぶ
に導入方法がよくまとまっています。
「重大注意」の部分にさえ気をつければ(myproject の部分はサイト名に置き換えておけば確実でしょう)、すんなりと導入できるはず。
前回作成したログイン部分を多言語化（といってもまだ日英だけですが）した結果が以下の通り。
言語設定をそれぞれ変えたブラウザのウィンドウを2つ並べてみました。
ログインまわりを整備する
前回 Acts as Authenticated プラグインを導入して、とりあえず作ったログイン機能を整備していきます。
まず、controllers/accout_controller.rb にあった
# Be sure to include AuthenticationSystem in Application Controller instead
include AuthenticatedSystem
をコメントの指示どおり、controllers/application.rb に移し、
before_filter :login_required
の一行を(controllers/application.rb)に追記して、ログインしないとどのページにもアクセスできないようにしておきます。
ただし、トップページ(default/index)とサインイン(account/signin)、ログイン画面(account/login)にはアクセスできないと困るので、
skip_before_filter :login_required, :only => [:signup, :login]
のようにして、特定のアクションには :login_required が効かないようにします。
あとは、Acts as Authenticated in Plugins の User Authentication、Mailer Setup、User Activation、Password Resetting の各記事を参考にして、
- メールでの登録通知
- メールアドレス確認
- 「パスワードを忘れたら」機能
を順に整えていきます。
ここまで書いたコードは個人的に他のプロジェクトを始めるときにも再利用できそうなので、雛型として保存しておきました。
Rails には Generator という仕組みが用意されているので、雛型をベースにして自分用のカスタム Generator を作っておくのもいいかもしれません。
参考
» Creating your own generators in rails. | aidanf.net
まとめ
レイアウトを用意し、Get-Text で多言語化し、ログインまわりを整えました。これでようやくスタート地点に立ったといったところでしょうか。
ここまでのソースコードを Google Code に置いておきました。
svn checkout http://10best.googlecode.com/svn/trunk/ 10best
でチェックアウトするか、ブラウザでもリポジトリを閲覧することができます。
最近のコメント