20101106 ramaze発表
•
0 j'aime•1,939 vues
Rails新時代に「Ramaze」で作る簡単iPhone/iPad向けWebサイト 関西Ruby会議03
Recommandé
Contenu connexe
Similaire à 20101106 ramaze発表
Similaire à 20101106 ramaze発表 (20)
Plus de Fukui Osamu
Plus de Fukui Osamu (11)
Dernier
Dernier (10)
20101106 ramaze発表
- 1. Ramaze 新時代に で作る 簡単 iPhone/iPad 向け Webサイト Rails 日本Rubyの会/iRubySystems 福井 修 iR3 12010年11月7日日曜日
- 2. 自己紹介 Ruby大好き中年 http://d.hatena.ne.jp/iR3 twitter: iR3 facebook: fukui.osamu Ruby関西 創立メンバーのひとり KOFでは2002年まつもとゆきひろさんが基調講演 講演後「Lightweight Languageを語り合う」で まつもとさんを囲む場をプロデュース 2003年「オブジェクト指向Ruby実践事例」発表 2004年 日本Rubyの会発足 公式CD作成配布 2004/11/27 第0回Ruby勉強会@関西 ... 22010年11月7日日曜日
- 4. http://k-of.jp/2002/event.html KOFでのRubyのあゆみ 2002.12.7 いやぁRubyコミュニティって何よ 単なる「有志」かよ 42010年11月7日日曜日
- 10. 日本Rubyの会初公式CDを作成し KOF2004で配布しました。限定100枚 連番 刻印 もちろん No.001は Matzへ 102010年11月7日日曜日
- 29. Rails ＞ Ramaze ＞ Sinatra ＞ CGI Railsよりシンプル・軽量 が求められるケースも 複雑・充実 シンプル・軽量 コンビニへ行くのにプリウスでも良いが 軽でも自転車でもよい 292010年11月7日日曜日
- 33. • 最も広い意味での「Rails」は Rackも SinatraもRamazeもなにもかも含まれる • 最小構成の「Rails」は Railtie のみ Rails新時代到来 332010年11月7日日曜日
- 37. Rails3 で Rails純正部品も互換部品に交換可能に Ramaze は最初から部品選択は柔軟 Railsで開発された良い部品がRamazeで使える♪ 372010年11月7日日曜日
- 40. Ruck • Webアプリはリクエストをレスポンスに 変換する関数ととらえる。 • env(環境変数のハッシュ)を受け取って ステータスコードとHTTPヘッダとHTTP ボディを返す。 • WSGI: Web Server Gateway Interface • ruckup で便利なミドルウェアが使える 402010年11月7日日曜日
- 43. Ramaze Ramaze公式サイトhttp://ramaze.net Ramazeの作者はMichael Felingerさん なんと東京在住とか。 RubyKaigi2009 で The innate beauty of Ramaze の演題で講演されています。 上原忠彦さんとのViプレゼンは伝説に。 2008.2.4に北海道 山口さんによる ruby-list:44567の紹介投稿あり 432010年11月7日日曜日
- 44. Ramaze ルーティング・コントロール 画面描画 Haml 他 データストア連携 ActiveRecord他 InnateRamazeの中心 Ramaze フレームワーク 1 3 4 2 Ramazeは2009.04から「ramaze」と「innate」に分割。 Innate：最低限必要な機能のみを抜き出したRamaze のコア。 DefaultはEtanni M モデル V ビュー C コント ローラ 442010年11月7日日曜日
- 47. ■ Ramaze インストール Ruby1.9.2 環境 > gem i ramaze =============================================== Thank you for installing Ramaze! To create a new project: $ ramaze create yourproject =============================================== Successfully installed ramaze-2010.06.18 1 gem installed Installing ri documentation for ramaze-2010.06.18... Installing RDoc documentation for ramaze-2010.06.18... innateが一緒にインストールされなかったら innateも > gem i innate 472010年11月7日日曜日
- 48. require 'ramaze' class MainController < Ramaze::Controller def index "Hello, Ramaze!" end end Ramaze.start はじめの一歩 Hello Ramaze! このソースhello.rbをRubyで実行し http://localhost:7000/ でアクセス 482010年11月7日日曜日
- 50. require 'ramaze' class MainController < Ramaze::Controller map ‘/another‘ def hello "Hello from Another" end end Ramaze.start ルーティング another Hello ! このhello2.rbをRubyで実行し http://localhost:7000/another/hello でアクセス 502010年11月7日日曜日
- 52. Ramazeを使えば1ファイルでWebアプリが できることはご覧のとおり もう少し大きな規模のアプリには雛形から 編集してゆくケースを紹介。 > rails new app > ramaze create app Rails Ramaze プロジェクト作成 522010年11月7日日曜日
- 53. Ramazeの雛形作成 mkdir controller mkdir layout mkdir model mkdir public mkdir public/css mkdir public/js mkdir spec mkdir view create app.rb create config.ru create controller/init.rb create controller/main.rb create layout/default.xhtml create model/init.rb create public/.htaccess create public/css/screen.css create public/dispatch.fcgi create public/favicon.ico create public/js/jquery.js create public/ramaze.png create spec/main.rb create start.rb create view/index.xhtml 右のような ディレクトリ ファイル が生成される controller model view など Railsに慣れていると 見慣れた感じで安心 できます 532010年11月7日日曜日
- 54. Ramazeのコントローラ雛形編集 class Controller < Ramaze::Controller layout :default helper :xhtml engine :Etanni end class Controller < Ramaze::Controller layout :default helper :user engine :Haml end コントロラーのengine: 利用したいものを指定 542010年11月7日日曜日
- 55. Ramazeのモデル雛形編集 DataMapper.setup(:default, "sqlite3://#{__DIR__('words.db')}") class Word include DataMapper::Resource property :id, Serial property :name, String property :description, Text validates_is_unique :name end DataMapper.auto_upgrade! require 'activerecord' ActiveRecord::Base.establish_connection( :adapter => 'postgresql', :database => 'app', :username => 'postgres', :password => 'xxxxx', :encoding => 'unicode' ) DataMapperの例 ActiveRecordの例 552010年11月7日日曜日
- 57. Haml/Sass <div id='content'> <div class='left column'> <h2>Welcome to our site!</h2> <p><%= print_information %></p> </div> <div class="right column"> <%= render :partial => "sidebar" %> </div> </div> #content .left.column %h2 Welcome to our site! %p= print_information .right.column = render :partial => "sidebar" erb Haml これをHamlで表記すると簡潔になる 572010年11月7日日曜日
- 58. Haml/Sass • HamlはHTML/XHTMLを生成するためのマー クアップ言語。 • インデントや簡略構文によって簡潔な記述が行 える。 • インデントで内包関係を表現。 • 要素を閉じなくてもよい • 日本Hamlの会 http://haml.ursm.jp 582010年11月7日日曜日
- 59. Haml/Sass • SassはCSSを生成するためのメタ言語。 • Hamlをインストールすると一緒にインストー ルされる。 • 「div.comment内のh2タグ」のような階層構造 を分かりやすく表現。 • 変数を使って複数箇所で使われる値を定義した り，計算式を使って相対的な値の指定を行った り，複雑なCSSにも対応できる。 592010年11月7日日曜日
- 60. Haml/Sass body -webkit-text-size-adjust: none background: #C5CCD3 body { -webkit-text-size-adjust: none; background: #c5ccd3; } sass css このsassからcssを生成 602010年11月7日日曜日
- 61. Haml/Sass • インデントを利用するため見た目が簡潔になる。 • { }が不要。代わりに半角スペース2文字のインデ ントを用いる。 • ;（セミコロン）が不要。 • オリジナルsassソースからCSSを生成するのに saas 活用ツール saag が便利 • gem install sugamasao-saag --source http://gems.githu 612010年11月7日日曜日
- 63. iPhone/iPad向けWeb • 画面サイズを最適化する。 • (Mobile)Safariの長所 HTML5/CSS3対応 を活かす。 • Viewport:仮想的な表示領域を理解する。 632010年11月7日日曜日
- 64. 横 320px × 縦(416)px 横 768px × 縦1024px 横 (416)px × 縦320px 横 1024px × 縦768px ポートレイト （縦向き） ランドスケープ （横向き） iPhone iPad 画面サイズ 642010年11月7日日曜日
- 65. iPhone縦向きスクリーン幅は３２０ピクセル固定 (これより大きいと自動縮小されるVewportのデ フォルト幅は980ピクセル ) !!! XML !!! %html{ html_attrs("ja") } %head %meta{:"http-equiv"=>"Content-Type", :content=>"text/html", :charset=>"utf-8"} %meta{:name=>"viewport", :content=>"width=device-width", :charset=>"utf-8"} - if /MSIE/ =~ request.env['HTTP_USER_AGENT'] %link{:href=>"/css/maitore_ie.css", :rel => "stylesheet", :type => "text/css"} - elsif /iPhone/ =~ request.env['HTTP_USER_AGENT'] %script{:type => "text/javascript", :src => "/js/maitore.js"} %link{:media=>"only screen and (max-device-width: 480px)",:href=>"/css/ maitore_iphone.css", :rel => "stylesheet", :type => "text/css"} - else %link{:media=>"screen and (min-device-width: 481px)",:href=>"/css/ maitore_pc.css", :rel => "stylesheet", :type => "text/css"} iPhone用metaタグ設定他 652010年11月7日日曜日
- 66. !!! XML !!! %html{ html_attrs("ja") } %head %meta{:"http-equiv"=>"Content-Type", :content=>"text/ html", :charset=>"utf-8"} %meta{:name=>"viewport", :content=>"width=device- width", :charset=>"utf-8"} <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta charset='utf-8' content='text/html' http-equiv='Content- Type' /> <meta charset='utf-8' content='width=device-width' name='viewport' /> .hamlを.xhtmlに展開 662010年11月7日日曜日
- 68. HTML5 • HTML5の時代がやってきます。 • iPhone/iPadの(Mobile)SafariはHTML5対応済。 • 遅れているIEもIE9で積極的にHTML5対応予定。 • 特にiPhone/iPadがFlash対応しない為、動きのあ る画面をHTML5で実装するうねり。 • 中でも注目なのが「canvas要素」。 682010年11月7日日曜日
- 69. HTML5 HTML5 における HTML4 からの変更点 http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ デザイナーのためのHTML5リソースまとめ http://www.designwalker.com/2009/11/html5.html 692010年11月7日日曜日
- 76. よくある質問と回答 もちろん使えます。狙い目です♪ http://innate-gae.appspot.com/ にて実際に稼働している解説サイトがあります。 但し 私はRuby1.9.2でトライして「ERROR: While executing gem ... (RuntimeError) can't add a new key into hash during iteration」をくらいました。 RamazeはGAE Google App Engineで 使えるのでしょうか？ 762010年11月7日日曜日