Category ‘ホームページ制作支援’

人気のエディタ「Sublime Text 2」

Sublime Text 2
「Sublime Text 2」はこの1・2年噂になってるエディタで豊富な機能拡張ができ特にWEB制作する人に人気のソフトですが、なぜか、ずっとMac用と勘違いしてスルーしていたがMac・Windows・linixのマルチプラットフォームと知って試してみることにした。

私はHTML等の編集はシンプルで人気なエディタ「TeraPad」を使っていていたが内部エンコードがShift-JISの為UTF-8の一部文字(〜など)が?に変わってしまう問題を発見してからは、同じくシンプルな「Mery」に切り替えた。Meryはユニコードで作成されたプログラムなので文字化けしない。
PHPは「PHPエディタ」を使っていてterapadと同じ問題を抱えていたがレアなケースだしPHPの場合プログラム的に回避できるので使い続けていた。

「Sublime Text 2」はユニコードで作られてるが標準ではShift-JISの表示も出来ないしメニューも英語で敷居が高い。
まずは本家Sublime Textからインストーラーをダウンロードしてインストール。

次に簡単にパッケージ(プラグインみたいなもの)をインストールするためのツール「Package Control」をインストール。
Installation – Package Controlにアクセスしタブ「SUBLIME TEXT 2」をクリックし、import~のテキストをコピペする。
Sublime Text 2に戻ってコンソールを開き(「Ctrl + @」を押す)、先ほどコピーしたテキストを張り付けて「Enter」を押す。
再起動後コマンドパレットを表示(「Ctrl + Shift + p」を押す)して「Package Control: Install Package」があれば正常にインストールされている。

あとは、お気に入りのパッケージをインストール。
ConvertToUTF8:Shift-JISやEUC-JPに対応
IMESupport:IMEを利用した文字入力をサポート
HTML5:HTML5の自動補完
CSS Snippets:CSSの自動補完
Phpcs:PHPの自動補完
SublimeLinter:HTML,CSS,JSの構文チェック
Goto-CSS-Declaration:HTMLからCSSの該当位置にジャンプ
Abacus:イコールとかコロンとかの面を合わせる
AutoFileName:ファイル名の自動補完

パッケージ「SublimeLinter」でPHPの構文チェックする為に
「Preferences」「Package Settings」「SublimeLinter」「Settings – User」を選択し
次のような感じでPHPの場所等を入力し保存する。
基本的に「Sublime Text 2」はJSONで設定する必要がある。

{
	"sublimelinter_executable_map": {
		"php": "C:\\XXX\\XXX\\php.exe"
		},
	"sublimelinter_gutter_marks": true,
	"sublimelinter_delay": 0.5
}

WEB制作にオススメの画像ビューアー「MassiGra」

massigra
とうとうFireWorksの開発が終了してしまったけど、WEB制作に特化したFireWorksを手放せるわけもなく、今まで通りPhotoShopと併用する事になって関連づけ(標準で開くアプリ)を何にするか悩むところです。
ただ、Adobe製品を入れたウチの設定では
 JPEG:Windowsフォトビューアー(旧:Windows画像とFAXビューア)
 GIF:PhotoShop
 PNG:Fireworks
とばらばらで、編集に使いたいソフトを指定して開く場合は「右クリック」の「プログラムから開く」で選ばないといけないし、ちょっと中身を確認したいだけなのにダブルクリックしてしまうと重いAdobe製品が開いてしまうのでこれも「右クリック」の「プログラムから開く」で「Windowsフォトビューアー」を選択したりしていた。
しかも関連づけを統一していないので「ファイルの種別がPNGなのでダブルクリックじゃなく右クリックで・・」とか種別によって判断する必要もある。

それを解決する為に閲覧する時も編集する時も一端、軽めの画像ビューアーで開いて編集する時はそこから起動するようにできないか考えてみた。
Adobeさんからすると「そういう時には“Bridge”を使ってね。」と言いたいのだろうけどBridgeはサムネイル表示が強力だけどサムネイルは別にエクスプローラーで十分だし(イラレファイルが多いと便利かもしれないが)重くいので別のアプリを探したところ
MassiGra」というフリーソフトにたどりついた。
(さらに…)

ソースの表示ラッパー「IETrapper」

ラッパーソフト
InternetExplorerで他の人のホームページを参考にするときにブラウザの「ソースの表示」機能を使いHTMLを見る事も多いかと思いますが。WINDOWSの標準だとメモ帳で表示する事になり見づらいし文字コードによっては文字化けししたり改行されてなかったりしまいます。
このソフトを使うとHTMLを使い慣れたエディタで表示する事ができます。
ただ、ソースを見るならFireFoxとか他のブラウザにした方が便利です。
http://hp.vector.co.jp/authors/VA003580/

リンク切れチェッカー「孤島発見器」

ローカル上のホームページのリンク切れを発見してくれるソフト。
修正を繰り返してるとリンク切れをついついやってしまうのでちょいちょいこのソフトで確認しましょう。
http://hp.vector.co.jp/authors/VA014575/chicchi/

カラーピッカー「色取鳥i」

デスクトップ上にある様々な色を調べることができるカラーピッカー。
旧MacroMedia系のソフトはこのカラーピッカー機能が付いてるのですがイラレとかだとこの機能が無いので、たとえば企業ロゴを起こす時なんかにそのサイトに行って画像を落とし(Flashサイトだとスクリーンショットを取って)画像編集ソフトで開いて色を取るとちょっと面倒になりますが、このソフトがあるとスポイトアイコンをドラッグするだけで直接色を取れるので簡単になります。
他にも色見本の館にある色も内蔵していて色を探すときのヒントにもなります。
http://www.kazina.com/

DynamicDNS自動更新「DICE」

自宅でサーバを設置する際、高価な固定IPを取得しない限りDynamicDNSを使用します。
無料なDynamicDNSもあり便利なのですがプロバイダから振り当てられるIPアドレスは接続しない状態がしばらく続くと変更されてしまうので事ある毎に確認して切れていたら設定し直す必要があります。
このDISEを使うとDynamicDNSを自動更新し常にドメインを保持してくれます。
http://www.hi-ho.ne.jp/yoshihiro_e/dice/

PERL「Activeperl」

Windows上でPerlを動かすソフト。
サーバソフトと共に使うことでCGIのテストができます。
http://www.activestate.com/

WEBサーバー「AN HTTPD」

簡単なhttpサーバソフト。
http://www.st.rim.or.jp/~Enakata/

類似ソフトとの比較
  • Apache:設定がめんどくさい。将来linuxサーバを立てる予定の人は勉強になります。