CREATOR BLOG

コーディングを効率化するコマンド、ソフト

2012/06/21
tan
  • このエントリーをはてなブックマークに追加

はじめまして。tanです。
コーディングやってます。

コーディングって、人がやらなくてもできるんじゃないの?って作業がよくあります。

連番つけたり、ファイル名書き換えたり…
時間がかかるだけでなく、目や精神が疲れてきちゃうんですよね。
フリーで公開されているソフトやコマンドを使って、自動化出来る作業はパソコンに任せましょう!

画像のナビゲーションをコーディングする作業を通して紹介します!

 

 

とりあえずFWでナビゲーション作ってみました。

FW スライスに連番で名前をつけるコマンド

スライスに名前をつけます。

Nav+連番でつけようと思うのですが、ひとつひとつ入力するのは結構手間です…
そこでslice_namberingを使います!

連番でネーミングしたいスライスを複数選択し、

付けたい名前を入れ(ここではNav)

開始したい数字を入れるだけで…

一瞬でスライスに名前をつけることができました!

ちなみにこのスライスに連番をつけてくれるコマンドはほんの一部で、その他デザイナー向けにもたくさんのコマンドが用意されているので見る価値ありです!

オリジナルツール / Fireworks用オリジナルコマンド(jsf)一覧 (PIXEL LAB)

 

複数のファイル名に文字列を追加するソフト

続いて、マウスオーバー用の画像を用意します。
マウスオーバー処理はjsを使い、画像名の最後に「_f2」を付与したものと差し替えることで実装しています。
つまり「Nav1.jpg」の画像にマウスを載せると、「Nav1.jpg」が「Nav1_f2.jpg」に差し替わるんです。

ステートを切り替えるとちょうどさっきのスライスが残ってます。このスライスを再利用しましょう!

画像を書き出しました。

この画像名の最後に「_f2」をつけたいです。

Flexible Renamerの出番です!

Flexible Renamerを起動し、フォルダを指定し、以下の設定をすると…

連番や文字列の追加>文字列(日時)を末尾からn文字目に追加

位置:0
追加文字列:_f2

すべての画像ファイルに_f2が付与されました!

FWの設定でステートに対応して_f2がついたスライスが書き出せるはずなのですが、いまいち設定がうまくいかなかったりで無駄に時間がかかることが多かったのでFlexible Renamerの虜になった次第です。

これもほんの一例で、さまざまなリネームができるみたいです。

Flexible Renamer

 

DW画像の幅と高さをリセットするコマンド

次にwidthとheightの設定です。

これも画像が多いと結構めんどくさいです…

そこで画像の幅と高さをリセットするコマンドを使います。

 

使い方は簡単です!コマンド>画像サイズをリセットを押すだけで…

widthとheightの値を自動で入力してくれました!

初めて使ったときは感動で泣きそうでした…!

Dreamweaver 画像の幅と高さをリセットするコマンド

 

まとめ

あとはalt入れたりいろいろやって…完成です!

今回は画像数が少なかったですが、処理する数が増えるとこれらのソフト、コマンドなしでは生きていけません!
CliborとかWinMergeとかパワースポイトとか紹介できなかったものもあります。
まだまだ便利なものは世の中にたくさんあると思うので、どんどん取り入れていきたいですね!
今はエクスプローラソフトを探しています…

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive