Post on 31-May-2015
description
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勉強会@関西 ...
22010年11月7日日曜日
2002年KOFにて Matzを囲む32010年11月7日日曜日
http://k-of.jp/2002/event.html
KOFでのRubyのあゆみ 2002.12.7
いやぁRubyコミュニティって何よ単なる「有志」かよ
42010年11月7日日曜日
2003.10.5 島根 玉造温泉Rubyミーティングこの際に「日本Rubyの会」の名前が決まる
52010年11月7日日曜日
http://k-of.jp/2003/1101.html
まだまだマイナーなRubyとそのコミュニティ
KOFでのRubyのあゆみ 2003.11.1
62010年11月7日日曜日
2004年8月日本Rubyの会発足！
るびま第１号発刊
72010年11月7日日曜日
http://k-of.jp/2004/1023.html
遂に 日本Rubyの会に
KOFでのRubyのあゆみ 2004.10.23
82010年11月7日日曜日
司会はうささんで高橋会長が日本Rubyの会の発足講演
この時の会長の講演あたりで『高橋メソッド』確立かも
2004年KOFでは日本Rubyの会の初披露＆紹介
http://www.fdiary.net/ml/ruby/msg/435
92010年11月7日日曜日
日本Rubyの会初公式CDを作成しKOF2004で配布しました。限定100枚
連番 刻印 もちろん No.001は Matzへ
102010年11月7日日曜日
http://www.fdiary.net/ml/ruby/msg/508
ブースの看板が欲しいなとのことで作りました
日本一に見える？ その通りになった？！
112010年11月7日日曜日
kof2004ブース出展 ささださんと店番
スタッフしてるとしゃべる順番がまわってくるかも
122010年11月7日日曜日
2004年11月27日Ruby勉強会@関西-0開始
KOF2004での小波先生との出会いから
以後 Ruby@関西でのコミュニティ活動へhttp://jp.rubyist.net/?KansaiWorkshop
132010年11月7日日曜日
果てしなきRubyの拡がり
142010年11月7日日曜日
またRubyWorldConference2010高橋会長 講演
「Rubyをとりまくひとびと」にてまとめられていたように
２００６年よりRubyKaigiが開催されていますそしてこれも来年RubyKaigi2011で一区切り
角谷さんの尽力でRegional Ruby会議も各地で軌道に関西Ruby会議03
関西から全国へ ルーツは関西♪来月は札幌Ruby会議03
152010年11月7日日曜日
良い道具で 良いもの をつくる
172010年11月7日日曜日
Rubyを使っていますか？
皆様へ質問です
182010年11月7日日曜日
Ruby1.9.2 を使っていますか？
192010年11月7日日曜日
Rails を使っていますか？
202010年11月7日日曜日
Rails3 をもう使っていますか？
212010年11月7日日曜日
Ramaze を知っていますか？
222010年11月7日日曜日
Ramaze を使っていますか？
232010年11月7日日曜日
iPhone を使っていますか？
242010年11月7日日曜日
iPad を使っていますか？
252010年11月7日日曜日
HTML5 を使っていますか？
262010年11月7日日曜日
ではRails新時代のRamazeへ
272010年11月7日日曜日
http://it-center.mri.co.jp/files/ossocw/course01/lesson09.pdf より引用
282010年11月7日日曜日
Rails ＞ Ramaze ＞ Sinatra ＞ CGI
Railsよりシンプル・軽量が求められるケースも
複雑・充実 シンプル・軽量
コンビニへ行くのにプリウスでも良いが軽でも自転車でもよい
292010年11月7日日曜日
Rails新時代到来
Rails3で大きな変更
302010年11月7日日曜日
•フルスタックフレームワーク（一枚岩）からコアライブラリと周辺ライブラリの組合せに分離
• Rails周辺ライブラリのエエとこどりがよりおいしくできるように
Rails新時代到来
312010年11月7日日曜日
松田明さんWEB+DB#58 P.15より
Rails3の構造
322010年11月7日日曜日
•最も広い意味での「Rails」は RackもSinatraもRamazeもなにもかも含まれる
•最小構成の「Rails」は Railtie のみ
Rails新時代到来
332010年11月7日日曜日
ActionDispatchRack拡張、ルーティング
AbstractControllerコントローラ抽象化
ActionView画面描画関連
ActiveModelモデル抽象化
Railtie Railsの中心
Rails3 MVC フレームワーク
1 2
3 4
5
342010年11月7日日曜日
エエとこどり
352010年11月7日日曜日
優れた良い部品を利用する
362010年11月7日日曜日
Rails3 で Rails純正部品も互換部品に交換可能に
Ramaze は最初から部品選択は柔軟
Railsで開発された良い部品がRamazeで使える♪
372010年11月7日日曜日
では部品の数々を
382010年11月7日日曜日
サーバとアプリケーション／フレームワーク間のインターフェースの役割を果たすライブラリ
Rack
392010年11月7日日曜日
Ruck• Webアプリはリクエストをレスポンスに変換する関数ととらえる。
• env(環境変数のハッシュ)を受け取ってステータスコードとHTTPヘッダとHTTPボディを返す。
• WSGI: Web Server Gateway Interface
• ruckup で便利なミドルウェアが使える
402010年11月7日日曜日
Ruck
• Rack日本語リファレンス http://route477.net/w/?RackReferenceJA
• 5分でわかるRuck http://route477.net/d/?date=20080716
412010年11月7日日曜日
Ramaze
422010年11月7日日曜日
RamazeRamaze公式サイトhttp://ramaze.net
Ramazeの作者はMichael Felingerさんなんと東京在住とか。
RubyKaigi2009 で The innate beauty of Ramazeの演題で講演されています。
上原忠彦さんとのViプレゼンは伝説に。2008.2.4に北海道 山口さんによる
ruby-list:44567の紹介投稿あり
432010年11月7日日曜日
Ramazeルーティング・コントロール
画面描画
Haml他データストア連携
ActiveRecord他
InnateRamazeの中心
Ramazeフレームワーク
1
3 4
2
Ramazeは2009.04から「ramaze」と「innate」に分割。Innate：最低限必要な機能のみを抜き出したRamaze のコア。
DefaultはEtanni
Mモデル
Vビュー
Cコントローラ
442010年11月7日日曜日
実装技術Ramaze/Rack/Haml/Sass/ActiveRecord
452010年11月7日日曜日
Ramazeの特長SinatraはDSLを駆使して独自の世界を作っているのに
対してRamazeは素直にRubyの世界です。CGIからの移行に違和感が少ないでしょう。
462010年11月7日日曜日
■ 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
472010年11月7日日曜日
require 'ramaze'
class MainController < Ramaze::Controller
def index "Hello, Ramaze!" endend
Ramaze.start
はじめの一歩 Hello Ramaze!
このソースhello.rbをRubyで実行し http://localhost:7000/ でアクセス
482010年11月7日日曜日
Railsのrestful対応は美しいし強力
但し ルーティングが難しい
Rails3で新しいrouts記法が導入されて相当改善
まさに諸刃の剣
Ramazeのルーティングは簡単
492010年11月7日日曜日
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 でアクセス
502010年11月7日日曜日
この時点でRamazeの魅力に引き付けられたら
https://github.com/Ramaze/ramaze/tree/master/exampls
へ直行すべし！
Ramaze入門はyharaさんの連載記事が有名です。http://gihyo.jp/dev/serial/01/ruby/0012
512010年11月7日日曜日
Ramazeを使えば1ファイルでWebアプリができることはご覧のとおり
もう少し大きな規模のアプリには雛形から編集してゆくケースを紹介。
> rails new app > ramaze create app
Rails Ramazeプロジェクト作成
522010年11月7日日曜日
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に慣れていると見慣れた感じで安心できます
532010年11月7日日曜日
Ramazeのコントローラ雛形編集
class Controller < Ramaze::Controller layout :default helper :xhtml engine :Etanniend
class Controller < Ramaze::Controller layout :default helper :user engine :Hamlend
コントロラーのengine: 利用したいものを指定
542010年11月7日日曜日
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の例
552010年11月7日日曜日
Haml/Sass
562010年11月7日日曜日
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日日曜日
Haml/Sass• HamlはHTML/XHTMLを生成するためのマークアップ言語。
• インデントや簡略構文によって簡潔な記述が行える。
• インデントで内包関係を表現。
• 要素を閉じなくてもよい
• 日本Hamlの会 http://haml.ursm.jp
582010年11月7日日曜日
Haml/Sass• SassはCSSを生成するためのメタ言語。
• Hamlをインストールすると一緒にインストールされる。
• 「div.comment内のh2タグ」のような階層構造を分かりやすく表現。
• 変数を使って複数箇所で使われる値を定義したり，計算式を使って相対的な値の指定を行ったり，複雑なCSSにも対応できる。
592010年11月7日日曜日
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日日曜日
Haml/Sass• インデントを利用するため見た目が簡潔になる。
• { }が不要。代わりに半角スペース2文字のインデントを用いる。
• ;（セミコロン）が不要。
• オリジナルsassソースからCSSを生成するのにsaas 活用ツール saag が便利
• gem install sugamasao-saag --source http://gems.githu
612010年11月7日日曜日
iPhone/iPad向け Web
622010年11月7日日曜日
iPhone/iPad向けWeb
•画面サイズを最適化する。
• (Mobile)Safariの長所 HTML5/CSS3対応を活かす。
• Viewport:仮想的な表示領域を理解する。
632010年11月7日日曜日
横 320px
× 縦(416)px
横 768px
× 縦1024px
横 (416)px
× 縦320px
横 1024px
× 縦768px
ポートレイト（縦向き）
ランドスケープ（横向き）
iPhone iPad
画面サイズ
642010年11月7日日曜日
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日日曜日
!!! 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日日曜日
HTML5672010年11月7日日曜日
HTML5
• HTML5の時代がやってきます。
• iPhone/iPadの(Mobile)SafariはHTML5対応済。
• 遅れているIEもIE9で積極的にHTML5対応予定。
• 特にiPhone/iPadがFlash対応しない為、動きのある画面をHTML5で実装するうねり。
• 中でも注目なのが「canvas要素」。
682010年11月7日日曜日
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日日曜日
さて 良い道具を使って何をするか？
702010年11月7日日曜日
自分が欲しいものは他の人も欲しいかも？
712010年11月7日日曜日
RubyKaigiでもRubyWorldConferenceでも
英語が聞き取れてしゃべれるようになりたい
と痛感！
722010年11月7日日曜日
Webアプリケーションでも音と映像も
iPhone/iPadでヒヤリングそして目でも内容を確認できる
英語の勉強に使える！！
732010年11月7日日曜日
実演
http://maitore.net/
のオバマ大統領就任演説
iPhoneやiPadPCならchromeなどHTML5対応のブラウザでご覧ください
742010年11月7日日曜日
ご静聴ありがとうございました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で使えるのでしょうか？
762010年11月7日日曜日