Suche senden
Hochladen
How to relaunch "sapporojs.org" ~Introduction to middleman~
•
7 gefällt mir
•
2,797 views
Ryunosuke SATO
Folgen
Technologie
Design
Melden
Teilen
Melden
Teilen
1 von 64
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Rails あるある
Rails あるある
Ryunosuke SATO
片手間JS on Rails
片手間JS on Rails
Ryunosuke SATO
RubyとRailsのおいしい使い方
RubyとRailsのおいしい使い方
Satomi Tsujita
Ruby/PureImage: 第2回岡山Ruby会議LT
Ruby/PureImage: 第2回岡山Ruby会議LT
NISHIMOTO Keisuke
Gemの話 紹介編
Gemの話 紹介編
Satomi Tsujita
WindowsユーザのためのRails環境構築
WindowsユーザのためのRails環境構築
Hirata Tomoko
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
Hirata Tomoko
岡山のRuby勉強会(OSC広島2013)
岡山のRuby勉強会(OSC広島2013)
Makoto Henmi
Empfohlen
Rails あるある
Rails あるある
Ryunosuke SATO
片手間JS on Rails
片手間JS on Rails
Ryunosuke SATO
RubyとRailsのおいしい使い方
RubyとRailsのおいしい使い方
Satomi Tsujita
Ruby/PureImage: 第2回岡山Ruby会議LT
Ruby/PureImage: 第2回岡山Ruby会議LT
NISHIMOTO Keisuke
Gemの話 紹介編
Gemの話 紹介編
Satomi Tsujita
WindowsユーザのためのRails環境構築
WindowsユーザのためのRails環境構築
Hirata Tomoko
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
Hirata Tomoko
岡山のRuby勉強会(OSC広島2013)
岡山のRuby勉強会(OSC広島2013)
Makoto Henmi
Railsチュートリアル(second)を終えて
Railsチュートリアル(second)を終えて
Hirata Tomoko
自己紹介LT(公開版)
自己紹介LT(公開版)
Ken Muryoi
JRubyで作るapiサーバー
JRubyで作るapiサーバー
Yamamoto Kazuhisa
僕はどうしてもLibsassが使いたかったんだ!
僕はどうしてもLibsassが使いたかったんだ!
Masato Noguchi
C#とRubyをつなぐ
C#とRubyをつなぐ
107steps
RubyとRのおいしい関係
RubyとRのおいしい関係
sady_nitro
mozaicfm-ep8 #altJS @ll-diver
mozaicfm-ep8 #altJS @ll-diver
Jxck Jxck
Rails::Engineを使ってみたよ
Rails::Engineを使ってみたよ
Keisuke Izumiya
デブサミ2013 オフィシャルコミュニティLT by Shibuya.rb
デブサミ2013 オフィシャルコミュニティLT by Shibuya.rb
Takeshi Yabe
RubyとRailsのおいしい使い方 ver. okayama1
RubyとRailsのおいしい使い方 ver. okayama1
Satomi Tsujita
Comapre adoniswithlaravel
Comapre adoniswithlaravel
Mitsuru Hashimoto
Ruby札幌2008年の活動に向けて
Ruby札幌2008年の活動に向けて
Koji SHIMADA
孤独なフリーランサー
孤独なフリーランサー
107steps
RubyKaja 2013
RubyKaja 2013
Takeshi Yabe
Ruby introduction for_rails
Ruby introduction for_rails
Takashi Toyofuku
Rubyビジネスセミナー大阪2015
Rubyビジネスセミナー大阪2015
Satomi Tsujita
Rubymotion
Rubymotion
jewel12
AWSと1500日
AWSと1500日
Takehito Tanabe
PWAをWebサービスに導入した話
PWAをWebサービスに導入した話
dobby618
使ってみたAssets系gemの紹介
使ってみたAssets系gemの紹介
Takeuchi Yuichi
はじめる Ember.js!! ~ Getting started with ember.js ~
はじめる Ember.js!! ~ Getting started with ember.js ~
Ryunosuke SATO
The Way of Fun Development - たのしい開発への道 / Sapporo RubyKaigi2012
The Way of Fun Development - たのしい開発への道 / Sapporo RubyKaigi2012
tatsuo sakurai
Weitere ähnliche Inhalte
Was ist angesagt?
Railsチュートリアル(second)を終えて
Railsチュートリアル(second)を終えて
Hirata Tomoko
自己紹介LT(公開版)
自己紹介LT(公開版)
Ken Muryoi
JRubyで作るapiサーバー
JRubyで作るapiサーバー
Yamamoto Kazuhisa
僕はどうしてもLibsassが使いたかったんだ!
僕はどうしてもLibsassが使いたかったんだ!
Masato Noguchi
C#とRubyをつなぐ
C#とRubyをつなぐ
107steps
RubyとRのおいしい関係
RubyとRのおいしい関係
sady_nitro
mozaicfm-ep8 #altJS @ll-diver
mozaicfm-ep8 #altJS @ll-diver
Jxck Jxck
Rails::Engineを使ってみたよ
Rails::Engineを使ってみたよ
Keisuke Izumiya
デブサミ2013 オフィシャルコミュニティLT by Shibuya.rb
デブサミ2013 オフィシャルコミュニティLT by Shibuya.rb
Takeshi Yabe
RubyとRailsのおいしい使い方 ver. okayama1
RubyとRailsのおいしい使い方 ver. okayama1
Satomi Tsujita
Comapre adoniswithlaravel
Comapre adoniswithlaravel
Mitsuru Hashimoto
Ruby札幌2008年の活動に向けて
Ruby札幌2008年の活動に向けて
Koji SHIMADA
孤独なフリーランサー
孤独なフリーランサー
107steps
RubyKaja 2013
RubyKaja 2013
Takeshi Yabe
Ruby introduction for_rails
Ruby introduction for_rails
Takashi Toyofuku
Rubyビジネスセミナー大阪2015
Rubyビジネスセミナー大阪2015
Satomi Tsujita
Rubymotion
Rubymotion
jewel12
AWSと1500日
AWSと1500日
Takehito Tanabe
PWAをWebサービスに導入した話
PWAをWebサービスに導入した話
dobby618
使ってみたAssets系gemの紹介
使ってみたAssets系gemの紹介
Takeuchi Yuichi
Was ist angesagt?
(20)
Railsチュートリアル(second)を終えて
Railsチュートリアル(second)を終えて
自己紹介LT(公開版)
自己紹介LT(公開版)
JRubyで作るapiサーバー
JRubyで作るapiサーバー
僕はどうしてもLibsassが使いたかったんだ!
僕はどうしてもLibsassが使いたかったんだ!
C#とRubyをつなぐ
C#とRubyをつなぐ
RubyとRのおいしい関係
RubyとRのおいしい関係
mozaicfm-ep8 #altJS @ll-diver
mozaicfm-ep8 #altJS @ll-diver
Rails::Engineを使ってみたよ
Rails::Engineを使ってみたよ
デブサミ2013 オフィシャルコミュニティLT by Shibuya.rb
デブサミ2013 オフィシャルコミュニティLT by Shibuya.rb
RubyとRailsのおいしい使い方 ver. okayama1
RubyとRailsのおいしい使い方 ver. okayama1
Comapre adoniswithlaravel
Comapre adoniswithlaravel
Ruby札幌2008年の活動に向けて
Ruby札幌2008年の活動に向けて
孤独なフリーランサー
孤独なフリーランサー
RubyKaja 2013
RubyKaja 2013
Ruby introduction for_rails
Ruby introduction for_rails
Rubyビジネスセミナー大阪2015
Rubyビジネスセミナー大阪2015
Rubymotion
Rubymotion
AWSと1500日
AWSと1500日
PWAをWebサービスに導入した話
PWAをWebサービスに導入した話
使ってみたAssets系gemの紹介
使ってみたAssets系gemの紹介
Ähnlich wie How to relaunch "sapporojs.org" ~Introduction to middleman~
はじめる Ember.js!! ~ Getting started with ember.js ~
はじめる Ember.js!! ~ Getting started with ember.js ~
Ryunosuke SATO
The Way of Fun Development - たのしい開発への道 / Sapporo RubyKaigi2012
The Way of Fun Development - たのしい開発への道 / Sapporo RubyKaigi2012
tatsuo sakurai
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
Ryunosuke SATO
201304013 LOD Prize in Android Yokosuka
201304013 LOD Prize in Android Yokosuka
Kenichi Ohwada
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
20100626-We-Think-We-Act
20100626-We-Think-We-Act
Koji SHIMADA
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
Toshio Ehara
20081004-OSC2008Tokyo/Fall-MetaCon
20081004-OSC2008Tokyo/Fall-MetaCon
Koji SHIMADA
ABC 2013 Spring in Yokohama Android
ABC 2013 Spring in Yokohama Android
Kenichi Ohwada
Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎
Satoshi Kubo
20160517 jaws ug osaka-no.14_opening
20160517 jaws ug osaka-no.14_opening
Daiki Mori
20081220 Rubybonenkai2008 Sapporo
20081220 Rubybonenkai2008 Sapporo
Koji SHIMADA
PaaSで簡単 Railsアプリを公開しよう! ~もあぐれっしぶ~ & Rubyを体験しよう!(2013.10.06 OSC2013-Hiroshima)
PaaSで簡単 Railsアプリを公開しよう! ~もあぐれっしぶ~ & Rubyを体験しよう!(2013.10.06 OSC2013-Hiroshima)
Yoshitake Takata
20130126 OpenData and Android
20130126 OpenData and Android
Kenichi Ohwada
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
invogue
Ähnlich wie How to relaunch "sapporojs.org" ~Introduction to middleman~
(15)
はじめる Ember.js!! ~ Getting started with ember.js ~
はじめる Ember.js!! ~ Getting started with ember.js ~
The Way of Fun Development - たのしい開発への道 / Sapporo RubyKaigi2012
The Way of Fun Development - たのしい開発への道 / Sapporo RubyKaigi2012
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
201304013 LOD Prize in Android Yokosuka
201304013 LOD Prize in Android Yokosuka
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
20100626-We-Think-We-Act
20100626-We-Think-We-Act
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
20081004-OSC2008Tokyo/Fall-MetaCon
20081004-OSC2008Tokyo/Fall-MetaCon
ABC 2013 Spring in Yokohama Android
ABC 2013 Spring in Yokohama Android
Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎
20160517 jaws ug osaka-no.14_opening
20160517 jaws ug osaka-no.14_opening
20081220 Rubybonenkai2008 Sapporo
20081220 Rubybonenkai2008 Sapporo
PaaSで簡単 Railsアプリを公開しよう! ~もあぐれっしぶ~ & Rubyを体験しよう!(2013.10.06 OSC2013-Hiroshima)
PaaSで簡単 Railsアプリを公開しよう! ~もあぐれっしぶ~ & Rubyを体験しよう!(2013.10.06 OSC2013-Hiroshima)
20130126 OpenData and Android
20130126 OpenData and Android
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
Mehr von Ryunosuke SATO
Ember コミュニティとわたし
Ember コミュニティとわたし
Ryunosuke SATO
gem の探し方
gem の探し方
Ryunosuke SATO
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
コミュニティのある風景
コミュニティのある風景
Ryunosuke SATO
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Ryunosuke SATO
Testable JavaScript
Testable JavaScript
Ryunosuke SATO
Social coding をもっと楽しみたいあなたへ
Social coding をもっと楽しみたいあなたへ
Ryunosuke SATO
Clean Javascript
Clean Javascript
Ryunosuke SATO
Node.jsってどうなの?
Node.jsってどうなの?
Ryunosuke SATO
アジャイル的アプローチから見えてきたこと
アジャイル的アプローチから見えてきたこと
Ryunosuke SATO
脱レガシー化計画
脱レガシー化計画
Ryunosuke SATO
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフ
Ryunosuke SATO
ServerSideJavaScript
ServerSideJavaScript
Ryunosuke SATO
Mehr von Ryunosuke SATO
(13)
Ember コミュニティとわたし
Ember コミュニティとわたし
gem の探し方
gem の探し方
Introduction for Browser Side MVC
Introduction for Browser Side MVC
コミュニティのある風景
コミュニティのある風景
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Testable JavaScript
Testable JavaScript
Social coding をもっと楽しみたいあなたへ
Social coding をもっと楽しみたいあなたへ
Clean Javascript
Clean Javascript
Node.jsってどうなの?
Node.jsってどうなの?
アジャイル的アプローチから見えてきたこと
アジャイル的アプローチから見えてきたこと
脱レガシー化計画
脱レガシー化計画
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフ
ServerSideJavaScript
ServerSideJavaScript
Kürzlich hochgeladen
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
Kürzlich hochgeladen
(9)
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
How to relaunch "sapporojs.org" ~Introduction to middleman~
1.
佐藤 竜之介(Ryunosuke SATO) Sapporo.js Sapporo.js-2013.07.27 http://www.flickr.com/photos/poria/161511765 How
to relaunch “sapporojs.org” ~ Introduction to Middleman ~
2.
提供 Sapporo.js Community for people
who like JavaScript.
3.
自己紹介
4.
@tricknotes I am a
software developer who love JavaScript and Ruby. http://tricknotes.hateblo.jp/
5.
I love OSS
6.
108Commits to Ember.js
7.
/* * advertising * about
Ember.js * * !!Important!! *
8.
2013.9.14 http://www.ospn.jp/osc2013-do/ OSC Hokkaido
9.
2013.9.28 Ruby勉強会@札幌
10.
2013.11.11 Ember.js ハンズオン http://www.deos.co.jp/SK010.html
11.
*/
12.
よろしく お願いします
13.
佐藤 竜之介(Ryunosuke SATO) Sapporo.js Sapporo.js-2013.07.27 http://www.flickr.com/photos/poria/161511765 How
to relaunch “sapporojs.org” ~ Introduction to Middleman ~
14.
http://sapporojs.org/
15.
今日の話 * Middleman の紹介 *
sapporojs.org での Middleman 運用について
16.
対象者
17.
* 会社のホームページ * 自分のブログ *
イベントの告知サイト こんなサイトを簡単につくりたいひと:
18.
Hot * 会社のホームページ * 自分のブログ *
イベントの告知サイト こんなサイトを簡単につくりたいひと: * 現在 Jekyll でサイト運用をしている
19.
Jekyll days
20.
21.
Good
22.
* GitHub pages デプロイが楽 *
コンテンツ管理が楽
23.
Bad
24.
* 独自記法つらい... * haml
とか scss とか使いたい... (自分でビルドすればいいんだけど...) * ファイル分けるのめんどい...
25.
そんなあなたに オススメなのが...
26.
http://middlemanapp.com/
27.
What is Middleman?
28.
29.
Middleman is a static
site generator using all the shortcuts and tools in modern web development.
30.
features: * Asset Pipeline *
Local Data * Blogging etc ...
31.
* Rails でお馴染み *
CoffeeScript や SCSS を簡単に使える * haml や slim も使える * minify や concat ができる Asset Pipeline
32.
Asset Pipeline Concat
33.
first.js.coffee main.js.coffee second.js.coffee Asset Pipeline Compile
34.
first.js.coffee main.js.coffee second.js.coffee main.js Asset Pipeline minify +
Asset Hash
35.
Local Data * data
を yaml (or json) で管理できる * マスタデータ、カテゴリ一覧など * データを一箇所で管理できる
36.
Local Data
37.
Blogging * ブログ機能 * 日付付きURL *
続きを読む * 次のページ * タグ付け
38.
* 2013-07-27-hello-world.html * /blog/2013/07/27/hello-world.html Blogging
39.
他にも機能は盛りだくさん!
40.
$ bundle exec
middleman server $ bundle exec middleman build 開発用のサーバを起動 html 生成
41.
demo
42.
Getting Started http://middlemanapp.com/getting-started/
43.
Middleman days
44.
Improvement
45.
* asset のファイル分割が簡単 *
haml、SCSS が使える * コンテンツの管理が楽
46.
but...
47.
運用面
48.
デプロイがちょっと面倒... $ cd build $
git commt -a -m “Update” $ git push origin gh-pages
49.
自動で build して deploy
すればよいのでは!
50.
https://travis-ci.org/
51.
1. push master 2. hook 3.
build 4. push gh-pages
52.
http://tricknotes.hateblo.jp/entry/ 2013/06/17/020229
53.
✓ Middleman を使いたい
54.
And more...
55.
for Ember.js users.
56.
http://emberjs.com/
57.
https://github.com/tricknotes/ember-middleman
58.
* Ember.js 関連のJSを
gem で管理 * handlebars サポート * テンプレートジェネレータ Features:
59.
http://sapporojs.org/
60.
61.
http://sapporojs.org/
62.
まとめ
63.
✓ Middleman は静的サイトジェネレータ ✓
Web 制作に使うと、楽に開発できる ✓ GitHub pages での運用も簡単 sapporojs.org の運用方法のご紹介でした
64.
http://www.flickr.com/photos/donfuan/7744043986 Middleman で快適な開発を!!
Jetzt herunterladen