Download - 20101106 ramaze発表

Ramaze新時代に

で作る　簡単

iPhone/iPad 向け

Webサイト

Rails

日本Rubyの会/iRubySystems

福井修 iR3

12010年11月7日日曜日

自己紹介

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勉強会@関西 ...


http://d.hatena.ne.jp

http://d.hatena.ne.jp

2002年KOFにて Matzを囲む32010年11月7日日曜日

http://k-of.jp/2002/event.html

KOFでのRubyのあゆみ　2002.12.7

いやぁRubyコミュニティって何よ単なる「有志」かよ




2003.10.5 島根玉造温泉Rubyミーティングこの際に「日本Rubyの会」の名前が決まる


http://k-of.jp/2003/1101.html

まだまだマイナーなRubyとそのコミュニティ

KOFでのRubyのあゆみ 2003.11.1




2004年8月日本Rubyの会発足！

るびま第１号発刊



遂に日本Rubyの会に

KOFでのRubyのあゆみ 2004.10.23




司会はうささんで高橋会長が日本Rubyの会の発足講演

この時の会長の講演あたりで『高橋メソッド』確立かも

2004年KOFでは日本Rubyの会の初披露＆紹介

http://www.fdiary.net/ml/ruby/msg/435




日本Rubyの会初公式CDを作成しKOF2004で配布しました。限定100枚

連番刻印もちろん No.001は Matzへ



ブースの看板が欲しいなとのことで作りました

日本一に見える？その通りになった？！




kof2004ブース出展ささださんと店番

スタッフしてるとしゃべる順番がまわってくるかも


2004年11月27日Ruby勉強会@関西-0開始

KOF2004での小波先生との出会いから

以後 Ruby@関西でのコミュニティ活動へhttp://jp.rubyist.net/?KansaiWorkshop


http://jp.rubyist.net/?KansaiWorkshop

http://jp.rubyist.net/?KansaiWorkshop

果てしなきRubyの拡がり


またRubyWorldConference2010高橋会長講演

「Rubyをとりまくひとびと」にてまとめられていたように

２００６年よりRubyKaigiが開催されていますそしてこれも来年RubyKaigi2011で一区切り

角谷さんの尽力でRegional Ruby会議も各地で軌道に関西Ruby会議03

関西から全国へ　ルーツは関西♪来月は札幌Ruby会議03


刻言道場「まいトレ」

http://maitore.net/

絶賛会員募集中！


http://maitore.net

http://maitore.net

良い道具で　　　良いもの　　　　　　　　　　をつくる


Rubyを使っていますか？

皆様へ質問です


Ruby1.9.2 を使っていますか？


Rails を使っていますか？


Rails3 をもう使っていますか？


Ramaze を知っていますか？


Ramaze を使っていますか？


iPhone を使っていますか？


iPad を使っていますか？


HTML5 を使っていますか？


ではRails新時代のRamazeへ


http://it-center.mri.co.jp/files/ossocw/course01/lesson09.pdf より引用


http://it-center.mri.co.jp/files/ossocw/course01/lesson09.pdf

http://it-center.mri.co.jp/files/ossocw/course01/lesson09.pdf

Rails ＞ Ramaze ＞ Sinatra ＞ CGI

Railsよりシンプル・軽量が求められるケースも

複雑・充実シンプル・軽量

コンビニへ行くのにプリウスでも良いが軽でも自転車でもよい


Rails新時代到来

Rails3で大きな変更


•フルスタックフレームワーク（一枚岩）からコアライブラリと周辺ライブラリの組合せに分離

• Rails周辺ライブラリのエエとこどりがよりおいしくできるように



松田明さんWEB+DB#58 P.15より

Rails3の構造


•最も広い意味での「Rails」は RackもSinatraもRamazeもなにもかも含まれる

•最小構成の「Rails」は Railtie のみ



ActionDispatchRack拡張、ルーティング

AbstractControllerコントローラ抽象化

ActionView画面描画関連

ActiveModelモデル抽象化

Railtie Railsの中心

Rails3 MVC フレームワーク

1 2

3 4

5


エエとこどり


優れた良い部品を利用する


Rails3 で Rails純正部品も互換部品に交換可能に

Ramaze は最初から部品選択は柔軟

Railsで開発された良い部品がRamazeで使える♪


では部品の数々を


サーバとアプリケーション／フレームワーク間のインターフェースの役割を果たすライブラリ

Rack


Ruck• Webアプリはリクエストをレスポンスに変換する関数ととらえる。

• env(環境変数のハッシュ)を受け取ってステータスコードとHTTPヘッダとHTTPボディを返す。

• WSGI: Web Server Gateway Interface

• ruckup で便利なミドルウェアが使える


Ruck

• Rack日本語リファレンス　http://route477.net/w/?RackReferenceJA

• 5分でわかるRuck　http://route477.net/d/?date=20080716


http://route477.net/w/?RackReferenceJA




http://route477.net/d/?date=20080716




Ramaze


RamazeRamaze公式サイトhttp://ramaze.net

Ramazeの作者はMichael Felingerさんなんと東京在住とか。

RubyKaigi2009 で The innate beauty of Ramazeの演題で講演されています。

上原忠彦さんとのViプレゼンは伝説に。2008.2.4に北海道山口さんによる

ruby-list:44567の紹介投稿あり


http://ramaze.net

http://ramaze.net

Ramazeルーティング・コントロール

画面描画

Haml他データストア連携

ActiveRecord他

InnateRamazeの中心

Ramazeフレームワーク

1

3 4

2

Ramazeは2009.04から「ramaze」と「innate」に分割。Innate：最低限必要な機能のみを抜き出したRamaze のコア。

DefaultはEtanni

Mモデル

Vビュー

