Text
Page: 1
Sinatra w/ Bower Masafumi Yokoyama 勉強会＠ Sinatra 札幌 2015-09-19 Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 2
自己紹介 @myokoym 江別→札幌→東京 将棋（明日から大会！） Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 3
よろしくお願いします。 m(_ _)m Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 4
話すこと Sinatraを使ったWebアプリの JavaScriptパッケージ管理 Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 5
きっかけ RubyGemsっぽくJavaScript のライブラリを管理したい 手動ダウンロードつらい dependency hell Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 6
きっかけ Bowerを使うといいらしい Sinatraと一緒に使いたい Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 7
アジェンダ Bowerとは Sinatraと一緒に使うには Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 8
アジェンダ Bowerとは Sinatraと一緒に使うには Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 9
RubyとJavaScriptの パッケージ管理の対比 Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 10
おさらい RubyGems Bundler Rake Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 11
RubyGems Rubyのパッケージ管理のしく み APTやHomebrewなどのRuby版 ライブラリなどをコマンド一発 でインストールできる Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 12
Bundler プロジェクトで使うgemを管 理するしくみ バージョンを指定できる 開発環境と本番環境でずれるのを防 げる Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 13
Rake タスク管理ツール MakeのRuby版 ビルドやパッケージングなどを 自動化 Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 14
JavaScript npm Bower Grunt/gulp Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 15
npm JavaScript（Node.js）のパッ ケージマネージャ Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 16
npm パッケージ作成や登録 RubyGemsの機能 プロジェクトで使うバージョン の指定や依存関係の管理 Bundlerの機能 Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 17
npm パッケージ情報や依存関係は package.jsonに記述 RubyGemsでいう.gemspec BundlerでいうGemfile Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 18
npm デフォルトでローカルディレク トリにインストール node_modulesディレクトリ -gオプションでシステムのグロ ーバルに gem installのデフォルトはこちら Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 19
Bower Twitter社製のフロントエンド 用パッケージマネージャ パッケージ情報や依存関係は bower.jsonに記述 機能はほぼnpmと同じ Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 20
Bower デフォルトでローカルディレク トリにインストール bower_componentsディレクトリ システムのグローバルにインス トールすることはない Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 21
npmとBower 似ている Bowerはnpmを元に作られた 棲み分け npmはサーバーサイド（開発用ツー ルなど） Bowerはフロントエンド（ブラウザ に配信するもの） Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 22
Grunt/gulp タスク管理ツール Rake フロントエンドでは結構重要 Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 23
なぜ重要か 配信する必要があるため 必要なファイルだけ取り出したり 圧縮したり Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 24
対比表 JavaScript npm -g npm Bower Grunt/gulp Sinatra w/ Bower Ruby RubyGems RubyGems +Bundler RubyGems +Bundler Rake Powered by Rabbit 2.1.9
Page: 25
ハーフタイム 進捗どうですか？ Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 26
アジェンダ Bowerとは Sinatraと一緒に使うには Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 27
やり方 生のbower.jsonを使う Rails Assetsを使う アセットパイプライン 別のアプリケーション Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 28
生のbower.jsonを使う 1. bower_componentsにイン ストール 2. publicにコピー Rakeタスクに組み込むなど Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 29
生のbower.jsonを使う メリット Bowerの機能をそのまま使える デメリット パッケージ管理のしくみが複数でき てしまうので複雑になる Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 30
Rails Assetsを使う Rails向けのアセット管理手法 https://rails-assets.org/ アセットパイプライン対応 内部でBowerを使っている Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 31
アセット ブラウザに配信するファイル JavaScript、CSS、画像など publicに配置するもの Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 32
アセットパイプライン アセットを配信用に変換 コンパイル（.sass、.coffeeなど） 結合 通信回数を減らす 圧縮（minify） 通信量を減らす Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 33
Sinatra× アセットパイプライン Sinatra AssetPack https://github.com/rstacruz/sinatra-assetpack Sinatra Asset Pipeline https://github.com/kalasjocke/sinatra-asset- pipeline Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 34
Sinatra× Rails Assets rails-assets-sinatra https://github.com/rails-assets/rails-assets- sinatra Sinatra Asset Pipelineを使用 Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 35
rails-assets-sinatra how to easily integrate Sinatra with Bower. Node.js is not required. Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 36
rails-assets-sinatra how to easily integrate Sinatra with Bower. Node.js is not required. Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 37
ｷﾀ━(ﾟ∀ﾟ)━!! Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 38
デモ Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 39
別のアプリケーション SinatraはWeb APIとして使う フロントエンドはMVCフレー ムワークなどを使う Bowerでパッケージ管理 Sinatra w/ Bower Powered by Rabbit 2.1.9
Page: 40
まとめ Bowerを使うとフロントエンド のパッケージ管理が楽になる Sinatraと使うならrails- assets-sinatraのやり方がおす すめ 別アプリも有力な選択肢 Sinatra w/ Bower Powered by Rabbit 2.1.9
