とくながです。

最近はモバゲーや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

はじめましてまえだです。

今回よりラボブログに参加です。

初めての参加で手探りですが、prototype.js入門なるものを投稿してみます。

 

改めて説明するまでもないかもしれませんが、

prototype.js の醍醐味の1つは、なんといってもAjaxを簡単に実装できること。

しかしjavascriptを頻繁に使うプログラマにとっては、

Ajax の必要なリッチコンテンツの制作にとどまらず、

開発効率を上げるために必須のライブラリとなります。

 

その代表格が$(ダラー)関数です。

 

$関数

$関数とはjavascriptを利用したWEB開発にかかせない、
document.getElementById() へのショートカットです。

 

利点は3つ。

 

1.文字数が少なくて済む

意外と重要で、私が$関数を使う最も大きな理由です。
●1文字なのでわざわざコピペする必要がない
●文字の打ち間違いを防げる
●コードがすっきりする。

document.getElementById()の羅列
document.getElementById("test_id");
document.getElementById("test_id");
document.getElementById("test_id");
document.getElementById("test_id");
document.getElementById("test_id");
document.getElementById("test_id");
document.getElementById("test_id");

$()の羅列

$("test_id");
$("test_id");
$("test_id");
$("test_id");
$("test_id");
$("test_id");
$("test_id");

好みにもよると思いますが、すっきりするだけではなく、特殊記号なので目立ちます。

 

2.関連した追加メソッドを利用できる。

var object = $("object_id");
object.hide();//表示させない
object.show();//表示させる

などなど。

ただしブラウザによってうまく機能しない場合も経験しているので、object.style を調整する方が好きです。

 

3.オブジェクトも受けられる。

ID文字列だけではなく、オブジェクトも受けられます。

オブジェクトを受けても同じオブジェクトを返すだけで結果は同じです。
ただし、独自実装した関数に、オブジェクトを送るパターンと文字列を送るパターンの、
両ケースが考えられる場合には便利です。

 

 

以下は、これからprototype.jsに挑戦しようという方にオススメのサイトです。

併用して利用されるとよろしいかと思います。

●prototype.js 本家...ダウンロードはこちらから。

 http://www.prototypejs.org/

●「prototype.jsの開発者向けメモ」...簡潔でわかりやすいサイトです。

http://www.s2factory.co.jp/tech/prototype/prototype.js.html

●「prototype.js リファレンス」...一通り巻数を網羅したリファレンスサイトです。
http://www.openspc2.org/JavaScript/Ajax/ref/prototype.js/ver1.4/index.html
●「prototype.js逆引きサンプル集」...機能からの逆引きリファレンスです。

http://javascriptist.net/docs/samples_prototype.html

●「gihyo.jp ～特集 prototype.jsを読み解く」...チュートリアル形式です。
http://gihyo.jp/dev/feature/01/prototype