Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」
Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」 gulpを利用しているとSassなどのコンパイルエラーが出た際にwatchなどのタスクが強制終了されてしまいます。エラー時にタスクを強制終了させないためのプラグインが「gulp-plumber」です。 (gulpの使い方は「タスクランナーgulp入門」を参照) まず、以下のコマンドでgulp-plumberをインストール。 sudo npm install gulp-plumber --save-dev 利用時には以下のよう他の処理の前に「.pipe(plumber())」と記述します。 var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer');
今どきのCSS3グラデーションの指定方法
意外とAndroid以外は最新ブラウザが正式な記述に対応しております。 正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。 IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。 上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #b6e2fd), co
新MacBook ProにインストールしたCUIアプリ
新MacBook ProにインストールしたCUIアプリ 新MacBook ProにインストールしたMacアプリ24に続いて、インストールしたCUIアプリもご紹介。 Homebrew Mac用のパッケージ管理ソフト「Homebrew」。ターミナルから以下のコマンドを入力するとインストールできます。Gitがインストールされてないとインストールできないと思うので、事前にXcodeをインストールしておきましょう。（Homebrewのインストール中にコマンドラインツールのインストール画面が表示されると思います。） ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" インストール後に以下のコマンドでインストールされたバージョンが確認できます。 brew -v rbenv Rubyのバージョン管理ソフト「
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
イベントデリゲートで理解するjQueryのonメソッド
イベントデリゲートで理解するjQueryのonメソッド このエントリーはjQuery Advent Calendar 2013の 1日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) イベントデリゲートとonメソッドについて解説します。 onメソッドはjQuery 1.7で新たに追加されたメソッドで、それまで利用されていたbindメソッドやliveメソッド、delegeteメソッドの代わりに利用できるメソッドです。 onメソッドの使い方を理解するにはJavaScriptのイベントバブリングを利用したイベントデリゲートを知るのが一番よいでしょう。 イベントバブリングとは? clickなどのイベントはイベントが発生した要素から親要素に伝播されます。これをイベントバブリングといいます。簡単なサンプルで解説し
レスポンシブWebデザインに対応した「jquery.heightLine.js」
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
Compassで書き出すCSSファイルを軽量化する
Compassで書き出すCSSファイルを軽量化する Compassは便利な半面、書き出されるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書き出されるCSSファイルの容量を削減することが可能です。 Step1.圧縮する コンパイル時に圧縮オプションを指定することで改行や空白を取り除いた形で書き出してくれます。config.rbに以下のコードを追加するだけで圧縮してくれます。 output_style = :compressed Step2.無駄なベンダープリフィックスを取り除く(ブラウザ別) CompassのCSS3ミックスインは便利な反面過剰なベンダープリフィックスをつけます。 Sassファイルの冒頭に以下のようなコードを追加することで「-o-」や「-ms-」、「-moz-」といったベンダープリフィックス付のプロパティが書き出されなくなります。Operaは現
Gruntで始めるWeb制作の自動化
Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。 次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ
ローカルのWebサイトを確認する方法
ローカルのWebサイトを確認する方法 ローカルのWebサイトを作成している際に確認するTIPSをいくつかご紹介します。 解説はMacのみですが、Windowsでも足りないソフトをインストールすればできると思います。 まずは、 たとえば以下のようなディレクトリで作業していてindex.htmlを確認したいとします。 /Users/nishihata/Desktop/htdocs/index.html 普通にやるとブラウザのアドレスバーに以下のURLを入力するとブラウザでindex.htmlが確認できます。 file:///Users/nishihata/Desktop/htdocs/index.html ただ、このままでは絶対パスでサイトを作成していたりすると確認できません。 ローカルサーバーを起動 そこで、Macでターミナル (Terminal)で以下のコマンドを入力してみましょう。 cd
jQuery Mobile 1.4.0ではフラットデザインが採用
jQuery Mobile 1.4.0ではフラットデザインが採用 jQuery Mobileの新しいバージョン、jQuery Mobile 1.4.0のAlpha版がリリースされました。 SVGアイコンの採用や、jQuery UIからいくつかのウィジェットが採用されるなど大幅にパワーアップされていますが、一番の大きな改善はテーマの一新です。 これまで、5種類のスマホライクなテーマがデフォルトで提供されていましたが、jQuery Mobile 1.4.0ではフラットデザインが採用されたlight と dark の2種類のテーマのみになります。 jQuery Mobile 1.4 lightテーマ 実際のサンプル jQuery Mobile 1.4 darkテーマ 実際のサンプル 今までのテーマと比較すると少しシンプルで単調な気がしますね。その分、カスタマイズが容易になるみたいです。 iOS7
これからフリーランスになる人へ
これからフリーランスになる人へ 私の経験からこれからWeb制作の受託でフリーランスになる人へのアドバイスを書いてみたいと思います。あくまで私の経験からですので人により参考になること、ならないことがあると思います。 ちなみに、私は4年ほどフリーランスをしてから株式会社まぼろしに合流しているので今は完全なフリーランスではありません。(執筆やセミナーは個人事業として受託しています。) いつフリーランスになるのがいいのか? やる気があるならいつなってもいいと思います。むしろなりたいと思った時がなり時です。慎重に準備するのも良いのですが、やった事がないことに向けて準備するというのは結構非効率です。 向いてなかったら就職する いざフリーランスになってみてうまくいかなかったら、すぐ就職しちゃえばいいです。フリーランスになることをあまり特別視せずに、軽い気持ちでやればいいと思います。 運転資金 Web制作
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
jQuery 2.0を利用するために注意すること
jQuery 2.0を利用するために注意すること 4月18日にjQuery 2.0がリリースされました。これまで1.x系でバージョンアップを進めてきたjQueryでは初のメジャーバージョンアップとなります。 jQuery 2.0がjQuery 1.x系と大きく異なるのは、これまでjQueryはIEのバージョンは6以上をサポートしてきましたが、jQuery 2.0ではIE9のバージョンは9以上がサポートとなります。 誤解しないようにして欲しいのはjQuery がIE8以下を切り捨てたわけではないということ。jQuery 1.x系は今後もバージョンアップされていき、jQuery 1.x系はjQuery 2.x系と基本的には同じ機能が実装される予定です。ちなみにjQuery 1.x系の次のバージョンはjQuery 1.10です。 jQuery 1.x系とjQuery 2.x系の使い分け 追記:正
CSS3アニメーションを利用したサンプル
CSS3アニメーションを利用したサンプル CSS Niteビギナーズ：HTML5+CSS3でCSS3アニメーションを紹介したところ、使いどころがよく分からないとの意見をたくさん頂いたので、サンプルをいくつかご紹介します。 実際の動作はサンプルページから確認できます。 sample1 ボタンにマウスをのせた際にアニメーションして背景色を切り替えます。 /*sample1*/ .sample1 a{ background:#3f8bad; text-decoration:none; padding:1em; color:white; -webkit-transition:all 400ms; -moz-transition:all 400ms; -ms-transition:all 400ms; -o-transition:all 400ms; transition:all 400ms; }
クロスブラウザを意識した「transitionend 」
クロスブラウザを意識した「transitionend 」 CSS Niteビギナーズ：HTML5+CSS3でwebKitTransitionEnd を紹介したところ、「クロスブラウザでどうするの？」と質問をいただいたので補足しておきます。 次のようなtransitionアニメーションがあったとして、 div{ background: #FF0000; border: 1px solid black; width:100px; height: 100px; margin:20px; position: relative; -webkit-transition:all 400ms linear; -moz-transition:all 400ms linear; -ms-transition:all 400ms linear; -o-transition:all 400ms linear; t
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する Sass/Compassでは保存の際にminify圧縮するか圧縮しないかを選択できますが、両方出力したい場合、次のような方法で出力できます。 config.rbに以下のコードを追加します。 output_style = :expanded on_stylesheet_saved do |filename| if File.exists?(filename) minifyFile = filename.gsub('.css', '.min.css') FileUtils.cp filename, minifyFile file = File.read minifyFile colon = ':' semicolon = ';' comma = ',' open_brace = ' {' close_brace =
CSS3のkeyframe AnimationをFPSベースで設定する「fpsAnimation.js」
CSS3のkeyframe AnimationをFPSベースで設定する「fpsAnimation.js」 CSS3のkeyframe AnimationをFPSベースで設定する「fpsAnimation.js」を作ったので公開しておきます。 fpsAnimation.js このライブラリを読み込んだ後に、次のようなスクリプトを実行することでCSS3のkeyframe Animationに変換してくれます。 fpsAnimation( "div:hover",//target "sampleAnime",//animation name 100,//fps [{ f:10, c:"height:100px;width:500px;" },{ f:10, c:"height:500px;width:500px;" },{ f:10, c:"height:500px;width:100px;"
これからjQueryを始める方へ -入門書の選び方・読み方-
これからjQueryを始める方へ -入門書の選び方・読み方- 先月「Web制作の現場で使うjQueryデザイン入門(以下、ドーナツ本)」の改訂版を出版し、昨年末は「やさしくはじめるWebデザイナーのためのjQueryの学校(以下、jQueryの学校)」の監修をおこなっていたので、ここ半年はずっとjQueryを始める方が、何を求めているか何でつまづいているかを改めて考えなおしておりました。 まず、最初に重要なのはどの入門書を選ぶかということ。 「ドーナツ本」は3万部を売り上げた人気書籍なわけですが、すべてのユーザーにマッチする本ではないと思っています。 この書籍を執筆はじめた当時はjQueryの書籍といえば「jQueryで作る Ajaxアプリケーション」や「実践!Ajaxフレームワーク jQuery」などしかなく、競合書籍として確認しましたが、プログラマー向けの書籍でした。そこで「ドーナツ本
[書評]これからはじめるIllustratorの本
[書評]これからはじめるIllustratorの本 少し前に「これからはじめるIllustratorの本 」を著者の佐々木京子さんから献本いただきました。 Illustratorはあまり触ったことがないので改めてじっくりと触ってみました。 Illustratorの基本的な操作に始まり、ロゴの作成、名刺の作成、地図の作成、ポストカードの作成、ブログのタイトル画象を作成といった流れで進みます。 各セクションのボリュームも軽いので、これからIllustratorを始める方にはオススメです。ただ、PhotoshopやFireworksなどの他のグラフィックソフトを既に使っている人には物足りないかもしれません。 CS6に対応しており、30日利用できる体験版のIllustratorがDVDで付属してますので、Illustratorに興味があるというレベルの方でも試せますので、ソフトを購入する前に一度た
![[書評]これからはじめるIllustratorの本](https://cdn-ak-scissors.b.st-hatena.com/image/square/c939403136250f93b49d7c278d35a6444189cc07/height=288;version=1;width=512/http%3A%2F%2Fimages.amazon.com%2Fimages%2FP%2F4774153672.09._OU09_SCMZZZZZZZ_.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今度こそ始めるjQuery超入門