タスクランナー「gulp」の導入手順（Windows）
前に同じタスクランナーのGruntを導入してみましたが、gulpというのも結構話題に見るのでこちらも導入し試してみました。 エラーがでてインストールできない人は、ページの下の方に自分がとった解決策が書いてあります。 gulpとは gulpとはnode.jsを使ったタスクランナーです。機能的にはGruntと一緒です。設定を記すgulpfile.jsの書き方が少し違うのと、処理スピードがGruntより速いようです。 公式サイトはこちらから gulp.js – the streaming build system インストール 基本的なインストール方法はGruntと一緒です。 こちらのコマンドをコマンドプロンプトに入力します。 npm install -g gulp 次にそのプロジェクトフォルダの階層まで移動します。 cd 階層へのパス ここで試しにgulpのバージョンを確認してみます。 gul
さまざまな動きをするjQueryスライダーを作ってみた
前々から自分でスライダーを作ってみようと思いつつ途中で詰まっていたのですが、本を買ったりいろいろ調べたりして出来たので残しておこうと思います。 スライドのパターン よく使う配布されているスライダーを見ると画像の動き方が何種類かありますよね。なので、今回は6種類作ってみました。 サンプルページ サンプルページは以下から。全種類並べています。また、ダウンロードも出来ます。 サンプルページ ダウンロード 設置方法 HTML 設置したい箇所に以下のように記述します。 <div id="slide01"> <ul> <li><a href="#"><img src="img/img01.gif" width="700" height="426" alt=""></a></li> <li><a href="#"><img src="img/img02.gif" width="700" height="
ソースコードを見やすく表示してくれるgoogle-code-prettifyが便利
ソースコードを表示する際、以前はSyntaxHighlighterを使っていたのですが指定の仕方が自分的に面倒だったのと、少し動作が重い気がしたので使うのを止めていました。 そしてとある訪れたサイトでソースコードを表示してるの何を使ってるのだろうと思って調べたら、google-code-prettifyというのでした。 ダウンロードと設置 ダウンロードは以下のページから。 google-code-prettify – syntax highlighting of code snippets in a web page – Google Project Hosting 解凍するとたくさんのjsファイルと1つのcssファイルがあります。 基本的に使うのはこの中の prettify.js prettify.css になります。これをHTMLで読み込み実行します。 <link href="pret
初めてSassとCompassを使った際に参考にした記事まとめ
しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽になったりします。 Sassの公式サイトは以下から。 Sass – Syntactically Awesome Stylesheets Compassとは Sassを拡張して、便利な機能を追加してくれるものです。ベンダープレフィックスを自動でつけてくれたり、リセットCSSを呼び出してくれたり、CSSスプライトを使えたりします。 Compassのドキュメントは以下から確認できます。 Compass H
JavaScriptの配列を特定の順番にソートする方法
JavaScriptで作った配列の順番を特定の順番に入れ替えたい時があったので、ソートして入れ替える方法を調べました。 sort関数 ソートする関数が用意されていますので、sort関数を使います。パラメーターを入れないとアルファベット順になります。 //配列 var station = ["Shinjyuku","Ikebukuro","Shibuya","Ueno"] //配列をソート station.sort(); //出力用 alert(station); // Ikebukuro,Shibuya,Shinjyuku,Ueno ちなみに配列の中身が数字の場合だと・・・ var number = [50000,40,900,3000] number.sort(); alert(number); // 3000,40,50000,900 アルファベット順なので、このような並びになります。
Photoshopの便利なスクリプトや拡張機能のまとめ
Photoshopにも便利な機能を追加できるスクリプトと拡張機能があります。こちらでも自分が使っているものや便利そうだなと思ったものをまとめました。 スクリプトの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Scripts Mac → アプリケーションのAdobe Photoshop CS5\Presets\Scripts 拡張機能はダウンロードしたファイルをクリックすると、Adobe Extension Managerが起動しますのでそちらにインストールすればOKです。 Index… PSDからテキストを抽出 レイヤー名の「コピー」を削除 Fireworks風のスライスレイヤー 選択したフォルダやレイヤーを別ファイルへ
スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選
スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。 PC（IE以外）でも動作します。 flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです – piglovesyouの日記 flickable こちらはPCでフリックができるようにできるプラグインです。そのままスマートフォンでも使えます。 PCでも（IE6でも）よく動きます。 jQuery.flickable: iPhone and Android like flick scrolling plugin flickSimple こちらもP
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンかどうかを判断するJavascriptの条件分岐