28

11月

「Ruby on Rails 講座」に行ってきました。

株式会社ウェブキャリア主催「Ruby on Rails 講座」に行ってきました。

Rails ステップアップ講座ということで、Railsで取り敢えず Scaffold や、データベースの CRUD を経験した人向けの内容。講師は、昨年Award of Rails 2006 で大賞を受賞された 株式会社万葉の大場寧子さん
。
今後役に立つであろうこと、気になった事、これから調べよう、ということが、
Active Record 関連の内容のところであったので、思い出しつつメモメモ。

・単一テーブル継承
シンプルなものは、普通1テーブルが1クラスに対応するけど、継承関係にある複数のクラスを 1 つのテーブルに関連づけることができるそうな。

データの種類を表すカラムが必要なときとかが使いどころ、らしい。
例えば、あるプロジェクトがあって、その参加者を Manager と Developer に分ける時など。

正直、ピンとこなかったけど、なんか便利そうだし、ショッピングサイトなど利用場所は多そう。
これは、実際に動かしながら試してみたいな。

まずは、この辺りを後で読んでおこうっと。
「Railsで単一テーブル継承」-京の路

・ポリモーフィック関連
Association 関連の話題から。
belogns_to、has_one、has_manyの基本のおさらいからポリモーフィック関連の話題へ。

いろいろなオブジェクトに、共通のフィーチャーをつけたい、
例えば、コメントをつける、タグをつける、写真をつけるなど。

結構使いどころがありそうですね。
xxx_id, xxx_type というカラムを持ったテーブルを追加すればいいらしいっす。

・コールバック
親テーブルを更新したら子テーブルも更新、とかに使える。
ここで、Rails 上達の流れの余談に。

Contorollerにコードを書きまくる　←イマココ

↓

model に独自メソッドを書く

↓

Rails API を使う事で解決 or コールバックへ移す

だそうな。
これは、以前、第 23 回Rails勉強会に参加したときも「コントローラーが大きくなるのは良くない」と
同じ事を誰か言ってたなー。

その他にも Act as List、 カウンターキャッシュ、Restな設計、認証、親子モデルをセットで編集、アップロード／画像処理などよくある問題とヒントなどがバーーーーーッ高速で説明。

[感想]
とにかく駆け足でセミナーが進んで行くので、頭がおっつくのが大変。
プログラマーの人は、どうだったんだろう。（当方 web デザイナ）
でもまー、Active Record で色々と必ずぶち当たりそうな場所に関して tips を紹介されていたので、
「後々役に立つだろう」と資料は大事にとっておきます！

おそらく、僕の上のメモではなにがなんだか、という状態だと思われますが、今回のセミナーの資料は以下のアドレスでご覧になれます。
こちらでより詳しくご覧ください。
http://www.web-career.com/seminar/seminar_ohba_2007_10_18.pdf

4 CommentsPosted by Tadaki under

21

9月

script.aculo.us.js で Apple iPhotoのページを真似してみる。

「WWW WATCH」さんの 「JavaScript でタブ切り替え UI を実装する」の記事に触発されて、早速 iPhotoと同様のページをコーディングしてみました。

もともと、Apple のサイトでも script.aculo.us が利用されているのでいい試みかな、と。

script.aculo.us 自体は、prototype.js に依存しています。タブの部分は面倒くさいので、同じ prototype.js に依存しているtabMaker.jsを利用しました。

HTML の <head>内に必要なライブラリを全て読込みましょう。

<link rel="stylesheet" type="text/css" href="tabMaker.css" />　//タブ部分のCSS
<script language="JavaScript" src="prototype.js" type="text/javascript"></script>
<script language="JavaScript" src="scriptaculous.js" type="text/javascript"></script>
<script language="JavaScript" src="tabMaker.js" type="text/javascript"></script>

タブ部分のHTML はこんな感じ。

<ul id="tabIndex">
  <li class="tab" onclick="execute()">Tab1</li>
  <li class="tab" onclick="execute()">Tab2</li>
  <li class="tab" onclick="execute()">Tab3</li>
</ul>

<div id="tabBoxIndex">
  <div id="column1" class="tabBox">コンテンツ1</div>
  <div id="column2" class="tabBox">コンテンツ2</div>
  <div id="column3" class="tabBox">コンテンツ3</div>
</div>

tabMaker.js はクリック時に、選択されたタブと非選択状態のタブとを CSS の class 指定を変更しています。

ですので、scriptaculous.js で用意された メソッドは、tabmaker.js 内に記述してしまいます。

クリックされると、Effect.Fade で透明度を下げ、afterFinishInternal オプションでエフェクト終了時に 今度はFade させ そのエフェクトと同時にclass名をopen に変更して、表示内容を切り替えています。

