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