ハシモトです。
最近 Google Chrome が軽くて、Firefox の出番がめっきり減ってきました。
きっと Firebug for Chrome なんてリリースされたときには、ほぼ Chrome で事足りているのでしょう。Lite 版はまだまだ使えません＞＜；

さて今日は、ビットマップデータしかないロゴ画像などを割りとキレイに、しかもサクッと（ここ重要！）抽出しちゃう Fireworks の小技を紹介します！
もうこれでパスデータがないロゴなんかでも思考に制限を与えることなく、バリバリクリエイティブできちゃう！もう大丈夫！なはずです。

先日、弊社が運営する大学生向けポータル、キャンパスシティに2010年版の新生活特集がオープンしました。そのキャンパスシティのロゴをサンプルに、たった５ステップでサクッと春らしくピンクに変えちゃいましょう！

※通常、ロゴマークを扱う際は規定をしっかり守らなければなりませんが、今回はあくまでサンプルとしてお送りいたしますのでそこの辺りご了承ください。

ステップ.1 画像をグレースケールに変換

通常だとロゴ画像のパスデータがあれば、こんなことをしなくても済みますが、細かいことは気にせずまずはロゴ画像を Fireworks のキャンバスに配置します。

とくながです。

最近はモバゲーやmixiアプリといった、
ブラウザベースのゲームが流行っていますよね。
サイブリッジでも積極的に取り組んでいます。

ちなみに自分は学生の頃、俗に言うブラウザゲームや
Flashゲームにハマって夜更かしすることも多かったので、
社内でこのような案件が増えてきたのは嬉しい限りですｗ

こうした業界の流れもあるので、HTMLやPHPはもちろん、
最低限のActionScriptぐらいは書けないといけないですよね！
というわけで今回は、プログラムが書けないデザイナーでも
簡単に利用することができる、SharedObjectについてご紹介します。

SharedObjectって何？

すでにご存知の方も多いかもしれませんが、
SharedObjectというのはFlash版cookieでおなじみのアレです。

ユーザーのローカルに変数などのデータを格納できるので、
動画共有サイトの音量やミュートの設定を他ページでも引き継いだり、
わざわざデータベースを使って設定ファイルを作る必要もないような、
一時的なデータをユーザ側に保存させる時などによく利用されます。

SharedObjectの凄いところ

cookieはブラウザの設定で削除できたり、
保存期間の指定が可能ですよね。SharedObjectは、
ユーザ側が意図的に削除しない限り永久的にデータが残り続けます。

そんなことから、Flashゲームのセーブデータなどでも幅広く利用できます。
CGIを動かす必要すらないのでサーバの負荷も気にする必要がありません。

早速データを保存しましょう！

「データの保存なんてすごい大変そう」と思う方もいるかも知れませんが、
全然そんなことはありません。たとえばユーザー側に「サイブリッジ」という
文字列を保存させるには、下記の通りに記載するだけで完了します。

var so = SharedObject.getLocal("savedata" , "/");
so.data.cybridge = "サイブリッジ";
so.flush();

まずはSharedObjectをsoという変数に代入します。
この一行だけで下準備完了です（笑）。

あとはご覧の通り、soのdataプロパティ内に変数を入れていくだけでOK。
データは自動的に保存されていきますが、念のため最後にso.flush();で保存します。

アクセスカウンタを作る

たとえばこんな感じに書くだけで、
訪問者別のアクセスカウンタなんかも作れますね。

var so = SharedObject.getLocal("lab20100226" , "/");
if (so.data.counter == undefined) {
    so.data.counter = 1;
} else {
    so.data.counter++;
}

こんにちは！ハラです。

サイブリッジはSNSアプリ案件も積極的に取り組んでいるのですが、その中のひとつ
モバゲーでリリースされた、みんなの昆虫コレクションのコピーっぽいタイトルから始めてみました。

そして私、先日お誕生日を迎えて24歳になりました。
滋養をつけるべく夜はウナギ（でも中国産）をおいしく頂きました。

実はウナギの生息は未だ解明されておらず、さらに鮭と同じ長旅をする回遊魚なので
日本産て表記でも中国まで旅をしたウナギなのかもしれない、とか考えだすと
みんな一緒に見えてくるわけです。そのへん同意された皆さん、ウナギは中国産を是非。
それでも不安な方は、日本の養殖うなぎを食べましょう。

本題に入ります。
フォトショップを使って画像切り抜く方法って人によってかわるのですが
今回は写真・画像ファイルを壊すことない方法を紹介したいと思います。

今回の基本
・パスを使用する
・マスク使用する
です。

切り抜きに消しゴムツール等で画像を消去してしまうのは御法度なのです。

1. トレース・微調整

ペンツール(P)でパスを選択。



切り取るものの周りをトレースしていきます。

2. マスクかける

