【Web制作】毎回必ず行うPC設定の覚書2014年版

一応Web制作系の仕事をしているのですが（今の所コーディングメインではないですが……）、毎回必ず行うPC設定があります。

そう頻繁に行う作業ではないので、あれは何だったか……と毎回検索したり思い出したりすることが多く、それは無駄だなと思ったので、自分用メモです。
とはいっても、Web制作系の人は概ね以下のようなものをPCにインストールしていることが多いようですので、良かったら参考にしてみてください。

PhotoShop＆Illustrator

Adobe:クリエイティブ

Web制作系の仕事をするなら必須の画像編集・作成ソフト。
特にこれといった設定はせず、ほぼ初期状態で使用しています。

唯一設定するのは、以下。気が付くと『××のコピー』というレイヤーが大量にできてしまうので……。

Photoshop CS5 で「のコピー」を付加しないオプションが付いた！ | loftimg™ blog

FTPソフト

ファイルをサーバに転送するためのソフトです。
どちらかひとつでもいいのですが、たまにうまく動かない時があるのでふたつ入れています。

FFFTP

FFFTPの詳細情報 : Vector

動作が軽くてシンプルなソフト。
ファイルが大量だと途中で動かなくなることが……。

FileZilla

FileZilla - The free FTP solution

FFFTPがどうにも駄目な時に使っています。

Chrome

Chrome ブラウザ

言わずと知れた、Googleが無料で提供しているブラウザ。表示確認用。
標準でユーザーエージェントを切り替える機能がついているので便利。

ユーザーエージェントの切り替え方は、以下を参照。
しばらく使っていないと、スマホ版表示を確かめたい時にF12を押すというのをすっかり忘れていて、思い出すのに苦労します……。

パソコンのChromeで拡張機能なしでUser Agentを変更してスマホ表示を確認する方法 | love guava!

Firefox

Firefox のダウンロード — 自由な Web ブラウザ — Mozilla

Mozilla Foundationが提供しているブラウザ。表示確認用。
色々とアドオンが充実しているので、コーディングの時は大体こっちがメインになります。
必ず入れるアドオンは以下です。

Web developer tools

Web Developer :: Add-ons for Firefox

機能としては、Web制作に必要なあれこれがたくさん入っているものです。
色々な要素を表示させたり、非表示にさせたり、無効にしたり、コードを検証したりできます。
私の場合はアウトライン機能をよく使っています。

ColorZilla

ColorZilla :: Add-ons for Firefox

ブラウザ上の好きな部分から、スポイトで取るようにカラーコードが取得できるものです。
この色いいなと思った時に、カラーコードを簡単に知ることができるので重宝しています。

MeasureIt

MeasureIt :: Add-ons for Firefox

ブラウザ上で定規を表示し、ピクセル単位で大きさを計ることができます。
地味ですけど、使うことが非常に多いです（ヘッダー部分の高さとか、要素間の幅とか）。

Firebug

Firebug :: Add-ons for Firefox

JavaScriptのデバッグを行うことができるツール。
jQueryや、ちょっとした挙動の制御など、JavaScriptは使う機会が多いので。

Page Saver

Pearl Crescent Page Saver Basic screenshot tool :: Add-ons for Firefox

ページ全体のスクリーンショットを撮るためのアドオン。
Web系の仕事をしていると日常的に発生する作業なので、これは必須と言ってもいいです。

XAMPP

XAMPP Installers and Downloads for Apache Friends

PHP、MySQL、Apache、Perlといったウェブアプリケーションをローカル環境で動くようにするためのものです。
色々とテストしたり、WordPressの開発にも使います。

PATHを通す

忘れがちなのですが、PHPのPATHを通しておくという作業があります。
これをやっておかないと、動かないものがありますので。

環境変数の設定 - Windows8の使い方 - PC設定のカルマ

PATHの設定 - PHPインストール - PHPインストールと初期設定

WordPressをローカル環境にインストールする

こちらのページを参照。

XAMPPでローカル環境構築 – インストールからWordPressの設置までやってみる。 | Creator Life

ユーザの追加の際、特権を与えるの辺りは忘れやすいので注意。
（私はそれで何度もデータベース接続エラーで首を傾げました……）

SakuraEditor

Sakura Editor - A Japanese text editor

フリーのテキストエディタ。文章を打ったり、置換、検索などをメインとして使っています。

カラー定義

SakuraEditorの初期状態だと、CSSのプロパティ（padding等）が強調表示されないので、その設定が必要です。

設定の仕方は以下のページを参考に。
毎回共通設定とタイプ別設定の両方が必要であることを忘れていて、あれ？　と首を傾げている部分です。

Junk: SakuraEditorでカラー定義

Ctrl+Alt+Zの無効化

SakuraEditorの初期機能なのですが、左クリックメニューのショートカットキーです。どういうことかというと、タスクトレイにSakuraEditorが常駐している場合、このショートカットキーで左クリックメニューが呼び出せるというもの。

でも、このショートカットキー、PhotoShopでの最重要機能、『元に戻す』と同じなんですよね……。
だからSakuraEditorを起動しながらPhotoShopで何か作業をしていると……SakuraEditorの左クリックメニューが起動してしまうということが頻発してしまいます。

解除の仕方はSakuraEditorを起動し、メニューから設定→共通設定→全般タブへ移動し、『タスクトレイ』からショートカットキーを削除するか、別のものに置き換えれば完了です。

SublimeText2

Sublime Text - Download

コーディングの時に欠かせないエディタ。色々と便利な機能がありますが、設定が必要です。

Package Control

まずはここから。下のページを参考に。

”恋に落ちるエディタ”「Sublime Text」完全入門ガイド！ | 株式会社LIG

入れるプラグイン一覧

いつも3つだけです。
Pakage Controlがインストールできたら、後はCtrl+shift+pを押す→installと入力→入れたいプラグインの名前を入力→選択でインストールできます。

Emmet

短いタイプでコーディングができるようになるプラグイン。ul.testlst>li*5などと入力しTabキーを押すと、面倒なリスト入力が一気に入力できます。
こちらはチートシートです。

Emmet Cheat Sheet

AutoFileName

ファイルのパスを入力する時、パスを自動補完してくれる。
画像ファイルのパスを記述すると、widthとheightも自動入力してくれるのでとても便利。

CSSFormat

CSSを綺麗にソートしてくれます。

Setting-User

Setting-Userに関してはいつも決まっているので、以下をペタッと上書き。
Suglime Textの場合、GUIではなくJSONで個人設定を行います。

{
"ignored_packages":
[
"Vintage"
],
"afn_insert_width_first": true, //AutoFileNAmeでwidthを先に記述する
"draw_white_space": "all", //空白を表示する
"font_size": 12, //フォントサイズ変更する
"highlight_line": true, //選択行をハイライトする
"highlight_modified_tabs": true, //編集が行われたタブをオレンジにする
"scroll_past_end": true //最後の行を超えてスクロール
}