Oktopartial Introduction
0 likes56,124 views
静的HTMLに動的なコンテンツを入れるためのプラグインoktopartialの資料。ver. 0.2
Oktopartial Introduction
- 1. Oktopartialを作ったよ id:akm
- 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>
- 4. レイアウトの適用 単に嵌め込むだけではなく、ヘッダーとフッターな どを一つにまとめた「レイアウト」をページに適用 できます。 ヘッダー レイアウト ページ固有のコ をください ンテンツ サーバー フッター (ヘッダー) レイアウトを入れ (左ナビゲーション) <div class="oktopartial_content"></div> たい (右サイドバー) (フッター) 静的なHTML
- 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番目のでいきましょう。トップ ページ以外にもテーマを適用してくれる？」 「なんかこのページ違うな。やっ 適切な部品に分 ぱ１番でやってみてくれない？」 かれていれば
- 9. デザインのHTMLも DRYであるべき 「すいません、このHTMLとこのHTMLのここ の部品が若干違うんですけど、どっちが正しいん ですか？」 「ちょっと試してみたらメニューのリンクがう まく動かないんだよね、トップページはちゃんと してるけど、他のページは直してないの？」 一カ所修正するだ けで全てのページに反映 してほしい！
- 10. サイト構築での作業 ラフデザイン HTML作成 アプリへの適用 紙や画像 ページ数 テー HTMLの共通部 マ数の分だけ 分を分解して、 oktopartialを使うと HTMLができる 再度組み立てる アプリへ ラフデザイン HTML作成 の適用 紙や画像 ページ数 + テーマ 既に分解されている 数 + 部品の分だ ので、適用が簡単 けHTMLができる
- 11. どれくらい簡単？ /public/page1.html <html> インストールは <head> 終わってる前提で </head> <body> 話を進めます。 (ページ固有の部分) こんな感じの (部品にしたい部分) (ページ固有の部分) HTMLを部品に </body> 分けてみます。 </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> これで部品化完了！
- 15. レイアウトも簡単？ /public/page2.html <html> こんな感じの <head> HTMLのヘッ </head> <body> ダーとフッター (ヘッダー) からレイアウト (ページ固有の部分) 用のHTMLを (フッター) </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"
- 21. Railsのビューへの移行 静的なHTMLで作成した部品を、ビューへ移行す るためには 1. 対応するコントローラを作成 2. .htmlを.html.erbに変えてapp/views/xxxに 移動 後は必要に応じて<% %> とか <%= %>を入れて ください。 controllerでrenderするときに:layout=>falseに してください。
- 22. 試してみてください インストールはたった３つのコマンド ruby script/plugin install git://github.com/aaronchi/jrails.git ruby script/plugin install git://github.com/akm/oktopartial.git rake oktopartial:setup