Tab.prototype = {
    initialize: function(name, open) {
        this.name = name;
        this.page = name + 'Box';
        this.open = open;
    },
    styleTab: function() {
        if (this.open)
            this.setStyle('absolute', 'open', 'block');
        else
            this.setStyle('absolute', 'close', 'none');
            this.open = false;
        },
    setStyle: function(position, className, display){
        var page = $(this.page).style;
        var name = $(this.name);
        new Effect.Fade("tabBoxIndex", {
        from:0, // 開始時透明度
        to:0, // 終了時透明度
        delay:0, // 開始までの秒数
        fps:60, // フレームレート
        duration: 0.1, // アニメーションする時間(秒)
        afterFinishInternal: function(effect) {
            new Effect.Fade("tabBoxIndex", {
                from:0.0, // 開始時透明度
                to:1.0, // 終了時透明度
                delay:0, // 開始までの秒数
                fps:60, // フレームレート
                duration: 0.3, // アニメーションする時間(秒)
                beforeStartInternal: function(effect) {
                    page.display = display;
                    page.position = position;
                }
                });
            }
        });
        name.className = className;
    }
}

あとは、CSS でレイアウト、見た目を Apple ぽくして出来上がりです。
（何気に タブメニューの箇所の CSS ではまりました。選択された状態時に背景画像を指定しているのですが、その選択されたタブの上下のタブ間にあるヘアラインを消えるようにするには、ネガティブマージンを利用することで解決できました。）

■サンプルを見る（tabmaker.js + scriptaculous.js）

じつは、僕自身 javascript ばりばりだぜ〜！という訳でもないので、この方法がシンプルかどうか怪しいな〜、なんて思っていたらjQuery UI なる素敵なライブラリが後公開されていました。prototype ベースではありませんが、こちらを利用する方がシンプルに判りやすくできました。

■サンプルをみる（jQuery UI）

ところで、Apple は Mac だけではなく、web ページでもちょっとした効果を使うのが巧いですね。「ギミックつかいまくってるぜ〜」みたいな嫌みが無いのがいいです。

1 CommentPosted by Tadaki under ,

11

9月

スカッと爽やかなデザイン

なかなか、blog を更新するにもパワーが要ります。

ご無沙汰です。オオサワです。

本日、久しぶりにお気に入りに入りそうな web site を知ることが出来たので、反射的に記事書いてます。

広瀬さとしデザイン事務所

一目見て、シンプル x ダイナミックでこれはもう、まさに僕のストライクゾーンなデザイン。（単純に好みです）

最近、web design を集めた blog などで情報を入手していますが、まぁ、どこも悪く言えば「はいはい、web2.0風ね」といった印象をもつサイトが多く、今ひとつ盛り上がりに書けていた中の久々大ヒット。

特にジャンプ率のダイナミックさに目を奪われました。

このサイトを印象づける、各ページのタイトルキャッチ（？）の文字、見出しの大きさ、本文の適度なボリューム。

スクロール時の視線の移動などは、多少なにかひっかかる感じがして気になるところもありますが、まぁ許容範囲。

久々にページの奥まで巡回してみよう、という気持ちになりましたよ。

僕が portas のサイトをデザインしたときに「ダイナミックな感じも出したい」と企んでいましたけど、ダイナミック感では全然足下にも及びません。

ちょっと時間ができたら、各フォントのジャンプ率を見直してみよう…。

ちなみに、僕が web design の参考になるサイトの情報の１つが、以下のページ。

デザインリンクデータベース

No CommentsPosted by Tadaki under

14

8月

デザインとアクションとコンテンツが高次元で融合されたサイト

はじめまして。

6月からポルタスで web デザイン、コーディング担当として働いています。オオサワです。

社内 blog 一発目として、まずは、簡単に自分の目標としている webサイトを紹介します。

firstbone
firstbone

このサイトの非常に素晴らしいと思うところは、ナビゲーションとデザインとコンテンツが見事に融合しているところです。

コンテンツ遷移のアニメーション、ストレスを感じる長さも無く、ページ遷移というアクションに気持ち良さを加えてくれます。

Flash で構成されたサイトだと、必要以上のアニメーションなどで、グリグリ動くサイトは数多くありますが、どうも一方的に見せつけられるものが多く、その殆どがストレスを感じてしまいます。

このサイトは、無意識のうちに「使っていてなんだか心地よくなる」そんなサイトで、ぼくもそういうサイト（UI？）デザインを作ろうと志を持たせてくれました大事なサイトです。

やはり、能動的にユーザーがアクションに対して、そのレスポンスというのは大事だと思います 。しかもナビゲーションとデザインが、密接に関係してきてコンテンツを形成する…。

おそらく初見から 4 〜5 年経っていると思いますが、未だに色あせない、人に尋ねられたら真っ先に答えるサイトがここです。

No CommentsPosted by Tadaki under

Recent Posts

「Ruby on Rails 講座」に行ってきました。
11月, 28

script.aculo.us.js で Apple iPhotoのページを真似してみる。
9月, 21

スカッと爽やかなデザイン
9月, 11

Recent Comments

I liked it. So much useful material. I read with great inter...
Crasty

I liked it. So much useful material. I read with great inter...
Peter

I hope this was a very interesting post thanks for writing i...
npoet.ru