Webデザイナーって職種

はじめまして、アフロと申します。
この業界に入って18年になりますがWebデザイナーってなんだろう？って最近考えます。
いろんな会社に居ましたがデザインしか出来ない人、デザインもコーディングも出来る人、デザインもコーディングもJavascriptもできる人、すべて「Webデザイナー」と一括りにされているのが少し違和感があったりもします。
ちなみに海外ではデザイン、コーディングはともかくサーバーサイドからSEOまでデキる人をWebデザイナーと呼ぶそうです。日本とは少し違いますね。
ちなみに僕はサーバーサイドは出来ません。。。。出来るようになるべく頑張っていますが
###「ム・ズ・カ・シ・イ」
もっと数学とか勉強しておけばよかったです。

こんな微分積分なんて将来絶対役に立たない！絶対やるもんか！
と言っていた過去の自分をぶん殴りたいです。

そんな僕がプログラムを深く語るなんておこがましい！
ってことで生粋のめんどくさがりがなるべく楽に作業できるように出来ないかと考えたものを書きます。

###題して！
一瞬にしてフォルダ内のデータをjpgに変更する方法！
※Mac OS Yosemite version（Windowsは使ったこと無いのでわかりませぬ）

まずは
1.アプリケーション > Automater起動

2.「フォルダアクション」を選択

3."フォルダを選択"のプルダウンで「その他」を選択

4.任意で「rakuraku」などの名前のフォルダを作り、選択

5.ライブラリ > 写真 > Change Type of imagesをダブルクリック

6.ライブラリ > ファイルとフォルダ > Copy Finder itemsをダブルクリックし右側に表示される「保存先」で先ほど任意で制作した「rakuraku」などの名前のフォルダを選択、「既存のファイルを置き換える」にチェック

7.右側の「イメージのタイプを変更」で"変更後のタイプ"で「JPEG」を選択

8.そしてそのフォルダアクションに「フォルダ内のデータをjpgに変更する」などの名前をつけて保存

9.完了

これで任意で制作した「rakuraku」などの名前のフォルダにPSDやpngなどのデータをアップするとjpgデータに一斉に置き換わりますぜ。ヽ(｀▽´)/
大量の画像処理が必要な場合だけにしかつかえませんがこの動作を応用するとサイズ調整やトリミング、画像圧縮などいろいろなことが一瞬でできちゃいます。ハンドパワーならぬマウスパワーです。
※本当は画像を使って説明したかったのですがなぜかアップできず。。。

##そしてお次はSassや画像の圧縮、JavaScriptファイルの縮小、リアルタイムプレビューなど現代の制作作業に欠かせないタスクランナーに関してです。
現在、弊社ではruby側でコンパイル作業を行っているためローカルでのコンパイルは必要ないのですが僕が受託制作会社で働いていた時にいろいろ調べたり使ったりしたことがあるのでご紹介します。

このタスクランナーですがGruntとGulpという2大勢力があります。他にもあるのですがだいたいがこのどっちかだと思います（違う方ごめんなさい、、決して軽んじてはいません僕が無知なだけです）
ここではGulpを説明したいと思います。

GruntとGulpですが大きく違うのがその記述方式となります。
GruntはJSON形式で記述していろんなタスクを走らせるのですがGulpはJavascriptで記述します。
そしてGruntは同期処理なのですがGulpは非同期処理なので動作が軽快です。
両者それぞれメリット・デメリットはあるのですが僕はGulpという響きが好きなのでこちらを使ってましたｗｗ
ま、僕の場合どっちがいいかなんてその程度ですよｗｗ　好みですよ！こ・の・みｗ

で、まずインストールですがNode.jsが必要ですので
Node.js
ここでダウンロードしてインストールしてくださいね。
あ、ちなみに僕はMac使いなのでMac版の説明のみですあしからず。。。

インストールが終わったらターミナルで
$ sudo npm install -g gulp

これで終了！！ほら？簡単でしょ？
でもこれだけだとインストールされただけなので動くように設定しないとです。

任意のフォルダ（実際にHTMLとか置くフォルダ）を新規に作成します。
そこに
gulpfile.js … タスク（処理）を定義したファイル
package.json … タスクに必要なパッケージが記載されたファイル
config.rb … compassの設定ファイル
を設置します。
でそのファイルって空でいいの？それとも何か書くの？と思われますよね。
###書くんです！
で何書くかは下記に記載しますね。
まずはpackage.jsonですが

npm init

で自動生成されるのですが結局書き換えるので僕はあらかじめ作っておきます。