作業用パスをctrlを押しながらクリック



ここで大事なのが、レイヤーマスクを使うことです。
画像の一部でも消してしまうと、後々修正になったとき融通が利かなくなるので
できるだけ画像を壊さないようにように切り取ります。




マスクがかかって、画像がきれいに切り取られた状態に！

しかし、カメラのホワイトバランスの関係で白さに若干青がかってしまっているので
調整してあげましょう。

3. 調整レイヤーで画像編集

ここでも画像レイヤーにトーンカーブなどで調整してしまうと、
後々の編集で融通が利きにくくなります。




切り抜く画像にもよりますが、
1時間でより多くのものを切り抜く！ってことになると、
1個に分単位でしかかけられません。
ショートカットキーを覚えると体感スピードが3倍ぐらい違う気がします。
それに挑戦！！・・・と思ったのですが、それはまた次回！

はじめまして！
サイブリッジのニューフェイス、はまっちです。

開発には手順があります。
バリバリとコードを書くのも大切ですが、
それと同じくらい大切なのが「テスト」です。

テストの重要性については置いておいて、
今日はテストをするときに、あると便利なWebサービスを紹介させていただきます。

なんちゃって個人情報

http://kazina.com/dummy/

ランダムにでたらめな個人情報を出力してくれるWebサービスです。
出力できる情報は
名前(ふりがな)、性別、メールアドレス、生年月日、年齢、都道府県　などなど...
よく入力に使われる個人情報が網羅されています。
出力形式もHTML(テーブル)、XML、CSV、TSVから選べます。

データありきのシステムの場合、何気に一番時間を食うのが、データを準備すること。

会員制サイトのテストをするのに会員情報が1000人分必要だ！
とかいきなり言われたとしても、これでもう大丈夫です。
お客さんに見せる時、ちゃんとしたデータが入っていると見栄えもしますよね。
はまっちは昔、テスト結果をお客さんに見せに行った時、何を思ったのかテストデータを全て「鯖」の文字で埋め尽くしていたために、とても怪訝な目で見られたことがあります。
そんな恥ずかしい事件も防止できる素敵なサービスだと思います。

さて、テストをしていくうちに、ちゃんとメールが送信出来ているか、
メールの内容が正しく出力されているか確かめたい事もあると思います。

一度登録テストをするのに自分のメールアドレスを使った！
また同じテストをするにはそのアドレスをデータベースから削除しなければいけない！
何十回とその作業をするのはめんどくさい！！

そんな時は次に紹介するWebサービスがとても便利です。

10 Minute Mail(10分メアド)

http://10minutemail.com/10MinuteMail/

10分間だけ有効なメールアドレスを発行してくれるWebサービスです。
メールの受信・送信が行え、有効時間内であれば時間を延長することも出来ます。

メールを複数アドレスで受け取りたい時は、種類の違うブラウザを立ち上げればOKです。


○おまけ○

テストも終わっていよいよサービス公開だ！万歳！！
不具合も出てない！！打ち上げだ飲み会だ！！！

そんな時に便利なWebサービスです。

終電.jp

http://shu-den.jp/

現在位置を取得して、簡単に終電を調べることができます。
これで、はめを外してタクシー帰りとか寝カフェしなくてすみますね。

テストが終わらなくてギリギリまで仕事をしたいときにも便利です。
...出来るだけ利用しないようにしたいです、はい。

こんにちは、まえだです。

前回に引き続き、今回もprototype.js入門。

prototype.jsの便利関数は、もちろん$関数だけではありません。
$$関数もなかなか便利です。

 

$$関数

$関数は引数にhtmlのidを利用しますが、
$$関数はclassを利用します。

idと違って複数指定し、取得可能なのが特徴です。

しかもこの$$のおもしろいところは、
css形式でのclass名指定が可能というところです。

 

すなわち。

 

下記のような同じclassNameを持った2種類のタグがあるとします。

<input class="test" />
<a class="test">string</a>

$$("test")

はinputタグとaタグの両方をオブジェクトとして受け取ります。

$$("input test")

はinputタグのみ受け取ることになります。

 

ただし注意点は、classはcssで頻繁に利用される要素であることです。
単一の値となるidではcssとjsの双方で利用しても問題は発生しにくいですが、
classをjsのためだけに利用することでデザインを壊す可能性もあるので、
限定的な利用にとどめた方がよいかと思います。

他にも$Fや$Aといった便利関数がありますが、
下記URLが非常にわかりやすくて参考になると思います。
http://www.s2factory.co.jp/tech/prototype/prototype.js.html

 

また、個人的な感想ですが、jqueryとの比較については置いておいて、

prototype.jsの良さを如実に表現しているのが、

下記urlのDion Almaer氏記事かと思います。

http://www.infoq.com/jp/news/2009/01/prototype-vs-jquery