Middleman: はじめに
はじめに Middleman はモダンな web 開発環境のすべてのショートカットやツールを使用して静的 web サイトを作成するためのコマンドラインツールです。 Middleman はコマンドラインを熟知していることを前提としています。 Ruby と web フレームワーク Sinatra がこのツールのベースになっています。この 2 つについて熟知していれば Middleman が存在しないかのように動作する理由を理解するには充分でしょう。 インストール Middleman は RubyGems のパッケージマネージャを使って配布されます。これは Middleman を使い始めるには Ruby のランタイムと RubyGems の両方が必要であることを意味します。 Mac OS X には Ruby と RubyGems の両方がパッケージされていますが, Middleman の依存ライ
HamlとSlimをMiddleman上で比較する - Tech-Sketch
昨今の開発ではHTMLをそのまま記述するのではなく、簡潔に記述する為のテンプレートエンジンを利用することが多いと思います。今回はHamlとSlimというテンプレートエンジンを、Middlemanという開発サーバーツールを利用して比較していきます。 HamlとSlimとは？ Haml と Slim はHTMLを生成するためのテンプレートエンジンです。 HTMLをそのまま記述するのと比べ、インデントや簡略構文によって簡潔な記述が行えるのが特徴です。 HamlはRuby On Railsなどのプロジェクトで利用している方も多いと思いますが、Slimは聞きなれない方もいるのではないでしょうか？ ※Ruby On Railsで利用するにはそれぞれ、 haml-rails 、 slim-rails というgemを追加する必要があります 以下でHamlとSlimについて、サンプルコードを用いて比較し
[ Middleman で超速プロトタイピング ] #02 Middleman の便利機能 7 選 | DevelopersIO
そんな訳で、前回は Middleman のインストールから基本的な機能まで学習しました。今回はより本格的に使いこなすために、Middleman の持つ膨大な機能の中から僕が比較的多用している機能を7つばかり紹介していくとします。Middleman って何？という方は、先に以下の記事をご参照ください。 [ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ テンプレート - レイアウトを無効にする すべてのテンプレートファイルは何らかのレイアウトに囲われた状態で出力されますが、時にレイアウトを全く使用したくないという状況もあるでしょう。具体例として、モーダルダイアログ内に読み込む外部ファイルなどが考えられます。そんな時はテンプレートファイルがレイアウトに囲われないように無効化する訳ですが、以下の二種類の方法でこれを解決することが出来ます。 Fron
Slimでセレクタを追加するときの書き方、及び Middleman の素晴らしさ。 - 納豆には卵を入れる派です。
よく、要素につけるidやclassを動的にしたい時とかに、Hamlだとこんな感じの書き方をする %li{class: "item #{item.name}"}この書き方がSlimだとダメっぽくてつまずいた。 Slimだとこんな感じの書き方になるらしい li[class="item #{item.name}"]こういうのもいけるっぽい。割と素のHTMLに近い感じで書けるのですね。 li class="item #{item.name}"そして条件つけるとこうなるっぽい li class=(if item.present? ? "#{item.name}" : 'no-item') li class=("#{item.name}" if item.present?)classを複数付け、かつ1つのclassにのみ条件を付加する場合はこのように入れ子にすればよいみたい。 li class="it
[ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ | DevelopersIO
前回は Middleman を習得する前準備として Haml という HTML の拡張メタ言語について学びました。 #00 Haml 再入門 Haml は Middleman においてレイアウトファイルやテンプレートファイルを作成するのに使用します。デフォルトでは Haml ではなく ERb という Ruby 標準のテンプレートファイル形式が使われており、こちらは PHP や JSP と非常によく似た書式となっています（※拡張子はerb）。 身も蓋もないことを言ってしまうと、Haml を知らなくても ERb 形式で書くことで Middleman を使うことは可能です。ソースコード自体も標準の HTML 内に Ruby のコードが埋め込まれたような見た目なので、学習コスト自体は ERｂ のほうが低いかもしれません。しかしそれを考慮したとしても、コーディング自体の効率性やコードの見通しの良さか
静的サイトの構築に便利:MiddleMan - Qiita
静的サイトを構築する時に、 いちいちDocumentRootかえるのめんどくさいなぁ・・・ テンプレートエンジンが使えたらなぁ・・・ coffeescriptが使えたらなぁ・・・ scssが使えたらなぁ・・・ minifyまで自動でやってくれたらなぁ・・・ 煩悩にまみれてます。 そんなことを解決してくれるのがMiddleManです。 インストール #=>よく使う $ middleman init #=> サイト構造を作成します $ middleman server #=> サーバーを起動します $ middleman build #=> 最終出力します $ middleman --help middleman build [options] # Builds the static site for deployment middleman extension NAME [options]
GitHub - middleman/middleman: Hand-crafted frontend development
Middleman - Makes developing websites simple Middleman is a static site generator using all the shortcuts and tools in modern web development. Check out middlemanapp.com for detailed tutorials, including a getting started guide. Why Middleman? These days, many websites are built with an API in mind. Rather than package the frontend and the backend together, both can be built and deployed independe
【Middleman】静的サイトジェネレータを使用してみる。 | DevelopersIO
私は主に業務ではフロント側を担当させていだたいて、 Webアプリ等で使用する静的なひな形ファイルを作成することがあり、ファイルの修正が手間だったりすることがよくあります。 今回は、そんな手間を解決してくるツールをご紹介したいと思います。 アジェンダ Middlemanとは？ インストール 使用方法 開発の流れ まとめ Middlemanとは？ 静的なWebサイトを構築する際に、とても便利なコマンドラインツールです。 主な特徴 開発用ローカルサーバーで、確認ができる。 テンプレート言語、メタ言語を静的ファイルへビルドしてくれる。 いろいろなテンプレート言語にも対応 css、jsをminifyしてを出力してくれる。 layout機能、partial機能などで共通するhtmlを再利用できる。 などなど。 makes developing websites simple Middleman:公式サ
[ Middleman で超速プロトタイピング ] #00 Haml 再入門 | DevelopersIO
Web アプリケーション開発の初期段階においては、そのアプリのモックアップをよく作ったりします。いわゆるプロトタイピングというヤツですね。本実装となるともちろんサーバーサイドは Java や PHP などで実装し、それに伴ってフロントエンドもそれらのプログラミング言語によるテンプレートエンジンをベースに HTML で作り上げる訳です。しかしプロトタイピングの段階ではそういったプログラミング言語に頼ることなく、HTML だけで一通りの静的な Web ページを作ることになります。 実はこのモックアップ作成という名のプロトタイピング、HTML だけで作るという理由からかなりの重労働だったりします。画面数の少ない小規模な Web アプリケーションであればどうってことないですが、業務系の Web アプリケーションとなると10画面、20画面は当たり前。時には40画面以上にも及ぶことも少なくありません。
Middleman で作った web サイトを Travis + GitHub pages でお手軽に運用する - tricknotesのぼうけんのしょ
先日 Middleman を使って sapporojs.org をリニューアルしました。 その際に得られた Middleman での web サイト運用の知見をご紹介します。 Middleman って?? 簡単に説明すると、静的 web サイトジェネレータです。 Jekyll をご存知の方であれば、似たようなものをイメージしていただけるとよさそうです。 Middleman の方が優れている点は、 Asset Pipeline や Template Helpers などの便利な機能を利用をすることができることです。 http://middlemanapp.com/ 逆に Jekyll の方が有利な点としては、 GitHub pages が使えるためデプロイが楽であるという点があります。 そこで今回は、 Jekyll と同じく Middleman を GitHub pages に簡単にデプロイ
Middleman: Hand-crafted frontend development
Installation Install the gem and run middleman init my_project to create a new Middleman site from the command line. See full install instructions Customize Your Site Check out the directory cd my_project. Middleman works right out of the box. Start reading the docs to find out what each directory is doing and how to customize your site. See advanced customizations Build and Deploy Running one com
それmiddlemanでできるよ？ -Sinatra(をベースにしたツール)とSlimとSassとCoffeeScriptでモダンなWeb制作環境を構築する- - e2esound.com業務日誌
ホーム > html | Ruby > それmiddlemanでできるよ？ -Sinatra(をベースにしたツール)とSlimとSassとCoffeeScriptでモダンなWeb制作環境を構築する- 古い それmiddlemanでできるよ？ -Sinatra(をベースにしたツール)とSlimとSassとCoffeeScriptでモダンなWeb制作環境を構築する- それ全部middlemanでできるよ？ と思ったので書いてみる。 SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #1 ｜ クラスメソッド開発ブログ SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #2 ｜ クラスメソッド開発ブログ Middlemanとは? Middleman: Hand-crafted frontend develo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Middleman: Hand-crafted frontend development
GitHub - middleman/middleman-livereload: LiveReload support for Middleman