Submit Search
Upload
Middlemanによる静的サイト作成術
•
6 likes
•
2,319 views
豊明 尾古
Follow
2014/02/19に株式会社リゾームの新商品開発チームのチーム勉強会で発表した資料
Read less
Read more
Technology
Report
Share
Report
Share
1 of 18
Download now
Download to read offline
Recommended
小,中規模WEBサイト 制作でAWSを使う
小,中規模WEBサイト 制作でAWSを使う
Nobuhiko Futagami
WebAssemblyの紹介
WebAssemblyの紹介
mizdra
AWSが誰でも使える理由
AWSが誰でも使える理由
Nobuhiko Futagami
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
暗黒美夢王とEmacs
暗黒美夢王とEmacs
Shougo
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
雲と立方体の時間
雲と立方体の時間
Kei Mikage
第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション
第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション
Sayuri Tsukida
Recommended
小,中規模WEBサイト 制作でAWSを使う
小,中規模WEBサイト 制作でAWSを使う
Nobuhiko Futagami
WebAssemblyの紹介
WebAssemblyの紹介
mizdra
AWSが誰でも使える理由
AWSが誰でも使える理由
Nobuhiko Futagami
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
暗黒美夢王とEmacs
暗黒美夢王とEmacs
Shougo
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
雲と立方体の時間
雲と立方体の時間
Kei Mikage
第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション
第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション
Sayuri Tsukida
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化
Yoshihiro Ura
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
Yuki Hirano
アセンブラ短歌 On web
アセンブラ短歌 On web
Kenji Aiko
Virtual boxからVM Importする
Virtual boxからVM Importする
Shinji Saito
2021 01-25 lt sho kato
2021 01-25 lt sho kato
katosho1
modern X86 environment
modern X86 environment
Shougo
Webページで学ぶJavaScript2013 第5回
Webページで学ぶJavaScript2013 第5回
京大 マイコンクラブ
ServerSideJavaScript
ServerSideJavaScript
Ryunosuke SATO
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
Shougo
BlenderのAlembic状況(2016/6/26)
BlenderのAlembic状況(2016/6/26)
Kazuma Hatta
Xamarin.iOS
Xamarin.iOS
Kosuke Usami
VimとRubyのアツい関係
VimとRubyのアツい関係
Misao X
VimM#3
VimM#3
Yuki Akamatsu
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
Joni
EC2起動終了を出退勤と連動させてみた
EC2起動終了を出退勤と連動させてみた
Naoto Teruya
Ameba × Akamai技術交流会
Ameba × Akamai技術交流会
Satoshi Udagawa
ゼロからのWordPress(4限目)〜WordPressのインストールとデータベース〜
ゼロからのWordPress(4限目)〜WordPressのインストールとデータベース〜
schoowebcampus
AsssetStoreに頼ってVRコースターを作ってみる
AsssetStoreに頼ってVRコースターを作ってみる
Yo Takezawa
Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator
Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator
Akira Maruyama
Kotlinの紹介
Kotlinの紹介
豊明 尾古
ウェブアプリケーションのためのユニバーサルデザインを読んだので共有する
ウェブアプリケーションのためのユニバーサルデザインを読んだので共有する
豊明 尾古
More Related Content
What's hot
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化
Yoshihiro Ura
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
Yuki Hirano
アセンブラ短歌 On web
アセンブラ短歌 On web
Kenji Aiko
Virtual boxからVM Importする
Virtual boxからVM Importする
Shinji Saito
2021 01-25 lt sho kato
2021 01-25 lt sho kato
katosho1
modern X86 environment
modern X86 environment
Shougo
Webページで学ぶJavaScript2013 第5回
Webページで学ぶJavaScript2013 第5回
京大 マイコンクラブ
ServerSideJavaScript
ServerSideJavaScript
Ryunosuke SATO
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
Shougo
BlenderのAlembic状況(2016/6/26)
BlenderのAlembic状況(2016/6/26)
Kazuma Hatta
Xamarin.iOS
Xamarin.iOS
Kosuke Usami
VimとRubyのアツい関係
VimとRubyのアツい関係
Misao X
VimM#3
VimM#3
Yuki Akamatsu
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
Joni
EC2起動終了を出退勤と連動させてみた
EC2起動終了を出退勤と連動させてみた
Naoto Teruya
Ameba × Akamai技術交流会
Ameba × Akamai技術交流会
Satoshi Udagawa
ゼロからのWordPress(4限目)〜WordPressのインストールとデータベース〜
ゼロからのWordPress(4限目)〜WordPressのインストールとデータベース〜
schoowebcampus
AsssetStoreに頼ってVRコースターを作ってみる
AsssetStoreに頼ってVRコースターを作ってみる
Yo Takezawa
Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator
Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator
Akira Maruyama
What's hot
(20)
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
アセンブラ短歌 On web
アセンブラ短歌 On web
Virtual boxからVM Importする
Virtual boxからVM Importする
2021 01-25 lt sho kato
2021 01-25 lt sho kato
modern X86 environment
modern X86 environment
Webページで学ぶJavaScript2013 第5回
Webページで学ぶJavaScript2013 第5回
ServerSideJavaScript
ServerSideJavaScript
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
BlenderのAlembic状況(2016/6/26)
BlenderのAlembic状況(2016/6/26)
Xamarin.iOS
Xamarin.iOS
VimとRubyのアツい関係
VimとRubyのアツい関係
VimM#3
VimM#3
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
EC2起動終了を出退勤と連動させてみた
EC2起動終了を出退勤と連動させてみた
Ameba × Akamai技術交流会
Ameba × Akamai技術交流会
ゼロからのWordPress(4限目)〜WordPressのインストールとデータベース〜
ゼロからのWordPress(4限目)〜WordPressのインストールとデータベース〜
AsssetStoreに頼ってVRコースターを作ってみる
AsssetStoreに頼ってVRコースターを作ってみる
Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator
Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator
Viewers also liked
Kotlinの紹介
Kotlinの紹介
豊明 尾古
ウェブアプリケーションのためのユニバーサルデザインを読んだので共有する
ウェブアプリケーションのためのユニバーサルデザインを読んだので共有する
豊明 尾古
Slimの紹介
Slimの紹介
豊明 尾古
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
俺的フロントエンド開発
俺的フロントエンド開発
Kotaro Kawashima
AnsibleによるInfrastructure as code入門
AnsibleによるInfrastructure as code入門
kk_Ataka
Viewers also liked
(6)
Kotlinの紹介
Kotlinの紹介
ウェブアプリケーションのためのユニバーサルデザインを読んだので共有する
ウェブアプリケーションのためのユニバーサルデザインを読んだので共有する
Slimの紹介
Slimの紹介
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
俺的フロントエンド開発
俺的フロントエンド開発
AnsibleによるInfrastructure as code入門
AnsibleによるInfrastructure as code入門
More from 豊明 尾古
OSS-DB 取得のススメ
OSS-DB 取得のススメ
豊明 尾古
Ormとの付き合い方
Ormとの付き合い方
豊明 尾古
Ecmascript2015とその周辺について
Ecmascript2015とその周辺について
豊明 尾古
ActiveRecord::Enumのススメ
ActiveRecord::Enumのススメ
豊明 尾古
便利なHerokuと active recordの 速度改善tips
便利なHerokuと active recordの 速度改善tips
豊明 尾古
Kotlinのwebフレームワーク探訪
Kotlinのwebフレームワーク探訪
豊明 尾古
Rails templateで開発の初速を上げよう
Rails templateで開発の初速を上げよう
豊明 尾古
KotlinAndroidLibを使ってみた
KotlinAndroidLibを使ってみた
豊明 尾古
Rubyistのためのkotlin紹介
Rubyistのためのkotlin紹介
豊明 尾古
Calabashでbddしようぜ
Calabashでbddしようぜ
豊明 尾古
Rubotoを試してみた
Rubotoを試してみた
豊明 尾古
Successful git
Successful git
豊明 尾古
アプリ内課金してみた
アプリ内課金してみた
豊明 尾古
Webデザイナーのためのandroid用レイアウト講座
Webデザイナーのためのandroid用レイアウト講座
豊明 尾古
Android 3.Xアプリを開発してみて
Android 3.Xアプリを開発してみて
豊明 尾古
Gae開発入門
Gae開発入門
豊明 尾古
ABC2011 Winter #jag4
ABC2011 Winter #jag4
豊明 尾古
初めてのC2DM
初めてのC2DM
豊明 尾古
More from 豊明 尾古
(18)
OSS-DB 取得のススメ
OSS-DB 取得のススメ
Ormとの付き合い方
Ormとの付き合い方
Ecmascript2015とその周辺について
Ecmascript2015とその周辺について
ActiveRecord::Enumのススメ
ActiveRecord::Enumのススメ
便利なHerokuと active recordの 速度改善tips
便利なHerokuと active recordの 速度改善tips
Kotlinのwebフレームワーク探訪
Kotlinのwebフレームワーク探訪
Rails templateで開発の初速を上げよう
Rails templateで開発の初速を上げよう
KotlinAndroidLibを使ってみた
KotlinAndroidLibを使ってみた
Rubyistのためのkotlin紹介
Rubyistのためのkotlin紹介
Calabashでbddしようぜ
Calabashでbddしようぜ
Rubotoを試してみた
Rubotoを試してみた
Successful git
Successful git
アプリ内課金してみた
アプリ内課金してみた
Webデザイナーのためのandroid用レイアウト講座
Webデザイナーのためのandroid用レイアウト講座
Android 3.Xアプリを開発してみて
Android 3.Xアプリを開発してみて
Gae開発入門
Gae開発入門
ABC2011 Winter #jag4
ABC2011 Winter #jag4
初めてのC2DM
初めてのC2DM
Recently uploaded
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Recently uploaded
(10)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Middlemanによる静的サイト作成術
1.
Middlemanによる 静的サイト作成術 2014/02/18 @patorash
2.
堕落したRailsエンジニアの悩み
3.
素のHTML, JavaScript,CSSを 書きたくないでござる
4.
でも静的サイトを作るときもあるよね
5.
そこでYEOMANですよ!
6.
世間ではYEOMANが大人気 ● Node.jsで作られている。 ● Yo,
Grunt, Bowerの組み合わせで サクサク作れます的な。 ● SASSもCoffeeScriptも自動コンパイルしてくれ るよー(設定すれば) ● HamlやSlimも自動コンパイルしてくれるよー (設定すれば)
7.
_人人人人人人人人人_ > (設定すれば) <  ̄Y^Y^Y^Y^Y^Y^Y^Y ̄
8.
そもそもSassもSlimもRuby製だし なんでNode.jsを通すのよ。
9.
ここからが本題
10.
Railsエンジニアが 楽に静的サイトを作る場合には Middleman がオススメです。
11.
Middleman
12.
Middlemanとは? ● 一言で言うと、Ruby製Yeoman ● gem入れるだけでCoffeeScript,
Sass, テンプ レートエンジン(Haml, Slimなど)を自動コンパイ ルしてくれる ● Sinatraベースなので、Rackアプリにもなる(らし い) ● LiveRelead。保存したら逐次コンパイル。 ● assets pipelineに対応。複数のcss, jsが1つの ファイルにまとめられる。 ● テンプレートヘルパーがある 例: = link_to ‘SelfieGirl’, ‘http://selfiegirl.net’
13.
Middleman vs Yeoman ●
自動コンパイルに慣れたRailsエンジニアには Yeomanは辛すぎる(Grunt?なにそれ?) ● 導入が楽。gem middlemanだけ。 ● 設定が楽。config.rbを修正するだけ。 ● Coffee, Sass, Slim, Hamlの導入が楽。 Gemfileに書いてbundle installするだけ。 ● 唯一、Bowerに変わるものがないのが弱点。
14.
Bower
15.
16.
17.
Middleman vs Yeoman ●
自動コンパイルに慣れたRailsエンジニアには Yeomanは辛すぎる(Grunt?なにそれ?) ● 導入が楽。gem middlemanだけ。 ● 設定が楽。config.rbを修正するだけ。 ● Coffee, Sass, Slim, Hamlの導入が楽。 Gemfileに書いてbundle installするだけ。 ● 唯一、Bowerに変わるものがないのが弱点。 ● Bowerだけ借りましょう!
18.
デモやります。
Download now