Middleman: 作業を効率化するフロントエンド開発ツール
インストール gem をインストールし, 新たに Middleman を使ったサイトを作成するために CLI から middleman init my_project を実行します。 インストール方法を参照する サイトのカスタマイズ cd my_project してください。 Middleman は細かい設定なしに動作します。各ディレクトリの意味や サイトのカスタマイズの行い方を理解するためにドキュメントを読んでください。 カスタマイズ方法を参照する
インストール gem をインストールし, 新たに Middleman を使ったサイトを作成するために CLI から middleman init my_project を実行します。 インストール方法を参照する サイトのカスタマイズ cd my_project してください。 Middleman は細かい設定なしに動作します。各ディレクトリの意味や サイトのカスタマイズの行い方を理解するためにドキュメントを読んでください。 カスタマイズ方法を参照する
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
Grunt + TypeScript + Middleman によるフロントエンド開発環境を作ってみる | DevelopersIO
Middleman を使うようになってしばらく経ちますが、2014年4月現在 TypeScript に対応していないというのがどうも気になります。Ruby on Rails や Sinatra といった他の Ruby 製フレームワークと同様、Middleman が対応している Alt JS は CoffeeScript のみです。 CoffeeScript は機能が軽量であることから学習コストが低く、記述されるコード量も少なくなるので個人的に結構気に入っているのですが、Web アプリケーションの規模が大きく複雑になるにつれて静的型付けの機能を持っていないことがデメリットとして浮上してきがちです。案件の規模によっては静的型付け言語の採用を検討しないと後々で大変な目にあいかねません。 はい。JavaScript や CSS 周りのお世話なら Grunt だけで十分にまかなえるのですが、Midd
最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい（ヘッダ・フッタくらいは共通化したい） JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの？と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような
Middleman: Hand-crafted frontend development
Middleman はモダンな web 開発ですべてのショートカットやツールを使用する静的サイトジェネレータです。はじめに。 Watch Follow @middlemanapp
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 に簡単にデプロイ
静的webサイト作成の強い味方「Middleman」【前編】｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ドワンゴデザイナーのchiiです。 以前はフロントエンドエンジニアっぽいことをしていましたが、今年のはじめからデザイナーとしてバナーやLPを作るお仕事をしています。 今日はヘッダーなどの共通パーツを部品化して、使い回すことができる静的サイトジェネレーターの「Middleman」を紹介したいと思います。 今回はその導入編です。 Middlemanが解決してくれること いきなり紹介に入る前に、どんなことを解決してくれるのかを私の実体験に触れながらお話します。 実は、デザイナーとして初めて複数ページを制作するときにヘッダー制作における煩わしさがありました。例えばこんなコードです。 たぶん皆さんも経験があると思います。 <html> <head><title>Awesome Corporate Site</title></head> <body> <header> <h1><a hr
どうもこんにちは、僕です。働クリッカーが大盛況につき、 zeny.io へのアクセスが急増しまして、気がついたら AWS から出てきた Data Transfer の今月の請求額がちょっとヤバそうな感じになっていました。バズるの怖いっすね。 それでも Internal Server Error など出さず、粛々と(トロくても)動き続けていたのは、種も仕掛けもなく、純粋に S3 の上に HTML を配置しただけの簡単設計だったのがよかったのですが、さすがに .zip とか .app とか配布するとなると、転送量もばかにならないし、なにより遅い。 ということで、 Fastly を導入してもうちょい早くしたよ☆というのが今日のお題です。やったね！ Middleman は静的サイトのジェネレータです。普通に HTML を書くのはだるいけど、Rails とか Sinatra とか引っ張りだすほどじゃ
[ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ | DevelopersIO
前回は Middleman を習得する前準備として Haml という HTML の拡張メタ言語について学びました。 #00 Haml 再入門 Haml は Middleman においてレイアウトファイルやテンプレートファイルを作成するのに使用します。デフォルトでは Haml ではなく ERb という Ruby 標準のテンプレートファイル形式が使われており、こちらは PHP や JSP と非常によく似た書式となっています（※拡張子はerb）。 身も蓋もないことを言ってしまうと、Haml を知らなくても ERb 形式で書くことで Middleman を使うことは可能です。ソースコード自体も標準の HTML 内に Ruby のコードが埋め込まれたような見た目なので、学習コスト自体は ERｂ のほうが低いかもしれません。しかしそれを考慮したとしても、コーディング自体の効率性やコードの見通しの良さか
Web アプリケーション開発の初期段階においては、そのアプリのモックアップをよく作ったりします。いわゆるプロトタイピングというヤツですね。本実装となるともちろんサーバーサイドは Java や PHP などで実装し、それに伴ってフロントエンドもそれらのプログラミング言語によるテンプレートエンジンをベースに HTML で作り上げる訳です。しかしプロトタイピングの段階ではそういったプログラミング言語に頼ることなく、HTML だけで一通りの静的な Web ページを作ることになります。 実はこのモックアップ作成という名のプロトタイピング、HTML だけで作るという理由からかなりの重労働だったりします。画面数の少ない小規模な Web アプリケーションであればどうってことないですが、業務系の Web アプリケーションとなると10画面、20画面は当たり前。時には40画面以上にも及ぶことも少なくありません。
ブログをJekyllからmiddlemanに移行してTravis CIでGitHub Pagesにデプロイするようにした - Webtech Walker
ちょうど一年くらい前にWordPressからJekyllに移行したんだけど、今回middlemanで作りなおしてみた。 hokaccha/webtech-walker - GitHub 特にJekyllに不満があったわけでもなく単に技術的興味によるもの。 middleman Middleman: Hand-crafted frontend development middlemanはほぼJekyllのようなものなんだけど、Asset Pipelineが使えたり、テンプレートがerbとかhaml、Slimなどで書けたり、helperが充実してたりする。 RailsのViewまわりの機能をそのまま持ってきたような感じなので、普段Rails使ってる人にとってはJekyllよりも使いやすいかもしれない。個人的にもJekyllよりはmiddlemanのほうが好みだった。 調べた時にでてくる情報量など
エンジニアブログをMiddlemanでつくる3つの理由 - CrowdWorks Engineer Blog
みなさん、技術ブログの運用って面倒じゃないですか？ぼくは面倒です！ ネタを貯めて、記事を書いて、公開する。会社的にも・個人的にも意味があり、 そのプロセス自体も楽しいものです。 大抵の場合、ブログの運用には便利なブログエンジンやブログサービスを使います。 ところが、長期間運用していると、「もうちょっとなんとかならないか？」と思うことがあります。 例えば、以下のようなことです。 拡張できない・しづらい 使い慣れた言語とエディタが使えない・使いづらい 共同作業しづらい(Git & GitHubが使えない等) もちろん、ブログエンジンやブログサービスには管理が簡単、すぐ使えるなどのメリットもありますが、 それにこだわらない場合はもっといい方法があるはずです。 クラウドワークスでは、Middlemanを使って、軽く・モダンにブログを運用してこれらの問題を回避しています。 この記事では、Middle
前回に引き続き、Middlemanで静的なサイトを構築してみたいと思います。 実際に、Middlemanを使用して、ベーシックなhtmlテンプレートを出力してみます。 その際に、Middlemanの特徴の一つとして「Layout機能、Partial機能」を使用して、構築したいと思います。 アジェンダ ディレクトリ構造のおさらい。 レイアウトの考え方 Frontmatter(ページ固有変数) 実際に作成してみる。 まとめ ディレクトリ構造のおさらい。 プロジェクトフォルダを作成 まず、作業するディレクトリに移動後、以下コマンドから 「sample」というプロジェクトフォルダを作成します。 $ middleman init sample ディレクトリ構造を確認 作成した「sample」フォルダ内を確認すると、以下の様な構成になります。 注目して頂きたい箇所として「source/layouts/
サイトをリニューアルしていました。 WordPressからmiddleman-blogに乗り換えました。 ホスティングもロリポップからgithub-pagesに乗り換え。 理由は普段使っているエディタでmarkdownでブログを書いてgitでデプロイする流れがやりたかったから。 static site generatorは数あれど、慣れたmiddlemanでやってしまおうと思っていました。 haml と sassでコーディングしています。コードはここに置いてあります→camuro.github.io 今回リニューアルするのにとった流れか下記の通りです。 WordPressからデータをmarkdown形式でブッコ抜く Pureを少し使ってmiddleman-blogでコーディング githubにorganizationアカウントを作る middleman-deployでdeploy トップレ
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はこれから sprocket を辞めて CommonJS するようです [グロた] - Qiita
はじめに こんにちは、monpy です。 今日は何を話そうかというと、 Facebook で この記事が回ってきたんですね。 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section4 ～Gulpで処理を自動化しよう～ この記事は、タイトル通り Gulp 入門の記事な訳です。 僕も フロントエンドの端くれなので Gulp は頻繁に利用します。 Gulp が出て一体どんだけ経ったんだろうなぁ、と思いをはせたので調べてみると first commit が 4 Jul 2013。 まだ 2年と5ヶ月くらいしかたってないんだなぁ。と。 でも2年も経てば、技術が変わってしまうのが フロントエンドの常。gulp は辞めようぜ！なーんて記事もちらほら(ひえー)。 今日はそんな技術の移り変わりが激しくて嘔吐感に見舞われた感想です。 ちなみにタイトル通り mi
![[混沌すぎ] Middlemanはこれから sprocket を辞めて CommonJS するようです [グロた] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3360f05d38dde41b0ee7c044218d64a7bbb8423c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU2JUI3JUI3JUU2JUIyJThDJUUzJTgxJTk5JUUzJTgxJThFJTVEJTIwTWlkZGxlbWFuJUUzJTgxJUFGJUUzJTgxJTkzJUUzJTgyJThDJUUzJTgxJThCJUUzJTgyJTg5JTIwc3Byb2NrZXQlMjAlRTMlODIlOTIlRTglQkUlOUUlRTMlODIlODElRTMlODElQTYlMjBDb21tb25KUyUyMCVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MiU4OCVFMyU4MSU4NiVFMyU4MSVBNyVFMyU4MSU5OSUyMCU1QiVFMyU4MiVCMCVFMyU4MyVBRCVFMyU4MSU5RiU1RCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Mjk3YWEwZGRiZDNjMTYyNGE5YTczMWRjNDk5YzM2Mjk%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbW9ucHkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTlhYjAxMTE0NjViN2ZlODFkY2JlZjk0NGNiMmZlNTE0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da52d42fbe792cd25c55d40133bc951e8)
[ Middleman で超速プロトタイピング ] #02 Middleman の便利機能 7 選 | DevelopersIO
そんな訳で、前回は Middleman のインストールから基本的な機能まで学習しました。今回はより本格的に使いこなすために、Middleman の持つ膨大な機能の中から僕が比較的多用している機能を7つばかり紹介していくとします。Middleman って何？という方は、先に以下の記事をご参照ください。 [ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ テンプレート - レイアウトを無効にする すべてのテンプレートファイルは何らかのレイアウトに囲われた状態で出力されますが、時にレイアウトを全く使用したくないという状況もあるでしょう。具体例として、モーダルダイアログ内に読み込む外部ファイルなどが考えられます。そんな時はテンプレートファイルがレイアウトに囲われないように無効化する訳ですが、以下の二種類の方法でこれを解決することが出来ます。 Fron
昨今の開発では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というものが、静的なサイト(html/css/jsだけのサイト)を作るのに、かなーり便利です (これを使って性的なサイトを作りました) 何が便利かというと 開発用サーバーになる テンプレートエンジン(erb) coffee scriptやscssなどを自動で変換 もちろんコンパイルもできる 画像の圧縮とかもできるみたい などなど。イメージとしては、Ruby on Railsから、ウェブアプリ的機能を抜いたものというか、 静的なサイト用の機能を抜き出したものというか、ざっくりとテンプレートエンジンみたいな感じ(正確にはSinatraと言ったほうがいいのだけど)。 ようするに、coffee scriptとかsass使うなら超便利よ！みたいな感じ。 静的なサイトを対象としているので、基本的にはRubyのプログラマーである必要はないです。 基本的には 404 Not Found
この記事は2013年6月21日にatsuyaによってCoiney Developer Blogに書かれた記事の転載です。 最近は色々魅力的なブログサービスが沢山ありますが、自分の書いた記事が手元にファイルとして残るのは嬉しい事です。このブログは、middleman (とmiddleman-blog) を使って作成し、記事を含んだ全てのデータをgithubで管理しています。middlemanは、最終的にhtmlファイルを出力するので、それらのhtmlファイルを公開したい場合は、どこかでホストする必要があります。既にgithubを使ってデータを管理しているので、ここではgithubでmiddlemanで作成したブログをホストする方法を解説します。 github pages githubには、github pagesという、静的なコンテンツをホスト出来る機能があります。githubのユーザかor
おぐらです。 このブログは、Middlemanを使って生成した静的コンテンツをAmazon S3にアップロードし、S3 Static Website Hosting機能を使ってWebサイトとして配信しています。 今回は、この構成を実現するための手順として、 コンテンツをS3にアップロードするmiddleman-syncの導入 S3 Static Website Hostingの設定 について解説します。 既にMiddlemanでサイトを運用している場合、1時間ほどでS3での独自ドメイン運用ができるようになると思います。 S3 Static Website Hostingとは何か S3には静的なサイトをホスティングする「Static Website Hosting」という機能があり、Bucket毎のWebsite Hosting設定を行うことで、Bucket内にアップロードしたファイルに以下
Middleman はモダンな web 開発のあらゆるショートカットやツールを採用した静的サイトジェネレータです。はじめに。 Watch Follow @middlemanapp
静的サイトを構築する時に、 いちいち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]
私は主に業務ではフロント側を担当させていだたいて、 Webアプリ等で使用する静的なひな形ファイルを作成することがあり、ファイルの修正が手間だったりすることがよくあります。 今回は、そんな手間を解決してくるツールをご紹介したいと思います。 アジェンダ Middlemanとは？ インストール 使用方法 開発の流れ まとめ Middlemanとは？ 静的なWebサイトを構築する際に、とても便利なコマンドラインツールです。 主な特徴 開発用ローカルサーバーで、確認ができる。 テンプレート言語、メタ言語を静的ファイルへビルドしてくれる。 いろいろなテンプレート言語にも対応 css、jsをminifyしてを出力してくれる。 layout機能、partial機能などで共通するhtmlを再利用できる。 などなど。 makes developing websites simple Middleman:公式サ
Apple以外の製品にiTunesのデータを同期するMac用アプリ『Middleman』 | ライフハッカー・ジャパン
バージョン： 0.1 リリース日: 2010年3月31日 制作者: Whitson Gordon ライセンス: GNU Public License 機能： iTunesのプレイリストと、そこに含まれる曲やフォルダなどを、USBなどの大容量デバイスに同期することができる。 インストール： Middlemanは、以前はiTunesから起動させるサービスでしたが、今はサービスと同機能のスタンドアローンのアプリもあります。ダウンロードしたDMGファイルをダブルクリックし、バージョンを選んでインストールします。一つずつでも両方一緒にでも、どちらでもインストールできますので、インストーラのパッケージを確認してください。 使い方： Middlemanは、最初に少々設定が必要です。iTunesとMiddlemanの性質上、一つのプレイリストは、一つのデバイスにしか同期できないようになっています。一つプレ
Middlemanでがんばるぞい系テンプレートgem「middleman-ganbaruzoi」作りました
Middlemanでがんばるぞい系テンプレートgem「middleman-ganbaruzoi」作りました Middleman、最近結構使っていて実案件でもこれでサイト作ったりしている。数十ページのサイトだけど、WordPress使うまでもないような重さのサイトにちょうど良い。 Middlemanを使うときは、僕はSlim + Sass(SASS) + CoffeeScriptでやっていてる。config.rbやSlimやSassのテンプレートみたいなやつは、基本的に同じものを使い回す。GitHubやGistに置いてるそれらを、都度プロジェクトフォルダにコピペして、というのをやっていた。 でも毎回それやるのも面倒だし、Ruby gem化してRubyGems.orgで公開しました。これで、今までより楽にテンプレートを使い回すことができる。 RubyGems.org: middleman-ga
gh-pagesブランチの更新自動化がゴール masterにpushするだけで内容を動的に取得してgh-pagesブランチにpushをします。 今回もTravisのお力を借ります。以下がポイントになります。 gh-pagesブランチの内容はmiddlemanによる出力 masterブランチにコミットしたあと、Travisからmiddlemanのビルドを実行 生成された内容をgh-pagesブランチへpush middlemanのインストール middlemanはrubyで動く静的サイトジェネジェネレータです。 テンプレートをほぼhtmlで記述することが出来て、ブログ等の管理を非常に簡単にすることが出来ます。 jekyll使ったことのある人なら学習コストはさらに低めです。詳しくはこの辺り。 middleman - web サイトの開発をシンプルに まずはmiddlemanのインスト
意外と好評いただいているzurui-sass-railsをMiddlemanに対応させたGem、zurui-sass-middlemanを作りました。これでいちいちsassファイルを引っこ抜いて来なくてもzurui-sassを使えます！ 使い方 1. Middlemanプロジェクト内のGemfileに追加 gem 'zurui-sass-middleman', '~> 0.0.2' 2. Sassファイルからimport @import "compass" @import "zurui-sass" ※ compass前提なので、zurui-sassを読み込む前にcompassを読み込んで下さい。 3. あとはMixinを使うだけ .box +zurui-box-outer みたいな感じでMixinを使えるようになります。 Mixin自体の効果や使い方についてはこちらのページをご覧ください。
ブログをMiddlemanからGatsbyに乗り換えた雑感
2017年にこのブログはWordpressからMiddleman製に作り変えたのですが、この度MiddlemanからGatsbyへ移行しました。前回の移行の記事はこちらです。 — Wordpressで運用していたブログをMiddleman+Netlifyに変更した | WEB EGG Middleman時代からmarkdownや画像系を全てソース管理していたので、移行は二日くらいで特に問題なく終わりました。 今回はマイグレーションガイドではなく、使用感としてMiddlemanとGatsbyを比較してみたいと思います。 移行にあたり求めてたこと 描画のパフォーマンスを上げたい ビルド速度の大幅改善（もともと3-40分かかってた） 初期描画の後に動的に動くjs（サイト内検索とか）の開発体験を”普通”にしたい Gatsby使えばオフライン対応が入ってPWAにしやすいって話もあるんですが、このブロ
GitHub - google/mysql-ripple: Ripple, a server that can serve as a middleman in MySQL replication
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Sign up for freeGet started in minutes with our cloud products TerraformInfrastructure as code provisioning
Photo by @yterajima 2014/05/16 に恵比寿の Engine Yard さんで行われた、Tokyo Middleman Meetup #2 で、KAIZEN platform で開発している、planBCD GUI Editor と類似記事プラグインについて発表してきました。 当たり前ですが、みんな Middleman 好きで楽しい Meetup でした。(当日の様子) その 1. planBCD GUI Editor demo は こちら から。 途中リンクされている naoya さんのエントリー。 その 2. middleman-blog-similar ~> 1.0 middleman-blog-similar について、話しました。 集合写真 Photo by @yterajima
2019/05/06追記 この記事は古いです 当サイトはMiddlemanからGatsbyに移行したため、この記事の内容は古くなっております。 動作デモはありませんが、Middleman製サイトに検索機能を実装する場合にはこのまま続きをお読み下さい。 現サイトで運用されているGatsby製サイトに検索機能を実装する場合はこちらの記事を参照して下さい。 — Gatsby製サイトにAlgoliaのサイト内検索を実装する | WEB EGG — ブログをMiddlemanからGatsbyに乗り換えた雑感 | WEB EGG こんにちは。 当ブログのサイト内検索をしたことある方はお気づきかもしれませんが、サイト内検索にAlgoliaを利用しています。 （後述の事情により月初に使えなくなることがたまにありますが）動作速度もかなり早く、安定して稼働してます。 運用コストもゼロで、記事書いてPRをマージ
最近HTML5の技術でスマホアプリを開発する試みをしています。 開発時にはブラウザで動作確認したい（簡易サーバを立ち上げておきたい）。 コマンド一発でビルドしたい。 開発にはお気に入りのエディタを使いたい。 Railsと簡単に連携できると良い。 などなど・・・ といった要件で環境の整備を進めているのですが、PhoneGap + Middlemanの組み合わせがなかなか良い感じなので、ご紹介したいと思います。 PhoneGapとは？ HTMLをスマートフォンのアプリとしてビルドしてくれるフレームワークです。 iOS向け、Android向け、WindowsPhone向けなど、様々なプラットフォーム向けにビルドすることができます。 これがあれば一つのソースコードでマルチプラットフォームにアプリを配信することができるんですね！（理論上は） Middlemanとは？ いくらHTMLでアプリを作るとい
それ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
esa.io でゆるふわ情報共有 - Middleman Blog への Export サンプル付き #esa_io - Qiita
esa.io でゆるふわ情報共有 - Middleman Blog への Export サンプル付き #esaio 概要 esa.io でゆるふわ情報共有 esa.io って何？ esa は「情報を育てる」という視点で作られた、 小さな開発チームのためのドキュメント共有サービスです。 2014/12/17 現在は、β版。無料期間中。 2015年前半に有料化予定とのこと。 注意 esa だけだとググラビリティが低いので、 esa に関する情報を発信する側も検索する側も esa.io にしたほうが良さそう。 golang みたいに。 ハッシュタグは「#esa_io」だろうか？ 類似サービス QiitaTeam esa.io について Qiita で詳しく書くのっていいのかな・・・ ((((；゜Д゜)))))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ 必ずしも競合ともいえないかも。 QiitaTeam と e
2013年11月22日、今をときめく静的サイトジェネレータ "Middleman" について語る会ことTokyo Middleman Meetup #1が株式会社ジェニュインブルー様で開催されました。 せっかくの機会だったので、自分もお気に入りのcss frameworkであるところのSusyについてお話させていただきました。 MIDDLEMAN MEETS SUSY by kumano ayumi スライドに出ているgridのサンプルはこちら。 Middleman Meets Susy - DEMO (Source on github) 当日の様子はこんな感じでした。(@machidaさんのtweet引用しまくります) ayumikoさんの発表。 (at SonicGarden Inc.) [pic] — https://t.co/awdzESOV68 — machida (@machi
前回まで、構築の流れをご紹介しましたが、 今回は、出力する際に便利な機能をいくつかピックアップしてご紹介していきます。 アジェンダ 設定ファイルについて ファイルサイズの最適化 HTMLの圧縮 CSS・JavaScriptの圧縮 画像圧縮 GZIPで圧縮 ローカルデータ LiveReload 設定ファイルについて プロジェクファイルを作成するとルート階層に、以下の２つのファイルがあります。 各ファイルに、プロジェクトの各設定していきます。 Gemfile config.rb Gemfile # If you have OpenSSL installed, we recommend updating # the following line to use "https" source 'http://rubygems.org' gem "middleman", "~>3.0.12" conf
middleman で構築したサイトを GitHub Pages で公開するまでの流れをまとめてみた - C++でゲームプログラミング
@supermomonga さんに教えてもらいながら middleman で構築したサイトを GitHub Pages で公開する事ができたので、その手順をまとめておきます。 デプロイとかめんどくさいと思っていたんですが、実際やってみたらめちゃくちゃ簡単でした。 [必要なもの] git github のアカウント gem middleman [middleman の生成] まずはローカルに middleman のプロジェクトを作成します。 middleman は gem からインストールする事ができます。 $ gem install middleman $ middleman version Middleman 3.2.2 これで、middleman のコマンドを使用できるようになったので次のようにして middleman でプロジェクトを生成します。 $ middleman init t
WordPressを卒業しよう。GitHubとMiddlemanで作るTech Blog《エンジニアサイト誕生の裏側 後編》
「Recruit Lifestyle Engineer」サイト（以下、エンジニアポータルサイト）の企画から実装までの裏側をお届けするこのシリーズ。 後編は、Middlemanによる実装で、具体的にどのような工夫がなされているかについてお届けします。 前編：Tech Blogをポータルサイトに発展させるには《エンジニアサイト誕生の裏側 前編》 Middlemanを使ったTech Blog構築 MiddlemanはRuby製の静的サイトジェネレータです。Rubyをベースに創られているため、Ruby同様のロジックを使うことができ、変数なども設定できるため、より効率的に静的サイトを構築することができます。 Middlemanと、Middlemanでブログを構築できるようにする公式のプラグイン「middleman-blog」を使ったこのWebサイトが、理想のTech Blogとなるように施されている
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Middleman: Hand-crafted frontend development
静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker
Middleman + S3 + Fastly で作るブログ付きスタティックサイトのススメ
[ Middleman で超速プロトタイピング ] #00 Haml 再入門 | DevelopersIO
【Middleman】でモダンにHTMLファイルを出力してみる。 | DevelopersIO
WordPressからmiddlemanに移行してGithub Pagesで運用する方法
HamlとSlimをMiddleman上で比較する - Tech-Sketch
middlemanを使ったフロントエンド開発 - 病みつきエンジニアブログ
middleman-blogをgithubでホストする | Coiney Developer Blog
Middlemanで生成したサイトをAmazon S3で運用する | qnyp blog
Middleman: 効率的な作業を可能にする Ruby 製の静的サイト生成ツール
静的サイトの構築に便利:MiddleMan - Qiita
【Middleman】静的サイトジェネレータを使用してみる。 | DevelopersIO
MiddlemanとTravis CIでgh-pagesを運用したら身長が伸びた | 1000ch.net
Middlemanユーザーもこれを入れればすぐにズルいデザインをはじめられます！ | mah365
Serving Static Sites with Fastly, S3, and Middleman
Tokyo Middleman Meetup #2 で発表してきた
Algoliaを利用してMiddleman製サイトに検索機能を実装する
PhoneGap + MiddlemanでサクサクiOSアプリを開発する方法 | mah365
Tokyo Middleman Meetup #1でSusyのお話をしてきた
【Middleman】の便利な機能をご紹介。 | DevelopersIO