Oktopartial Introduction

56,255 views

Published on

静的HTMLに動的なコンテンツを入れるためのプラグインoktopartialの資料。ver. 0.2

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
56,255
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Oktopartial Introduction

  1. 1. Oktopartialを作ったよ id:akm
  2. 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. 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>
  4. 4. レイアウトの適用単に嵌め込むだけではなく、ヘッダーとフッターなどを一つにまとめた「レイアウト」をページに適用できます。 ヘッダー レイアウトページ固有のコ をください ンテンツ サーバー フッター (ヘッダー)レイアウトを入れ (左ナビゲーション) <div class="oktopartial_content"></div> たい (右サイドバー) (フッター)静的なHTML
  5. 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. 6. サーバー不要ということは? Y ! ローカルな静的なHTMLをどんどん D R 部品に切り分けて試してみることが できる! ヘッダー ヘッダーの ヘッダー を入れる HTMLページ固有のコ ンテンツ ページ固有コンテン ツを入れるレイアウトを入れ フッター フッターの たい を入れる HTML静的なHTML レイアウトのHTML
  7. 7. DRY Dont Repeat YourselfRuby on Railsで有名になった言葉。元々はアジャイル方面の言葉です。http://c2.com/cgi/wiki?DontRepeatYourselfRailsプログラマのみんなはきっと気を付けているはずだけど、HTMLを書く人もそうした方がいいんじゃない?
  8. 8. デザインのHTMLも DRYであるべき「トップページだけ3つくらいデザイン作ってみてくれる?それ以外のページは重要なとこだけ作ってくれればいいから」「基本的なテーマは3番目のでいきましょう。トップページ以外にもテーマを適用してくれる?」「なんかこのページ違うな。やっ 適切な部品に分ぱ1番でやってみてくれない?」 かれていれば
  9. 9. デザインのHTMLも DRYであるべき「すいません、このHTMLとこのHTMLのここの部品が若干違うんですけど、どっちが正しいんですか?」「ちょっと試してみたらメニューのリンクがうまく動かないんだよね、トップページはちゃんとしてるけど、他のページは直してないの?」 一カ所修正するだ けで全てのページに反映 してほしい!
  10. 10. サイト構築での作業 ラフデザイン HTML作成 アプリへの適用 紙や画像 ページ数 テー HTMLの共通部 マ数の分だけ 分を分解して、oktopartialを使うと HTMLができる 再度組み立てる アプリへ ラフデザイン HTML作成 の適用 紙や画像 ページ数 + テーマ 既に分解されている 数 + 部品の分だ ので、適用が簡単 けHTMLができる
  11. 11. どれくらい簡単? /public/page1.html<html> インストールは <head> 終わってる前提で </head> <body> 話を進めます。 (ページ固有の部分) こんな感じの (部品にしたい部分) (ページ固有の部分) HTMLを部品に </body> 分けてみます。</html>
  12. 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. 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. 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> これで部品化完了!
  15. 15. レイアウトも簡単?/public/page2.html<html> こんな感じの <head> HTMLのヘッ </head> <body> ダーとフッター (ヘッダー) からレイアウト (ページ固有の部分) 用のHTMLを (フッター) </body> 作ってみます。</html>
  16. 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. 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. 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. 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 30755KBに減りまし /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,354http://github.com/akm/oktopartial_multiflex3 に全変更が記録されています。
  20. 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"
  21. 21. Railsのビューへの移行静的なHTMLで作成した部品を、ビューへ移行するためには1. 対応するコントローラを作成2. .htmlを.html.erbに変えてapp/views/xxxに 移動後は必要に応じて<% %> とか <%= %>を入れてください。controllerでrenderするときに:layout=>falseにしてください。
  22. 22. 試してみてください インストールはたった3つのコマンドruby script/plugin install git://github.com/aaronchi/jrails.gitruby script/plugin install git://github.com/akm/oktopartial.gitrake oktopartial:setup

×