• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Oktopartial Introduction
 

Oktopartial Introduction

on

  • 750 views

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

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

Statistics

Views

Total Views
750
Views on SlideShare
734
Embed Views
16

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 16

http://coderwall.com 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Oktopartial Introduction Oktopartial Introduction Presentation Transcript

    • 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 Dont Repeat YourselfRuby on Railsで有名になった言葉。元々はアジャイル方面の言葉です。http://c2.com/cgi/wiki?DontRepeatYourselfRailsプログラマのみんなはきっと気を付けているはずだけど、HTMLを書く人もそうした方がいいんじゃない?
    • デザインのHTMLも DRYであるべき「トップページだけ3つくらいデザイン作ってみてくれる?それ以外のページは重要なとこだけ作ってくれればいいから」「基本的なテーマは3番目のでいきましょう。トップページ以外にもテーマを適用してくれる?」「なんかこのページ違うな。やっ 適切な部品に分ぱ1番でやってみてくれない?」 かれていれば
    • デザインの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> <script type="text/javascript" src="javascripts/jquery.js"></script> <script type="text/javascript" src="javascripts/oktopartial.js"></script></head>
    • 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(部品にしたい部分)
    • 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> これで部品化完了!
    • レイアウトも簡単?/public/page2.html<html> こんな感じの <head> HTMLのヘッ </head> <body> ダーとフッター (ヘッダー) からレイアウト (ページ固有の部分) 用のHTMLを (フッター) </body> 作ってみます。</html>
    • 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> 既に書いてある場 合は要りません
    • 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>(フッター)
    • 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> レイアウトも簡単!
    • どれくらいまとまるの?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 に全変更が記録されています。
    • 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"
    • Railsのビューへの移行静的なHTMLで作成した部品を、ビューへ移行するためには1. 対応するコントローラを作成2. .htmlを.html.erbに変えてapp/views/xxxに 移動後は必要に応じて<% %> とか <%= %>を入れてください。controllerでrenderするときに:layout=>falseにしてください。
    • 試してみてください インストールはたった3つのコマンドruby script/plugin install git://github.com/aaronchi/jrails.gitruby script/plugin install git://github.com/akm/oktopartial.gitrake oktopartial:setup