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年まつもとゆきひろさんが基調講演
 講...
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の会
発足!
るびま第1号発刊
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
9201...
日本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をとりまくひとびと」
にてまとめられていたように
2006年よりRubyKaigiが開催されています
そしてこれも来年RubyKaigi2011で一区切り
角谷さんの...
刻言道場「まいトレ」
http://maitore.net/
絶賛 会員募集中!
162010年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日日曜日
ActionDispatch
Rack拡張、ルーティング
AbstractController
コントローラ抽象化
ActionView
画面描画関連
ActiveModel
モデル抽象化
RailtieRailsの中心
Rails3 MVC ...
エエとこどり
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 In...
Ruck
• Rack日本語リファレンス http://
route477.net/w/?RackReferenceJA
• 5分でわかるRuck http://
route477.net/d/?date=20080716
412010年11月...
Ramaze
422010年11月7日日曜日
Ramaze
Ramaze公式サイトhttp://ramaze.net
Ramazeの作者はMichael Felingerさん
なんと東京在住とか。
RubyKaigi2009 で The innate beauty of Ramaze
の演...
Ramaze
ルーティング・コントロール
画面描画
Haml 他
データストア連携
ActiveRecord他
InnateRamazeの中心
Ramaze フレームワーク
1
3 4
2
Ramazeは2009.04から「ramaze」と「i...
実装技術
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 Ramaz...
require 'ramaze'
class MainController < Ramaze::Controller
def index
"Hello, Ramaze!"
end
end
Ramaze.start
はじめの一歩 Hello Ra...
Railsのrestful対応は美しいし強力
但し ルーティングが難しい
Rails3で新しいrouts記法が導入されて相当改善
まさに諸刃の剣
Ramazeのルーティングは簡単
492010年11月7日日曜日
require 'ramaze'
class MainController < Ramaze::Controller
map ‘/another‘
def hello
"Hello from Another"
end
end
Ramaze.st...
この時点でRamazeの魅力に引き付けられたら
https://github.com/Ramaze/ramaze/tree/
master/exampls
へ直行すべし!
Ramaze入門はyharaさんの連載記事が有名です。
http://g...
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
...
Ramazeのコントローラ雛形編集
class Controller < Ramaze::Controller
layout :default
helper :xhtml
engine :Etanni
end
class Controller ...
Ramazeのモデル雛形編集
DataMapper.setup(:default, "sqlite3://#{__DIR__('words.db')}")
class Word include DataMapper::Resource
prop...
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...
Haml/Sass
• HamlはHTML/XHTMLを生成するためのマー
クアップ言語。
• インデントや簡略構文によって簡潔な記述が行
える。
• インデントで内包関係を表現。
• 要素を閉じなくてもよい
• 日本Hamlの会 http:/...
Haml/Sass
• SassはCSSを生成するためのメタ言語。
• Hamlをインストールすると一緒にインストー
ルされる。
• 「div.comment内のh2タグ」のような階層構造
を分かりやすく表現。
• 変数を使って複数箇所で使われ...
Haml/Sass
body
-webkit-text-size-adjust: none
background: #C5CCD3
body {
-webkit-text-size-adjust: none;
background: #c5cc...
Haml/Sass
• インデントを利用するため見た目が簡潔になる。
• { }が不要。代わりに半角スペース2文字のインデ
ントを用いる。
• ;(セミコロン)が不要。
• オリジナルsassソースからCSSを生成するのに
saas 活用ツール...
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
画面サイズ
642...
iPhone縦向きスクリーン幅は320ピクセル固定
(これより大きいと自動縮小されるVewportのデ
フォルト幅は980ピクセル )
!!! XML
!!!
%html{ html_attrs("ja") }
%head
%meta{:"ht...
!!! XML
!!!
%html{ html_attrs("ja") }
%head
%meta{:"http-equiv"=>"Content-Type", :content=>"text/
html", :charset=>"utf-8"...
HTML5
672010年11月7日日曜日
HTML5
• HTML5の時代がやってきます。
• iPhone/iPadの(Mobile)SafariはHTML5対応済。
• 遅れているIEもIE9で積極的にHTML5対応予定。
• 特にiPhone/iPadがFlash対応しない為、動...
HTML5
HTML5 における HTML4 からの変更点
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/
デザイナーのためのHTML5リソースまとめ
http://www....
さて 良い道具を使って
何をするか?
702010年11月7日日曜日
自分が欲しいものは
他の人も欲しいかも?
712010年11月7日日曜日
RubyKaigiでも
RubyWorldConferenceでも
英語が聞き取れて
しゃべれるようになりたい
と痛感!
722010年11月7日日曜日
Webアプリケーションでも音と映像も
iPhone/iPadでヒヤリングそして目でも
内容を確認できる
英語の勉強に使える!!
732010年11月7日日曜日
実演
http://maitore.net/
のオバマ大統領就任演説
iPhoneやiPad
PCならchromeなどHTML5対応
のブラウザでご覧ください
742010年11月7日日曜日
ご静聴ありがとうございました
752010年11月7日日曜日
よくある質問と回答
もちろん使えます。狙い目です♪
http://innate-gae.appspot.com/
にて実際に稼働している解説サイトがあります。
但し 私はRuby1.9.2でトライして「ERROR: While
executin...
Upcoming SlideShare
Loading in …5
×

20101106 ramaze発表

1,452 views

Published on

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,452
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20101106 ramaze発表

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

×