海外と言ってもカナダ、トロントの一制作会社の話です。

今年の４月からカナダに語学留学をしていて、ちょうど先月から、ひとまず2ヶ月間のみの契約ですがWEB制作会社にて働かせてもらっています。

日本とはせっかく環境も違うことなので、会社の環境とか仕事内容を少し紹介してみます。

More

こちらで開催していたコーディングコンテスト#２に応募しましたので、取り急ぎソースを公開してみます。

ソースです

メタタグちゃんと書いてないとか、メイリオ指定がちゃんと効いてないとか、ちょと崩れてるとか。
ちょっと泣きたくなるような状態ではありますが、自分への戒めとして晒します。

ちょっと落ち着いたらまた精査してアプします。

==============

改良したソースは随時どんどん上書きしていきますだ

改良中ソース

もうネタとしてはかなり賞味期限切れだと思うんですが、
CSSスプライトを簡単に作れるPhotoshopスクリプトっていうのをちょっと前に作ったので公開します。

前にTonttuっていうAirのCSSSprite支援ツールを作ったんですが、
プロジェクトをttdファイルっていう独自のフォーマットでしか保存出来なく、これだとまだまだ不便だなーとずっと思っていたので、いっそpsdのプラグインにしちゃえってことでこんなもの作りました。

DOWNLOAD

PhotoshopでSprite画像を組み立てて、あとはjsxを実行すればHTMLとCSSを吐き出すようなツールになっています。
スプライトを作ったpsdをそのまま残しておけば良いので、運用で画像差し替えなんかあっても便利に使えるんじゃないかと思います。
以下簡単なHow toです。

READ ME============================
■使用の流れ
1. Photoshopでスプライト画像を組み立てる。
2. スプライト画像を自分で書き出す（ファイル名.gif）
3.ファイル＞スクリプト＞参照から、このjsxを実行してHTML(CSS込み)を書き出す。

■Sprites画像作成のルール（参照：sample.psd , sample.html）
・HTMLを書き出す際、レイヤーもしくはフォルダを１つの画像と見なすので、使用する画像毎にレイヤー／フォルダ分けしてください。（フォルダは中にいくつレイヤーがあっても、フォルダ１個まとめて１つの画像と見なします）

・またその際、レイヤー名／フォルダ名がcssで書き出す際のID名になるので、きちんと名前を付けてください。
・元になるスプライト画像は、(psdのファイル名).gif　であるという想定でcssが書き出されます。

・非表示／背景のレイヤーは無視されます。
・色調調整レイヤーなどの複雑なレイヤー（フィールド全体を覆ってスタイルをかけるようなレイヤー？）を残すと正しく書き出されない場合が多々あるので、非表示にするか画像を統合するようにしてください。

■その他
・デフォルトがgif想定ですが、スクリプトでgifとなってるところをpngとかにも変えることができます。
=====================================

CSSSpriteツールのTonttuですが、
MOONGIFT様がご紹介くださいました（→ご紹介頂いた記事）。

おかげさまでたくさんの方がダウンロードしてくださいました。ありがとうございます。

いよいよきちんとしないと、使って下さる方にご迷惑をかけてしまいそうなので
今後ちゃんと整備をしていきたいと思います。
まだまだ課題の多いツールですが、どうぞよろしくお願いいたします。

CSS HappyLifeさんが記事内でリンクくださったおかげで、
アクセスが見た事ない数字になってびびったのであわててエントリー。

ニッチなニーズがあるはずと思って作ったツールですが、
ガッツリ使おうとするとまだまだ不便な部分が多いので、今後直していきたいなって箇所をちょっとピックアップしてみます

・png24でしか書き出せないので、書き出せるデータの種類増やす（png8,gif　とか
・プロジェクトの保存周りがわかりづらいので再検討してみる。
psdとかレイヤー付きpngで書き出せたら便利そうですね（そしたらそもそもプラグインにすればいいんじゃないかと言う気も
・プラグインではなくても、airが若干敷居高い気がするのでwebツールっていう形でも使えるようにしたら良さそう。
・合ってるかわかんない英語メニューじゃなくて、とりあえず日本語にしよう
・バグが多いので減らそう

直近ではこんな感じですかね。
しばらくお休みが取れるので、その間にでもいじいじしようかと思います。

使って頂いた方で何かご意見・ご要望あれば、教えて頂けたら幸いです。

AIRで、CSSスプライトツールたるもの作ったので紹介します。

CSS Sprites tool Tonttu

TonttuはWebDeveloperのための、CSS Sprites作成ツールです。
簡単に画像を配置、移動でき、最終的にCSS Sprites(png画像)とhtml・cssファイルを書き出すことが出来ます。
また、配置した画像の状態はプロジェクトファイル(.ttd)として保存することが出来るので、
それを読み込むことで、次回の起動時も前と同じ状態から始めることが可能です。

ということで、CSSスプライトを作ってコーディングをされる機会が多い方にとっては、少しは役に立つツールになってるかと思うので、是非一度お試し頂けたら幸いです。
使った上で何か気になる点がございましたら、こちらまでご意見をお寄せ下さいませ。

AIRの練習のため、
ただただ2秒間ごとにレンダリングするだけのAIRアプリを作ってみました。

More

コーディングを楽にさせる目的で、リアルタイムでブラウザレンダリングするAirアプリでも作ってみようかと思ってFlexイジイジしてた今日この頃ですが、firefoxのアドオンでこんなもの見つけました。

ReloadEvery
https://addons.mozilla.org/ja/firefox/addon/115

コンテキストメニューから何秒で更新するか選択すれば、最短5秒置きでfirefoxが更新されます。
ちょ、これでいいじゃん。。。

なんだか悔しいので、とりあえずAirででも作ってみよう。レンダリングSafariだし。

前々回のエントリー[ CSS ] CSSスプライト で書いたスプライトについてですが、
やり方的なところを今回紹介します。
More

はやりに乗ろうと思って、買うだけ買ってみたデジタル名刺のポーケンですが。

使う機会がなく引き出しの中に封印してるのも勿体なかったので、

今日ムックにしてやりました。

More