Slide 1
Slide 1 text
(株)永和システムマネジメント
@mtsmfm
松島 史秋
Opal ことはじめ
Slide 2
Slide 2 text
松島 史秋
GitHub, Twitter
@mtsmfm
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Ruby で
JS !
Slide 6
Slide 6 text
source 'https://rubygems.org'
gem 'activesupport'
gem 'opal'
gem 'opal-jquery'
gem 'pry-byebug'
gem 'slim'
gem 'sprockets'
source 'https://rails-assets.org' do
gem 'rails-assets-jquery'
end
Gemfile
Slide 7
Slide 7 text
require 'bundler'
Bundler.require
map '/assets' do
environment = Sprockets::Environment.new
environment.append_path 'app/js'
RailsAssets.load_paths.each {|p| environment.append_path(p) }
Opal.paths.each {|p| environment.append_path(p) }
run environment
end
map '/' do
environment = Sprockets::Environment.new
environment.append_path 'app/html'
environment.register_engine '.slim', Slim::Template
run environment
end
config.ru
Slide 8
Slide 8 text
opal filter
Slide 9
Slide 9 text
doctype html
html
head
title opal sample
script(src='assets/opal.js')
body
h1 Hello world
opal:
puts 'Hello world'
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
opal-parser
Slide 12
Slide 12 text
doctype html
html
head
title opal sample
script(src='assets/opal.js')
script(src='assets/opal-parser.js')
body
h1 Hello world
script(type='text/ruby')
|
puts 'Hello world'
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
opal-jquery
Slide 15
Slide 15 text
doctype html
html
head
title opal sample
script(src='assets/opal.js')
script(src='assets/jquery.js')
script(src='assets/opal-jquery.js')
script(src='assets/opal-parser.js')
body
button
| click me
script(type='text/ruby')
|
Document.ready? do
Element.find('button').on(:click) do |evt|
h1 = Element.new(:h1)
h1.text = 'Hello world'
Element.find('body').append(h1)
evt.current_target.remove
end
end
Slide 16
Slide 16 text
require 'bundler'
Bundler.require
map '/assets' do
environment = Sprockets::Environment.new
environment.append_path 'app/js'
RailsAssets.load_paths.each {|p| environment.append_path(p) }
Opal.use_gem 'opal-jquery'
Opal.paths.each {|p| environment.append_path(p) }
run environment
end
map '/' do
environment = Sprockets::Environment.new
environment.append_path 'app/html'
environment.register_engine '.slim', Slim::Template
run environment
end
config.ru
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Ruby で
JS
Slide 19
Slide 19 text
gem も
Slide 20
Slide 20 text
require 'bundler'
Bundler.require
map '/assets' do
environment = Sprockets::Environment.new
environment.append_path 'app/js'
RailsAssets.load_paths.each {|p| environment.append_path(p) }
Opal.use_gem 'activesupport'
Opal.use_gem 'opal-jquery'
Opal.paths.each {|p| environment.append_path(p) }
run environment
end
map '/' do
environment = Sprockets::Environment.new
environment.append_path 'app/html'
environment.register_engine '.slim', Slim::Template
run environment
end
config.ru
Slide 21
Slide 21 text
doctype html
html
head
title opal sample
script(src='assets/opal.js')
script(src='assets/jquery.js')
script(src='assets/opal-jquery.js')
script(src='assets/active_support/core_ext/object/blank.js')
body
.ruby nil.blank?
.opal
opal:
Element.find('.opal').text = nil.blank?
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
べんり!
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
number_to_humansize
使いたい
Slide 26
Slide 26 text
doctype html
html
head
title opal sample
script(src='assets/opal.js')
script(src='assets/jquery.js')
script(src='assets/opal-jquery.js')
script(src='assets/active_support/all.js')
body
.ruby ActiveSupport::NumberHelper.number_to_human_size(1234)
.opal
opal:
Element.find('.opal').text =
ActiveSupport::NumberHelper.number_to_human_size(1234)
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
- 非対応の機能
http://opalrb.org/docs/unsupported_features/
- String の破壊的変更
- Thread
- 一部 stdlib が未実装
- BigDecimal とか
Slide 30
Slide 30 text
class BigDecimal
class << self
def new(val)
`Number(#{val})`
end
end
end
def BigDecimal(value)
BigDecimal.new(value)
end
`` で直接 js
Slide 31
Slide 31 text
module ActiveSupport
module NumberHelper
class NumberToDelimitedConverter
private
def parts
left, right = number.to_s.split('.')
left = left.gsub(DELIMITED_REGEX) do
|digit_to_delimit|
"#{digit_to_delimit}#{options[:delimiter]}"
end
[left, right].compact
end
end
end
end
gsub! -> gsub
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
既存の ruby の資産を
そのまま生かすのは
まだ難しそう