Oktopartial Introduction

Oktopartialを作ったよ
id:akm

自己紹介

akimatter => {
:occupation => "freelance programmer",
:favorite_languages => %w(Ruby JavaScript),
:blog => "http://d.hatena.ne.jp/akm",
:repository => "http://github.com/akm",
:member_of => "RBC",
}

Oktopartialとは？
静的なHTMLに動的な要素を嵌め込むための仕組み
を提供するRailsのプラグインです

ログインフォーム
ここにログイン
フォームを入れたをください
いサーバー
<form action="." class="login_form">

<p>

<label for="login_id">Login ID:</label>

<input type="text" id="login_id"/>

</p>

<p>

<label for="password">Password:</label>

<input type="text" id="password"/>

</p>

静的なHTML <p>

<input type="submit" value="ログイン"/>

</p>

</form>

レイアウトの適用
単に嵌め込むだけではなく、ヘッダーとフッターな
どを一つにまとめた「レイアウト」をページに適用
できます。

ヘッダーレイアウト
ページ固有のコをください
ンテンツ
サーバー
フッター
(ヘッダー)

レイアウトを入れ (左ナビゲーション)

<div class="oktopartial_content"></div>
たい (右サイドバー)

(フッター)

静的なHTML

サーバー不要
サーバーを動かさなくても、ローカルのファイ
ルがあればOK！しかも記述を変更しないで試せ
ます
ログインフォー
ムをくださいファイル
ここにログインシステム
フォームを入れた <form action="." class="login_form">

い <p>

<label for="login_id">Login ID:</label>

<input type="text" id="login_id"/>
ログイン
</p>
フォームのファ
<p>

<label for="password">Password:</label> イル
<input type="text" id="password"/>

</p>

<p>

静的なHTML <input type="submit" value="ログイン"/>

</p>

</form>

サーバー不要ということは？

Y ! ローカルな静的なHTMLをどんどん

D R 部品に切り分けて試してみることが
できる！
ヘッダーヘッダーの
ヘッダー
を入れる HTML
ページ固有のコ
ンテンツページ固有コンテン
ツを入れる

レイアウトを入れ
フッターフッターの
たい
を入れる HTML
静的なHTML
レイアウトのHTML

DRY
Don't Repeat Yourself
Ruby on Railsで有名になった言葉。
元々はアジャイル方面の言葉です。
http://c2.com/cgi/wiki?DontRepeatYourself

Railsプログラマのみんなはきっと気を
付けているはずだけど、HTMLを書く
人もそうした方がいいんじゃない？

デザインのHTMLも
DRYであるべき
「トップページだけ３つくらいデザイン作ってみてく
れる？それ以外のページは重要なとこだけ作ってく
れればいいから」

「基本的なテーマは3番目のでいきましょう。トップ
ページ以外にもテーマを適用してくれる？」

「なんかこのページ違うな。やっ適切な部品に分
ぱ１番でやってみてくれない？」かれていれば

デザインのHTMLも
DRYであるべき
「すいません、このHTMLとこのHTMLのここ
の部品が若干違うんですけど、どっちが正しいん
ですか？」

「ちょっと試してみたらメニューのリンクがう
まく動かないんだよね、トップページはちゃんと
してるけど、他のページは直してないの？」
一カ所修正するだ
けで全てのページに反映
してほしい！

サイト構築での作業

ラフデザイン HTML作成アプリへの適用

紙や画像ページ数テー HTMLの共通部
マ数の分だけ分を分解して、
oktopartialを使うと HTMLができる再度組み立てる

アプリへ
ラフデザイン HTML作成
の適用
紙や画像ページ数 + テーマ既に分解されている
数 + 部品の分だので、適用が簡単
けHTMLができる

どれくらい簡単？
/public/page1.html
<html> インストールは
<head>
終わってる前提で
</head>
<body> 話を進めます。
(ページ固有の部分)
こんな感じの
(部品にしたい部分)
(ページ固有の部分) HTMLを部品に
</body> 分けてみます。
</html>

Step1 JavaScriptの追加

/public/page1.html
<html>
<head>

拡大
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/oktopartial.js"></script>
</head>
<body>
</body>
</html>

<head>
</head>

Step2 部品ファイルの作成

