東京南青山、大阪四ツ橋発、WEBディレクターのブログ

タケダノート

addon,タケダノート

Web制作者向けのFirefoxアドオン10

ココイチのカレーにはチーズを必ずトッピングします。
こんにちわ。たけだです。

10 Popular Firefox Add-ons for Web Developers
という記事でFirefoxアドオンがまとめられていました。

1.Firebug
これがないと仕事ができません。
ブラウザ上でcss,HTML,javascriptを編集できたりします。
さらにプラグインで拡張することもできます

2.Web Developer
ツールバーを拡張します。
HTMLのブロック表示、テーブル表示、CSS編集、CSS無効、ウインドウサイズ変更などいろいろできます。

3. ColorZilla
知りたい色の上にカーソルを移動してみましょう。

4. Html Validator
ステータスバーにアイコンが表示されます。
これのおかげでキレイなHTMLが書けるんです。

5.FireFTP
FirefoxをFTPクライアントにするアドオン。
これは使っていません。

6.IE Tab
FirefoxでIEのレンダリングエンジンを利用します。
最近はIETester使ってます。

7. MeasureIt
ブラウザ上で高さや幅を測るメジャー。Web制作の人は意外によくつかうかもしれない。それ意外の人にはまったく役にたたないかもしれない。

8. Greasemonkey
JavaScriptのスクリプトを使ってブラウザの拡張ができます。これ単体では何もできません。

9.View Source Chart
HTMLの構造が色分けですぐわかる


10. Aardvark
マウスオーバーで要素を表示してくれます。
また、起動中にコマンドがいくつか使用できます。
W:Wider: 領域を広げる
N:Narrower: 領域を狭める
Q:Quit: 終了する
U:Undo: Remove と Isolate の効果を取り消す
R:Remove: 選択した要素を削除する
I:Isolate: 選択した要素だけを表示する
E:Erase: 選択した要素のコンテンツをレイアウトを維持したまま削除する
B:Black on white: 選択した要素を白地に黒文字で表示する
C:Colorize: 選択した要素の背景色をランダムに変更する
V:VewSource: 選択した要素のソースを表示する
D:De-widthify: 選択した要素の固定幅指定を除去する

あまり使ったことないアドオンもいくつかあったので、使ってみようと思います。

coding,タケダノート

Zen Coding触ってみました

腹筋を始めようと思います。今年何度目かの決意です。
こんにちわ。たけだです。

最近何かと話題になっているzen-codingを触ってみました。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.


Dreamweaver導入方法

まずはDreamweaverプラグインをダウンロード(v0.6)
http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Dreamweaver.v0.6.zip&can=2&q=

そして、フォルダ内のZen Coding v.0.6.mxpをダブルクリックして承諾するをクリックするだけ。

lang属性がen-USになっているので、必要な場合は以下のjsファイルで変更可能。
Documents and Settings/ユーザー名/Application Data/Adobe/Dreamweaver CS4/ja_JP/Configuration/Commands/ZenCoding.js

setting_after.jpg


使い方
入力してCtrl+カンマで展開します。

div

<div></div>


div#header>ul>li*4

<div id="header">
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>


CSSでも

pos:r

position:relative;


va:b

vertical-align:bottom;

操作方法に慣れれば、すごく早くコーディングできそうですね。

Zen HTML Elements
http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn

Zen HTML Selectors
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

Zen CSS properties
http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

----------------------------------------------------------------
Movable Typeでも使えます。

Movable Typeプラグインのダウンロード
http://code.google.com/p/mt-zen-coding/downloads/list

addon,タケダノート

Firefoxの起動が軽くなるかもしれない方法

ナインティナインのオールナイトニッ本vol2発売まであと3日ですね。
こんにちわ。たけだです。

環境によって軽くならない場合もありますが、

■「SQLite Optimizer
FirefoxはSQLiteDBでブックマークや履歴などの管理をしていますので、
何もしなければどんどんDBは大きくなり、起動や動作は重くなります。
このアドオンをインストールするだけでDBの最適化をしてくれます。


■「Fireboot
不要な言語ファイルを削除することにより少しでも軽快にしようというツール


■「Fasterfox
賛否両論あるアドオンですが、早くなるのは確か。


■about:configを弄る
上級者用ですが、Firefoxを自分仕様にするためにいろいろ弄ることができます。
Firefoxを思い通りに--about:configページで使える便利な10の「ハック」

about:configの設定がラクになるアドオンもあります。
Configuration Mania
ストレスフリー! Firefoxの「about:config」の設定をラクにしてくれる「Configuration Mania」


■不要なアドオンは停止あるいは削除する
普段からよく使うアドオンは残したまま、ときどき使うようなアドオンは一時停止、
インストールしてみたものの使った記憶があまりないアドオンは削除してみる。


■再インストール
最終手段。プロファイルやアドオンを残したまま再インストールしてもあまり意味がないかも。

jquery,タケダノート

フォームのラベルがスライドするJS【Sliding Labels】

アバター【3D】見てきました。
後ろ振り向くと全員サングラスかけてる光景が面白かったです。
こんにちわ。たけだです。

inputやtextareaをクリックしたら消えるアレに似てますが、
今度はスライドしてます。

labelタグを使ってるので、CSSを切った状態でも、
崩れずに表示されてます。

Form Design with Sliding Labels
デモページ


addon,タケダノート

Google Chromeエクステンション「OneNumber」

g.jpg

カレーには、らっきょう派です。
こんにちわ。たけだです。
Gmail,GoogleReader,GoogleVoice,GoogleWaveの新着情報を一つのツールバーボタンでチェックできる拡張機能です。

GoogleChromeで「One Number」のページにアクセスして、Installボタンからインストールするだけ。

オプションからボタンのカスタマイズ、クリック時のアクション、カラーの表示変更など、ある程度カスタマイズできるようです。

今まで各サービスをチェックするのに、別々の監視ツールを使っていたのを、ひとまとめにするだけで大幅に時間の短縮ができます。