rabbit-slide-myokoym-sinatrasapporo-20150919 2015.9.19.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 943c740a924d8aebf18a9a7a3321503870484346
4
+ data.tar.gz: 6b34961d5abeaad39c5fc1fb5aaa86d23bf0172b
5
+ SHA512:
6
+ metadata.gz: 51a35e7fff4992fbe07afcd79b775866ce6a8faffd25817d7d11f458326c32d5c6b4b53e331391639054f192ffb16fad4dc15204af1b31fa5d25703646cb6f74
7
+ data.tar.gz: fd62806bf563ac61bd36b8e56516289dba3ccee45817ea1184be3d5cbb4fad382a11ac319dbcbca498bca0db0082905375623a2383756c1e31c5ff75698caa3e
data/.rabbit ADDED
@@ -0,0 +1 @@
1
+ sinatra-with-bower.rab
@@ -0,0 +1,25 @@
1
+ = Sinatra w/ Bower
2
+
3
+ Sinatraアプリのフロントエンド用パッケージ(JavaScriptやCSSなど)の
4
+ 管理を楽にするためにBowerやアセットパイプラインを使う話。
5
+
6
+ == 作者向け
7
+
8
+ === 表示
9
+
10
+ rake
11
+
12
+ === 公開
13
+
14
+ rake publish
15
+
16
+ == 閲覧者向け
17
+
18
+ === インストール
19
+
20
+ gem install rabbit-slide-myokoym-sinatrasapporo-20150919
21
+
22
+ === 表示
23
+
24
+ rabbit rabbit-slide-myokoym-sinatrasapporo-20150919.gem
25
+
@@ -0,0 +1,17 @@
1
+ require "rabbit/task/slide"
2
+
3
+ # Edit ./config.yaml to customize meta data
4
+
5
+ spec = nil
6
+ Rabbit::Task::Slide.new do |task|
7
+ spec = task.spec
8
+ # spec.files += Dir.glob("doc/**/*.*")
9
+ # spec.files -= Dir.glob("private/**/*.*")
10
+ spec.add_runtime_dependency("rabbit-theme-nyankosakana")
11
+ end
12
+
13
+ desc "Tag #{spec.version}"
14
+ task :tag do
15
+ sh("git", "tag", "-a", spec.version.to_s, "-m", "Publish #{spec.version}")
16
+ sh("git", "push", "--tags")
17
+ end
@@ -0,0 +1,23 @@
1
+ ---
2
+ id: sinatrasapporo-20150919
3
+ base_name: sinatra-with-bower
4
+ tags:
5
+ - rabbit
6
+ - sinatra
7
+ - javascript
8
+ presentation_date: 2015-09-19
9
+ version: 2015.9.19.0
10
+ licenses:
11
+ - CC BY 4.0
12
+ slideshare_id:
13
+ speaker_deck_id:
14
+ ustream_id:
15
+ vimeo_id:
16
+ youtube_id:
17
+ author:
18
+ markup_language: :rd
19
+ name: Masafumi Yokoyama
20
+ email: myokoym@gmail.com
21
+ rubygems_user: myokoym
22
+ slideshare_user: myokoym
23
+ speaker_deck_user: myokoym
@@ -0,0 +1,245 @@
1
+ = Sinatra w/ Bower
2
+
3
+ # : subtitle
4
+ # サブタイトル
5
+ : author
6
+ Masafumi Yokoyama
7
+ # : institution
8
+ # 所属
9
+ : content-source
10
+ 勉強会@Sinatra札幌
11
+ : date
12
+ 2015-09-19
13
+ : allotted-time
14
+ 50m
15
+ : theme
16
+ nyankosakana
17
+
18
+ = 自己紹介
19
+
20
+ * @myokoym
21
+ * 江別→札幌→東京
22
+ * 将棋(明日から大会!)
23
+
24
+ = よろしくお願いします。\n\nm(_ _)m
25
+
26
+ = 話すこと
27
+
28
+ (('tag:center'))
29
+ ((*Sinatra*))を使ったWebアプリの\n
30
+ JavaScript((*パッケージ管理*))
31
+
32
+ = きっかけ
33
+
34
+ * RubyGemsっぽくJavaScriptのライブラリを管理したい
35
+ * 手動ダウンロードつらい
36
+ * dependency hell
37
+
38
+ = きっかけ
39
+
40
+ * Bowerを使うといいらしい
41
+ * Sinatraと一緒に使いたい
42
+
43
+ = アジェンダ
44
+
45
+ * Bowerとは
46
+ * Sinatraと一緒に使うには
47
+
48
+ = アジェンダ
49
+
50
+ * ((*Bowerとは*))
51
+ * Sinatraと一緒に使うには
52
+
53
+ = RubyとJavaScriptの\nパッケージ管理の対比
54
+
55
+ = おさらい
56
+
57
+ * RubyGems
58
+ * Bundler
59
+ * Rake
60
+
61
+ = RubyGems
62
+
63
+ * Rubyのパッケージ管理のしくみ
64
+ * APTやHomebrewなどのRuby版
65
+ * ライブラリなどをコマンド一発でインストールできる
66
+
67
+ = Bundler
68
+
69
+ * プロジェクトで使うgemを管理するしくみ
70
+ * バージョンを指定できる
71
+ * 開発環境と本番環境でずれるのを防げる 
72
+
73
+ = Rake
74
+
75
+ * タスク管理ツール
76
+ * MakeのRuby版
77
+ * ビルドやパッケージングなどを自動化
78
+
79
+ = JavaScript
80
+
81
+ * npm
82
+ * Bower
83
+ * Grunt/gulp
84
+
85
+ = npm
86
+
87
+ * JavaScript(Node.js)のパッケージマネージャ
88
+
89
+ = npm
90
+
91
+ * パッケージ作成や登録
92
+ * RubyGemsの機能
93
+ * プロジェクトで使うバージョンの指定や依存関係の管理
94
+ * Bundlerの機能
95
+
96
+ = npm
97
+
98
+ * パッケージ情報や依存関係はpackage.jsonに記述
99
+ * RubyGemsでいう.gemspec
100
+ * BundlerでいうGemfile
101
+
102
+ = npm
103
+
104
+ * デフォルトでローカルディレクトリにインストール
105
+ * node_modulesディレクトリ
106
+ * -gオプションでシステムのグローバルに
107
+ * gem installのデフォルトはこちら
108
+
109
+ = Bower
110
+
111
+ * Twitter社製のフロントエンド用パッケージマネージャ
112
+ * パッケージ情報や依存関係はbower.jsonに記述
113
+ * 機能はほぼnpmと同じ
114
+
115
+ = Bower
116
+
117
+ * デフォルトでローカルディレクトリにインストール
118
+ * bower_componentsディレクトリ
119
+ * システムのグローバルにインストールすることはない
120
+
121
+ = npmとBower
122
+
123
+ * 似ている
124
+ * Bowerはnpmを元に作られた
125
+ * 棲み分け
126
+ * npmはサーバーサイド(開発用ツールなど)
127
+ * Bowerはフロントエンド(ブラウザに配信するもの)
128
+
129
+ = Grunt/gulp
130
+
131
+ * タスク管理ツール
132
+ * Rake
133
+ * フロントエンドでは結構重要
134
+
135
+ = なぜ重要か
136
+
137
+ * 配信する必要があるため
138
+ * 必要なファイルだけ取り出したり
139
+ * 圧縮したり
140
+
141
+ = 対比表
142
+
143
+ # RT
144
+
145
+ JavaScript, Ruby
146
+
147
+ npm -g, RubyGems
148
+ npm, RubyGems+Bundler
149
+ Bower, RubyGems+Bundler
150
+ Grunt/gulp, Rake
151
+
152
+ = ハーフタイム
153
+
154
+ * 進捗どうですか?
155
+
156
+ = アジェンダ
157
+
158
+ * (('del:Bowerとは'))
159
+ * ((*Sinatraと一緒に使うには*))
160
+
161
+ = やり方
162
+
163
+ * 生のbower.jsonを使う
164
+ * Rails Assetsを使う
165
+ * アセットパイプライン
166
+ * 別のアプリケーション
167
+
168
+ = 生のbower.jsonを使う
169
+
170
+ * 1. bower_componentsにインストール
171
+ * 2. publicにコピー
172
+ * Rakeタスクに組み込むなど
173
+
174
+ = 生のbower.jsonを使う
175
+
176
+ * メリット
177
+ * Bowerの機能をそのまま使える
178
+ * デメリット
179
+ * パッケージ管理のしくみが複数できてしまうので複雑になる
180
+
181
+ = Rails Assetsを使う
182
+
183
+ * Rails向けのアセット管理手法
184
+ * (('note:https://rails-assets.org/'))
185
+ * アセットパイプライン対応
186
+ * 内部でBowerを使っている
187
+
188
+ = アセット
189
+
190
+ * ブラウザに配信するファイル
191
+ * JavaScript、CSS、画像など
192
+ * publicに配置するもの
193
+
194
+ = アセットパイプライン
195
+
196
+ * アセットを配信用に変換
197
+ * コンパイル(.sass、.coffeeなど)
198
+ * 結合
199
+ * (('note:通信回数を減らす'))
200
+ * 圧縮(minify)
201
+ * (('note:通信量を減らす'))
202
+
203
+ = Sinatra×\nアセットパイプライン
204
+
205
+ * Sinatra AssetPack
206
+ * (('note:https://github.com/rstacruz/sinatra-assetpack'))
207
+ * Sinatra Asset Pipeline
208
+ * (('note:https://github.com/kalasjocke/sinatra-asset-pipeline'))
209
+
210
+ = Sinatra×\nRails Assets
211
+
212
+ * rails-assets-sinatra
213
+ * (('note:https://github.com/rails-assets/rails-assets-sinatra'))
214
+ * Sinatra Asset Pipelineを使用
215
+
216
+ = rails-assets-sinatra
217
+
218
+ # blockquote
219
+ how to easily integrate Sinatra with Bower. Node.js is not required.
220
+
221
+ = rails-assets-sinatra
222
+
223
+ # blockquote
224
+ how to easily integrate ((*Sinatra with Bower*)). Node.js is not required.
225
+
226
+ = キタ━(゚∀゚)━!!
227
+
228
+ = デモ
229
+
230
+ == property
231
+
232
+ : as_large_as_possible
233
+ true
234
+
235
+ = 別のアプリケーション
236
+
237
+ * SinatraはWeb APIとして使う
238
+ * フロントエンドはMVCフレームワークなどを使う
239
+ * Bowerでパッケージ管理
240
+
241
+ = まとめ
242
+
243
+ * Bowerを使うとフロントエンドのパッケージ管理が楽になる
244
+ * Sinatraと使うならrails-assets-sinatraのやり方がおすすめ
245
+ * 別アプリも有力な選択肢
@@ -0,0 +1,31 @@
1
+ @slide_footer_info_left_text ||= canvas.title.gsub(/\n/, " ")
2
+
3
+ include_theme("nyankosakana")
4
+
5
+ match(TitleSlide, "*") do |elements|
6
+ elements.horizontal_centering = true
7
+ end
8
+
9
+ match(TitleSlide, Author) do |authors|
10
+ authors.horizontal_centering = false
11
+ authors.align = :left
12
+ authors.prop_set("size", @normal_font_size)
13
+ authors.prop_set("style", "italic")
14
+
15
+ #authors.margin_top = @space * 2
16
+
17
+ authors.add_post_draw_proc do |author, canvas, x, y, w, h, simulation|
18
+ cancel_height = author.height + author.margin_bottom
19
+ [x, y - cancel_height, w, h + cancel_height]
20
+ end
21
+ end
22
+
23
+ match(TitleSlide, Date) do |dates|
24
+ dates.horizontal_centering = false
25
+ dates.align = :right
26
+ end
27
+
28
+ match(TitleSlide, ContentSource) do |sources|
29
+ sources.horizontal_centering = false
30
+ sources.align = :right
31
+ end
metadata ADDED
@@ -0,0 +1,81 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: rabbit-slide-myokoym-sinatrasapporo-20150919
3
+ version: !ruby/object:Gem::Version
4
+ version: 2015.9.19.0
5
+ platform: ruby
6
+ authors:
7
+ - Masafumi Yokoyama
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2015-09-18 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: rabbit
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: 2.0.2
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ">="
25
+ - !ruby/object:Gem::Version
26
+ version: 2.0.2
27
+ - !ruby/object:Gem::Dependency
28
+ name: rabbit-theme-nyankosakana
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ">="
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - ">="
39
+ - !ruby/object:Gem::Version
40
+ version: '0'
41
+ description: |-
42
+ Sinatraアプリのフロントエンド用パッケージ(JavaScriptやCSSなど)の
43
+ 管理を楽にするためにBowerやアセットパイプラインを使う話。
44
+ email:
45
+ - myokoym@gmail.com
46
+ executables: []
47
+ extensions: []
48
+ extra_rdoc_files: []
49
+ files:
50
+ - ".rabbit"
51
+ - README.rd
52
+ - Rakefile
53
+ - config.yaml
54
+ - pdf/sinatrasapporo-20150919-sinatra-with-bower.pdf
55
+ - sinatra-with-bower.rab
56
+ - theme.rb
57
+ homepage: http://slide.rabbit-shocker.org/authors/myokoym/sinatrasapporo-20150919/
58
+ licenses:
59
+ - CC BY 4.0
60
+ metadata: {}
61
+ post_install_message:
62
+ rdoc_options: []
63
+ require_paths:
64
+ - lib
65
+ required_ruby_version: !ruby/object:Gem::Requirement
66
+ requirements:
67
+ - - ">="
68
+ - !ruby/object:Gem::Version
69
+ version: '0'
70
+ required_rubygems_version: !ruby/object:Gem::Requirement
71
+ requirements:
72
+ - - ">="
73
+ - !ruby/object:Gem::Version
74
+ version: '0'
75
+ requirements: []
76
+ rubyforge_project:
77
+ rubygems_version: 2.2.2
78
+ signing_key:
79
+ specification_version: 4
80
+ summary: Sinatra w/ Bower
81
+ test_files: []