{"name": "hoge",
"version": "1.0.0",
"description": "hoge",
"main": "gulpfile.js",
"devDependencies": {
    "gulp": "^3.8.9",
    "gulp-autoprefixer": "^1.0.1",
    "gulp-coffee": "^2.2.0",
    "gulp-compass": "^2.0.1",
    "gulp-imagemin": "^1.2.1",
    "gulp-plumber": "^0.6.6",
    "gulp-ruby-sass": "^0.7.1",
    "gulp-shell": "^0.2.11",
    "gulp-sourcemaps": "^1.2.7",
    "gulp-uglify": "^1.0.1",
    "gulp-webserver": "^0.8.6",
    "imagemin-pngquant": "^4.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hoge",
  "license": "ISC"
}

そしてgulpfile.jsですが

'use strict';

// ディレクトリ
var path = {
  'imgPath': 'img', // 例）'htdocs/images'
  'sassPath': 'sass', // 例）'htdocs/scss'
  'cssPath': 'css', // 例）'htdocs/stylesheets'
  'coffeePath': 'coffee', // 例）'htdocs/coffee'
  'jsPath': 'js' // 例）'htdocs/javascripts'
}

// 使用パッケージ
var gulp = require('gulp');
var webserver = require('gulp-webserver'); // ローカルサーバ起動
var compass = require('gulp-compass'); // Sassコンパイル
var autoprefixer = require('gulp-autoprefixer'); // ベンダープリフィックス付与
var coffee = require('gulp-coffee'); // coffee.scriptコンパイル
var sourcemaps = require('gulp-sourcemaps'); // sourcemap作成
var uglify = require('gulp-uglify'); // jsファイル圧縮
var imagemin = require('gulp-imagemin'); // 画像圧縮
var pngquant = require('imagemin-pngquant'); // 画像圧縮
var plumber = require('gulp-plumber'); // コンパイルエラーが出てもwatchを止めない
}

//ローカルサーバー
gulp.task('webserver', function(){
  gulp.src('./') // ルート・ディレクトリ
    .pipe(webserver({
      livereload: true,
      directoryListing: false,
      open: true,
      port: 8000
    }));
});

// Sassをコンパイルし、ベンダープレフィックスを付与
gulp.task('compass', function(){
  gulp.src(path.sassPath + '/**/*.scss')
    .pipe(plumber())
    .pipe(compass({
      config_file: 'config.rb',
      sass: path.sassPath,
      css: path.cssPath,
      image: path.imgPath
    }))
    .pipe(autoprefixer('last 2 version', 'ie 8', 'ie 7'))
    .pipe(gulp.dest(path.cssPath + '/'))
});

// coffee.scriptをコンパイル
gulp.task('coffee', function(){
  gulp.src(path.coffeePath + '/**/*.coffee')
  .pipe(plumber())
  .pipe(sourcemaps.init())
  .pipe(coffee())
  .pipe(sourcemaps.write())
  // .pipe(uglify()) // jsの圧縮をかけるとsoucemapも消えてしまう
  .pipe(gulp.dest(path.jsPath + '/'));
});

// 画像圧縮
gulp.task('imagemin', function(){
  gulp.src(path.imgPath + '/*')
    .pipe(plumber())
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngquant()]
    }))
    .pipe(gulp.dest(path.imgPath + '/'));
});

// ファイル変更監視
gulp.task('watch', function() {
  gulp.watch(path.sassPath + '/**/*.scss', ['compass']});
  gulp.watch(path.coffeePath + '/**/*.coffee', ['coffee']});
});

// タスク実行
gulp.task('default', ['webserver','compass','coffee','imagemin','watch']); // デフォルト実行
gulp.task('ftp-init', shell.task('git ftp init -u ' + config.username + ' -p ' + config.passwd + ' - ftp://' + config.host + ' --syncroot ' + config.root)); // FTPに接続
gulp.task('ftp-push', shell.task('git ftp push -u ' + config.username + ' -p ' + config.passwd + ' - ftp://' + config.host + '

最後にconfig.rbですが

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compact

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

cache = false 
sass_options = {:debug_info => false}

# Compass1.0 more
sourcemap = true

設置したら
$ sudo npm install
とターミナルで入力するとpacage.jsonに書かれたパッケージが勝手にダウンロードされます。
あと、この部分は必ず作業するディレクトリで行ってくださいね。

そしてインストールが終わったら
$ gulp
と叩くだけでローカルサーバーが起動し、画像が圧縮され、各ファイルの変更監視（watch）が始まります。変更したらブラウザも勝手にリロードします。

これで面倒な作業も短縮されて早く仕事も終わってデートとか出来るので彼女も大満足間違いなし！
ちなみに上記は僕が以前使っていた設定なので適宜変更してくださいね。
とりあえず動くというところはクリアできますのでもっといろいろとしたい！って方はgoogle先生と格闘してください。