Your SlideShare is downloading. ×
20101106 ramaze発表
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

20101106 ramaze発表

1,081
views

Published on

Rails新時代に「Ramaze」で作る簡単iPhone/iPad向けWebサイト …

Rails新時代に「Ramaze」で作る簡単iPhone/iPad向けWebサイト
関西Ruby会議03

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,081
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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日日曜日
  • 3. 2002年KOFにて Matzを囲む 32010年11月7日日曜日
  • 4. http://k-of.jp/2002/event.html KOFでのRubyのあゆみ 2002.12.7 いやぁRubyコミュニティって何よ 単なる「有志」かよ 42010年11月7日日曜日
  • 5. 2003.10.5 島根 玉造温泉Rubyミーティング この際に「日本Rubyの会」の名前が決まる 52010年11月7日日曜日
  • 6. http://k-of.jp/2003/1101.html まだまだマイナーなRubyとそのコミュニティ KOFでのRubyのあゆみ 2003.11.1 62010年11月7日日曜日
  • 7. 2004年8月 日本Rubyの会 発足! るびま第1号発刊 72010年11月7日日曜日
  • 8. http://k-of.jp/2004/1023.html 遂に 日本Rubyの会に KOFでのRubyのあゆみ 2004.10.23 82010年11月7日日曜日
  • 9. 司会はうささんで高橋会長が日本Rubyの会の発足講演 この時の会長の講演あたりで 『高橋メソッド』確立かも 2004年KOFでは日本Rubyの会の初披露&紹介 http://www.fdiary.net/ml/ruby/msg/435 92010年11月7日日曜日
  • 10. 日本Rubyの会初公式CDを作成し KOF2004で配布しました。限定100枚 連番 刻印 もちろん No.001は Matzへ 102010年11月7日日曜日
  • 11. http://www.fdiary.net/ml/ruby/msg/508 ブースの看板が欲しいなとのことで作りました 日本一に見える? その通りになった?! 112010年11月7日日曜日
  • 12. kof2004ブース出展 ささださんと店番 スタッフしてるとしゃべる順番がまわってくるかも 122010年11月7日日曜日
  • 13. 2004年11月27日 Ruby勉強会@関西-0開始 KOF2004での小波先生との出会いから 以後 Ruby@関西でのコミュニティ活動へ http://jp.rubyist.net/?KansaiWorkshop 132010年11月7日日曜日
  • 14. 果てしなき Rubyの拡がり 142010年11月7日日曜日
  • 15. またRubyWorldConference2010 高橋会長 講演 「Rubyをとりまくひとびと」 にてまとめられていたように 2006年よりRubyKaigiが開催されています そしてこれも来年RubyKaigi2011で一区切り 角谷さんの尽力でRegional Ruby会議も各地で軌道に 関西Ruby会議03 関西から全国へ ルーツは関西♪ 来月は札幌Ruby会議03 152010年11月7日日曜日
  • 16. 刻言道場「まいトレ」 http://maitore.net/ 絶賛 会員募集中! 162010年11月7日日曜日
  • 17. 良い道具で   良いもの           をつくる 172010年11月7日日曜日
  • 18. Rubyを使っていますか? 皆様へ質問です 182010年11月7日日曜日
  • 19. Ruby1.9.2 を使っていますか? 192010年11月7日日曜日
  • 20. Rails を使っていますか? 202010年11月7日日曜日
  • 21. Rails3 をもう使っていますか? 212010年11月7日日曜日
  • 22. Ramaze を知っていますか? 222010年11月7日日曜日
  • 23. Ramaze を使っていますか? 232010年11月7日日曜日
  • 24. iPhone を使っていますか? 242010年11月7日日曜日
  • 25. iPad を使っていますか? 252010年11月7日日曜日
  • 26. HTML5 を使っていますか? 262010年11月7日日曜日
  • 27. ではRails新時代のRamazeへ 272010年11月7日日曜日
  • 28. http://it-center.mri.co.jp/files/ossocw/course01/lesson09.pdf より引用 282010年11月7日日曜日
  • 29. Rails > Ramaze > Sinatra > CGI Railsよりシンプル・軽量 が求められるケースも 複雑・充実 シンプル・軽量 コンビニへ行くのにプリウスでも良いが 軽でも自転車でもよい 292010年11月7日日曜日
  • 30. Rails新時代到来 Rails3で大きな変更 302010年11月7日日曜日
  • 31. • フルスタックフレームワーク(一枚岩)から コアライブラリと周辺ライブラリの組合せに 分離 • Rails周辺ライブラリのエエとこどりがより おいしくできるように Rails新時代到来 312010年11月7日日曜日
  • 32. 松田明さんWEB+DB#58 P.15より Rails3の構造 322010年11月7日日曜日
  • 33. • 最も広い意味での「Rails」は Rackも SinatraもRamazeもなにもかも含まれる • 最小構成の「Rails」は Railtie のみ Rails新時代到来 332010年11月7日日曜日
  • 34. ActionDispatch Rack拡張、ルーティング AbstractController コントローラ抽象化 ActionView 画面描画関連 ActiveModel モデル抽象化 RailtieRailsの中心 Rails3 MVC フレームワーク 1 2 3 4 5 342010年11月7日日曜日
  • 35. エエとこどり 352010年11月7日日曜日
  • 36. 優れた良い部品を利用する 362010年11月7日日曜日
  • 37. Rails3 で Rails純正部品も互換部品に交換可能に Ramaze は最初から部品選択は柔軟 Railsで開発された良い部品がRamazeで使える♪ 372010年11月7日日曜日
  • 38. では部品の数々を 382010年11月7日日曜日
  • 39. サーバとアプリケーション/フレームワーク間の インターフェースの役割を果たすライブラリ Rack 392010年11月7日日曜日
  • 40. Ruck • Webアプリはリクエストをレスポンスに 変換する関数ととらえる。 • env(環境変数のハッシュ)を受け取って ステータスコードとHTTPヘッダとHTTP ボディを返す。 • WSGI: Web Server Gateway Interface • ruckup で便利なミドルウェアが使える 402010年11月7日日曜日
  • 41. Ruck • Rack日本語リファレンス http:// route477.net/w/?RackReferenceJA • 5分でわかるRuck http:// route477.net/d/?date=20080716 412010年11月7日日曜日
  • 42. Ramaze 422010年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日日曜日
  • 45. 実装技術 Ramaze/Rack/Haml/Sass/ActiveRecord 452010年11月7日日曜日
  • 46. Ramazeの特長 SinatraはDSLを駆使して独自の世界を作っているのに 対してRamazeは素直にRubyの世界です。 CGIからの移行に違和感が少ないでしょう。 462010年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日日曜日
  • 49. Railsのrestful対応は美しいし強力 但し ルーティングが難しい Rails3で新しいrouts記法が導入されて相当改善 まさに諸刃の剣 Ramazeのルーティングは簡単 492010年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日日曜日
  • 51. この時点でRamazeの魅力に引き付けられたら https://github.com/Ramaze/ramaze/tree/ master/exampls へ直行すべし! Ramaze入門はyharaさんの連載記事が有名です。 http://gihyo.jp/dev/serial/01/ruby/0012 512010年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日日曜日
  • 56. Haml/Sass 562010年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日日曜日
  • 62. iPhone/iPad向け Web 622010年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縦向きスクリーン幅は320ピクセル固定 (これより大きいと自動縮小される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. HTML5 672010年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日日曜日
  • 70. さて 良い道具を使って 何をするか? 702010年11月7日日曜日
  • 71. 自分が欲しいものは 他の人も欲しいかも? 712010年11月7日日曜日
  • 72. RubyKaigiでも RubyWorldConferenceでも 英語が聞き取れて しゃべれるようになりたい と痛感! 722010年11月7日日曜日
  • 73. Webアプリケーションでも音と映像も iPhone/iPadでヒヤリングそして目でも 内容を確認できる 英語の勉強に使える!! 732010年11月7日日曜日
  • 74. 実演 http://maitore.net/ のオバマ大統領就任演説 iPhoneやiPad PCならchromeなどHTML5対応 のブラウザでご覧ください 742010年11月7日日曜日
  • 75. ご静聴ありがとうございました 752010年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日日曜日