Cコントローラ


実装技術Ramaze/Rack/Haml/Sass/ActiveRecord


Ramazeの特長SinatraはDSLを駆使して独自の世界を作っているのに

対してRamazeは素直にRubyの世界です。CGIからの移行に違和感が少ないでしょう。


■ 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.181 gem installedInstalling ri documentation for ramaze-2010.06.18...Installing RDoc documentation for ramaze-2010.06.18...

innateが一緒にインストールされなかったら innateも

> gem i innate


require 'ramaze'

class MainController < Ramaze::Controller

def index "Hello, Ramaze!" endend

Ramaze.start

はじめの一歩 Hello Ramaze!

このソースhello.rbをRubyで実行し http://localhost:7000/ でアクセス


http://localhost:7000/hello


Railsのrestful対応は美しいし強力

但しルーティングが難しい

Rails3で新しいrouts記法が導入されて相当改善

まさに諸刃の剣

Ramazeのルーティングは簡単


require 'ramaze'

class MainController < Ramaze::Controller

map ‘/another‘ def hello "Hello from Another" endend

Ramaze.start

ルーティング another Hello !

このhello2.rbをRubyで実行し http://localhost:7000/another/hello でアクセス




この時点でRamazeの魅力に引き付けられたら

https://github.com/Ramaze/ramaze/tree/master/exampls

へ直行すべし！

Ramaze入門はyharaさんの連載記事が有名です。http://gihyo.jp/dev/serial/01/ruby/0012


https://github.com/Ramaze/ramaze/tree/master/




Ramazeを使えば1ファイルでWebアプリができることはご覧のとおり

もう少し大きな規模のアプリには雛形から編集してゆくケースを紹介。

> rails new app > ramaze create app

Rails Ramazeプロジェクト作成


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

右のようなディレクトリファイルが生成される

controllermodelviewなどRailsに慣れていると見慣れた感じで安心できます


Ramazeのコントローラ雛形編集

class Controller < Ramaze::Controller layout :default helper :xhtml engine :Etanniend

class Controller < Ramaze::Controller layout :default helper :user engine :Hamlend

コントロラーのengine: 利用したいものを指定


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 :nameendDataMapper.auto_upgrade!

require 'activerecord'ActiveRecord::Base.establish_connection( :adapter => 'postgresql', :database => 'app', :username => 'postgres', :password => 'xxxxx', :encoding => 'unicode')

DataMapperの例

ActiveRecordの例


Haml/Sass


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で表記すると簡潔になる


Haml/Sass• HamlはHTML/XHTMLを生成するためのマークアップ言語。

• インデントや簡略構文によって簡潔な記述が行える。

• インデントで内包関係を表現。

• 要素を閉じなくてもよい

• 日本Hamlの会 http://haml.ursm.jp


Haml/Sass• SassはCSSを生成するためのメタ言語。

• Hamlをインストールすると一緒にインストールされる。

• 「div.comment内のh2タグ」のような階層構造を分かりやすく表現。

• 変数を使って複数箇所で使われる値を定義したり，計算式を使って相対的な値の指定を行ったり，複雑なCSSにも対応できる。


Haml/Sass

body -webkit-text-size-adjust: none background: #C5CCD3

body { -webkit-text-size-adjust: none; background: #c5ccd3; }

sass

cssこのsassからcssを生成


Haml/Sass• インデントを利用するため見た目が簡潔になる。

• { }が不要。代わりに半角スペース2文字のインデントを用いる。

• ;（セミコロン）が不要。

• オリジナルsassソースからCSSを生成するのにsaas 活用ツール saag が便利

• gem install sugamasao-saag --source http://gems.githu


http://gems.githu

http://gems.githu

iPhone/iPad向け Web


iPhone/iPad向けWeb

•画面サイズを最適化する。

• (Mobile)Safariの長所 HTML5/CSS3対応を活かす。

• Viewport:仮想的な表示領域を理解する。


横 320px

× 縦(416)px

横 768px

× 縦1024px

横 (416)px

× 縦320px

横 1024px

× 縦768px

ポートレイト（縦向き）

ランドスケープ（横向き）

iPhone iPad

画面サイズ


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タグ設定他


!!! 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に展開


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/1999/xhtml'

http://www.w3.org/1999/xhtml'

HTML5672010年11月7日日曜日

HTML5

• HTML5の時代がやってきます。

• iPhone/iPadの(Mobile)SafariはHTML5対応済。

• 遅れているIEもIE9で積極的にHTML5対応予定。

• 特にiPhone/iPadがFlash対応しない為、動きのある画面をHTML5で実装するうねり。

• 中でも注目なのが「canvas要素」。


HTML5

HTML5 における HTML4 からの変更点

http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/

デザイナーのためのHTML5リソースまとめhttp://www.designwalker.com/2009/11/html5.html




http://www.designwalker.com/2009/11/html5.html

http://www.designwalker.com/2009/11/html5.html

さて良い道具を使って何をするか？


自分が欲しいものは他の人も欲しいかも？


RubyKaigiでもRubyWorldConferenceでも

英語が聞き取れてしゃべれるようになりたい

と痛感！


Webアプリケーションでも音と映像も

iPhone/iPadでヒヤリングそして目でも内容を確認できる

英語の勉強に使える！！


実演

http://maitore.net/

のオバマ大統領就任演説

iPhoneやiPadPCならchromeなどHTML5対応のブラウザでご覧ください


http://maitore.net

http://maitore.net

ご静聴ありがとうございました752010年11月7日日曜日

よくある質問と回答

もちろん使えます。狙い目です♪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で使えるのでしょうか？


http://innate-gae.appspot.com

http://innate-gae.appspot.com

Download - 20101106 ramaze発表

Top Related