Enviar búsqueda
Cargar
Oktopartial Introduction
•
0 recomendaciones
•
56,121 vistas
Takeshi AKIMA
Seguir
静的HTMLに動的なコンテンツを入れるためのプラグインoktopartialの資料。ver. 0.2
Leer menos
Leer más
Tecnología
Diseño
Denunciar
Compartir
Denunciar
Compartir
1 de 22
Descargar ahora
Descargar para leer sin conexión
Recomendados
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
Recomendados
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
hokori matu
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
yoshikawa_t
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
arisu yano
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
Hitsuji
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第7回
Hitsuji
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
Hitsuji
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
Hitsuji
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
WordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Takashi Uemura
Word press34
Word press34
BREN
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回
Hitsuji
Tubettoni E Fagioli Con Le Cozze
Tubettoni E Fagioli Con Le Cozze
My own sweet home
Ram Central Park
Ram Central Park
Mireia Buchaca
Más contenido relacionado
La actualidad más candente
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
hokori matu
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
yoshikawa_t
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
arisu yano
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
Hitsuji
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第7回
Hitsuji
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
Hitsuji
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
Hitsuji
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
WordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Takashi Uemura
Word press34
Word press34
BREN
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回
Hitsuji
La actualidad más candente
(20)
WordPressで提供するWeb API
WordPressで提供するWeb API
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第7回
Webapp startup example_to_dolist
Webapp startup example_to_dolist
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
WordBeach @kurudrive
WordBeach @kurudrive
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Word press34
Word press34
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
WordPressプラグイン作成入門
WordPressプラグイン作成入門
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回
Destacado
Tubettoni E Fagioli Con Le Cozze
Tubettoni E Fagioli Con Le Cozze
My own sweet home
Ram Central Park
Ram Central Park
Mireia Buchaca
cv new_2
cv new_2
ismail hassan
Fast Pitch Forum (WidgetBucks)
Fast Pitch Forum (WidgetBucks)
Washington Technology Industry Association
Al Kahaf
Al Kahaf
rabubakar
Peru Expeditions 2009 2010
Peru Expeditions 2009 2010
Green Trails Expeditions
Multicultural Marketing Research
Multicultural Marketing Research
Michael Hong
S Monica Jardins Cond Club E Mail
S Monica Jardins Cond Club E Mail
imoveisdorio
Coursera LHTL Certificate with Honors
Coursera LHTL Certificate with Honors
Francois Mattheus Nel
pmi 35 contact hrs
pmi 35 contact hrs
Jose Staff
La Vista CalçAda Barra Bonita E Mail
La Vista CalçAda Barra Bonita E Mail
imoveisdorio
Teamwork hare and turtle story revisited
Teamwork hare and turtle story revisited
rabubakar
Destacado
(12)
Tubettoni E Fagioli Con Le Cozze
Tubettoni E Fagioli Con Le Cozze
Ram Central Park
Ram Central Park
cv new_2
cv new_2
Fast Pitch Forum (WidgetBucks)
Fast Pitch Forum (WidgetBucks)
Al Kahaf
Al Kahaf
Peru Expeditions 2009 2010
Peru Expeditions 2009 2010
Multicultural Marketing Research
Multicultural Marketing Research
S Monica Jardins Cond Club E Mail
S Monica Jardins Cond Club E Mail
Coursera LHTL Certificate with Honors
Coursera LHTL Certificate with Honors
pmi 35 contact hrs
pmi 35 contact hrs
La Vista CalçAda Barra Bonita E Mail
La Vista CalçAda Barra Bonita E Mail
Teamwork hare and turtle story revisited
Teamwork hare and turtle story revisited
Similar a Oktopartial Introduction
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
Wp html5
Wp html5
regret raym
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Ruby on Rails Tutorial
Ruby on Rails Tutorial
Ken Iiboshi
WordPress と Bootstrap
WordPress と Bootstrap
株式会社ガリレオ(開発グループ)
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
タカシ キタジマ
Html5 Web Applications
Html5 Web Applications
totty jp
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Satomi Tsujita
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
kenjis
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
2005 05 21_xoops_xev4_customizing
2005 05 21_xoops_xev4_customizing
Tom Hayakawa
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
Ruby on Rails Tutorial Chapter5-7
Ruby on Rails Tutorial Chapter5-7
Sea Mountain
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
Hiroaki KOBAYASHI
web server
web server
soestudio
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアル
Ryuji Egashira
WordBech Osaka No.28
WordBech Osaka No.28
Kite Koga
Sendai.html5#2
Sendai.html5#2
Reoto Wakabayashi
Similar a Oktopartial Introduction
(20)
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Wp html5
Wp html5
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Ruby on Rails Tutorial
Ruby on Rails Tutorial
WordPress と Bootstrap
WordPress と Bootstrap
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Html5 Web Applications
Html5 Web Applications
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
2005 05 21_xoops_xev4_customizing
2005 05 21_xoops_xev4_customizing
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Ruby on Rails Tutorial Chapter5-7
Ruby on Rails Tutorial Chapter5-7
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
web server
web server
GDG Women DevfestW
GDG Women DevfestW
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアル
WordBech Osaka No.28
WordBech Osaka No.28
Sendai.html5#2
Sendai.html5#2
Más de Takeshi AKIMA
20120831 mongoid
20120831 mongoid
Takeshi AKIMA
LT at JavaOne2012 JVM language BoF #jt12_b101
LT at JavaOne2012 JVM language BoF #jt12_b101
Takeshi AKIMA
DSL by JRuby at JavaOne2012 JVM language BoF #jt12_b101
DSL by JRuby at JavaOne2012 JVM language BoF #jt12_b101
Takeshi AKIMA
20120324 git training
20120324 git training
Takeshi AKIMA
20120121 rbc rails_routing
20120121 rbc rails_routing
Takeshi AKIMA
Llonsen object ruby
Llonsen object ruby
Takeshi AKIMA
jrubykaigi2010-lt-rubeus
jrubykaigi2010-lt-rubeus
Takeshi AKIMA
仕事で使ってるプラグイン
仕事で使ってるプラグイン
Takeshi AKIMA
Más de Takeshi AKIMA
(8)
20120831 mongoid
20120831 mongoid
LT at JavaOne2012 JVM language BoF #jt12_b101
LT at JavaOne2012 JVM language BoF #jt12_b101
DSL by JRuby at JavaOne2012 JVM language BoF #jt12_b101
DSL by JRuby at JavaOne2012 JVM language BoF #jt12_b101
20120324 git training
20120324 git training
20120121 rbc rails_routing
20120121 rbc rails_routing
Llonsen object ruby
Llonsen object ruby
jrubykaigi2010-lt-rubeus
jrubykaigi2010-lt-rubeus
仕事で使ってるプラグイン
仕事で使ってるプラグイン
Último
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Último
(10)
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
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つくらいデザイン作ってみてく れる?それ以外のページは重要なとこだけ作ってく れればいいから」 「基本的なテーマは3番目のでいきましょう。トップ ページ以外にもテーマを適用してくれる?」 「なんかこのページ違うな。やっ 適切な部品に分 ぱ1番でやってみてくれない?」 かれていれば
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.
試してみてください
インストールはたった3つのコマンド ruby script/plugin install git://github.com/aaronchi/jrails.git ruby script/plugin install git://github.com/akm/oktopartial.git rake oktopartial:setup
Descargar ahora