今回はちょっと趣旨を変更して、便利そうな Web アプリを紹介したいと思います。
その名も、"NAVERフォトエディター"。n
実際に使ってみた感想は、「かなり使いやすい」でした。
レイヤー数に制限はあるものの、写真を編集する、という目的では十分だと思いす。
ちなみに "無料、登録なしで使える" のでとりあえずやってみることができるのでオススメです。n
オンラインツールであるため、ブラウザさえあれば写真の編集ができるというのも強みかと。
クライアントで更新をしていく、というような案件の場合で、Photoshop などのツールはないよ、っていう場合なんかに教えてあげると、写真掲載のときなど少しでも見栄えをよくした上で公開できるので重宝するのではないでしょうか。n
本家 Photoshop のオンライン版 もありますが、こちらはどちらかというと自動補正ツール、というイメージが強いですね。あまり自分で細かくいじれない感じ。n
直感的には、NAVER フォトエディターのほうが使いやすいと感じました。n
Safari や Google Chrome などの、webkit 系ブラウザに搭載されているwebインスペクタ。
Firefox のエクステンションである Firebug に比べると、やや使いづらいイメージがあります。（なんというか、直感的に使えない感じで。慣れの問題だとは思いますが）n
さてこの webインスペクタ、Firebug みたいに閲覧中の CSS が追加できなくて不便だなーと思っていたんですが、どうやら CSS を追加することはできるようです。n
やり方は、ちょっと分かりづらいんですが、まずはinspect（
）ボタンで CSS を変更したい要素を選択します。（このボタンが搭載されているのは Safari4, Google Chrome2 以上のようです。それ以外の ver では、調べたい要素上で右クリックして出てくるメニューの "要素の検証" を選ぶことですぐに調べたい要素がクローズアップされるようです）n
選択すると右側に適用されているスタイルの一覧が表示されます。スタイル一覧の中で、class セレクタや ID セレクタで指定されているスタイルのオン・オフができます。
このプロパティの部分をダブルクリックすると編集状態になります。ここで値を変更すると内容が書き変わるわけですね。ただ、これではすでに指定されているものを変更するだけにしかなりません。
しかし、そこは "1 行の CSS エディタだ"、と思って見ると分かりますが、セミコロン;の後に続けて他のプロパティを指定しter キーを押すと、そこで記述した内容が追加されるのです。
色々調べても、新規で追加する方法が見つからなくて諦めていたのですが、これでずいぶんと Safari などでのチェックが楽になりました。n
Firebug のように、完全に新規で追加できるわけではないものの、大体の場合において class セレクタか ID セレクタから継承を受けているので指定に困ることは少ないと思います。n
今回は便利な JavaScript ライブラリの紹介です。その名も「 curvyCorners 」n
このライブラリ、IE6 なんかでも動作するので、簡単な角丸ボックスを実装したい場合は便利です。JS がオフの場合でも、角丸にならないだけでレイアウトが崩れないのもいい感じです。n
指定方法も簡単で、ボーダーや背景色・画像は普通通り CSS で指定し、角丸にしたい要素を JavaScript で指定するだけで動作します。n
導入は簡単です。 curvyCorners からダウンロードできるファイルを解凍すると出てくるcurvycorners.js を読み込み、以下のように指定するだけです。n
イベント登録用の関数も定義されているので、addEventでクロスブラウザにイベントの登録ができるようになっています。n
また、指定する要素には CSS セレクタのように指定します。（ただし、+ や などの複雑なセレクタには対応していないようです）
子孫セレクタは対応しているようで、#test pのような指定にも対応していますが、一階層までの対応のようで、#test div pなどは対応していないようです。n
複数の要素に対して設定したい場合は、カンマ区切りで指定することで指定できるようです。（ex. #test1, #test2）n
ずいぶん前からあるみたいですが、画像内の不要なメタデータ（制作したツール名とか、そんなのらしい）を削除して、ファイルサイズを軽量化してくれる Web ツールの紹介です。サイトの名前は「smush.it」
ちょっと大きなサイトを構築しているときなどは画像ひとつひとつのファイルサイズが気になってくるのではないかと思います。
このサイトでは、画像をアップロードするか、すでにサーバにアップしてある画像の URL を指定するか、もしくはブックマークレットを使って、閲覧中のサイトの全画像ファイルを一括して軽量化してくれる、というものです。
軽量化された画像ファイルは、zip 形式に圧縮されてダウンロードが可能です。
いちおう Firefox のアドオンもあるみたいですが、使い方が違うのかブランクページが開いてちゃんと動作してくれませんでした・・(;´Д｀)
バナー制作で、ファイル容量が決まっているときなどにも重宝しそうですね。
最近知った「Googleアラート」。
自分の興味のあるキーワードを設定しておくだけで、それに関連する記事をピックアップしてメールに届けてくれる機能です。n
キーワードには「CSS」や「html」、「javascript」などと記載して使っています。
届いたメールのサンプルはこんな感じ↓n
設定には、キーワード以外に配信頻度が設定でき、「1日1回、その都度、1週間に1回」が選べます。
また、収集元をニュースやウェブ、グループとカテゴリを選択。（総合もある）
収集元で配信された記事から、設定したキーワードに関連する記事を届けてくれる、というものです。n
RSSより設定が簡単で、なにより自分が購読していないRSSなどの情報を届けてくれるため、RSSと合わせて使うとより情報収集力がアップすること間違いなしです！n
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009-2010 CSS-EBLOG All Rights Reserved
