ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)
-
Upload
sanae-yamashita -
Category
Engineering
-
view
599 -
download
4
Transcript of ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)
![Page 1: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/1.jpg)
ドジっ娘でもかんたん!
Bower � Rails Assets
LOUPE Study 2015.03.23.Mon@yamasy1549
![Page 2: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/2.jpg)
�
before after
祝 �
loupe-icon が Web フォントになりました
1
![Page 3: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/3.jpg)
あらすじ
CTO「アイコンはWebフォント化しよう」
やましー「任せてください」
2
![Page 4: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/4.jpg)
あらすじ
CTO「アイコンはWebフォント化しよう」
やましー「任せてください」
CTO「あと、Gem化も」
やましー「(@_@)」
3
![Page 5: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/5.jpg)
あらすじ
CTO「アイコンはWebフォント化しよう」
やましー「任せてください」
CTO「あと、Gem化も」
やましー「(@_@)」
フロントエンド
バージョン管理
4
![Page 6: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/6.jpg)
あらすじ
やましー「それだったら・・・」
フロントエンド
バージョン管理
5
![Page 7: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/7.jpg)
あらすじ
やましー「それだったら・・・」
フロントエンド
バージョン管理
Bower � Rails Assets で
幸せになりましょう!
6
![Page 8: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/8.jpg)
Bower � Rails Assets がないとき
「Web フォントを置くよ!」
$ ls app/assets/fonts/
loupeicons.woff loupeicons.ttf
loupeicons.eot loupeicons.svg
7
![Page 9: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/9.jpg)
Bower � Rails Assets がないとき
「Web フォントを置くよ!」
$ ls app/assets/fonts/
loupeicons.woff loupeicons.ttf
loupeicons.eot loupeicons.svg
「専用の CSS をかくよ!」
$ vim app/assets/stylesheets/_loupeicons.css
@font-face { ...
8
![Page 10: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/10.jpg)
Bower � Rails Assets がないとき
「Web フォントを置くよ!」
$ ls app/assets/fonts/
loupeicons.woff loupeicons.ttf
loupeicons.eot loupeicons.svg
「専用の CSS をかくよ!」
$ vim app/assets/stylesheets/_loupeicons.css
@font-face { ...
「CSS を読み込・・・」
@import "./loupeicons";9
![Page 11: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/11.jpg)
Bower � Rails Assets がないとき
「Web フォントを置くよ!」
$ ls app/assets/fonts/
loupeicons.woff loupeicons.ttf
loupeicons.eot loupeicons.svg
「専用の CSS をかくよ!」
$ vim app/assets/stylesheets/_loupeicons.css
@font-face { ...
「CSS を読み込・・・」
@import "./loupeicons";
「ふぇぇ ややこしい><」
♂�
![Page 12: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/12.jpg)
↓手順が多すぎて入りきらなかった
♂Bower � Rails Assets がないとき
「Web フォントを置くよ!」
$ ls app/assets/fonts/
loupeicons.woff loupeicons.ttf
loupeicons.eot loupeicons.svg
「専用の CSS をかくよ!」
$ vim app/assets/stylesheets/_loupeicons.css
@font-face { ...
「CSS を読み込・・・」
@import "./loupeicons";
「ふぇぇ ややこしい><」
♂�
![Page 13: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/13.jpg)
Bower � Rails Assets があるとき
「Gem を追加するよ!」
$ vim Gemfile
source 'https://rails-assets.org'
gem ‘rails-assets-loupe-icon’
12
![Page 14: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/14.jpg)
Bower � Rails Assets があるとき
「Gem を追加するよ!」
$ vim Gemfile
source 'https://rails-assets.org'
gem ‘rails-assets-loupe-icon’
「CSS を読み込むよ!」
$ vim app/assets/stylesheets/application.css
*= require loupe-icon
13
![Page 15: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/15.jpg)
「かんたんにできた!」
�
Bower � Rails Assets があるとき
「Gem を追加するよ!」
$ vim Gemfile
source 'https://rails-assets.org'
gem ‘rails-assets-loupe-icon’
「CSS を読み込むよ!」
$ vim app/assets/stylesheets/application.css
*= require loupe-icon
14
![Page 16: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/16.jpg)
Bower � Rails Assets があるとき
Bower � の
Rails Assets � アセットファイルをいい感じに整理
�フロントエンド バージョン管理
15
![Page 17: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/17.jpg)
♂
Bower � Rails Assets があるとき
Bower � の
Rails Assets � アセットファイルをいい感じに整理
フロントエンド バージョン管理
�
16
![Page 18: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/18.jpg)
♂
♂
Bower � Rails Assets があるとき
Bower � の
Rails Assets � アセットファイルをいい感じに整理
フロントエンド バージョン管理
�Bower � Rails Assets で
幸せになりましょう!
17
![Page 19: ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study)](https://reader033.fdocuments.net/reader033/viewer/2022051017/55af79df1a28ab28568b4664/html5/thumbnails/19.jpg)
♂Bower � Rails Assets があるとき
Bower � の
Rails Assets � アセットファイルをいい感じに整理
フロントエンド バージョン管理
�
18
http://qiita.com/yamasy1549/items/b1526071a27d8ac24580
Qiita にあげてみました。
「ドジっ娘でもかんたん! Bower × Rails Assets」