2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
嫁を面接した企業が「あれ、これって……。」となる画像 はじめに 最近嫁が転職活動をしていたのですが、デザイナーは転職活動をする際に「ポートフォリオ」なるものが必要になるそうです。Webデザイナーである嫁は、このポートフォリオをWebサイトとして製作したいとのこと。 エンジニアリングを生業とする旦那として、ここは一肌脱がねばと思い、ポートフォリオサイトの構築をしました。 コントラクター（僕）のスペック iOSエンジニア Webアプリは過去にやっていた クライアント（嫁）のスペック デザイナー（仕事はWeb系） Ruby, JavaScriptはほぼ書けない HTML, CSSは書ける Git, GitHubは使える クライアント（嫁）の要望 パブリックに公開するのではなく、履歴書に添えたい URLを知っている人しかアクセスしない パスワード（BASIC認証）が欲しい デザインはいちから自分で
Site Generators A List of Static Site Generators for Jamstack Sites
インストール 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
ruby のアプリを動かす時にいちいち bundle exec って書くのがダルい。書きたくない。でもシステムに入ってたり違うバージョンの物が動いて変な動作をされても困る。 どうにかしてこのダルさを解消できないかと考えてみた。 まず rbenv を使ってるなら gem でインストールされるコマンドは必ずシェルのラッパとして生成され、そこから本物が起動する様になっている。例えば rails であれば以下の様なシェルになっている。 #!/usr/bin/env bash set -e [ -n "$RBENV_DEBUG" ] && set -x program="${0##*/}" if [ "$program" = "ruby" ]; then for arg; do case "$arg" in -e* | -- ) break ;; */* ) if [ -f "$arg" ]; th
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との比較について このような
Oracle Blogs
The definitive listing of Static Site Generators — all 460 of them!Stars Name License Language Created Updated
Rubyistのためのズルいデザインハンズオン in RubyHiroba P4D ワークショップ
ズルいデザインを使った Rails 用 gem "zurui-sass-rails" の使って、実際にデザインの作り方を体験できるハンズオンです。 体験用レポジトリ https://github.com/prog4designer/zurui-hands-on zurui-sass-rails https://github.com/mahm/zurui-sass-rails ズルいデザインについて - 前半のスライド https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku-in-rubyhiroba-p4dwakusiyotupu
AWSのAPIをカジュアルに
#jawsug #cloudgirl の資料です
Middleman: Hand-crafted frontend development
Middleman はモダンな web 開発ですべてのショートカットやツールを使用する静的サイトジェネレータです。はじめに。 Watch Follow @middlemanapp
Sitespec - r7kamura blog
[Sitespec](https://github.com/r7kamura/sitespec)という静的サイト生成ツールを作り、このブログを移行した。 ## Sitespec Sitespecは、Webアプリとテストから静的サイトを生成するためのツール。 WebアプリにはRackを、テストにはRSpecを使う。 Rackを使った適当なWebアプリを用意し、 RSpecでHTTPリクエストを発行するように記述したテストを実行すると、 レスポンスの内容から静的ファイルが生成されるという仕組みになっている。 参考までに紹介しておくと、静的サイト生成ツールには他に [Middleman](http://middlemanapp.com/)や[Octopress](http://octopress.org/)、[Movable Type](http://www.movabletype.jp/) な
概要 Github Pagesでブログ構築ができる静的サイトジェネレーターの総まとめです。 もともと使っていたOctpressからの移行で、HugoとHexoで迷い、デプロイのしやすさや、Node.jsで完結できることなどからHexoに決めました。なので、Hexoの情報は多めになっています。 Assembleも、Grunt・Yeomanでがりがり動かすことができそうで、いつか試してみたいです。 リプレース要件 以下を満たすもの。 Markdownでブログ記事を記述できる(Githubとかで管理したいから) Octopressから移行が可能(最悪手動でもOK) デザインがモダンであること(スマートフォン対応していること) イケてること(色んな意味で) Jekyll｜Rails｜Github Star 18848 メリット Github Star数No1と人気。 日本語の記事も多い なんでもで
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 とか引っ張りだすほどじゃ
Middelman + Google Spreadsheet を使ってみんなで編集できる静的サイトを作る - Qiita
最近 Middleman を活用しています。middleman は Rails からテンプレートエンジン部分だけを抜き出したようなもので、Haml や Slick などを使いたいが、ログイン処理などの動的なものは必要ないといった時に便利です。 静的なファイルのみの出力なので、Amazon S3 や Github Pages に、生成された HTML をアップロードすることでホスティング費用を劇的に少なでき、Wordpress 等のCMSのようにセキュリティ面を気にする必要もなくなります。 ブログの機能も備わっている他、データファイルを読み込むことができるので、データを元にページを生成するような事も簡単にできるのが魅力です。 今回、Code for Japan のイベント Social Hack Day のウェブサイトを作る際にも Middleman を使わせてもらいました。 システム全体は
[ 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/
はじめに 最近非常に活発に開発されている、サイト/アプリケーション・アセンブラ(スタティック・サイトジェネレータと表現するものもあるようです)、ファイル・ジェネレータなどをまとめました。 これらのツールは、ファイル監視、Liveリロード、ビルドインサーバ、画像軽量化、パッケージマネージメントなど、サイトやアプリケーション開発に必要とするものをパッケージングしたものになります。 各ツール、もっている機能もバラバラであったり、用途も微妙に違うものがあったりしますので、ほんとは同じエントリー内でまとめるのも適切なのか悩ましいところだったのですが、大きなくくりでフロントエンド開発におけるジェネレータ系のツールという解釈のもとに行いました。 また、ほとんどのツールの説明はデフォルト値のもので、設定によって、例えばテンプレートエンジンの種類の変更や、ディレクトリパス、サーバのポート番号などを変更できた
サイトをリニューアルしていました。 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
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
[混沌すぎ] 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]
rochas.cc 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
私は主に業務ではフロント側を担当させていだたいて、 Webアプリ等で使用する静的なひな形ファイルを作成することがあり、ファイルの修正が手間だったりすることがよくあります。 今回は、そんな手間を解決してくるツールをご紹介したいと思います。 アジェンダ Middlemanとは？ インストール 使用方法 開発の流れ まとめ Middlemanとは？ 静的なWebサイトを構築する際に、とても便利なコマンドラインツールです。 主な特徴 開発用ローカルサーバーで、確認ができる。 テンプレート言語、メタ言語を静的ファイルへビルドしてくれる。 いろいろなテンプレート言語にも対応 css、jsをminifyしてを出力してくれる。 layout機能、partial機能などで共通するhtmlを再利用できる。 などなど。 makes developing websites simple 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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptフロントエンド開発の昨今
嫁の転職を支える技術 - 文字っぽいの。
Static Site Generators - Top Open Source SSGs | Jamstack
Middleman: 作業を効率化するフロントエンド開発ツール
Middleman: Hand-crafted frontend development
Big Sky :: bundle exec がウザい
静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker
Code coverage with gocov and wercker
Static Site Generators
Github Pagesでブログ構築ができる静的サイトジェネレーター総まとめ - Qiita
Middleman + S3 + Fastly で作るブログ付きスタティックサイトのススメ
[ Middleman で超速プロトタイピング ] #00 Haml 再入門 | DevelopersIO
【Middleman】でモダンにHTMLファイルを出力してみる。 | DevelopersIO
フロントエンドなサイト / アプリケーション・アセンブラまとめ | Pen
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
rochas.cc
【Middleman】静的サイトジェネレータを使用してみる。 | DevelopersIO