/public/page1.html
<html>
<head>
</head>
<body>
</body>
</html>

/public/parts/part1.html

Step3 部品の呼び出し

/public/page1.html
<html>
<head>
</head>
<body>
<div class="oktopartial_replace">/parts/part1.html</div>
</body>
</html>

これで部品化完了！

レイアウトも簡単？
/public/page2.html
<html> こんな感じの
<head>
HTMLのヘッ
</head>
<body> ダーとフッター
(ヘッダー) からレイアウト
用のHTMLを
(フッター)
</body> 作ってみます。
</html>

Step1 JavaScriptの追加

/public/page2.html
<html>
<head>

拡大
</head>
<body>
</body>
</html>

<head>
</head>

既に書いてある場
合は要りません

Step2 レイアウトHTMLの作成
/public/page2.html
<html>
<head>
</head>
<body>
(ヘッダー)
(フッター)
</body>
</html>

/public/layouts/layout1.html # ディレクトリは/public/layoutsが推奨
(ヘッダー)
<div class="oktopartial_content"></div>
(フッター)

Step3 レイアウトの呼び出し

/public/page2.html
<html>
<head>
</head>
<body>
<div class="oktopartial_layout">
<div class="oktopartial_url">/layouts/layout1.html</div>
</div>
</body>
</html>

レイアウトも簡単！

どれくらいまとまるの？
HTMLにどれくら
original oktopartialized

い重複があるのか /page_header1.html
/page_header2.html
5,732
3,863
1,651
1,651
/layouts/layout1.html
576
806
/page_header3.html 5,292 1,651 /layouts/layout3.html 805

にもよります /page_header4.html
/page_header5.html
5,298
3,423
1,651
1,651
950
949

が、multiﬂex3の
/page_header6.html 3,429 1,651 /layouts/menu.html 1,513
/page_header7.html 4,122 1,651 /layouts/navigation.html 2,089
/page_layout1.html 22,913 2,588 /layouts/subcontents.html 2,827

サンプルの重複を /page_layout2.html
/page_layout3.html
27,319
27,333
2,404
2,404
/layouts/top_navigation.html
/parts/column_types.html
938
4,605
/page_layout4.html 34,289 2,404 /parts/contact_form.html 3,837

まとめてみたとこ /page_layout5.html
/layouts/footer.html
34,222 2,404
396
/parts/links.html
/parts/login_form.html
466
1,200

ろ、117KBが
/layouts/header1.html 621 /parts/paragraph_text.html 1,422
/layouts/header2.html 499 /parts/search_form.html 240
/layouts/header3.html 493 /parts/site_message.html 307

55KBに減りまし /layouts/header4.html
/layouts/header5.html
499
371
/parts/tables.html
/parts/text_and_images.html
682
1,745
/layouts/header6.html 377 /parts/text_formats.html 1,803

た。 /layouts/header7.html 367 /parts/topic_path.html 210
177,235 55,354

http://github.com/akm/oktopartial_multiﬂex3 に全変更が記録されています。

Q. Railsのレイアウトは？
A. 簡単に使えちゃいます。

app/views/layouts/application.html.erbを使う場合
/public/page3.html
<html>
<head>
</head>
<body>
<div class="oktopartial_layout">
<div class="oktopartial_url">/layouts/application.html</div>
静的ファイルと同じ書き方でOK
</div>
</body> * conﬁg/routes.rb に以下の記述を追加してください。
</html> map.connect "/layouts/:action", :controller => "oktopartial/layouts"

Railsのビューへの移行

静的なHTMLで作成した部品を、ビューへ移行す
るためには
1. 対応するコントローラを作成
2. .htmlを.html.erbに変えてapp/views/xxxに
移動
後は必要に応じて<% %> とか <%= %>を入れて
ください。
controllerでrenderするときに:layout=>falseに
してください。

試してみてください

インストールはたった３つのコマンド

ruby script/plugin install git://github.com/aaronchi/jrails.git

ruby script/plugin install git://github.com/akm/oktopartial.git

rake oktopartial:setup

Oktopartial Introduction

More Related Content

What's hot

Viewers also liked

Similar to Oktopartial Introduction

More from Takeshi AKIMA

Oktopartial Introduction