Contenu connexe
Similaire à Oktopartial Introduction (20)
Plus de Takeshi AKIMA (8)
Oktopartial Introduction
- 2. 自己紹介
akimatter => {
:occupation => "freelance programmer",
:favorite_languages => %w(Ruby JavaScript),
:blog => "http://d.hatena.ne.jp/akm",
:repository => "http://github.com/akm",
:member_of => "RBC",
}
- 3. 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>
- 5. サーバー不要
サーバーを動かさなくても、ローカルのファイ
ルがあれば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>
- 6. サーバー不要ということは?
Y ! ローカルな静的なHTMLをどんどん
D R 部品に切り分けて試してみることが
できる!
ヘッダー ヘッダーの
ヘッダー
を入れる HTML
ページ固有のコ
ンテンツ ページ固有コンテン
ツを入れる
レイアウトを入れ
フッター フッターの
たい
を入れる HTML
静的なHTML
レイアウトのHTML
- 7. DRY
Don't Repeat Yourself
Ruby on Railsで有名になった言葉。
元々はアジャイル方面の言葉です。
http://c2.com/cgi/wiki?DontRepeatYourself
Railsプログラマのみんなはきっと気を
付けているはずだけど、HTMLを書く
人もそうした方がいいんじゃない?
- 8. デザインのHTMLも
DRYであるべき
「トップページだけ3つくらいデザイン作ってみてく
れる?それ以外のページは重要なとこだけ作ってく
れればいいから」
「基本的なテーマは3番目のでいきましょう。トップ
ページ以外にもテーマを適用してくれる?」
「なんかこのページ違うな。やっ 適切な部品に分
ぱ1番でやってみてくれない?」 かれていれば
- 9. デザインのHTMLも
DRYであるべき
「すいません、このHTMLとこのHTMLのここ
の部品が若干違うんですけど、どっちが正しいん
ですか?」
「ちょっと試してみたらメニューのリンクがう
まく動かないんだよね、トップページはちゃんと
してるけど、他のページは直してないの?」
一カ所修正するだ
けで全てのページに反映
してほしい!
- 10. サイト構築での作業
ラフデザイン HTML作成 アプリへの適用
紙や画像 ページ数 テー HTMLの共通部
マ数の分だけ 分を分解して、
oktopartialを使うと HTMLができる 再度組み立てる
アプリへ
ラフデザイン HTML作成
の適用
紙や画像 ページ数 + テーマ 既に分解されている
数 + 部品の分だ ので、適用が簡単
けHTMLができる
- 12. 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>
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/oktopartial.js"></script>
</head>
- 13. Step2 部品ファイルの作成
/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>
/public/parts/part1.html
(部品にしたい部分)
- 14. Step3 部品の呼び出し
/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>
(ページ固有の部分)
<div class="oktopartial_replace">/parts/part1.html</div>
(ページ固有の部分)
</body>
</html>
これで部品化完了!
- 16. Step1 JavaScriptの追加
/public/page2.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>
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/oktopartial.js"></script>
</head>
既に書いてある場
合は要りません
- 17. Step2 レイアウトHTMLの作成
/public/page2.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>
/public/layouts/layout1.html # ディレクトリは/public/layoutsが推奨
(ヘッダー)
<div class="oktopartial_content"></div>
(フッター)
- 18. Step3 レイアウトの呼び出し
/public/page2.html
<html>
<head>
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/oktopartial.js"></script>
</head>
<body>
<div class="oktopartial_layout">
<div class="oktopartial_url">/layouts/layout1.html</div>
(ページ固有の部分)
</div>
</body>
</html>
レイアウトも簡単!
- 19. どれくらいまとまるの?
HTMLにどれくら
original oktopartialized
い重複があるのか /page_header1.html
/page_header2.html
5,732
3,863
1,651
1,651
/layouts/layout1.html
/layouts/layout2.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
/layouts/layout4.html
/layouts/layout5.html
950
949
が、multiflex3の
/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_multiflex3 に全変更が記録されています。
- 20. Q. Railsのレイアウトは?
A. 簡単に使えちゃいます。
app/views/layouts/application.html.erbを使う場合
/public/page3.html
<html>
<head>
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/oktopartial.js"></script>
</head>
<body>
<div class="oktopartial_layout">
<div class="oktopartial_url">/layouts/application.html</div>
(ページ固有の部分)
静的ファイルと同じ書き方でOK
</div>
</body> * config/routes.rb に 以下の記述を追加してください。
</html> map.connect "/layouts/:action", :controller => "oktopartial/layouts"
- 22. 試してみてください
インストールはたった3つのコマンド
ruby script/plugin install git://github.com/aaronchi/jrails.git
ruby script/plugin install git://github.com/akm/oktopartial.git
rake oktopartial:setup