現在の自分の制作の多くが、静的HTMLファイルの納品もしくはCMSに組み込むためのHTMLの納品です。静的ではありますが、共通部はincludeファイルなどで分けて納品してもOKというような状況がほとんどです。 そのため、これまでは共通部をSSIやPHPのincludeなどを使ってコーディングをしていたのですが、 jekyll や middleman などをちらほら聞くようになった２年ほど前から、静的サイトジェネレータを利用するようになりました。 今回は、最近利用してみた静的サイトジェネレータの 「metalsmith」 を利用してみたので、メモとしてエントリーしておきます。 Metalsmith
背景 自分が仕事で書く WEB アプリケーションは多くの場合が小粒で、何か書く場合には sinatra を使っています。 さらにテンプレートエンジンは slim で、ビューが必要な場合は twitter bootstrap を使って書きます。 で、新規で何か書き始める時に、それっぽいディレクトリ構成を作って、twitter bootstrap とか jquery とかをダウンロードして解凍してそれっぽいところに設置してー(もしくは既存プロジェクトをディレクトリごとコピーしてきて要らないファイル消してネームスペース変更してー)、とかっていうローテクな感じのことを毎回手動で行っていて、すっと実装に入れない！めんどくせー！ってなることが多いので、いったん整備してみました。 studio3104/ore-no-sinatra-skelton · GitHub 構成 javascript/css ラ
はじめに ふだん仕事でお世話になっているツールたちを徒然とリストアップしていこうかと思います。 中にはもう使わなくなったものもあるかと思いますが、記念的な意味をこめまして、いっしょにならべたいと思います。 そしてほとんど、Mac用のツールです。。。 タスクランナー GRUNT YEOMANでも使われているタスク・ランナーです。使用するにはNodeが必要です。 最近の空気感では、フロントエンド系のタスクランナーでは定番のものになったのではないでしょうか。 使い方はJavaScriptかCoffeeScriptで設定ファイル(Gruntfile)をつくり、そこにタスク(例えばソースを圧縮する、JavaScriptの構文をチェックする、デプロイするなどなど)を登録し、自動実行させるというものです。 また、grunt-initを別途インストールして、対応したテンプレートをインストールすると、お手軽
@yosuke_furukawaさんがtweetしていたサイトパフォーマンスに関連する Gruntとgulp.js のタスク一覧です。確かによいまとめなので、メモしておきます。 GruntとGulpには、画像の最適化、HTML/CSS/JavaScriptファイルの結合 & 圧縮をするタスクがあるので、まずそちらをベースラインとして利用されたし。 1) 画像ファイルの圧縮 & 最適化 webページは平均1.5MBで画像ファイルが多くを占める。モバイルで160KBの画像ファイルを追加すると直帰率が12%悪化すえるというEtsyのデータがあり。 Grunt grunt-contrib-imagemin grunt-imageoptim (OSXのみ） 二つのタスクのどちらを選ぶかは、こちらの比較表 で確認してください。 Gulp gulp-imagemin 3/4/2014時点ではImage
A toolkit to automate & enhance your workflowLeverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines. TypeScriptDevelop in any languagePNGCreate assets with any toolMarkdownWrite using any formatJavaScriptGet compiled codeWebPGet optimized imagesHTMLGet rendered content
MEANとは MongoDB + Express.js + Angular.js + Node.js を組み合わせてWebアプリケーションを作成することです。 手順 Windows上で簡単なユーザ登録アプリケーションを作ってみましょう。 次の手順で進めていきます。 アプリケーションの雛形を作成 ユーザページを追加 htmlを修正してユーザ一覧を追加 クライアントのJavaScript（Angular.js）を修正 サーバのJavaScript（Express.js）を修正 MongoDBを参照 ユーザの登録機能を追加 完成したものはGitHubにおいてあります。 Chocolatey本体のインストール以外はMinGW Bash*1で実行可能です。 事前準備 ChocolateyでMongoDBとNode.jsをインストールします。Chocolateyをインストールしていなかったら次のコマン
http://www.youtube.com/watch?v=1OAfGm_cI6Y 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 GoogleのAddy OsmaniによるFuture of Web Appのキーノートスピーチです。 49分間 [Video]で下記の話題を全てまとめてます。フロント関連の便利ツールが一通り網羅されてます。おかげで、Yeoman (Yo/Grunt/Bower) の概要もすっきり理解できました。スライド（236枚）で確認されたい方はこちら。 Codekit Hammer Prepros Koala Mixture compass.app scout-app Yeoman / Grunt grunt-image: JPG/PNG/Gifを最適化して軽量化 grunt-
納品時には、少しでもページを速く表示させるために、CSS・JS・画像の圧縮などファイルを最適化し、Webサイトを高速化することは必要不可欠です。 ファイルを圧縮するには、アプリを使ったりWebサービスを使ってもできますが、一つ一つ行うと時間がかかってしまいます。作業漏れの原因にもなります。 そこで、納品前の面倒な作業をGruntでまとめて行いたいと思います。Gruntを使うことによって、Sass(SCSS)のコンパイルやHTMLの量産を簡単に出来たりするので、とても便利なツールです。事前にGruntのインストールと、SassとCompassのインストールを行ってから、ぜひ以下の手順でお試しください。 今回、Gruntでやることは下記の通りです。 HTMLファイルの圧縮 CSSファイルの圧縮 画像ファイルの圧縮 JSファイル圧縮 不要なファイル・フォルダの削除(Comassでスプライト画像を
JavaScriptやCSSの結合や圧縮などいろいろな事を自動で処理してくれるGruntですが、もう話題になってずいぶん立ちますが今更ながら入れてみましたのでその方法です。 前にGruntの話題で盛り上がった時に試してみたのですがどうしても動かず原因もわからずで止まっていたのですが、情報も増えてきたので再チャレンジでした。 結果的に原因もわかったのでGruntの入れ方と基本的な使い方を書いておこうと思います。 node.jsのインストール Gruntを使うためにはnode.jsが必要になりますので、以下のサイトからnode.jsをダウンロードします。 node.js ダウンロードしたものを実行します。 これでnode.jsがインストールできたはずです。 コマンドを起動 次にコマンドを起動します。「管理者として実行」をクリックします。 まずはnode.jsが入ったか確認してみましょう。以下の
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
Why use a task runner?In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort. Why use Grunt?The Grunt ecosystem is huge and it's growin
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
