海外の制作会社の環境
海外と言ってもカナダ、トロントの一制作会社の話です。
今年の4月からカナダに語学留学をしていて、ちょうど先月から、ひとまず2ヶ月間のみの契約ですがWEB制作会社にて働かせてもらっています。
日本とはせっかく環境も違うことなので、会社の環境とか仕事内容を少し紹介してみます。

Name: Koji Miyauchi
Classified: Creative Director / Designer / Developer / Co-Founder of Spothon, Inc.
Residence: Japan
Citizen: Japan
海外と言ってもカナダ、トロントの一制作会社の話です。
今年の4月からカナダに語学留学をしていて、ちょうど先月から、ひとまず2ヶ月間のみの契約ですがWEB制作会社にて働かせてもらっています。
日本とはせっかく環境も違うことなので、会社の環境とか仕事内容を少し紹介してみます。
もうネタとしてはかなり賞味期限切れだと思うんですが、
CSSスプライトを簡単に作れるPhotoshopスクリプトっていうのをちょっと前に作ったので公開します。
前にTonttuっていうAirのCSSSprite支援ツールを作ったんですが、
プロジェクトをttdファイルっていう独自のフォーマットでしか保存出来なく、これだとまだまだ不便だなーとずっと思っていたので、いっそpsdのプラグインにしちゃえってことでこんなもの作りました。
PhotoshopでSprite画像を組み立てて、あとはjsxを実行すればHTMLとCSSを吐き出すようなツールになっています。
スプライトを作ったpsdをそのまま残しておけば良いので、運用で画像差し替えなんかあっても便利に使えるんじゃないかと思います。
以下簡単なHow toです。
READ ME============================
■使用の流れ
1. Photoshopでスプライト画像を組み立てる。
2. スプライト画像を自分で書き出す(ファイル名.gif)
3.ファイル>スクリプト>参照から、このjsxを実行してHTML(CSS込み)を書き出す。
■Sprites画像作成のルール(参照:sample.psd , sample.html)
・HTMLを書き出す際、レイヤーもしくはフォルダを1つの画像と見なすので、使用する画像毎にレイヤー/フォルダ分けしてください。(フォルダは中にいくつレイヤーがあっても、フォルダ1個まとめて1つの画像と見なします)
・またその際、レイヤー名/フォルダ名がcssで書き出す際のID名になるので、きちんと名前を付けてください。
・元になるスプライト画像は、(psdのファイル名).gif であるという想定でcssが書き出されます。
・非表示/背景のレイヤーは無視されます。
・色調調整レイヤーなどの複雑なレイヤー(フィールド全体を覆ってスタイルをかけるようなレイヤー?)を残すと正しく書き出されない場合が多々あるので、非表示にするか画像を統合するようにしてください。
■その他
・デフォルトがgif想定ですが、スクリプトでgifとなってるところをpngとかにも変えることができます。
=====================================
CSS HappyLifeさんが記事内でリンクくださったおかげで、
アクセスが見た事ない数字になってびびったのであわててエントリー。
ニッチなニーズがあるはずと思って作ったツールですが、
ガッツリ使おうとするとまだまだ不便な部分が多いので、今後直していきたいなって箇所をちょっとピックアップしてみます
・png24でしか書き出せないので、書き出せるデータの種類増やす(png8,gif とか
・プロジェクトの保存周りがわかりづらいので再検討してみる。
psdとかレイヤー付きpngで書き出せたら便利そうですね(そしたらそもそもプラグインにすればいいんじゃないかと言う気も
・プラグインではなくても、airが若干敷居高い気がするのでwebツールっていう形でも使えるようにしたら良さそう。
・合ってるかわかんない英語メニューじゃなくて、とりあえず日本語にしよう
・バグが多いので減らそう
直近ではこんな感じですかね。
しばらくお休みが取れるので、その間にでもいじいじしようかと思います。
使って頂いた方で何かご意見・ご要望あれば、教えて頂けたら幸いです。
AIRで、CSSスプライトツールたるもの作ったので紹介します。
TonttuはWebDeveloperのための、CSS Sprites作成ツールです。
簡単に画像を配置、移動でき、最終的にCSS Sprites(png画像)とhtml・cssファイルを書き出すことが出来ます。
また、配置した画像の状態はプロジェクトファイル(.ttd)として保存することが出来るので、
それを読み込むことで、次回の起動時も前と同じ状態から始めることが可能です。
ということで、CSSスプライトを作ってコーディングをされる機会が多い方にとっては、少しは役に立つツールになってるかと思うので、是非一度お試し頂けたら幸いです。
使った上で何か気になる点がございましたら、こちらまでご意見をお寄せ下さいませ。
AIRの練習のため、
ただただ2秒間ごとにレンダリングするだけのAIRアプリを作ってみました。
コーディングを楽にさせる目的で、リアルタイムでブラウザレンダリングするAirアプリでも作ってみようかと思ってFlexイジイジしてた今日この頃ですが、firefoxのアドオンでこんなもの見つけました。
ReloadEvery
https://addons.mozilla.org/ja/firefox/addon/115
コンテキストメニューから何秒で更新するか選択すれば、最短5秒置きでfirefoxが更新されます。
ちょ、これでいいじゃん。。。
なんだか悔しいので、とりあえずAirででも作ってみよう。レンダリングSafariだし。
前々回のエントリー[ CSS ] CSSスプライト で書いたスプライトについてですが、
やり方的なところを今回紹介します。
More