Download as PDF, PPTX
![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日日曜日](https://image.slidesharecdn.com/20101106ramaze-101106204256-phpapp01/75/20101106-ramaze-65-2048.jpg)
20101106 ramaze発表
- 1.
- 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日日曜日
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. 日本Rubyの会初公式CDを作成し KOF2004で配布しました。限定100枚 連番 刻印 もちろんNo.001は Matzへ 102010年11月7日日曜日
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. Rails ＞ Ramaze＞ Sinatra ＞ CGI Railsよりシンプル・軽量 が求められるケースも 複雑・充実 シンプル・軽量 コンビニへ行くのにプリウスでも良いが 軽でも自転車でもよい 292010年11月7日日曜日
- 30.
- 31.
- 32.
- 33. • 最も広い意味での「Rails」は Rackも SinatraもRamazeもなにもかも含まれる •最小構成の「Rails」は Railtie のみ Rails新時代到来 332010年11月7日日曜日
- 34.
- 35.
- 36.
- 37. Rails3 で Rails純正部品も互換部品に交換可能に Ramazeは最初から部品選択は柔軟 Railsで開発された良い部品がRamazeで使える♪ 372010年11月7日日曜日
- 38.
- 39.
- 40. Ruck • Webアプリはリクエストをレスポンスに 変換する関数ととらえる。 • env(環境変数のハッシュ)を受け取って ステータスコードとHTTPヘッダとHTTP ボディを返す。 •WSGI: Web Server Gateway Interface • ruckup で便利なミドルウェアが使える 402010年11月7日日曜日
- 41.
- 42.
- 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 34 2 Ramazeは2009.04から「ramaze」と「innate」に分割。 Innate：最低限必要な機能のみを抜き出したRamaze のコア。 DefaultはEtanni M モデル V ビュー C コント ローラ 442010年11月7日日曜日
- 45.
- 46.
- 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日日曜日
- 49.
- 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日日曜日
- 51.
- 52. Ramazeを使えば1ファイルでWebアプリが できることはご覧のとおり もう少し大きな規模のアプリには雛形から 編集してゆくケースを紹介。 > rails newapp > ramaze create app Rails Ramaze プロジェクト作成 522010年11月7日日曜日
- 53. Ramazeの雛形作成 mkdir controller mkdirlayout 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 Wordinclude 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日日曜日
- 56.
- 57. Haml/Sass <div id='content'> <div class='leftcolumn'> <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日日曜日
- 62.
- 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日日曜日
- 67.
- 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日日曜日
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76. よくある質問と回答 もちろん使えます。狙い目です♪ http://innate-gae.appspot.com/ にて実際に稼働している解説サイトがあります。 但し 私はRuby1.9.2でトライして「ERROR: While executinggem ... (RuntimeError) can't add a new key into hash during iteration」をくらいました。 RamazeはGAE Google App Engineで 使えるのでしょうか？ 762010年11月7日日曜日